2024-02-14 21:52:29 +01:00
|
|
|
<!-- HTML for game.html -->
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2024-02-25 20:41:38 +01:00
|
|
|
<title>Ozai:game</title>
|
|
|
|
|
<link rel="icon" type="image/png" href="/azul-flake.png">
|
2024-02-15 12:58:18 +01:00
|
|
|
<style>
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-24 21:33:28 +01:00
|
|
|
a {
|
2024-03-21 23:32:44 +01:00
|
|
|
padding: 1em;
|
2024-02-24 21:33:28 +01:00
|
|
|
display: inline-block;
|
|
|
|
|
text-decoration: none;
|
2024-03-21 23:32:44 +01:00
|
|
|
color: #aba4f6;
|
|
|
|
|
background-color: #1919a7;
|
|
|
|
|
border-radius: 1em;
|
2024-02-24 21:33:28 +01:00
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 1.5em; /* increase font size */
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
a:hover {
|
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 {
|
2024-03-22 00:10:02 +01:00
|
|
|
font-size: 1.2em;
|
2024-03-21 23:32:44 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.move_select {
|
2024-03-22 00:10:02 +01:00
|
|
|
margin-top: 0.5em;
|
2024-03-21 23:32:44 +01:00
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items: baseline;
|
2024-02-24 21:33:28 +01:00
|
|
|
}
|
2024-03-21 23:32:44 +01:00
|
|
|
|
2024-02-15 12:58:18 +01:00
|
|
|
/* flexbox class */
|
|
|
|
|
.flex-row {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: left;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
flex-wrap: wrap;
|
2024-03-21 23:32:44 +01:00
|
|
|
align-items: baseline;
|
|
|
|
|
}
|
2024-02-15 12:58:18 +01:00
|
|
|
|
2024-03-22 00:10:02 +01:00
|
|
|
@media (max-width: 40em) {
|
2024-03-21 23:32:44 +01:00
|
|
|
.flex-row {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
2024-02-15 12:58:18 +01:00
|
|
|
}
|
|
|
|
|
.flex-row > * {
|
2024-03-21 23:32:44 +01:00
|
|
|
margin-right: 1em;
|
2024-02-15 12:58:18 +01:00
|
|
|
}
|
|
|
|
|
.flex-col {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content:space-around;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
}
|
2024-02-24 21:33:28 +01:00
|
|
|
|
|
|
|
|
.factory {
|
|
|
|
|
overflow: hidden;
|
2024-03-22 00:10:02 +01:00
|
|
|
border: 0.2em solid var(--border-color);
|
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;
|
|
|
|
|
|
2024-03-21 23:32:44 +01:00
|
|
|
height: calc(var(--tile-size) * 3);
|
|
|
|
|
width: calc(var(--tile-size) * 3);
|
2024-02-24 21:33:28 +01:00
|
|
|
|
|
|
|
|
}
|
|
|
|
|
#market {
|
2024-03-22 00:10:02 +01:00
|
|
|
height: calc(var(--tile-size) * 7);
|
|
|
|
|
width: calc(var(--tile-size) * 7);
|
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;
|
2024-03-22 00:10:02 +01:00
|
|
|
border: 0.2em solid var(--border-color);
|
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%;
|
2024-03-22 00:10:02 +01:00
|
|
|
border: 0.15em solid var(--border-color);
|
2024-02-24 21:33:28 +01:00
|
|
|
text-align: center;
|
|
|
|
|
margin: 0.1em;
|
2024-03-21 23:32:44 +01:00
|
|
|
width: var(--tile-size);
|
|
|
|
|
height: var(--tile-size);
|
2024-02-24 21:33:28 +01:00
|
|
|
overflow: hidden;
|
|
|
|
|
text-align: center;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
|
|
|
|
|
2024-03-21 23:32:44 +01:00
|
|
|
.player_area {
|
2024-03-22 00:10:02 +01:00
|
|
|
border: 0.2em solid var(--border-color);
|
|
|
|
|
border-radius: 2em;
|
|
|
|
|
padding: 1em;
|
|
|
|
|
margin: 1em;
|
2024-03-21 23:32:44 +01:00
|
|
|
}
|
|
|
|
|
|
2024-02-15 12:58:18 +01:00
|
|
|
.wall {
|
|
|
|
|
/* 5*5 grid */
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: repeat(5, 1fr);
|
|
|
|
|
grid-template-rows: repeat(5, 1fr);
|
|
|
|
|
gap: 0.1em;
|
|
|
|
|
}
|
|
|
|
|
.wall > * {
|
2024-03-22 00:10:02 +01:00
|
|
|
border: 0.15em solid var(--border-color);
|
2024-03-21 23:32:44 +01:00
|
|
|
width: var(--tile-size);
|
|
|
|
|
height: var(--tile-size);
|
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;
|
2024-02-24 21:33:28 +01:00
|
|
|
flex-direction:row-reverse;
|
2024-02-15 12:58:18 +01:00
|
|
|
align-items:baseline;
|
|
|
|
|
}
|
|
|
|
|
.pattern_line > * {
|
2024-03-22 00:10:02 +01:00
|
|
|
border: 0.15em solid var(--border-color);
|
2024-02-15 12:58:18 +01:00
|
|
|
text-align: center;
|
|
|
|
|
margin: 0.1em;
|
2024-03-21 23:32:44 +01:00
|
|
|
width: var(--tile-size);
|
|
|
|
|
height: var(--tile-size);
|
2024-02-24 21:33:28 +01:00
|
|
|
overflow: hidden;
|
|
|
|
|
text-align: center;
|
|
|
|
|
vertical-align: middle;
|
2024-02-15 12:58:18 +01:00
|
|
|
}
|
2024-03-21 23:32:44 +01:00
|
|
|
.floor_container {
|
2024-02-15 12:58:18 +01:00
|
|
|
display: flex;
|
|
|
|
|
justify-content: left;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
align-items:baseline;
|
|
|
|
|
}
|
2024-03-21 23:32:44 +01:00
|
|
|
.floor {
|
2024-03-22 00:10:02 +01:00
|
|
|
border: 0.15em solid var(--border-color);
|
2024-02-15 12:58:18 +01:00
|
|
|
text-align: center;
|
2024-03-21 23:32:44 +01:00
|
|
|
width: var(--tile-size);
|
|
|
|
|
height: var(--tile-size);
|
2024-02-15 12:58:18 +01:00
|
|
|
}
|
2024-03-21 23:32:44 +01:00
|
|
|
.floor_value {
|
|
|
|
|
text-align: center;
|
|
|
|
|
width: var(--tile-size);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2024-02-15 12:58:18 +01:00
|
|
|
|
2024-02-24 22:55:26 +01:00
|
|
|
.blue_bg {
|
2024-03-21 23:32:44 +01:00
|
|
|
background-color: rgb(49, 157, 245, var(--bg-transparency));
|
2024-02-24 22:55:26 +01:00
|
|
|
}
|
|
|
|
|
.yellow_bg {
|
2024-03-21 23:32:44 +01:00
|
|
|
background-color: rgb(247, 148, 62, var(--bg-transparency));
|
2024-02-24 22:55:26 +01:00
|
|
|
}
|
|
|
|
|
.red_bg {
|
2024-03-21 23:32:44 +01:00
|
|
|
background-color: rgb(200, 50, 50, var(--bg-transparency));
|
2024-02-24 22:55:26 +01:00
|
|
|
}
|
|
|
|
|
.black_bg {
|
2024-03-21 23:32:44 +01:00
|
|
|
background-color: rgb(30, 30, 30, var(--bg-transparency));
|
2024-02-24 22:55:26 +01:00
|
|
|
}
|
|
|
|
|
.white_bg {
|
2024-03-21 23:32:44 +01:00
|
|
|
background-color:rgb(130, 130, 130, var(--bg-transparency));
|
2024-02-24 22:55:26 +01:00
|
|
|
}
|
|
|
|
|
|
2024-03-21 23:32:44 +01:00
|
|
|
|
2024-02-15 12:58:18 +01:00
|
|
|
.blue {
|
2024-03-21 23:32:44 +01:00
|
|
|
border-radius: calc(var(--tile-size) * 0.2);
|
2024-02-15 12:58:18 +01:00
|
|
|
background-color: rgb(49, 157, 245);
|
|
|
|
|
}
|
|
|
|
|
.yellow {
|
2024-03-21 23:32:44 +01:00
|
|
|
border-radius: calc(var(--tile-size) * 0.2);
|
|
|
|
|
background-color: rgb(247, 148, 62);
|
2024-02-15 12:58:18 +01:00
|
|
|
}
|
|
|
|
|
.red {
|
2024-03-21 23:32:44 +01:00
|
|
|
border-radius: calc(var(--tile-size) * 0.2);
|
|
|
|
|
background-color: rgb(200, 50, 50);
|
2024-02-15 12:58:18 +01:00
|
|
|
}
|
|
|
|
|
.black {
|
2024-03-21 23:32:44 +01:00
|
|
|
border-radius: calc(var(--tile-size) * 0.2);
|
|
|
|
|
background-color: rgb(30, 30, 30);
|
2024-02-15 12:58:18 +01:00
|
|
|
}
|
|
|
|
|
.white {
|
2024-03-21 23:32:44 +01:00
|
|
|
border-radius: calc(var(--tile-size) * 0.2);
|
|
|
|
|
background-color:rgb(130, 130, 130);
|
2024-02-15 12:58:18 +01:00
|
|
|
}
|
|
|
|
|
.start {
|
2024-03-21 23:32:44 +01:00
|
|
|
border-radius: calc(var(--tile-size) * 0.2);
|
|
|
|
|
background-color: rgb(165, 1, 155);
|
2024-02-15 12:58:18 +01:00
|
|
|
}
|
|
|
|
|
|
2024-03-21 23:32:44 +01:00
|
|
|
|
|
|
|
|
|
2024-02-15 12:58:18 +01:00
|
|
|
</style>
|
2024-02-14 21:52:29 +01:00
|
|
|
</head>
|
|
|
|
|
<body>
|
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>
|
2024-03-21 23:32:44 +01:00
|
|
|
<p>Playing as: {{ player_name }}</p>
|
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>
|
2024-02-14 21:52:29 +01:00
|
|
|
|
2024-02-15 12:58:18 +01:00
|
|
|
<div class="flex-row">
|
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>
|
2024-02-15 12:58:18 +01:00
|
|
|
</div>
|
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>
|
2024-02-15 12:58:18 +01:00
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
2024-02-24 21:33:28 +01:00
|
|
|
|
2024-02-15 12:58:18 +01:00
|
|
|
<div class="flex-row">
|
2024-02-14 21:52:29 +01:00
|
|
|
{% for name, player_data in gamestate.players.items() %}
|
2024-03-21 23:32:44 +01:00
|
|
|
<div class="flex-col player_area">
|
2024-02-15 12:58:18 +01:00
|
|
|
<div class="flex-row">
|
2024-03-21 23:32:44 +01:00
|
|
|
{% if gamestate.current_player == name %}
|
|
|
|
|
<p>◉</p>
|
2024-02-15 12:58:18 +01:00
|
|
|
{% else %}
|
2024-03-21 23:32:44 +01:00
|
|
|
<p>○</p>
|
2024-02-15 12:58:18 +01:00
|
|
|
{% endif %}
|
2024-03-21 23:32:44 +01:00
|
|
|
{% if player_name == name %}
|
|
|
|
|
<div><strong>{{ name }}</strong></div>
|
|
|
|
|
{% else %}
|
|
|
|
|
<div>{{ name }}</div>
|
2024-02-24 21:33:28 +01:00
|
|
|
{% endif %}
|
2024-02-15 12:58:18 +01:00
|
|
|
{% if player_data.ready %}
|
2024-02-24 21:33:28 +01:00
|
|
|
<p>Ready</p>
|
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 %}
|
2024-02-25 20:41:38 +01:00
|
|
|
<div class="pattern_line" onclick="selectPatternLine(this)" value="{{loop.index}}">
|
2024-02-24 21:33:28 +01:00
|
|
|
<!-- TODO: Fix this to not fill empty spaces. -->
|
2024-02-15 12:58:18 +01:00
|
|
|
{% for i in range(0, loop.index) %}
|
2024-02-24 21:33:28 +01:00
|
|
|
{% if line.number > i %}
|
2024-02-25 20:41:38 +01:00
|
|
|
<div class="{{ line.color }}" >{{ line.color[:1] }}</div>
|
2024-02-24 21:33:28 +01:00
|
|
|
{% else %}
|
2024-02-25 20:41:38 +01:00
|
|
|
<div >_</div>
|
2024-02-24 21:33:28 +01:00
|
|
|
{% endif %}
|
2024-02-15 12:58:18 +01:00
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
2024-02-24 21:33:28 +01:00
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
2024-02-15 12:58:18 +01:00
|
|
|
<div class="flex-col">
|
|
|
|
|
<!-- <h3>Wall</h3> -->
|
2024-02-24 22:55:26 +01:00
|
|
|
<div class="wall">
|
|
|
|
|
{% set colors_base = ['blue', 'yellow', 'red', 'black', 'white'] %}
|
2024-02-15 12:58:18 +01:00
|
|
|
{% for row in player_data.wall %}
|
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 %}
|
2024-02-15 12:58:18 +01:00
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-02-14 21:52:29 +01:00
|
|
|
|
2024-03-21 23:32:44 +01:00
|
|
|
<div class="floor_container" onclick="selectPatternLine(this)" value="floor">
|
2024-02-24 21:33:28 +01:00
|
|
|
{% set floor_count = 0 %}
|
2024-03-21 23:32:44 +01:00
|
|
|
{% set floor_negative_values = [1,1,2,2,2,3,3] %}
|
2024-02-15 12:58:18 +01:00
|
|
|
{% for color, number in player_data.floor.items() %}
|
2024-02-24 21:33:28 +01:00
|
|
|
{% if number > 0 %}
|
|
|
|
|
{% set floor_count = floor_count + number %}
|
|
|
|
|
{% for i in range(0, number) %}
|
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>
|
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) %}
|
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>
|
2024-02-15 12:58:18 +01:00
|
|
|
{% endfor %}
|
2024-02-24 21:33:28 +01:00
|
|
|
{% endif %}
|
2024-02-15 12:58:18 +01:00
|
|
|
</div>
|
2024-03-21 23:32:44 +01:00
|
|
|
|
|
|
|
|
{% if player_name == name %}
|
2024-03-22 00:10:02 +01:00
|
|
|
<form id='moveForm'</form>
|
2024-03-21 23:32:44 +01:00
|
|
|
<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 %}
|
|
|
|
|
|
2024-02-15 12:58:18 +01:00
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-02-24 21:33:28 +01:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2024-02-15 12:58:18 +01:00
|
|
|
|
2024-02-14 21:52:29 +01:00
|
|
|
{% if player_name %}
|
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. -->
|
2024-03-21 23:32:44 +01:00
|
|
|
|
2024-02-24 21:33:28 +01:00
|
|
|
<!-- button to go to next player -->
|
2024-03-22 00:10:02 +01:00
|
|
|
|
|
|
|
|
{% if local_game %}
|
2024-02-24 21:33:28 +01:00
|
|
|
{% 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>
|
2024-03-22 00:10:02 +01:00
|
|
|
{% endif %}
|
2024-02-15 12:58:18 +01:00
|
|
|
|
2024-02-14 21:52:29 +01:00
|
|
|
{% endif %}
|
2024-02-15 12:58:18 +01:00
|
|
|
|
|
|
|
|
|
2024-02-25 20:41:38 +01:00
|
|
|
|
2024-03-21 23:32:44 +01:00
|
|
|
<script src="/socket.io.js"></script>
|
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 }}');
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
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);
|
2024-02-24 21:33:28 +01:00
|
|
|
var destinationElement = document.getElementById('destination');
|
2024-02-25 20:41:38 +01:00
|
|
|
var destinationOption = destinationElement.querySelector('option[value="' + value + '"]');
|
2024-02-24 21:33:28 +01:00
|
|
|
destinationOption.selected = true;
|
|
|
|
|
}
|
|
|
|
|
|
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});
|
2024-03-22 00:10:02 +01:00
|
|
|
|
|
|
|
|
// if local_game is tru change player
|
|
|
|
|
//{% if local_game %}
|
|
|
|
|
let nextPlayer = '{{ gamestate.player_names[gamestate.player_names.index(player_name) + 1 if gamestate.player_names.index(player_name) + 1 < gamestate.player_names|length else 0] }}';
|
|
|
|
|
window.location.href = '/game/{{ game_id }}/player/' + nextPlayer;
|
|
|
|
|
//{% endif %}
|
|
|
|
|
|
2024-02-25 20:41:38 +01:00
|
|
|
});
|
|
|
|
|
|
2024-02-15 12:58:18 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
2024-02-14 21:52:29 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
