ozai-webui/templates/game.html

<!-- HTML for game.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Ozai:game</title>
    <link rel="icon" type="image/png" href="/azul-flake.png">
    <style>
        * {
            --border-color: rgb(172, 172, 172);
            --bg-transparency: 0.5;
            --tile-size: 2em;
        }

        body {
            background-color: #383737;
            color: white;
            color-scheme: dark;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        a {
            padding: 1em;
            display: inline-block;
            text-decoration: none;
            color: #aba4f6;
            background-color: #1919a7;
            border-radius: 1em;
            font-weight: bold;
            font-size: 1.5em; /* increase font size */
            
        }
        a:hover {
            background-color: #204ac8;
        }
        input[type="submit"] {
            border: none;
            border-radius: 1em;
            background-color: #3232d1;
            padding: 1em;
        }
        input[type="submit"]:hover {
            background-color: #3f3ff2;
        }
        select {
            font-size: 1.5em;
        }

        .move_select {
            display: flex;
            justify-content: space-around;
            flex-direction: row;
            align-items: baseline;
        }

        /* flexbox class */
        .flex-row {
            display: flex;
            justify-content: left;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: baseline;
        }

        @media (max-width: 400px) {
            .flex-row {
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }
        .flex-row > * {
            margin-right: 1em;
        }
        .flex-col {
            display: flex;
            justify-content:space-around;
            flex-direction: column;
        }

        .factory {
            overflow: hidden;
            border: 2px solid var(--border-color);
            border-radius: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
            /* flex wrap */
            flex-direction: row;
            flex-wrap: wrap;
            
            height: calc(var(--tile-size) * 3);
            width: calc(var(--tile-size) * 3);
            
        }
        #market {
            height: calc(var(--tile-size) * 6);
            width: calc(var(--tile-size) * 6);
        }
        /* put the first element in the corner of the factory  */
        .factory-name {
            border-radius: 20%;
            margin-top: 0;
            margin-left: 0;
            position: relative;
            top: 0;
            left: 0;
            border: 2px solid var(--border-color);
            text-align: center;
            margin: 0.1em;
            width: 1.5em;
            height: 1.5em;
            overflow: hidden;
            text-align: center;
            vertical-align: middle;
        }

        .factory > * {
            border-radius: 10%;
            border: 1px solid var(--border-color);
            text-align: center;
            margin: 0.1em;
            width: var(--tile-size);
            height: var(--tile-size);
            overflow: hidden;
            text-align: center;
            vertical-align: middle;
        }

        .player_area {
            border: 2px solid var(--border-color);
            border-radius: 20px;
            padding: 10px;
            margin: 10px;
        }

        .wall {
            /* 5*5 grid */
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 0.1em;
        }
        .wall > * {
            border: 1px solid var(--border-color);
            width: var(--tile-size);
            height: var(--tile-size);
            text-align: center;
            margin-top: 0.1em;
        }
        .pattern_lines {
            display: flex;
            justify-content: space-around;
            flex-direction: column;
            align-items: start;
        }
        .pattern_line {
            display: flex;
            justify-content: right;
            flex-direction:row-reverse;
            align-items:baseline;
        }
        .pattern_line > * {
            border: 1px solid var(--border-color);
            text-align: center;
            margin: 0.1em;
            width: var(--tile-size);
            height: var(--tile-size);
            overflow: hidden;
            text-align: center;
            vertical-align: middle;
        }
        .floor_container {
            display: flex;
            justify-content: left;
            flex-direction: row;
            align-items:baseline;
        }
        .floor {
            border: 1px solid var(--border-color);
            text-align: center;
            width: var(--tile-size);
            height: var(--tile-size);
        }
        .floor_value {
            text-align: center;
            width: var(--tile-size);
        }

        
        .blue_bg {
            background-color: rgb(49, 157, 245, var(--bg-transparency));
        }
        .yellow_bg {
            background-color: rgb(247, 148, 62, var(--bg-transparency));
        }
        .red_bg {
            background-color: rgb(200, 50, 50, var(--bg-transparency));
        }
        .black_bg {
            background-color: rgb(30, 30, 30, var(--bg-transparency));
        }
        .white_bg {
            background-color:rgb(130, 130, 130, var(--bg-transparency));
        }


        .blue {
            border-radius: calc(var(--tile-size) * 0.2);
            background-color: rgb(49, 157, 245);
        }
        .yellow {
            border-radius: calc(var(--tile-size) * 0.2);
            background-color: rgb(247, 148, 62);
        }
        .red {
            border-radius: calc(var(--tile-size) * 0.2);
            background-color: rgb(200, 50, 50);
        }
        .black {
            border-radius: calc(var(--tile-size) * 0.2);
            background-color: rgb(30, 30, 30);
        }
        .white {
            border-radius: calc(var(--tile-size) * 0.2);
            background-color:rgb(130, 130, 130);
        }
        .start {
            border-radius: calc(var(--tile-size) * 0.2);
            background-color: rgb(165, 1, 155);
        }


    </style>
</head>
<body>
    <div class="flex-row">
        <p>Number of Players: {{ gamestate.n_players }}</p>
        <p>Current Player: {{ gamestate.current_player }}</p>
        <p>Playing as: {{ player_name }}</p>
        <p>Game Status: {% if gamestate.game_end %}Ended{% else %}Active{% endif %}</p>
        <p>Rounds: {{ gamestate.rounds }}</p>
        <p>Days: {{ gamestate.days }}</p>
    </div>

    <div class="flex-row">
        <!-- market -->
        <div class="flex-col">
            <div class="factory-name">M</div>
            <div class="factory" id="market">
                {% for color, number in gamestate.market.items() %}
                 {% if number > 0 %}
                    {% for i in range(0, number) %}
                        <div onclick="selectTile(this)" class="{{ color }}">{{ color[:1] }}</div>
                    {% endfor %}
                {% endif %}
                {% endfor %}
            </div>
        </div>
        <!-- factories -->
        {% for factory in gamestate.factories %}
            <div class="flex col">
                <div class="factory-name">{{ loop.index }}</div>
                <div class="factory" id="factory{{ loop.index }}">
                    {% for color, number in factory.items() %}
                    {% if number > 0 %}
                        {% for i in range(0, number) %}
                            <div onclick="selectTile(this)" class="{{ color }}">{{ color[:1] }}</div>
                        {% endfor %}
                    {% endif %}
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="flex-row">
    {% for name, player_data in gamestate.players.items() %}
        <div class="flex-col player_area">
            <div class="flex-row">
                {% if  gamestate.current_player == name %}
                    <p>◉</p>
                {% else %}
                    <p>○</p>
                {% endif %}
                {% if player_name == name %}
                <div><strong>{{ name }}</strong></div>
                {% else %}
                <div>{{ name }}</div>
                {% endif %}
                {% if  player_data.ready %}
                <p>Ready</p>
                {% endif %}
                <p>Points: {{ player_data.points }}</p>
            </div>
            
            <div class="flex-row">
                <div class="flex-col">
                    <!-- <h3>Pattern Lines</h3> -->
                    {% for line in player_data.pattern_lines %}
                    <div class="pattern_line" onclick="selectPatternLine(this)" value="{{loop.index}}">
                        <!-- TODO: Fix this to not fill empty spaces. -->
                        {% for i in range(0, loop.index) %}
                            {% if line.number > i %}
                                <div  class="{{ line.color }}" >{{ line.color[:1] }}</div>
                            {% else %}
                                <div >_</div>
                            {% endif %}
                        {% endfor %}
                    </div>
                    {% endfor %}
                    </div>
                    <div class="flex-col">
                        <!-- <h3>Wall</h3> -->
                        <div class="wall">
                            {% set colors_base = ['blue', 'yellow', 'red', 'black', 'white'] %}
                            {% for row in player_data.wall %}
                            {% set colors = colors_base[-loop.index0:] + colors_base[:-loop.index0] %}
                                {% for cell in row %}
                                    {% set color = colors[loop.index0] + "_bg" %}
                                    <div class="{{ color }}">{% if cell %}{{ color[:1] }}{% else %}{{ '_' }}{% endif %}</div>
                                    {% endfor %}
                            {% endfor %}
                    </div>
                </div>
                </div>

            <div class="floor_container" onclick="selectPatternLine(this)" value="floor">
                {% set floor_count = 0 %}
                {% set floor_negative_values = [1,1,2,2,2,3,3] %}
                {% for color, number in player_data.floor.items() %}
                    {% if number > 0 %}
                        {% set floor_count = floor_count + number %}
                        {% for i in range(0, number) %}
                            <!-- get index of item and set value to te value of floor_neg.. -->
                            <div class="flex-col">
                                <div class="floor_value">-{{ floor_negative_values[i] }}</div>
                                <div class="{{ color }} floor">{{ color[:1] }}</div>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endfor %}    
                {% if floor_count < 7 %}
                    {% set floor_blank_tiles = 7 - floor_count %}
                    {% for i in range(0, floor_blank_tiles) %}
                        <div class="flex-col">
                            <div class="floor_value">-{{ floor_negative_values[i] }}</div>
                            <div class="floor">_</div>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>

            {% if player_name == name %}
            <form id='moveForm'</form>>
                <div class="flex-col">
                    <div class="flex-row move_select">
                    <div>
                        <label for="source">from:</label>
                        <select id="source" name="source">
                            <option value="market">Market</option>
                                {% for factory in gamestate.factories %}
                                <option value="{{ loop.index }}">Factory {{ loop.index }}</option>
                                {% endfor %}
                        </select>
                    </div>
                    
                    <div>
                        <label for="color">Color:</label>
                        <select id="color" name="color">
                            <option value="red">Red</option>
                            <option value="blue">Blue</option>
                            <option value="yellow">Yellow</option>
                            <option value="black">Black</option>
                            <option value="white">White</option>
                        </select>
                    </div>
                    
                    <div>
                        <label for="destination">to:</label>
                        <select id="destination" name="destination">
                            <option value="1">Line 1</option>
                            <option value="2">Line 2</option>
                            <option value="3">Line 3</option>
                            <option value="4">Line 4</option>
                            <option value="5">Line 5</option>
                            <option value="floor">Floor</option>
                        </select>
                    </div>
                    </div>

                    <input type="submit" value="Submit Move" style="margin-top: 1em;">
                </div>
            </form>
            {% endif %}

        </div>
    {% endfor %}
    </div>
        

    {% if player_name %}
        <!-- form for submitting a move, a move is a selection of marcet or factory, what color, and what patternline or floor it goes to.  -->
        
        <!-- button to go to next player -->
        {% set current_index = gamestate.player_names.index(player_name) %}
        {% set next_index = current_index + 1 if current_index + 1 < gamestate.player_names|length else 0 %}
        <a href="/game/{{ game_id }}/player/{{ gamestate.player_names[next_index] }}">Next Player</a>

    
    {% endif %}


    <script src="/socket.io.js"></script>
    <script>
        console.log('Game ID: {{ game_id }}');
        console.log('Player Name: {{ player_name }}');
        console.log('Gamestate: {{ gamestate }}');

        function selectTile(tile) {
            var source = tile.parentElement.id;
            if (source == 'market') {
                source = 'market';
            }else {
                source = source.replace('factory', '');
            }
            var color = tile.getAttribute('class');
            console.log('Selected tile: ' + color + ' from ' + source);
            //get elements of the form
            var sourceElement = document.getElementById('source');
            var colorElement = document.getElementById('color');
            //select the selected source and color
            console.log(sourceElement);
            console.log(colorElement);

            //find the element in the dropdowns with the same value as the source and color
            var sourceOption = sourceElement.querySelector('option[value="' + source + '"]');
            var colorOption = colorElement.querySelector('option[value="' + color + '"]');
            console.log(sourceOption);
            console.log(colorOption);
            //set the selected attribute to true
            sourceOption.selected = true;
            colorOption.selected = true;
        }

        function selectPatternLine(pattern_line) {
            //get the value of the pattern line element
            value = pattern_line.getAttribute('value');
            console.log('Selected pattern line: ' + pattern_line + ' with value: ' + value);
            var destinationElement = document.getElementById('destination');
            var destinationOption = destinationElement.querySelector('option[value="' + value + '"]');
            destinationOption.selected = true;
        }

        // refresh the page by listening to websocket events
        
        game_id = '{{ game_id }}';
        player_name = '{{ player_name }}';

        var socket = io();

        // send a message to the server in the message name space
        socket.emit('join', {game_id: game_id});
        
        socket.addEventListener('move', function (event) {
            console.log('Game update received: ' + event);
            window.location.reload();
        });
        
        // if we wana go over to using websocket entirely to send the move 
        let form = document.querySelector('#moveForm');
        form.addEventListener('submit', function(event) {
            // Prevent the form from being submitted normally
            event.preventDefault();
            // Create a FormData object from the form
            let formData = new FormData(form);
            // Convert the FormData to a plain object
            let data = {};
            formData.forEach((value, key) => data[key] = value);
            console.log(data);
            socket.emit('move', {game_id: game_id, player_name, move: data});
        });

    </script>


