First layout of the game

2026-08-24 15:24:50 +02:00
parent 902ba26df3
commit 639a5565ad
16 changed files with 698 additions and 7 deletions
@@ -0,0 +1,109 @@
+var socket = null 
+var player = '_'
+var roomId = '_'
+var wsHeaders = {}
+
+function getRoomId() {
+    const urlRegex = /\/room\/([a-f0-9-]{36})\/grid$/
+    const res = urlRegex.exec(window.location.href)
+    if (res == null)
+        console.log("Could not understand room id from url")
+    return res[1]
+}
+
+function makeCards(data) {
+    var cards = data['cards']
+    $('#cards-list').empty()
+    for(var i = 0; i<cards.length; i++) {
+        html = `
+            <li class="card" 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>
+            </li>
+        `
+        $('#cards-list').append($(html))
+        $(`#card-${i}-button`).on('click', pointCard)
+    }
+}
+
+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,
+        "player": player
+    }
+
+    $('#player-selector').hide()
+    $('#game-panel').show()
+    $.ajax({
+        contentType: 'application/json',
+        type: "GET",
+        url: "/room/"+roomId+"/game/player-"+player.toLowerCase(),
+        success: makeCards
+    })
+
+    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);
+    });
+}
+
+function submitHint(e) {
+    hint = $('#submit-hint-text').val()
+    hintWordCount = Number($('#submit-hint-wordcount option:selected').val())
+    socket.send('/app/submit-hint', wsHeaders, JSON.stringify({
+        'hint': hint,
+        'hintWordCount': hintWordCount
+    }))
+}
+function pointCard(e) {
+    cardIndex = Number(/card-([0-9]+)-button/.exec(e.target.id)[1])
+    socket.send('/app/point-card', wsHeaders, JSON.stringify({
+        'cardIndex': cardIndex,
+    }))
+}
+function endGuessing(e) {
+    socket.send('/app/end-guessing', wsHeaders, "")
+}
+
+function onSubmitHint(m) {
+    data = JSON.parse(m.body)
+    $("#event-log").append($(`
+        <li>
+            ${data['hint']} en ${data['hintWordCount']}
+        </li>
+    `))
+}
+function onPointCard(m) {
+    data = JSON.parse(m.body)
+    $("#event-log").append($(`
+        <li>
+            Pointed card ${data['cardIndex']}
+        </li>
+    `))
+}
+function onEndGuessing(m) {
+    $("#event-log").append($(`
+        <li>
+            Ended guessing
+        </li>
+    `))
+}
+
+function initialize() {
+    $('#select-player-a').on('click', selectPlayer)
+    $('#select-player-b').on('click', selectPlayer)
+    $('#submit-hint button').on('click', submitHint)
+    $('#end-guessing-button').on('click', endGuessing)
+
+    roomId = getRoomId()
+
+    $('#game-panel').hide()
+}