Added card styles

src/main/resources/static/js/grid.js

@@ -2,6 +2,7 @@ var socket = null
 var player = '_'
 var roomId = '_'
 var wsHeaders = {}
+var cards = []
 
 function getRoomId() {
     const urlRegex = /\/room\/([a-f0-9-]{36})\/grid$/
@@ -11,27 +12,93 @@ function getRoomId() {
     return res[1]
 }
 
-function makeCards(data) {
-    var cards = data['cards']
+function updatePhase(phase) {
+    if(phase == "hinting_any" || (phase == "hinting_a" && player == 'A') || (phase == "hinting_b" && player == 'B')) {
+        // Hinting
+        $('.card-button').css('visibility', 'hidden')
+        $('#hint-text').hide()
+        $('#submit-hint').show()
+        $('#other-playing').hide()
+        $('#end-guessing').hide()
+    } else if ((phase == "hinting_b" && player == 'A') || (phase == "hinting_a" && player == 'B')) {
+        // Wait for the other one
+        $('.card-button').css('visibility', 'hidden')
+        $('#hint-text').hide()
+        $('#submit-hint').hide()
+        $('#other-playing').show()
+        $('#end-guessing').hide()
+    } else if ((phase == "guessing_a" && player == 'B') || (phase == "guessing_b" && player == 'A')) {
+        // Wait for the other one
+        $('.card-button').css('visibility', 'hidden')
+        $('#hint-text').show()
+        $('#submit-hint').hide()
+        $('#other-playing').show()
+        $('#end-guessing').hide()
+    } else if ((phase == "guessing_a" && player == 'A') || (phase == "guessing_b" && player == 'B')) {
+        // Guessing
+        $('.card-button').css('visibility', 'visible')
+        $('.card-button.untouchable').css('visibility', 'hidden')
+        $('#hint-text').show()
+        $('#submit-hint').hide()
+        $('#other-playing').hide()
+        $('#end-guessing').show()
+    }
+}
+
+function setHint(hint, wordCount) {
+    $('#hint-text').text(hint+" in "+wordCount)
+}
+
+function updateCard(i) {
+    card = cards[i]
+    if(card['revealed-a']) {
+        $(`#card-${i}-b-public`).addClass((player=='A')?card.otherColor:card.color)
+        $(`#card-${i}-b-public`).css('visibility', 'visible')
+    } else {
+        $(`#card-${i}-b-public`).css('visibility', 'hidden')
+    }
+    if(card['revealed-b']) {
+        $(`#card-${i}-a-public`).addClass((player=='B')?card.otherColor:card.color)
+        $(`#card-${i}-a-public`).css('visibility', 'visible')
+    } else {
+        $(`#card-${i}-a-public`).css('visibility', 'hidden')
+    }
+    cardDone = (card['revealed-a'] && ((player=='A')?card.otherColor:card.color == "green")) ||
+        (card['revealed-b'] && ((player=='B')?card.otherColor:card.color == "green")) ||
+        (card['revealed-a'] && card['revealed-b']);
+    if(cardDone) $(`#card-${i}`).addClass('card-done')
+    cantTouch = cardDone ||
+        (player=='A' && card['revealed-a']) ||
+        (player=='B' && card['revealed-b']);
+    if(cantTouch) {
+        $(`#card-${i}-button`).addClass('untouchable')
+        $(`#card-${i}-button`).css('visibility', 'hidden')
+    }
+}
+
+function initGame(data) {
+    cards = data['cards']
     $('#cards-list').empty()
     for(var i = 0; i<cards.length; i++) {
         html = `
-            <li class="card" id="card-${i}">
+            <li class="card ${cards[i].color}" id="card-${i}">
                 <span class="card-word">${cards[i].word}</span><br/>
-                Color: <span class="card-color-text" id="card-${i}-color">${cards[i].color}</span><br/>
-                <button id="card-${i}-button">Toucher</button>
+                <div class="card-bottom-bar">
+                    <div id="card-${i}-a-public">A</div>
+                    <button class="card-button" id="card-${i}-button">Toucher</button>
+                    <div id="card-${i}-b-public">B</div>
+                </div>
             </li>
         `
         $('#cards-list').append($(html))
         $(`#card-${i}-button`).on('click', pointCard)
+        updateCard(i)
     }
+
+    updatePhase(data['phase'])
 }
 
 function selectPlayer(e) {
-    console.log(e)
-    console.log(e.target)
-    console.log(e.target.id)
-    console.log(e.target.id == "select-player-a")
     player = (e.target.id == "select-player-a") ? 'A' : 'B'
     wsHeaders = {
         "room": roomId,
@@ -44,7 +111,7 @@ function selectPlayer(e) {
         contentType: 'application/json',
         type: "GET",
         url: "/room/"+roomId+"/game/player-"+player.toLowerCase(),
-        success: makeCards
+        success: initGame
     })
 
     socket = Stomp.over(new SockJS('/socket'));
@@ -52,6 +119,8 @@ function selectPlayer(e) {
         socket.subscribe('/topic/submit-hint', onSubmitHint);
         socket.subscribe('/topic/point-card', onPointCard);
         socket.subscribe('/topic/end-guessing', onEndGuessing);
+        socket.subscribe('/topic/new-phase', onNewPhase);
+        socket.subscribe('/topic/update-card/' + player.toLowerCase(), onUpdateCard);
     });
 }
 
@@ -75,17 +144,19 @@ function endGuessing(e) {
 
 function onSubmitHint(m) {
     data = JSON.parse(m.body)
+    setHint(data['hint'], data['hintWordCount'])
     $("#event-log").append($(`
         <li>
-            ${data['hint']} en ${data['hintWordCount']}
+            ${data.player} proposed "${data['hint']}" in ${data['hintWordCount']} word(s)
         </li>
     `))
 }
 function onPointCard(m) {
     data = JSON.parse(m.body)
+    i = data['cardIndex']
     $("#event-log").append($(`
         <li>
-            Pointed card ${data['cardIndex']}
+            ${data.player} pointed card ${cards[i].word} (${data.color})
         </li>
     `))
 }
@@ -96,6 +167,16 @@ function onEndGuessing(m) {
         </li>
     `))
 }
+function onNewPhase(m) {
+    updatePhase(m.body)
+}
+
+function onUpdateCard(m) {
+    data = JSON.parse(m.body)
+    i = Number(m.headers['cardIndex'])
+    cards[i] = data
+    updateCard(i)
+}
 
 function initialize() {
     $('#select-player-a').on('click', selectPlayer)