ozai-webui/templates/game.html

370 lines
12 KiB
HTML

<!-- HTML for game.html -->
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
<style>
a {
display: inline-block;
text-decoration: none;
color: black;
background-color: #c3bfbf;
border-radius: 5px;
font-weight: bold;
font-size: 1.5em; /* increase font size */
}
a:hover {
background-color: #868787;
}
/* flexbox class */
.flex-row {
display: flex;
justify-content: left;
flex-direction: row;
flex-wrap: wrap;
align-items:baseline;
}
.flex-row > * {
margin-right: 5px;
}
.flex-col {
display: flex;
justify-content:space-around;
flex-direction: column;
}
.factory {
overflow: hidden;
border: 2px solid black;
border-radius: 30%;
display: flex;
justify-content: center;
align-items: center;
/* flex wrap */
flex-direction: row;
flex-wrap: wrap;
height: 5em;
width: 5em;
}
#market {
height: 10em;
width: 10em;
}
/* 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 black;
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 black;
text-align: center;
margin: 0.1em;
width: 1.5em;
height: 1.5em;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
.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 black;
width: 1.5em;
height: 1.5em;
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 black;
text-align: center;
margin: 0.1em;
width: 1.5em;
height: 1.5em;
overflow: hidden;
text-align: center;
vertical-align: middle;
}
.floor {
display: flex;
justify-content: left;
flex-direction: row;
align-items:baseline;
}
.floor > * {
border: 1px solid black;
text-align: center;
width: 1.5em;
height: 1.5em;
}
.blue {
background-color: rgb(49, 157, 245);
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
.black {
background-color: rgb(93, 93, 93);
}
.white {
background-color:rgb(208, 202, 195);
}
.start {
background-color: rgb(255, 1, 238);
}
</style>
</head>
<body>
<div class="flex-row">
<p>Number of Players: {{ gamestate.n_players }}</p>
<p>Current Player: {{ gamestate.current_player }}</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">
<div class="flex-row">
{% if player_name == name %}
<h2>{{ player_name }} (You)</h2>
{% else %}
<h2>{{ name }}</h2>
{% endif %}
{% if gamestate.current_player == name %}
<p>(current)</p>
{% 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">
<!-- 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">
{% for row in player_data.wall %}
{% for cell in row %}
<div class="{{ cell }}">{% if cell %}{{ cell[:1] }}{% else %}{{ '_' }}{% endif %}</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
<div class="flex-row">
<div style="width: 0.7em;">1</div>
<div style="width: 0.7em;">1</div>
<div style="width: 0.7em;">2</div>
<div style="width: 0.7em;">2</div>
<div style="width: 0.7em;">2</div>
<div style="width: 0.7em;">3</div>
<div style="width: 0.7em;">3</div>
</div>
<div class="floor">
{% set floor_count = 0 %}
{% for color, number in player_data.floor.items() %}
{% if number > 0 %}
{% set floor_count = floor_count + number %}
{% for i in range(0, number) %}
<div class="{{ color }}">{{ color[:1] }}</div>
{% endfor %}
{% endif %}
{% endfor %}
{% if floor_count < 7 %}
{% set floor_blank_tiles = 7 - floor_count %}
{% for i in range(0, floor_blank_tiles) %}
<div>_</div>
{% endfor %}
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% if player_name %}
<h1>Play area</h1>
<p>Playing as: {{ player_name }}</p>
<!-- form for submitting a move, a move is a selection of marcet or factory, what color, and what patternline or floor it goes to. -->
<form action="/game/{{ game_id }}/player/{{ player_name }}" method="POST">
<label for="source">Source:</label>
<select id="source" name="source">
<option value="market">Market {{ gamestate.market }}</option>
{% for factory in gamestate.factories %}
<option value="{{ loop.index }}">Factory {{ loop.index }} ({{ factory }})</option>
{% endfor %}
</select>
<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>
<label for="destination">Destination:</label>
<select id="destination" name="destination">
<option value="1">Pattern Line 1</option>
<option value="2">Pattern Line 2</option>
<option value="3">Pattern Line 3</option>
<option value="4">Pattern Line 4</option>
<option value="5">Pattern Line 5</option>
<option value="floor">Floor</option>
</select>
<input type="submit" value="Submit Move">
</form>
<!-- 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>
{% if move_status %}
<div>{{ move_status }}</div>
{% endif %}
{% endif %}
<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 select_pattern_line(pattern_line) {
pattern_line = pattern_line.getAttribute('pattern_line');
console.log('Selected pattern line: ' + pattern_line);
var destinationElement = document.getElementById('destination');
var destinationOption = destinationElement.querySelector('option[value="' + pattern_line + '"]');
destinationOption.selected = true;
}
</script>
</body>
</html>