</body>
</html>
init 2024-02-14 21:52:29 +01:00			`<!-- HTML for game.html -->`
			`<!DOCTYPE html>`
			`<html>`
			`<head>`
header cleanup + fixes + websocket moves 2024-02-25 20:41:38 +01:00			`<title>Ozai:game</title>`
			`<link rel="icon" type="image/png" href="/azul-flake.png">`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`<style>`
style updates 2024-03-21 23:32:44 +01:00			`* {`
			`--border-color: rgb(172, 172, 172);`
			`--bg-transparency: 0.5;`
			`--tile-size: 2em;`
			`}`

			`body {`
			`background-color: #383737;`
			`color: white;`
			`color-scheme: dark;`
			`display: flex;`
			`flex-direction: column;`
			`justify-content: center;`
			`align-items: center;`
			`}`

fixes + style start 2024-02-24 21:33:28 +01:00			`a {`
style updates 2024-03-21 23:32:44 +01:00			`padding: 1em;`
fixes + style start 2024-02-24 21:33:28 +01:00			`display: inline-block;`
			`text-decoration: none;`
style updates 2024-03-21 23:32:44 +01:00			`color: #aba4f6;`
			`background-color: #1919a7;`
			`border-radius: 1em;`
fixes + style start 2024-02-24 21:33:28 +01:00			`font-weight: bold;`
			`font-size: 1.5em; /* increase font size */`

			`}`
			`a:hover {`
