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

var socket = null 
var player = '_'
var roomId = '_'
var wsHeaders = {}
var cards = []

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 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 ${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)
        updateCard(i)
    }

    updatePhase(data['phase'])
}

function selectPlayer(e) {
    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: initGame
    })

    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/update-card/' + player.toLowerCase(), onUpdateCard);
    });
}

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)
    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)
}

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)
    $('#select-player-b').on('click', selectPlayer)
    $('#submit-hint button').on('click', submitHint)
    $('#end-guessing-button').on('click', endGuessing)

    roomId = getRoomId()

    $('#game-panel').hide()
}