Remade game logic, added sudden death

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

@@ -12,36 +12,34 @@ function getRoomId() {
     return res[1]
 }
 
+/*
+ * Update html to match state
+ */
 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
+    p = player.toLowerCase()
+    o = (player=='A')?'b':'a'
+    if(phase[p+'-guessing']) {
         $('.card-button').css('visibility', 'visible')
         $('.card-button.untouchable').css('visibility', 'hidden')
+        $('#end-guessing-button').show()
+    } else {
+        $('.card-button').css('visibility', 'hidden')
+        $('#end-guessing-button').hide()
+    }
+    if(phase[p+'-guessing'] || phase[o+'-guessing']) {
         $('#hint-text').show()
+    } else {
+        $('#hint-text').hide()
+    }
+    if(phase[p+'-hinting']) {
+        $('#submit-hint').show()
+    } else {
         $('#submit-hint').hide()
+    }
+    if(!phase[p+'-guessing'] & !phase[p+'-hinting']) {
+        $('#other-playing').show()
+    } else {
         $('#other-playing').hide()
-        $('#end-guessing').show()
     }
 }
 
@@ -49,6 +47,20 @@ function setHint(hint, wordCount) {
     $('#hint-text').text(hint+" in "+wordCount)
 }
 
+function createCard(i) {
+    html = `
+        <li class="card ${cards[i].color}" id="card-${i}">
+            <span class="card-word">${cards[i].word}</span><br/>
+            <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)
+}
 function updateCard(i) {
     card = cards[i]
     if(card['revealed-a']) {
@@ -76,26 +88,102 @@ function updateCard(i) {
     }
 }
 
+function addHintEvent(issuer, hint, hintWordCount) {
+    $("#event-log").append($(`
+        <li>
+            ${issuer} proposed "${hint}" in ${hintWordCount} word(s)
+        </li>
+    `))
+}
+
+function addPointEvent(issuer, cardIndex, color) {
+    $("#event-log").append($(`
+        <li>
+            ${issuer} pointed card ${cards[cardIndex].word} (${color})
+        </li>
+    `))
+}
+
+function addEndGuessingEvent(issuer, manual) {
+    if(manual) {
+        $("#event-log").append($(`
+            <li>
+                ${issuer} ended guessing
+            </li>
+        `))
+    } else {
+        $("#event-log").append($(`
+            <li>
+                ${issuer} can't guess anymore
+            </li>
+        `))
+    }
+}
+function addSuddenDeathEvent() {
+    $("#event-log").append($(`
+        <li>
+            Starting sudden death
+        </li>
+    `))
+}
+function addEndGameEvent(issuer, won) {
+    if(won) {
+        $("#event-log").append($(`
+            <li>
+                You won the game !
+            </li>
+        `))
+    } else {
+        $("#event-log").append($(`
+            <li>
+                You lost the game !
+            </li>
+        `))
+    }
+}
+
+function addEvent(e) {
+    switch(e.type) {
+        case "hint":
+            addHintEvent(e.issuer, e.word, e.wordCount)
+            setHint(e.word, e.wordCount)
+            break
+        case "guess":
+            addPointEvent(e.issuer, e['card-index'], e.color)
+            break
+        case "end_guessing":
+            addEndGuessingEvent(e.issuer, e.manual)
+            break
+        case "game_end":
+            addEndGameEvent(e.issuer, e.win)
+            break
+        case "sudden_death":
+            addSuddenDeathEvent()
+            break
+    }
+}
+
+
+/*
+ * Listeners
+ */
+
 function initGame(data) {
     cards = data['cards']
     $('#cards-list').empty()
     for(var i = 0; i<cards.length; i++) {
-        html = `
-            <li class="card ${cards[i].color}" id="card-${i}">
-                <span class="card-word">${cards[i].word}</span><br/>
-                <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)
+        createCard(i)
         updateCard(i)
     }
-
     updatePhase(data['phase'])
+    events = data.events
+    for(var i = 0; i<events.length; i++) {
+        e = events[i]
+        addEvent(e)
+    }
+    if(data['current-hint']) {
+        setHint(data['current-hint'].word, data['current-hint'].wordCount)
+    }
 }
 
 function selectPlayer(e) {
@@ -117,10 +205,8 @@ function selectPlayer(e) {
 
     socket = Stomp.over(new SockJS('/socket'));
     socket.connect({}, function (frame) {
-        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/new-event', onNewEvent);
         socket.subscribe('/topic/update-card/' + player.toLowerCase(), onUpdateCard);
     });
 }
@@ -142,34 +228,13 @@ function pointCard(e) {
 function endGuessing(e) {
     socket.send('/app/end-guessing', wsHeaders, "")
 }
-
-function onSubmitHint(m) {
-    data = JSON.parse(m.body)
-    setHint(data['hint'], data['hintWordCount'])
-    $("#event-log").append($(`
-        <li>
-            ${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>
-            ${data.player} pointed card ${cards[i].word} (${data.color})
-        </li>
-    `))
-}
-function onEndGuessing(m) {
-    $("#event-log").append($(`
-        <li>
-            Ended guessing
-        </li>
-    `))
-}
 function onNewPhase(m) {
-    updatePhase(m.body)
+    phase = JSON.parse(m.body)
+    updatePhase(phase)
+}
+function onNewEvent(m) {
+    e = JSON.parse(m.body)
+    addEvent(e)
 }
 
 function onUpdateCard(m) {