API tools faq
paste
Advertisement
sol4r

index.html

sol4r
Jan 9th, 2024 (edited)
828
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.82 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>D&D Chat and Commands</title>
  7. </head>
  8. <body>
  9.    <h1>Welcome to the D&D Chat Application</h1>
  10.  
  11.    <div>
  12.        <h2>Lobby</h2>
  13.        <ul id="lobby-players"></ul>
  14.        <form id="join-lobby-form">
  15.            <button type="button" onclick="joinLobby()">Join Lobby</button>
  16.        </form>
  17.    </div>
  18.  
  19.    <div>
  20.        <h2>Chat</h2>
  21.        <ul id="chat-messages"></ul>
  22.        <form id="chat-form">
  23.            <input type="text" id="message-input" placeholder="Type your message...">
  24.            <button type="button" onclick="sendMessage()">Send</button>
  25.        </form>
  26.    </div>
  27.  
  28.    <div>
  29.        <h2>D&D Commands</h2>
  30.        <ul id="command-list"></ul>
  31.        <form id="command-form">
  32.            <input type="text" id="command-input" placeholder="Enter your D&D command...">
  33.            <button type="button" onclick="sendCommand()">Send Command</button>
  34.            <button type="button" onclick="generateMaze()">Generate Maze</button>
  35.        </form>
  36.    </div>
  37.  
  38.    <div>
  39.        <h2>D&D Maze</h2>
  40.        <pre id="maze-display"></pre>
  41.        <ul id="dnd-commands-list"></ul>
  42.    </div>
  43.  
  44.    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
  45.    <script>
  46.        var socket = io.connect('http://' + document.domain + ':' + location.port);
  47.  
  48.         var playerId = '';
  49.         var lobbyId = '';
  50.         var maze = '';
  51.  
  52.         socket.on('player_id', function(data) {
  53.             playerId = data.player_id;
  54.             console.log('Your Player ID:', playerId);
  55.         });
  56.  
  57.         socket.on('lobby_players', function(data) {
  58.             updateLobbyPlayers(data.players);
  59.         });
  60.  
  61.         socket.on('chat_message', function(data) {
  62.             appendChatMessage(data.player_id, data.message);
  63.         });
  64.  
  65.         socket.on('game_turn', function(data) {
  66.             appendChatMessage(data.player_id, 'Game Turn: ' + data.turn_message);
  67.         });
  68.  
  69.         socket.on('invalid_turn', function(data) {
  70.             appendChatMessage(data.player_id, 'Invalid Turn: ' + data.message);
  71.         });
  72.  
  73.         socket.on('game_command', function(data) {
  74.             if (data.command.startsWith('D&D Maze:')) {
  75.                updateMaze(data.command.substring(9));
  76.             } else {
  77.                 appendCommand(data.player_id, data.command);
  78.             }
  79.         });
  80.  
  81.         function updateLobbyPlayers(players) {
  82.             var lobbyPlayersList = document.getElementById('lobby-players');
  83.             lobbyPlayersList.innerHTML = '';
  84.  
  85.             players.forEach(function(player) {
  86.                 var listItem = document.createElement('li');
  87.                 listItem.textContent = player;
  88.                 lobbyPlayersList.appendChild(listItem);
  89.             });
  90.         }
  91.  
  92.         function appendChatMessage(playerId, message) {
  93.             var chatMessagesList = document.getElementById('chat-messages');
  94.             var listItem = document.createElement('li');
  95.             listItem.textContent = playerId + ': ' + message;
  96.             chatMessagesList.appendChild(listItem);
  97.         }
  98.  
  99.         function sendCommand() {
  100.             var commandInput = document.getElementById('command-input');
  101.             var command = commandInput.value.trim();
  102.  
  103.             if (command !== '') {
  104.                 socket.emit('command', { 'player_id': playerId, 'lobby_id': lobbyId, 'command': command });
  105.                 commandInput.value = '';
  106.             }
  107.         }
  108.  
  109.         function appendCommand(playerId, command) {
  110.             var commandList = document.getElementById('command-list');
  111.             var listItem = document.createElement('li');
  112.             listItem.textContent = playerId + ': ' + command;
  113.             commandList.appendChild(listItem);
  114.         }
  115.  
  116.         function sendMessage() {
  117.             var messageInput = document.getElementById('message-input');
  118.             var message = messageInput.value.trim();
  119.  
  120.             if (message !== '') {
  121.                 socket.emit('chat_message', { 'player_id': playerId, 'lobby_id': lobbyId, 'message': message });
  122.                 messageInput.value = '';
  123.             }
  124.         }
  125.  
  126.         function updateMaze(mazeContent) {
  127.             var mazeDisplay = document.getElementById('maze-display');
  128.             maze = mazeContent;
  129.             mazeDisplay.textContent = maze;
  130.  
  131.             // Add the maze description to the D&D Commands list
  132.            var dndCommandsList = document.getElementById('dnd-commands-list');
  133.             var listItem = document.createElement('li');
  134.             listItem.textContent = 'D&D Maze: ' + maze;
  135.             dndCommandsList.appendChild(listItem);
  136.         }
  137.  
  138.         // Function to join the lobby
  139.         function joinLobby() {
  140.             // Customize this function to get the lobby ID as needed
  141.  
  142.             // Using a prompt to get the lobby ID
  143.             var enteredLobbyId = prompt('Enter Lobby ID:');
  144.  
  145.             // Check if the entered lobby ID is not empty
  146.             if (enteredLobbyId.trim() !== '') {
  147.                 // Assign the entered lobby ID to the global variable
  148.                 lobbyId = enteredLobbyId;
  149.  
  150.                 // Emit the join_lobby event to the server
  151.                 socket.emit('join_lobby', { 'player_id': playerId, 'lobby_id': lobbyId });
  152.             } else {
  153.                 // Handle the case where the entered lobby ID is empty or canceled
  154.                 alert('Invalid Lobby ID. Please try again.');
  155.             }
  156.         }
  157.  
  158.         // Function to generate D&D Maze
  159.        function generateMaze() {
  160.            socket.emit('command', { 'player_id': playerId, 'lobby_id': lobbyId, 'command': '/generate_maze' });
  161.         }
  162.     </script>
  163. </body>
  164. </html>
  165.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!