adriangl
/
ozai-webui
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity
ozai-webui/templates/game.html

224 lines
7.0 KiB
HTML
Raw Normal View History

init
2024-02-14 21:52:29 +01:00
<!-- HTML for game.html -->
<!DOCTYPE html>
<html>
<head>
<title>Game</title>
prettyfy, and rudimentary moves
2024-02-15 12:58:18 +01:00
<style>
/* 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;
}
.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: 1em;
height: 1em;
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;
align-items:baseline;
}
.pattern_line > * {
border: 1px solid black;
text-align: center;
margin: 0.1em;
width: 1em;
height: 1em;
}
.floor {
display: flex;
justify-content: left;
flex-direction: row;
align-items:baseline;
}
.floor > * {
border: 1px solid black;
text-align: center;
}
.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(216, 169, 112);
}
.start {
background-color: rgb(255, 1, 238);
}
</style>
init
2024-02-14 21:52:29 +01:00
</head>
<body>
<h1>Game</h1>
<p>Game ID: {{ game_id }}</p>
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>
<p>Starting Player: {{ gamestate.starting_player }}</p>
<p>Player Names: {{ gamestate.player_names | join(', ') }}</p>
<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
<h2>Market</h2>
prettyfy, and rudimentary moves
2024-02-15 12:58:18 +01:00
<div class="flex-row">
{% for color, number in gamestate.market.items() %}
<div class="{{ color }}">{{ color }}: {{ number }}</div>
init
2024-02-14 21:52:29 +01:00
{% endfor %}
prettyfy, and rudimentary moves
2024-02-15 12:58:18 +01:00
</div>
<div class="flex-row">
{% for factory in gamestate.factories %}
<div class="flex-row">
<h2>factory: {{ loop.index }}</h2>
{% for color, number in factory.items() %}
<div class="{{ color }}">{{ color }}: {{ number }}</div>
{% endfor %}
</div>
{% endfor %}
</div>
init
2024-02-14 21:52:29 +01:00
<h1>Players:</h1>
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() %}
prettyfy, and rudimentary moves
2024-02-15 12:58:18 +01:00
<div class="flex-col">
<div class="flex-row">
{% if player_name == name %}
<h2>{{ player_name }} (You)</h2>
{% else %}
<h2>{{ name }}</h2>
{% endif %}
{% if player_data.ready %}
<p>Ready: {{ player_data.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">
{% for i in range(0, loop.index) %}
<div class="{{ line.color }}">{% if line.color %}{{ line.color }}{% else %}{{ '_' }}{% endif %}</div>
{% 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 }}{% else %}{{ '_' }}{% endif %}</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
init
2024-02-14 21:52:29 +01:00
prettyfy, and rudimentary moves
2024-02-15 12:58:18 +01:00
<h3>Floor</h3>
<div class="floor">
{% for color, number in player_data.floor.items() %}
<div class="{{ color }}">{{ color }}: {{ number }}</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
init
2024-02-14 21:52:29 +01:00
{% if player_name %}
<h1>Play area</h1>
<p>Playing as: {{ player_name }}</p>
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. -->
<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="0">Pattern Line 1</option>
<option value="1">Pattern Line 2</option>
<option value="2">Pattern Line 3</option>
<option value="3">Pattern Line 4</option>
<option value="4">Pattern Line 5</option>
<option value="floor">Floor</option>
</select>
<input type="submit" value="Submit Move">
</form>
{% if move_status %}
<div>{{ move_status }}</div>
{% endif %}
init
2024-02-14 21:52:29 +01:00
{% endif %}
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 }}');
</script>
init
2024-02-14 21:52:29 +01:00
</body>
</html>