224 lines
7.0 KiB
HTML
224 lines
7.0 KiB
HTML
<!-- HTML for game.html -->
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Game</title>
|
|
<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>
|
|
</head>
|
|
<body>
|
|
<h1>Game</h1>
|
|
<p>Game ID: {{ game_id }}</p>
|
|
<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>
|
|
|
|
|
|
<h2>Market</h2>
|
|
<div class="flex-row">
|
|
{% for color, number in gamestate.market.items() %}
|
|
<div class="{{ color }}">{{ color }}: {{ number }}</div>
|
|
{% endfor %}
|
|
</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>
|
|
|
|
<h1>Players:</h1>
|
|
|
|
|
|
<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 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>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
{% 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="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 %}
|
|
|
|
{% endif %}
|
|
|
|
|
|
|
|
<script>
|
|
console.log('Game ID: {{ game_id }}');
|
|
console.log('Player Name: {{ player_name }}');
|
|
console.log('Gamestate: {{ gamestate }}');
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |