Merge pull request #21 from Thanos-UFM/backend

BETA1
Thanos-UFM · Nov 14, 2018 · 0398bd6 · 0398bd6
2 parents 49ded9c + a20f891
commit 0398bd6
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 18 deletions.
diff --git a/client/css/style.css b/client/css/style.css
@@ -16,7 +16,7 @@ body{
   width: 600px;
   top:50%;
   left: 50%;
-  transform: translateY(-65%) translateX(-50%);
+  transform: translateY(-50%) translateX(-50%);
   text-align: center;
   padding: 20px 10px 20px 10px;
   border-radius: 20px;
@@ -47,13 +47,15 @@ body{
 }
 
 .card{
-  padding: 25px 10px 25px 10px;
+  display: inline-block;
   font-size: large;
   font-family: 'Montserrat Regular', sans-serif;
   border: none;
   font-weight: 800;
-  border-radius: 10px;
+  border-radius: 20px;
   color: white;
+  width: 50px;
+  height: 80px;
 }
 .red{
   background-color: #FF5555;
@@ -72,7 +74,7 @@ body{
 }
 
 .black{
-  background-color: #1a1a1a;
+  background-image: linear-gradient(to bottom right, red,orange,yellow,green,blue,indigo,violet); 
 }
 
 button{
@@ -118,4 +120,29 @@ input:focus {
   box-shadow: 0 0 0 2px rgba(85, 85, 255, 0.557);
   border: solid 1px transparent;
   outline:0;
+}
+
+
+#alert-wrapper{
+  display: none;
+  position: fixed;
+  background-color: rgba(0,0,0,.2);
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+#alert{
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  background-color: white;
+  padding: 20px;
+  border-radius: 20px;
+  width: 300px;  
+}
+#alert p{
+  text-align: justify;
 }
diff --git a/client/index.html b/client/index.html
@@ -34,7 +34,14 @@ <h2 id="player-id"></h2>
     <ul id="cards"></ul>
     <ul id="personal-deck"></ul>
     <button id="btn-fish-card">Pescar carta</button>
-  </div> 
+  </div>  
+  <div id="alert-wrapper">
+    <div id="alert">
+      <h2 id="alert-title"></h2>
+      <p id="alert-description"></p>
+      <button class="button" id="alert-button" onclick="hideAlert()">Okay</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
@@ -34,8 +34,9 @@ function createGame () {
   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>`
+      if (item.cards.length === 0) {
+        showAlert(`¡${item.nickname} ha ganado!`, 'La partida se reiniciara y todos los jugadores tendran 7 cartas otra vez')
+        game.emit('restartGame', { 'gameCode': gameCode })
       } else {
         document.getElementById('players').innerHTML += `<li>${item.nickname}, <b>(${item.cards.length})</b></li>`
       }
@@ -65,7 +66,7 @@ function joinGame () {
         gameEvents()
       } else if (!data) {
         console.log(data)
-        alert('Juego no exite')
+        showAlert('¡Oy! :(', 'No se pudó entrar a la partida. El codigo ingresado no existe.')
       }
     }
   })
@@ -100,9 +101,22 @@ function printCards (game) {
             color = 'black'
             break
         }
+        let value
+        value = card.value
+        switch (card.value) {
+          case 10:
+            value = '+2'
+            break
+          case 11:
+            value = '🚫'
+            break
+          case 14:
+            value = '+4'
+            break
+        }
         document.getElementById('cards').innerHTML += `
         <li>
-          <button onclick="playCard(${card.value}, ${card.color})" class="card ${color}" disabled>${card.value}</button>
+          <button onclick="playCard(${card.value}, ${card.color})" class="card ${color}" disabled>${value}</button>
         </li>`
       })
     }
@@ -141,18 +155,17 @@ 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}`)
+        showAlert(`¡${item.nickname} ha ganado!`, 'La partida se reiniciara y todos los jugadores tendran 7 cartas otra vez')
       }
     })
 
     toPlay = data.topCard
     const topCard = document.getElementsByClassName('top-card')
 
     let color
-    switch (data.topCard.color) {
+    switch (toPlay.color) {
       case 0:
         color = 'red'
         break
@@ -170,9 +183,23 @@ function gameEvents () {
         break
     }
 
+    let value
+    value = toPlay.value
+    switch (toPlay.value) {
+      case 10:
+        value = '+2'
+        break
+      case 11:
+        value = '🚫'
+        break
+      case 14:
+        value = '+4'
+        break
+    }
+
     for (let i = 0; i < topCard.length; i++) {
       topCard[i].innerHTML = `
-      <a class="card ${color}">${data.topCard.value}</a>
+      <button class="card ${color}">${value}</button>
       `
     }
 
@@ -184,6 +211,18 @@ function gameEvents () {
   })
 }
 
