Merge pull request #17 from Thanos-UFM/isa

Isa
Thanos-UFM · Nov 13, 2018 · 84d2bd9 · 84d2bd9
2 parents 6de31e3 + 85fa816
commit 84d2bd9
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 47 deletions.
diff --git a/client/index.html b/client/index.html
@@ -8,27 +8,33 @@
   <link rel="stylesheet" type="text/css" href="css/style.css">
 </head>
 <body></body>
-  <div class="content" id="login" style="display: block;">    
-    <p>Codigo para unirse a juego: </p>
-    <input type="text" id="input-game-code">
+  <div class="content" id="main" style="display: block;">
+    <p>Elije como será la partida: </p>
+    <button id="btn-single-game">Individual</button>
+    <button id="btn-multi-game">Grupal</button>
+  </div>
+  <div class="content" id="login">
+    <p>Código para unirse a juego: </p>
+    <input type="text" id="input-game-code" placeholder="Código">
     <button id="btn-join-game">Unirse al juego</button>
     <p>o</p>
     <button id="btn-create-game">Crear juego</button>
   </div>
   <div class="content" id="game">
+    <h1 id="game-code"></h1>
+    <h1 id="game-title">Partida</h1>
     <h1 class="top-card"></h1>
-    <h1 id="game-code"></h1>    
     <ul id="players"></ul>
     <button id="btn-start-game">Iniciar juego</button>
   </div>
   <div class="content" id="player">
+    <h2 id="test"></h2>
     <h1 class="top-card"></h1>
     <h2 id="player-id"></h2>
     <ul id="cards"></ul>
     <ul id="personal-deck"></ul>
     <button id="btn-fish-card">Pescar carta</button>
-  </div>
-
+  </div> 
   <script src="/socket.io/socket.io.js"></script>
   <script src="js/client.js"></script>
 </body>

diff --git a/client/js/client.js b/client/js/client.js
@@ -4,13 +4,19 @@ let toPlay
 let joined = false
 const game = io()
 
+function mainMenu () {
+  document.getElementById('main').style.display = 'none'
+  document.getElementById('login').style.display = 'block'
+}
+
 function createGame () {
   gameCode = (Math.floor(Math.random() * 1679615)).toString(36)
   // Va a mandar al servidor el evento para crear un nuevo juego con un codigo unico en base 36
   game.emit('createGame', { 'gameCode': gameCode })
   document.getElementById('login').style.display = 'none'
   document.getElementById('game-code').innerHTML = `Codigo de juego: ${gameCode}`
   document.getElementById('game').style.display = 'block'
+  document.getElementById('game-title').style.display = 'none'
 
   game.on('playerJoined', (data) => {
     console.log('player joined', data)
@@ -20,10 +26,21 @@ function createGame () {
     document.getElementById('players').innerHTML = ''
     if (data.gameCode === gameCode) {
       data.players.forEach((item, index) => {
-        document.getElementById('players').innerHTML += `<li>${item.nickname}</li>`
+        document.getElementById('players').innerHTML += `<li>${item.nickname}, <b>(${item.cards.length})</b></li>`
       })
     }
   })
+
+  game.on(gameCode, (data) => {
+    document.getElementById('players').innerHTML = ''
+    data.players.forEach((item, index) => {
+      if (item.cards.length == 0) {
+        document.getElementById('players').innerHTML += `<li><h1>GANADOR ${item.nickname}</h1></li>`
+      } else {
+        document.getElementById('players').innerHTML += `<li>${item.nickname}, <b>(${item.cards.length})</b></li>`
+      }
+    })
+  })
 }
 
 function joinGame () {
@@ -92,13 +109,16 @@ function printCards (game) {
   })
 
   if (game.turn > -1) {
+    document.getElementById('test').innerHTML = `Turno de ${game.players[game.turn].nickname}`
     if (game.players[game.turn].nickname === userCode) {
       for (let i = 0; i < cards.length; i++) {
         cards[i].disabled = false
+        document.getElementById('btn-fish-card').disabled = false
       }
     } else {
       for (let i = 0; i < cards.length; i++) {
         cards[i].disabled = true
+        document.getElementById('btn-fish-card').disabled = true
       }
     }
   }
@@ -107,6 +127,8 @@ function printCards (game) {
 function startGame () {
   game.emit('startGame', { 'gameCode': gameCode })
   document.getElementById('btn-start-game').disabled = true
+  document.getElementById('game-title').style.display = 'block'
+  gameEvents()
 }
 
 function playCard (cardValue, cardColor) {
@@ -119,6 +141,13 @@ function playCard (cardValue, cardColor) {
 function gameEvents () {
   console.log('game events', gameCode)
   game.on(gameCode, (data) => {
+
+    data.players.forEach((item, index) => {
+      if (item.cards.length === 0) {
+        alert(`JUEGO GANADO POR ${item.nickname}`)
+      }
+    })
+
     toPlay = data.topCard
     const topCard = document.getElementsByClassName('top-card')
 
@@ -156,6 +185,7 @@ function gameEvents () {
 }
 
 // Event Listeners
+document.getElementById('btn-multi-game').addEventListener('click', mainMenu)
 document.getElementById('btn-create-game').addEventListener('click', createGame)
 document.getElementById('btn-join-game').addEventListener('click', joinGame)
 document.getElementById('btn-start-game').addEventListener('click', startGame)

diff --git a/package-lock.json b/package-lock.json