ozai-webui/templates/join_game.html

87 lines
2.1 KiB
HTML

<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<title>Ozai webui:Join Game</title>
<style>
* {
box-sizing: border-box;
margin-left: 3em;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
form {
margin-top: 20px;
}
select, input[type="submit"] {
padding: 10px;
margin-top: 10px;
}
input[type="submit"] {
background-color: #3779fd;
border: none;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
{% if game_id %}
<p>Selected game to join is: <strong>{{ game_id }}</strong></p>
{% endif %}
{% if players %}
<p>Players in game:</p>
<ul>
{% for player in players %}
<li>{{ player }}</li>
{% endfor %}
</ul>
<!-- form to select one player to play as, or to select spectator too play as -->
<form method="POST" action="/join_game/{{ game_id }}">
<select name="player">
<option value="spectator" selected>Spectator</option>
{% for player in players %}
<option value="{{ player }}">{{ player }}</option>
{% endfor %}
</select>
<input type="submit" value="Join Game">
</form>
{% else %}
<p>No players found in game, please recreate the game.</p>
{% endif %}
{% if player_name %}
<p>Selected player to join as: {{ player_name }}</p>
<script>
// Save player name in browser session for auto fill in game page
sessionStorage.setItem('player_name', '{{ player_name }}');
//redirect to game
window.location.href = '/game/{{ game_id }}/player/{{ player_name }}';
</script>
<noscript>
<p>manual redirect</p>
<a href="/game/{{ game_id }}/player/{{ player_name }}">Go to game</a>
</noscript>
{% endif %}
</body>
</html>