style updates 2024-03-21 23:32:44 +01:00			`background-color: #204ac8;`
			`}`
			`input[type="submit"] {`
			`border: none;`
			`border-radius: 1em;`
			`background-color: #3232d1;`
			`padding: 1em;`
			`}`
			`input[type="submit"]:hover {`
			`background-color: #3f3ff2;`
			`}`
			`select {`
			`font-size: 1.5em;`
			`}`

			`.move_select {`
			`display: flex;`
			`justify-content: space-around;`
			`flex-direction: row;`
			`align-items: baseline;`
fixes + style start 2024-02-24 21:33:28 +01:00			`}`
style updates 2024-03-21 23:32:44 +01:00
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`/* flexbox class */`
			`.flex-row {`
			`display: flex;`
			`justify-content: left;`
			`flex-direction: row;`
			`flex-wrap: wrap;`
style updates 2024-03-21 23:32:44 +01:00			`align-items: baseline;`
			`}`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00
style updates 2024-03-21 23:32:44 +01:00			`@media (max-width: 400px) {`
			`.flex-row {`
			`flex-direction: column;`
			`justify-content: center;`
			`align-items: center;`
			`}`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`}`
			`.flex-row > * {`
style updates 2024-03-21 23:32:44 +01:00			`margin-right: 1em;`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`}`
			`.flex-col {`
			`display: flex;`
			`justify-content:space-around;`
			`flex-direction: column;`
			`}`
fixes + style start 2024-02-24 21:33:28 +01:00
			`.factory {`
			`overflow: hidden;`
style updates 2024-03-21 23:32:44 +01:00			`border: 2px solid var(--border-color);`
fixes + style start 2024-02-24 21:33:28 +01:00			`border-radius: 30%;`
			`display: flex;`
			`justify-content: center;`
			`align-items: center;`
			`/* flex wrap */`
			`flex-direction: row;`
			`flex-wrap: wrap;`

style updates 2024-03-21 23:32:44 +01:00			`height: calc(var(--tile-size) * 3);`
			`width: calc(var(--tile-size) * 3);`
fixes + style start 2024-02-24 21:33:28 +01:00
			`}`
			`#market {`
style updates 2024-03-21 23:32:44 +01:00			`height: calc(var(--tile-size) * 6);`
			`width: calc(var(--tile-size) * 6);`
fixes + style start 2024-02-24 21:33:28 +01:00			`}`
			`/* put the first element in the corner of the factory */`
			`.factory-name {`
			`border-radius: 20%;`
			`margin-top: 0;`
			`margin-left: 0;`
			`position: relative;`
			`top: 0;`
			`left: 0;`
style updates 2024-03-21 23:32:44 +01:00			`border: 2px solid var(--border-color);`
fixes + style start 2024-02-24 21:33:28 +01:00			`text-align: center;`
			`margin: 0.1em;`
			`width: 1.5em;`
			`height: 1.5em;`
			`overflow: hidden;`
			`text-align: center;`
			`vertical-align: middle;`
			`}`

			`.factory > * {`
			`border-radius: 10%;`
style updates 2024-03-21 23:32:44 +01:00			`border: 1px solid var(--border-color);`
fixes + style start 2024-02-24 21:33:28 +01:00			`text-align: center;`
			`margin: 0.1em;`
style updates 2024-03-21 23:32:44 +01:00			`width: var(--tile-size);`
			`height: var(--tile-size);`
fixes + style start 2024-02-24 21:33:28 +01:00			`overflow: hidden;`
			`text-align: center;`
			`vertical-align: middle;`
			`}`

style updates 2024-03-21 23:32:44 +01:00			`.player_area {`
			`border: 2px solid var(--border-color);`
			`border-radius: 20px;`
			`padding: 10px;`
			`margin: 10px;`
			`}`

prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`.wall {`
			`/* 55 grid /`
			`display: grid;`
			`grid-template-columns: repeat(5, 1fr);`
			`grid-template-rows: repeat(5, 1fr);`
			`gap: 0.1em;`
			`}`
			`.wall > * {`
style updates 2024-03-21 23:32:44 +01:00			`border: 1px solid var(--border-color);`
			`width: var(--tile-size);`
			`height: var(--tile-size);`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`text-align: center;`
			`margin-top: 0.1em;`
			`}`
			`.pattern_lines {`
			`display: flex;`
			`justify-content: space-around;`
			`flex-direction: column;`
			`align-items: start;`
			`}`
			`.pattern_line {`
			`display: flex;`
			`justify-content: right;`
fixes + style start 2024-02-24 21:33:28 +01:00			`flex-direction:row-reverse;`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`align-items:baseline;`
			`}`
			`.pattern_line > * {`
style updates 2024-03-21 23:32:44 +01:00			`border: 1px solid var(--border-color);`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`text-align: center;`
			`margin: 0.1em;`
style updates 2024-03-21 23:32:44 +01:00			`width: var(--tile-size);`
			`height: var(--tile-size);`
fixes + style start 2024-02-24 21:33:28 +01:00			`overflow: hidden;`
			`text-align: center;`
			`vertical-align: middle;`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`}`
style updates 2024-03-21 23:32:44 +01:00			`.floor_container {`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`display: flex;`
			`justify-content: left;`
			`flex-direction: row;`
			`align-items:baseline;`
			`}`
style updates 2024-03-21 23:32:44 +01:00			`.floor {`
			`border: 1px solid var(--border-color);`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`text-align: center;`
style updates 2024-03-21 23:32:44 +01:00			`width: var(--tile-size);`
			`height: var(--tile-size);`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`}`
style updates 2024-03-21 23:32:44 +01:00			`.floor_value {`
			`text-align: center;`
			`width: var(--tile-size);`
			`}`


prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00
global 2024-02-24 22:55:26 +01:00			`.blue_bg {`
style updates 2024-03-21 23:32:44 +01:00			`background-color: rgb(49, 157, 245, var(--bg-transparency));`
global 2024-02-24 22:55:26 +01:00			`}`
			`.yellow_bg {`
style updates 2024-03-21 23:32:44 +01:00			`background-color: rgb(247, 148, 62, var(--bg-transparency));`
global 2024-02-24 22:55:26 +01:00			`}`
			`.red_bg {`
style updates 2024-03-21 23:32:44 +01:00			`background-color: rgb(200, 50, 50, var(--bg-transparency));`
global 2024-02-24 22:55:26 +01:00			`}`
			`.black_bg {`
style updates 2024-03-21 23:32:44 +01:00			`background-color: rgb(30, 30, 30, var(--bg-transparency));`
global 2024-02-24 22:55:26 +01:00			`}`
			`.white_bg {`
style updates 2024-03-21 23:32:44 +01:00			`background-color:rgb(130, 130, 130, var(--bg-transparency));`
global 2024-02-24 22:55:26 +01:00			`}`

style updates 2024-03-21 23:32:44 +01:00
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`.blue {`
style updates 2024-03-21 23:32:44 +01:00			`border-radius: calc(var(--tile-size) * 0.2);`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`background-color: rgb(49, 157, 245);`
			`}`
			`.yellow {`
style updates 2024-03-21 23:32:44 +01:00			`border-radius: calc(var(--tile-size) * 0.2);`
			`background-color: rgb(247, 148, 62);`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`}`
			`.red {`
