Soof
/
keezen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
							<!DOCTYPE html>
<html>
    <head>
        <title>Dog</title>
        <style type="text/css">
            body, .input {
                font-family: "Courier New", sans-serif;
                text-align: center;
                background-color: lightgray;
            }
            .buttons {
                font-size: 1em;
                display: flex;
                justify-content: center;
            }
            .button {
                line-height: 1;
                padding: 1rem;
                margin: 1rem;
                border: thin solid;
                min-height: 1em;
                min-width: 1em;
                cursor: pointer;
                user-select: none;
            }
            .state, .input {
                font-size: 2em;
                padding: 2rem;
            }
            .input {
                color: white;
                line-height: 1;
                padding: 1rem;
                margin: 1rem;
                border: thin solid;
                min-height: 1em;
                min-width: 1em;
            }
        </style>
    </head>
    <body>
        <div><input type="number" class="input" id="gc" placeholder="1234" onchange="changeGameCode(this.value)"/></div>
        <div><input type="text" class="input" id="name" placeholder="Jouw Naam" onchange="changeName(this.value)" /></div>
        <div class="state">
            <span class="message" id="msg">?</span>
        </div>
        <div class="buttons">
            <div class="button" id="b0" onclick="doOption(0)">1</div>
            <div class="button" id="b1" onclick="doOption(1)">2</div>
            <div class="button" id="b2" onclick="doOption(2)">3</div>
            <div class="button" id="b3" onclick="doOption(3)">4</div>
            <div class="button" id="b4" onclick="doOption(4)">5</div>
            <div class="button" id="b5" onclick="doOption(5)">6</div>
            <div class="button" id="b6" onclick="doOption(6)">7</div>
        </div>
        <div id="json"/>

        <script>
            var player = {
                options: [
                    {
                        code: 'new_game',
                        text: 'Nieuw spel'
                    }, {
                        code: 'join_game',
                        text: 'Doe mee met een spel'
                    }],
                message: "Even wachten op de server",
                state: "start"
            };
            var json = "";

            function doOption(i) {
                if (player.options.length > i) {
                    const option = player.options[i];
                    option.user_name = player.name;
                    option.game_code = player.game_code;
                    option.color = option.color || player.color;
                    websocket.send(JSON.stringify(player.options[i]));
                }
            }

            function show() {
                var i;
                for (i = 0; i < 7; i++) {
                    document.getElementById("b" + i.toString()).textContent = player.options.length > i ? player.options[i].text : '';
                }
                document.getElementById("msg").textContent = player.message;
                var name = document.getElementById("name");
                if (player.color) {
                    name.style.color = player.color;
                }
                const gc = document.getElementById("gc");
                gc.value = player.game_code;
                gc.disabled = player.state !== "start";
                document.getElementById("json").textContent = json;
            }

            function changeName(name) {
                player.name = name;
                if (player.game_code) {
                    const option = { code: "change_name", text: name, user_name: name }
                    websocket.send(JSON.stringify(option));
                }
            }

            function changeGameCode(code) {
                player.game_code = code;
            }

            websocket = new WebSocket("ws://127.0.0.1:6789/");

            websocket.onmessage = function (event) {
                player = JSON.parse(event.data);
                json = event.data;
                show();
            }

            show();
        </script>
    </body>
</html>