PHP Classes

File: index.html

Recommend this page to a friend!
  Classes of Rodrigo Faustino   Exchange chat messages using Ratchet Websockets   index.html   Download  
File: index.html
Role: Auxiliary data
Content type: text/plain
Description: Chat page
Class: Exchange chat messages using Ratchet Websockets
Exchange chat messages using Ratchet Websockets
Author: By
Last change:
Date: 2 months ago
Size: 5,456 bytes
 

Contents

Class file image Download
<html> <head> <style> input, button { padding: 10px; } </style> </head> <body> <input type="text" id="message" autocomplete="off" /> <button onclick="transmitMessage()">Send</button> <style> /* CSS for card styling */ .card { width: 150px; height: 200px; background-color: white; border: 1px solid black; margin: 10px; padding: 10px; float: left; } .card img { width: 100%; } .card-row { display: flex; } .card-container { display: flex; flex-wrap: wrap; } .card-row { display: flex; } .card { width: 150px; height: 200px; margin: 10px; border: 1px solid black; } .top { opacity: 1; } .bottom { opacity: 0; transition: opacity 1s; } .bottom.flip { opacity: 1; } /* Style the modal container */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } /* Style the modal content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 80%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; } /* Style the close button */ .close-modal { color: white; float: right; font-size: 28px; font-weight: bold; } .close-modal:hover, .close-modal:focus { color: #000; text-decoration: none; cursor: pointer; } /* Add animation */ @-webkit-keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } @keyframes animatetop { from { top: -300px; opacity: 0; } to { top: 0; opacity: 1; } } </style> </head> <body> <div class="card-container"> <div id="card-modal" class="modal"> <div class="modal-content"> <span class="close-modal">&times;</span> <img id="modal-img" src="" alt="Selected card"> </div> </div> <script> var socket = new WebSocket('ws://localhost:8080'); var gameContainer = document.getElementById("game-container"); let playerCards=[]; const cardDeck = [ { id: 1, imgSrc: 'img/god1.png', name: 'Zeus', power: 10, defense: 8, element: 'raio', classe: 'mago' }, { id: 2, imgSrc: 'img/god2.png', name: 'Apollo', power: 8, defense: 9, element: 'fogo', classe: 'mago' }, { id: 3, imgSrc: 'img/god3.png', name: 'Hades', power: 9, defense: 7, element: 'larva', classe: 'mago' }, { id: 4, imgSrc: 'img/god4.png', name: 'Poseidon', power: 7, defense: 8, element: 'agua', classe: 'mago' }, { id: 5, imgSrc: 'img/god5.png', name: 'Ra', power: 8, defense: 6, element: 'fogo', classe: 'mago' }, { id: 6, imgSrc: 'img/god6.png', name: 'Shiva', power: 6, defense: 9, element: 'terra', classe: 'mago' }, { id: 7, imgSrc: 'img/god7.png', name: 'Thor', power: 9, defense: 8, element: 'raio', classe: 'mago' }, { id: 8, imgSrc: 'img/god8.png', name: 'Odin', power: 7, defense: 7, element: 'fogo', classe: 'mago' }, ]; function shuffleDeck(deck) { for (let i = deck.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [deck[i], deck[j]] = [deck[j], deck[i]]; } return deck; } function dealCards(numCards) { const shuffledDeck = shuffleDeck(cardDeck); return shuffledDeck.slice(0, numCards); } socket.onopen = function(event) { playerCards = dealCards(3); socket.send(`player-cards:${JSON.stringify(playerCards)}`); displayCards(playerCards); } function displayCards(cards){ const cardContainer = document.querySelector(".card-container"); let cardsHTML = ""; cards.forEach(card => { cardsHTML += ` <div class="card greek top" data-id="${card.id}" onclick="sendCardId(this)"> <img src="${card.imgSrc}" alt="${card.name}"> </div> `; }); cardContainer.innerHTML = cardsHTML; } function sendCardId(card) { const cardId = card.getAttribute('data-id'); socket.send(JSON.stringify({type:'card-selected',data:cardId})); } socket.onmessage = function(event) { const message = JSON.parse(event.data); if (message.type === 'player-cards') { playerCards = message.data; displayCards(playerCards); } else if (message.type === 'card-selected') { const cardId = message.data; let selectedCard; playerCards.forEach(cards => { if (cards.id == cardId) { selectedCard = cards; } }); if(selectedCard){ showSelectedCard(selectedCard); } } }; function showSelectedCard(selectedCard) { let modal = document.getElementById("card-modal"); let modalImg = document.getElementById("modal-img"); let closeModal = document.querySelector(".close-modal"); console.log(selectedCard); // Set the source of the modal image to the selected card's image modalImg.src = selectedCard.imgSrc; // Display the modal modal.style.display = "block"; // Close the modal when the close button is clicked closeModal.onclick = function() { modal.style.display = "none"; } } </script> </body> </html>