style updates 2024-03-21 23:32:44 +01:00			`border-radius: calc(var(--tile-size) * 0.2);`
			`background-color: rgb(200, 50, 50);`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`}`
			`.black {`
style updates 2024-03-21 23:32:44 +01:00			`border-radius: calc(var(--tile-size) * 0.2);`
			`background-color: rgb(30, 30, 30);`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`}`
			`.white {`
style updates 2024-03-21 23:32:44 +01:00			`border-radius: calc(var(--tile-size) * 0.2);`
			`background-color:rgb(130, 130, 130);`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`}`
			`.start {`
style updates 2024-03-21 23:32:44 +01:00			`border-radius: calc(var(--tile-size) * 0.2);`
			`background-color: rgb(165, 1, 155);`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`}`

style updates 2024-03-21 23:32:44 +01:00

prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`</style>`
init 2024-02-14 21:52:29 +01:00			`</head>`
			`<body>`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`<div class="flex-row">`
			`<p>Number of Players: {{ gamestate.n_players }}</p>`
			`<p>Current Player: {{ gamestate.current_player }}</p>`
style updates 2024-03-21 23:32:44 +01:00			`<p>Playing as: {{ player_name }}</p>`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`<p>Game Status: {% if gamestate.game_end %}Ended{% else %}Active{% endif %}</p>`
			`<p>Rounds: {{ gamestate.rounds }}</p>`
			`<p>Days: {{ gamestate.days }}</p>`
			`</div>`
init 2024-02-14 21:52:29 +01:00
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`<div class="flex-row">`
fixes + style start 2024-02-24 21:33:28 +01:00			`<!-- market -->`
			`<div class="flex-col">`
			`<div class="factory-name">M</div>`
			`<div class="factory" id="market">`
			`{% for color, number in gamestate.market.items() %}`
			`{% if number > 0 %}`
			`{% for i in range(0, number) %}`
			`<div onclick="selectTile(this)" class="{{ color }}">{{ color[:1] }}</div>`
			`{% endfor %}`
			`{% endif %}`
			`{% endfor %}`
			`</div>`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`</div>`
fixes + style start 2024-02-24 21:33:28 +01:00			`<!-- factories -->`
			`{% for factory in gamestate.factories %}`
			`<div class="flex col">`
			`<div class="factory-name">{{ loop.index }}</div>`
			`<div class="factory" id="factory{{ loop.index }}">`
			`{% for color, number in factory.items() %}`
			`{% if number > 0 %}`
			`{% for i in range(0, number) %}`
			`<div onclick="selectTile(this)" class="{{ color }}">{{ color[:1] }}</div>`
			`{% endfor %}`
			`{% endif %}`
			`{% endfor %}`
			`</div>`
			`</div>`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`{% endfor %}`
			`</div>`
fixes + style start 2024-02-24 21:33:28 +01:00
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`<div class="flex-row">`
init 2024-02-14 21:52:29 +01:00			`{% for name, player_data in gamestate.players.items() %}`
style updates 2024-03-21 23:32:44 +01:00			`<div class="flex-col player_area">`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`<div class="flex-row">`
style updates 2024-03-21 23:32:44 +01:00			`{% if gamestate.current_player == name %}`
			`<p>◉</p>`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`{% else %}`
style updates 2024-03-21 23:32:44 +01:00			`<p>○</p>`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`{% endif %}`
style updates 2024-03-21 23:32:44 +01:00			`{% if player_name == name %}`
			`<div><strong>{{ name }}</strong></div>`
			`{% else %}`
			`<div>{{ name }}</div>`
fixes + style start 2024-02-24 21:33:28 +01:00			`{% endif %}`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`{% if player_data.ready %}`
fixes + style start 2024-02-24 21:33:28 +01:00			`<p>Ready</p>`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`{% endif %}`
			`<p>Points: {{ player_data.points }}</p>`
			`</div>`

			`<div class="flex-row">`
			`<div class="flex-col">`
			`<!-- <h3>Pattern Lines</h3> -->`
			`{% for line in player_data.pattern_lines %}`