+function showAlert (title, description) {
+  document.getElementById('alert-wrapper').style.display = 'inherit'
+  document.getElementById('alert-title').innerHTML = title
+  document.getElementById('alert-description').innerHTML = description
+  document.getElementById('alert-button').focus()
+}
+
+function hideAlert () {
+  document.getElementById('alert-wrapper').style.display = 'none'
+  document.getElementById('alert-button').blur()
+}
+
 // Event Listeners
 document.getElementById('btn-multi-game').addEventListener('click', mainMenu)
 document.getElementById('btn-create-game').addEventListener('click', createGame)

diff --git a/src/App.ts b/src/App.ts
@@ -38,17 +38,18 @@ class App {
     // Llenar cada color
     for (let c = 0; c < 4; c++){
       // Llenar cada tipo
-      for (let v = 0; v < 14; v++){
+      for (let v = 0; v < 15; v++){
         let newCard: Card = new Card        
         newCard.color = c
         newCard.value = v
-        if (v > 11){
+        if (v > 12){
           newCard.color = 4
         }
 
         this.cards.push(newCard)
       }
     }
+    this.cards.concat(this.cards)
     return this.cards
   }
 
@@ -81,7 +82,7 @@ class App {
           // Empujar un nuevo jugador al juego que quiere unirse          
           this.games[index].players.push({'id': ip, 'nickname': player, 'cards': cards})
         }
-        this.io.emit(player, cards);
+        this.io.emit(player, cards)
         console.log(this.games[index])
         result = this.games[index]
       }
@@ -113,8 +114,21 @@ class App {
     this.games.forEach((game, index) => {
       if (game.gameCode == gameCode){
         game.topCard = playedCard
-        game.turn = (game.turn + 1) % game.players.length
+        let turnMove: number = 1
+        if (game.topCard.value === 11){
+          turnMove = 2
+        }
+        game.turn = (game.turn + turnMove) % game.players.length
 
+        switch (game.topCard.value){
+          case 10:
+            game.players[game.turn].cards = game.players[game.turn].cards.concat(this.dealCards(2))
+            break
+          case 14:
+            game.players[game.turn].cards = game.players[game.turn].cards.concat(this.dealCards(4))
+            break
+        }
+
         this.usedCards.push(playedCard)
         if (nickname){
           game.players.forEach((player, ind) => {
@@ -152,6 +166,22 @@ class App {
 
     return result
   }
+
+  restartGame(gameCode: string){
+    console.log('-----GAME RESTARTED------')
+    console.log({ gameCode: gameCode})
+    let result: Game
+    this.games.forEach((game, index) => {
+      if (game.gameCode === gameCode){
+        game.players.forEach((player, i) => {
+          player.cards = this.dealCards()
+        })
+
+        result = game
+      }
+    })
+    return result
+  }
 }
 
 // Exporta esta clase

diff --git a/src/index.ts b/src/index.ts
@@ -39,6 +39,10 @@ game.server.listen(port, '0.0.0.0', (err) => {
       game.io.emit('getCard', game.fishCard(data.gameCode, data.player))
     })
 
+    socket.on('restartGame', (data) =>{
+      game.io.emit(data.gameCode, game.restartGame(data.gameCode))
+    })
+
     socket.on('disconnect', (data) => {
       console.log(`Cliente desconectado, ${handshake.address}`);
     })

diff --git a/src/spec/app.spec.ts b/src/spec/app.spec.ts
@@ -6,7 +6,7 @@ import { Game } from '../components/Game';
 describe('Llenar deck', () => {
   it('Deberia retornar deck completo de cartas de uno', () => {
     const result = game.fillDeck()
-    expect(JSON.stringify(result)).to.equal('[{"color":0,"value":0},{"color":0,"value":1},{"color":0,"value":2},{"color":0,"value":3},{"color":0,"value":4},{"color":0,"value":5},{"color":0,"value":6},{"color":0,"value":7},{"color":0,"value":8},{"color":0,"value":9},{"color":0,"value":10},{"color":0,"value":11},{"color":4,"value":12},{"color":4,"value":13},{"color":1,"value":0},{"color":1,"value":1},{"color":1,"value":2},{"color":1,"value":3},{"color":1,"value":4},{"color":1,"value":5},{"color":1,"value":6},{"color":1,"value":7},{"color":1,"value":8},{"color":1,"value":9},{"color":1,"value":10},{"color":1,"value":11},{"color":4,"value":12},{"color":4,"value":13},{"color":2,"value":0},{"color":2,"value":1},{"color":2,"value":2},{"color":2,"value":3},{"color":2,"value":4},{"color":2,"value":5},{"color":2,"value":6},{"color":2,"value":7},{"color":2,"value":8},{"color":2,"value":9},{"color":2,"value":10},{"color":2,"value":11},{"color":4,"value":12},{"color":4,"value":13},{"color":3,"value":0},{"color":3,"value":1},{"color":3,"value":2},{"color":3,"value":3},{"color":3,"value":4},{"color":3,"value":5},{"color":3,"value":6},{"color":3,"value":7},{"color":3,"value":8},{"color":3,"value":9},{"color":3,"value":10},{"color":3,"value":11},{"color":4,"value":12},{"color":4,"value":13},{"color":0,"value":0},{"color":0,"value":1},{"color":0,"value":2},{"color":0,"value":3},{"color":0,"value":4},{"color":0,"value":5},{"color":0,"value":6},{"color":0,"value":7},{"color":0,"value":8},{"color":0,"value":9},{"color":0,"value":10},{"color":0,"value":11},{"color":4,"value":12},{"color":4,"value":13},{"color":1,"value":0},{"color":1,"value":1},{"color":1,"value":2},{"color":1,"value":3},{"color":1,"value":4},{"color":1,"value":5},{"color":1,"value":6},{"color":1,"value":7},{"color":1,"value":8},{"color":1,"value":9},{"color":1,"value":10},{"color":1,"value":11},{"color":4,"value":12},{"color":4,"value":13},{"color":2,"value":0},{"color":2,"value":1},{"color":2,"value":2},{"color":2,"value":3},{"color":2,"value":4},{"color":2,"value":5},{"color":2,"value":6},{"color":2,"value":7},{"color":2,"value":8},{"color":2,"value":9},{"color":2,"value":10},{"color":2,"value":11},{"color":4,"value":12},{"color":4,"value":13},{"color":3,"value":0},{"color":3,"value":1},{"color":3,"value":2},{"color":3,"value":3},{"color":3,"value":4},{"color":3,"value":5},{"color":3,"value":6},{"color":3,"value":7},{"color":3,"value":8},{"color":3,"value":9},{"color":3,"value":10},{"color":3,"value":11},{"color":4,"value":12},{"color":4,"value":13}]')
+    expect(JSON.stringify(result)).to.equal('[{"color":0,"value":0},{"color":0,"value":1},{"color":0,"value":2},{"color":0,"value":3},{"color":0,"value":4},{"color":0,"value":5},{"color":0,"value":6},{"color":0,"value":7},{"color":0,"value":8},{"color":0,"value":9},{"color":0,"value":10},{"color":0,"value":11},{"color":0,"value":12},{"color":4,"value":13},{"color":4,"value":14},{"color":1,"value":0},{"color":1,"value":1},{"color":1,"value":2},{"color":1,"value":3},{"color":1,"value":4},{"color":1,"value":5},{"color":1,"value":6},{"color":1,"value":7},{"color":1,"value":8},{"color":1,"value":9},{"color":1,"value":10},{"color":1,"value":11},{"color":1,"value":12},{"color":4,"value":13},{"color":4,"value":14},{"color":2,"value":0},{"color":2,"value":1},{"color":2,"value":2},{"color":2,"value":3},{"color":2,"value":4},{"color":2,"value":5},{"color":2,"value":6},{"color":2,"value":7},{"color":2,"value":8},{"color":2,"value":9},{"color":2,"value":10},{"color":2,"value":11},{"color":2,"value":12},{"color":4,"value":13},{"color":4,"value":14},{"color":3,"value":0},{"color":3,"value":1},{"color":3,"value":2},{"color":3,"value":3},{"color":3,"value":4},{"color":3,"value":5},{"color":3,"value":6},{"color":3,"value":7},{"color":3,"value":8},{"color":3,"value":9},{"color":3,"value":10},{"color":3,"value":11},{"color":3,"value":12},{"color":4,"value":13},{"color":4,"value":14},{"color":0,"value":0},{"color":0,"value":1},{"color":0,"value":2},{"color":0,"value":3},{"color":0,"value":4},{"color":0,"value":5},{"color":0,"value":6},{"color":0,"value":7},{"color":0,"value":8},{"color":0,"value":9},{"color":0,"value":10},{"color":0,"value":11},{"color":0,"value":12},{"color":4,"value":13},{"color":4,"value":14},{"color":1,"value":0},{"color":1,"value":1},{"color":1,"value":2},{"color":1,"value":3},{"color":1,"value":4},{"color":1,"value":5},{"color":1,"value":6},{"color":1,"value":7},{"color":1,"value":8},{"color":1,"value":9},{"color":1,"value":10},{"color":1,"value":11},{"color":1,"value":12},{"color":4,"value":13},{"color":4,"value":14},{"color":2,"value":0},{"color":2,"value":1},{"color":2,"value":2},{"color":2,"value":3},{"color":2,"value":4},{"color":2,"value":5},{"color":2,"value":6},{"color":2,"value":7},{"color":2,"value":8},{"color":2,"value":9},{"color":2,"value":10},{"color":2,"value":11},{"color":2,"value":12},{"color":4,"value":13},{"color":4,"value":14},{"color":3,"value":0},{"color":3,"value":1},{"color":3,"value":2},{"color":3,"value":3},{"color":3,"value":4},{"color":3,"value":5},{"color":3,"value":6},{"color":3,"value":7},{"color":3,"value":8},{"color":3,"value":9},{"color":3,"value":10},{"color":3,"value":11},{"color":3,"value":12},{"color":4,"value":13},{"color":4,"value":14}]')
   })
 })