header cleanup + fixes + websocket moves 2024-02-25 20:41:38 +01:00			`<div class="pattern_line" onclick="selectPatternLine(this)" value="{{loop.index}}">`
fixes + style start 2024-02-24 21:33:28 +01:00			`<!-- TODO: Fix this to not fill empty spaces. -->`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`{% for i in range(0, loop.index) %}`
fixes + style start 2024-02-24 21:33:28 +01:00			`{% if line.number > i %}`
header cleanup + fixes + websocket moves 2024-02-25 20:41:38 +01:00			`<div class="{{ line.color }}" >{{ line.color[:1] }}</div>`
fixes + style start 2024-02-24 21:33:28 +01:00			`{% else %}`
header cleanup + fixes + websocket moves 2024-02-25 20:41:38 +01:00			`<div >_</div>`
fixes + style start 2024-02-24 21:33:28 +01:00			`{% endif %}`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`{% endfor %}`
			`</div>`
fixes + style start 2024-02-24 21:33:28 +01:00			`{% endfor %}`
			`</div>`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`<div class="flex-col">`
			`<!-- <h3>Wall</h3> -->`
global 2024-02-24 22:55:26 +01:00			`<div class="wall">`
			`{% set colors_base = ['blue', 'yellow', 'red', 'black', 'white'] %}`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`{% for row in player_data.wall %}`
global 2024-02-24 22:55:26 +01:00			`{% set colors = colors_base[-loop.index0:] + colors_base[:-loop.index0] %}`
			`{% for cell in row %}`
			`{% set color = colors[loop.index0] + "_bg" %}`
			`<div class="{{ color }}">{% if cell %}{{ color[:1] }}{% else %}{{ '_' }}{% endif %}</div>`
			`{% endfor %}`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`{% endfor %}`
			`</div>`
			`</div>`
			`</div>`
init 2024-02-14 21:52:29 +01:00
style updates 2024-03-21 23:32:44 +01:00			`<div class="floor_container" onclick="selectPatternLine(this)" value="floor">`
fixes + style start 2024-02-24 21:33:28 +01:00			`{% set floor_count = 0 %}`
style updates 2024-03-21 23:32:44 +01:00			`{% set floor_negative_values = [1,1,2,2,2,3,3] %}`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`{% for color, number in player_data.floor.items() %}`
fixes + style start 2024-02-24 21:33:28 +01:00			`{% if number > 0 %}`
			`{% set floor_count = floor_count + number %}`
			`{% for i in range(0, number) %}`
style updates 2024-03-21 23:32:44 +01:00			`<!-- get index of item and set value to te value of floor_neg.. -->`
			`<div class="flex-col">`
			`<div class="floor_value">-{{ floor_negative_values[i] }}</div>`
			`<div class="{{ color }} floor">{{ color[:1] }}</div>`
			`</div>`
fixes + style start 2024-02-24 21:33:28 +01:00			`{% endfor %}`
			`{% endif %}`
			`{% endfor %}`
			`{% if floor_count < 7 %}`
			`{% set floor_blank_tiles = 7 - floor_count %}`
			`{% for i in range(0, floor_blank_tiles) %}`
style updates 2024-03-21 23:32:44 +01:00			`<div class="flex-col">`
			`<div class="floor_value">-{{ floor_negative_values[i] }}</div>`
			`<div class="floor">_</div>`
			`</div>`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`{% endfor %}`
fixes + style start 2024-02-24 21:33:28 +01:00			`{% endif %}`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`</div>`
style updates 2024-03-21 23:32:44 +01:00
			`{% if player_name == name %}`
			`<form id='moveForm'</form>>`
			`<div class="flex-col">`
			`<div class="flex-row move_select">`
			`<div>`
			`<label for="source">from:</label>`
			`<select id="source" name="source">`
			`<option value="market">Market</option>`
			`{% for factory in gamestate.factories %}`
			`<option value="{{ loop.index }}">Factory {{ loop.index }}</option>`
			`{% endfor %}`
			`</select>`
			`</div>`

			`<div>`
			`<label for="color">Color:</label>`
			`<select id="color" name="color">`
			`<option value="red">Red</option>`
			`<option value="blue">Blue</option>`
			`<option value="yellow">Yellow</option>`
			`<option value="black">Black</option>`
			`<option value="white">White</option>`
			`</select>`
			`</div>`

			`<div>`
			`<label for="destination">to:</label>`
			`<select id="destination" name="destination">`
			`<option value="1">Line 1</option>`
			`<option value="2">Line 2</option>`
			`<option value="3">Line 3</option>`
			`<option value="4">Line 4</option>`
			`<option value="5">Line 5</option>`
			`<option value="floor">Floor</option>`
			`</select>`
			`</div>`
			`</div>`

			`<input type="submit" value="Submit Move" style="margin-top: 1em;">`
			`</div>`
			`</form>`
			`{% endif %}`

prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`</div>`
			`{% endfor %}`
			`</div>`

fixes + style start 2024-02-24 21:33:28 +01:00


prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00
init 2024-02-14 21:52:29 +01:00			`{% if player_name %}`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`<!-- form for submitting a move, a move is a selection of marcet or factory, what color, and what patternline or floor it goes to. -->`
style updates 2024-03-21 23:32:44 +01:00
fixes + style start 2024-02-24 21:33:28 +01:00			`<!-- button to go to next player -->`
			`{% set current_index = gamestate.player_names.index(player_name) %}`
			`{% set next_index = current_index + 1 if current_index + 1 < gamestate.player_names\|length else 0 %}`
			`<a href="/game/{{ game_id }}/player/{{ gamestate.player_names[next_index] }}">Next Player</a>`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00

init 2024-02-14 21:52:29 +01:00			`{% endif %}`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00

header cleanup + fixes + websocket moves 2024-02-25 20:41:38 +01:00
style updates 2024-03-21 23:32:44 +01:00			`<script src="/socket.io.js"></script>`
prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`<script>`
			`console.log('Game ID: {{ game_id }}');`
			`console.log('Player Name: {{ player_name }}');`
			`console.log('Gamestate: {{ gamestate }}');`
fixes + style start 2024-02-24 21:33:28 +01:00
			`function selectTile(tile) {`
			`var source = tile.parentElement.id;`
			`if (source == 'market') {`
			`source = 'market';`
			`}else {`
			`source = source.replace('factory', '');`
			`}`
			`var color = tile.getAttribute('class');`
			`console.log('Selected tile: ' + color + ' from ' + source);`
			`//get elements of the form`
			`var sourceElement = document.getElementById('source');`
			`var colorElement = document.getElementById('color');`
			`//select the selected source and color`
			`console.log(sourceElement);`
			`console.log(colorElement);`

			`//find the element in the dropdowns with the same value as the source and color`
			`var sourceOption = sourceElement.querySelector('option[value="' + source + '"]');`
			`var colorOption = colorElement.querySelector('option[value="' + color + '"]');`
			`console.log(sourceOption);`
			`console.log(colorOption);`
			`//set the selected attribute to true`
			`sourceOption.selected = true;`
			`colorOption.selected = true;`
			`}`

header cleanup + fixes + websocket moves 2024-02-25 20:41:38 +01:00			`function selectPatternLine(pattern_line) {`
			`//get the value of the pattern line element`
			`value = pattern_line.getAttribute('value');`
			`console.log('Selected pattern line: ' + pattern_line + ' with value: ' + value);`
fixes + style start 2024-02-24 21:33:28 +01:00			`var destinationElement = document.getElementById('destination');`
header cleanup + fixes + websocket moves 2024-02-25 20:41:38 +01:00			`var destinationOption = destinationElement.querySelector('option[value="' + value + '"]');`
fixes + style start 2024-02-24 21:33:28 +01:00			`destinationOption.selected = true;`
			`}`

header cleanup + fixes + websocket moves 2024-02-25 20:41:38 +01:00			`// refresh the page by listening to websocket events`

			`game_id = '{{ game_id }}';`
			`player_name = '{{ player_name }}';`

			`var socket = io();`

			`// send a message to the server in the message name space`
			`socket.emit('join', {game_id: game_id});`

			`socket.addEventListener('move', function (event) {`
			`console.log('Game update received: ' + event);`
			`window.location.reload();`
			`});`

			`// if we wana go over to using websocket entirely to send the move`
			`let form = document.querySelector('#moveForm');`
			`form.addEventListener('submit', function(event) {`
			`// Prevent the form from being submitted normally`
			`event.preventDefault();`
			`// Create a FormData object from the form`
			`let formData = new FormData(form);`
			`// Convert the FormData to a plain object`
			`let data = {};`
			`formData.forEach((value, key) => data[key] = value);`
			`console.log(data);`
			`socket.emit('move', {game_id: game_id, player_name, move: data});`
			`});`

prettyfy, and rudimentary moves 2024-02-15 12:58:18 +01:00			`</script>`


init 2024-02-14 21:52:29 +01:00			`</body>`
			`</html>`