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

style updates

This commit is contained in:
Adrian Gunnar Lauterer 2024-03-21 23:32:44 +01:00
parent 7ea30fee79
commit bd224094c7
Signed by: adriangl
GPG Key ID: D33368A59745C2F0
6 changed files with 329 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
main.py
View File

@ -22,6 +22,12 @@ def home():
def background(): def background():
#return the background image #return the background image
return app.send_static_file('azul.webp') return app.send_static_file('azul.webp')
@app.route('/socket.io.js')
def socketio_js():
#return the background image
return app.send_static_file('socket.io.js')
@app.route('/azul-flake.png') @app.route('/azul-flake.png')
def logo(): def logo():
#return the background image #return the background image

60
templates/create.html
View File

@ -10,40 +10,49 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-left: 20vw; margin-left: 10vw;
width: 60vw; width: 80vw;
/* removed due to low visibility */ background-color: #000;
/* background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed; color: #fff;
-webkit-background-size: cover; color-scheme: dark;
-moz-background-size: cover; }
-o-background-size: cover;
background-size: cover; */ div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* Allow the flex items to wrap onto the next line */
width: 100%;
} }
form { form {
margin-top: 20px; margin-top: 20vh;
width: 300px; max-width: 40em;
min-width: 300px;
margin: 0 auto; margin: 0 auto;
} }
input[type="text"] { input[type="text"] {
padding: 10px; padding: 1em;
margin-top: 10px; margin-top: 1em;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
border: 2px solid #000; border: 0.5em solid #000;
border-radius: 4px; border-radius: 1em;
} }
input[type="submit"] { input[type="submit"] {
padding: 10px; padding: 1em;
margin-top: 10px; margin-top: 3em;
width: 100%; width: 100%;
background-color: #0000FF; background-color: #0000FF;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 4px; border-radius: 1em;
cursor: pointer; cursor: pointer;
box-shadow: 0px 0.1em 0.5em rgba(255, 255, 255, 0.333); /* Add some shadow for depth */
transition: background-color 0.3s ease;
} }
input[type="submit"]:hover { input[type="submit"]:hover {
@ -51,12 +60,12 @@
} }
button { button {
padding: 10px; padding: 1em;
margin-top: 10px; margin-top: 1em;
background-color: #0000FF; background-color: #0000FF;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 4px; border-radius: 0.5em;
cursor: pointer; cursor: pointer;
} }
@ -67,13 +76,16 @@
</head> </head>
<body> <body>
{% if not game_id %} {% if not game_id %}
<div>
<h1>Create Game</h1>
<h2>Fill in playernames for wanted players</h2>
<h3>Leave empty for no player ...</h3>
</div>
<form method="POST" action="/create"> <form method="POST" action="/create">
<div>Fill inn playernames for wanted players ...</div>
<div>Leave empty for no player ...</div>
<input type="text" name="player1" placeholder="Player 1" required> <input type="text" name="player1" placeholder="Player 1" required>
<input type="text" name="player2" placeholder="Player 2" required> <input type="text" name="player2" placeholder="Player 2" required>
<input type="text" name="player3" placeholder="Player 3" style="background-color: #D3D3D3;"> <input type="text" name="player3" placeholder="Player 3" style="background-color: #2a2929;">
<input type="text" name="player4" placeholder="Player 4" style="background-color: #D3D3D3;"> <input type="text" name="player4" placeholder="Player 4" style="background-color: #2a2929;">
<!-- Add more input fields for more players --> <!-- Add more input fields for more players -->
<input type="submit" value="Create Game"> <input type="submit" value="Create Game">
</form> </form>

258
templates/game.html
View File

@ -5,30 +5,74 @@
<title>Ozai:game</title> <title>Ozai:game</title>
<link rel="icon" type="image/png" href="/azul-flake.png"> <link rel="icon" type="image/png" href="/azul-flake.png">
<style> <style>
* {
--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;
}
a { a {
padding: 1em;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
color: black; color: #aba4f6;
background-color: #c3bfbf; background-color: #1919a7;
border-radius: 5px; border-radius: 1em;
font-weight: bold; font-weight: bold;
font-size: 1.5em; /* increase font size */ font-size: 1.5em; /* increase font size */
} }
a:hover { a:hover {
background-color: #868787; background-color: #204ac8;
} }
input[type="submit"] {
border: none;
border-radius: 1em;
background-color: #3232d1;
padding: 1em;
}
input[type="submit"]:hover {
background-color: #3f3ff2;
}
select {
font-size: 1.5em;
}
.move_select {
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: baseline;
}
/* flexbox class */ /* flexbox class */
.flex-row { .flex-row {
display: flex; display: flex;
justify-content: left; justify-content: left;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items:baseline; align-items: baseline;
}
@media (max-width: 400px) {
.flex-row {
flex-direction: column;
justify-content: center;
align-items: center;
}
} }
.flex-row > * { .flex-row > * {
margin-right: 5px; margin-right: 1em;
} }
.flex-col { .flex-col {
display: flex; display: flex;
@ -38,7 +82,7 @@
.factory { .factory {
overflow: hidden; overflow: hidden;
border: 2px solid black; border: 2px solid var(--border-color);
border-radius: 30%; border-radius: 30%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -47,13 +91,13 @@
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
height: 5em; height: calc(var(--tile-size) * 3);
width: 5em; width: calc(var(--tile-size) * 3);
} }
#market { #market {
height: 10em; height: calc(var(--tile-size) * 6);
width: 10em; width: calc(var(--tile-size) * 6);
} }
/* put the first element in the corner of the factory */ /* put the first element in the corner of the factory */
.factory-name { .factory-name {
@ -63,7 +107,7 @@
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
border: 2px solid black; border: 2px solid var(--border-color);
text-align: center; text-align: center;
margin: 0.1em; margin: 0.1em;
width: 1.5em; width: 1.5em;
@ -75,16 +119,23 @@
.factory > * { .factory > * {
border-radius: 10%; border-radius: 10%;
border: 1px solid black; border: 1px solid var(--border-color);
text-align: center; text-align: center;
margin: 0.1em; margin: 0.1em;
width: 1.5em; width: var(--tile-size);
height: 1.5em; height: var(--tile-size);
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.player_area {
border: 2px solid var(--border-color);
border-radius: 20px;
padding: 10px;
margin: 10px;
}
.wall { .wall {
/* 5*5 grid */ /* 5*5 grid */
display: grid; display: grid;
@ -93,9 +144,9 @@
gap: 0.1em; gap: 0.1em;
} }
.wall > * { .wall > * {
border: 1px solid black; border: 1px solid var(--border-color);
width: 1.5em; width: var(--tile-size);
height: 1.5em; height: var(--tile-size);
text-align: center; text-align: center;
margin-top: 0.1em; margin-top: 0.1em;
} }
@ -112,69 +163,85 @@
align-items:baseline; align-items:baseline;
} }
.pattern_line > * { .pattern_line > * {
border: 1px solid black; border: 1px solid var(--border-color);
text-align: center; text-align: center;
margin: 0.1em; margin: 0.1em;
width: 1.5em; width: var(--tile-size);
height: 1.5em; height: var(--tile-size);
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.floor { .floor_container {
display: flex; display: flex;
justify-content: left; justify-content: left;
flex-direction: row; flex-direction: row;
align-items:baseline; align-items:baseline;
} }
.floor > * { .floor {
border: 1px solid black; border: 1px solid var(--border-color);
text-align: center; text-align: center;
width: 1.5em; width: var(--tile-size);
height: 1.5em; height: var(--tile-size);
} }
.floor_value {
text-align: center;
width: var(--tile-size);
}
.blue_bg { .blue_bg {
background-color: rgb(49, 157, 245, 0.5); background-color: rgb(49, 157, 245, var(--bg-transparency));
} }
.yellow_bg { .yellow_bg {
background-color: rgb(245, 245, 10, 0.5); background-color: rgb(247, 148, 62, var(--bg-transparency));
} }
.red_bg { .red_bg {
background-color: rgb(255, 0, 0, 0.5); background-color: rgb(200, 50, 50, var(--bg-transparency));
} }
.black_bg { .black_bg {
background-color: rgb(93, 93, 93, 0.5); background-color: rgb(30, 30, 30, var(--bg-transparency));
} }
.white_bg { .white_bg {
background-color:rgb(208, 202, 195, 0.5); background-color:rgb(130, 130, 130, var(--bg-transparency));
} }
.blue { .blue {
border-radius: calc(var(--tile-size) * 0.2);
background-color: rgb(49, 157, 245); background-color: rgb(49, 157, 245);
} }
.yellow { .yellow {
background-color: yellow; border-radius: calc(var(--tile-size) * 0.2);
background-color: rgb(247, 148, 62);
} }
.red { .red {
background-color: red; border-radius: calc(var(--tile-size) * 0.2);
background-color: rgb(200, 50, 50);
} }
.black { .black {
background-color: rgb(93, 93, 93); border-radius: calc(var(--tile-size) * 0.2);
background-color: rgb(30, 30, 30);
} }
.white { .white {
background-color:rgb(208, 202, 195); border-radius: calc(var(--tile-size) * 0.2);
background-color:rgb(130, 130, 130);
} }
.start { .start {
background-color: rgb(255, 1, 238); border-radius: calc(var(--tile-size) * 0.2);
background-color: rgb(165, 1, 155);
} }
</style> </style>
</head> </head>
<body> <body>
<div class="flex-row"> <div class="flex-row">
<p>Number of Players: {{ gamestate.n_players }}</p> <p>Number of Players: {{ gamestate.n_players }}</p>
<p>Current Player: {{ gamestate.current_player }}</p> <p>Current Player: {{ gamestate.current_player }}</p>
<p>Playing as: {{ player_name }}</p>
<p>Game Status: {% if gamestate.game_end %}Ended{% else %}Active{% endif %}</p> <p>Game Status: {% if gamestate.game_end %}Ended{% else %}Active{% endif %}</p>
<p>Rounds: {{ gamestate.rounds }}</p> <p>Rounds: {{ gamestate.rounds }}</p>
<p>Days: {{ gamestate.days }}</p> <p>Days: {{ gamestate.days }}</p>
@ -210,19 +277,20 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<div class="flex-row"> <div class="flex-row">
{% for name, player_data in gamestate.players.items() %} {% for name, player_data in gamestate.players.items() %}
<div class="flex-col"> <div class="flex-col player_area">
<div class="flex-row"> <div class="flex-row">
{% if player_name == name %}
<h2>{{ player_name }} (You)</h2>
{% else %}
<h2>{{ name }}</h2>
{% endif %}
{% if gamestate.current_player == name %} {% if gamestate.current_player == name %}
<p>(current)</p> <p>◉</p>
{% else %}
<p>○</p>
{% endif %}
{% if player_name == name %}
<div><strong>{{ name }}</strong></div>
{% else %}
<div>{{ name }}</div>
{% endif %} {% endif %}
{% if player_data.ready %} {% if player_data.ready %}
<p>Ready</p> <p>Ready</p>
@ -261,32 +329,75 @@
</div> </div>
</div> </div>
<div class="flex-row"> <div class="floor_container" onclick="selectPatternLine(this)" value="floor">
<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" onclick="selectPatternLine(this)" value="floor">
{% set floor_count = 0 %} {% set floor_count = 0 %}
{% set floor_negative_values = [1,1,2,2,2,3,3] %}
{% for color, number in player_data.floor.items() %} {% for color, number in player_data.floor.items() %}
{% if number > 0 %} {% if number > 0 %}
{% set floor_count = floor_count + number %} {% set floor_count = floor_count + number %}
{% for i in range(0, number) %} {% for i in range(0, number) %}
<div class="{{ color }}">{{ color[:1] }}</div> <!-- 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>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% if floor_count < 7 %} {% if floor_count < 7 %}
{% set floor_blank_tiles = 7 - floor_count %} {% set floor_blank_tiles = 7 - floor_count %}
{% for i in range(0, floor_blank_tiles) %} {% for i in range(0, floor_blank_tiles) %}
<div>_</div> <div class="flex-col">
<div class="floor_value">-{{ floor_negative_values[i] }}</div>
<div class="floor">_</div>
</div>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</div> </div>
{% if player_name == name %}
<form id='moveForm'</form>>
<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 %}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
@ -296,39 +407,8 @@
{% if player_name %} {% 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 for submitting a move, a move is a selection of marcet or factory, what color, and what patternline or floor it goes to. -->
<form id='moveForm'</form>>
<label for="source">Source:</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>
<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 --> <!-- button to go to next player -->
{% set current_index = gamestate.player_names.index(player_name) %} {% 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 %} {% set next_index = current_index + 1 if current_index + 1 < gamestate.player_names|length else 0 %}
@ -339,7 +419,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.js"></script> <script src="/socket.io.js"></script>
<script> <script>
console.log('Game ID: {{ game_id }}'); console.log('Game ID: {{ game_id }}');
console.log('Player Name: {{ player_name }}'); console.log('Player Name: {{ player_name }}');

46
templates/home.html
View File

@ -5,38 +5,50 @@
<link rel="icon" type="image/png" href="/azul-flake.png"> <link rel="icon" type="image/png" href="/azul-flake.png">
<style> <style>
body { body {
background-color: black;
}
div {
display: flex; display: flex;
flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; flex-wrap: wrap; /* Allow the flex items to wrap onto the next line */
padding: 10px; width: 90%;
background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed; position: relative;
-webkit-background-size: cover; left: 5%;
-moz-background-size: cover; }
-o-background-size: cover;
background-size: cover; img {
position: relative;
left: 40%;
width: 20%;
} }
a { a {
display: inline-block; display: inline-block;
margin-right: 10vh; margin: 5%;
margin-left: 10vh; padding: 5vh 5vw; /* increase padding to make buttons larger */
padding: 10vh 20vh; /* increase padding to make buttons larger */
text-decoration: none; text-decoration: none;
color: white; color: white;
background-color: rgba(0, 123, 255, 0.7); /* Semi-transparent blue color to mimic the tiles */ background-color: rgb(0, 120, 247); /* Semi-transparent blue color to mimic the tiles */
border-radius: 5px; border-radius: 1em;
font-weight: bold; font-weight: bold;
font-size: 3em; /* increase font size */ font-size: 3em; /* increase font size */
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Add some shadow for depth */ box-shadow: 0px 0.5em 1em rgba(255, 255, 255, 0.333); /* Add some shadow for depth */
transition: background-color 0.3s ease; /* Smooth transition for hover and focus */
} }
a:hover {
background-color: rgba(0, 86, 179, 0.7); /* Darker blue on hover */ a:hover, a:focus {
background-color: rgba(0, 120, 247, 0.7); /* Darker blue on hover and focus */
outline: none; /* Remove default focus outline */
} }
</style> </style>
</head> </head>
<body> <body>
<a href="/create">Create Game</a> <img src="azul-flake.png" alt="">
<a href="/join">Join Game</a> <div>
<a href="/create">Create Game</a>
<a href="/join">Join Game</a>
</div>
</body> </body>
</html> </html>

64
templates/join.html
View File

@ -7,26 +7,62 @@
<style> <style>
body { body {
display: flex; display: flex;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100vh; background-color: black;
padding: 10px; color: white;
background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed; color-scheme: dark;
-webkit-background-size: cover; }
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 5vh;
width: 80%;
max-width: 500px;
}
button, input[type="submit"] {
background-color: #0000FF;
cursor: pointer;
box-shadow: 0px 0.1em 0.5em rgba(255, 255, 255, 0.333);
margin-top: 2em;
}
button, input[type="submit"], input[type="text"] {
margin-top: 5vh;
padding: 1em;
margin-top: 1em;
color: #fff;
border: none;
border-radius: 1em;
width: 100%;
}
@media (max-width: 768px) {
input[type="text"], input[type="submit"], button {
font-size: 1.5em;
}
} }
</style> </style>
</head> </head>
<body> <body>
<img src="azul-flake.png" alt="">
<!-- a field to add a game id --> <!-- a field to add a game id -->
<form id="joinGameForm" method="POST" action="/join" onsubmit="submitForm(event)"> <form id="joinGameForm" method="POST" action="/join" onsubmit="submitForm(event)">
<input type="text" name="game_id" placeholder="Game ID" required value="{{ game_id }}"> <input type="text" name="game_id" placeholder="Game ID" required value="{{ game_id }}">
<input type="submit" value="Join Game"> <input type="submit" value="Join Game">
<button onclick="window.history.back();">Back</button>
</form> </form>
<button onclick="window.history.back();">Back</button>
<!-- script to get from localstorage and prefill join game -->
</body>
<script> <script>
function submitForm(e) { function submitForm(e) {
e.preventDefault(); e.preventDefault();
@ -48,15 +84,5 @@
//redirect to join game //redirect to join game
window.location.href = '/join_game/' + game_id; window.location.href = '/join_game/' + game_id;
</script> </script>
<noscript>
<p>manual redirect</p>
<a href="/join_game/+{{ game_id }}">Go to player selection</a>
</noscript>
{% endif %} {% endif %}
<noscript>
<p>JavaScript is not enabled. Some convenience migth not work.</p>
</noscript>
</body>
</html> </html>

66
templates/join_game.html
View File

@ -4,10 +4,6 @@
<head> <head>
<title>Ozai webui:Join Game</title> <title>Ozai webui:Join Game</title>
<style> <style>
* {
box-sizing: border-box;
margin-left: 3em;
}
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
margin: 0; margin: 0;
@ -16,36 +12,61 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: black;
color: white;
color-scheme: dark;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} }
div{
margin-top: 20vh;
}
div,form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* Allow the flex items to wrap onto the next line */
width: 90vw;
}
ul { ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
li { li {
margin-bottom: 10px; margin-bottom: 1em;
}
form {
margin-top: 20px;
} }
select, input[type="submit"] { select, input[type="submit"] {
padding: 10px; padding: 1em;
margin-top: 10px; margin-top: 1em;
width: 40%;
min-width: 30em;
max-width: 50em;
height: 8vh;
} }
input[type="submit"] { input[type="submit"] {
background-color: #3779fd; background-color: #3779fd;
border: none; border: none;
border-radius: 1em;
text-decoration: none; text-decoration: none;
margin: 4px 2px; margin: 6em 1em;
cursor: pointer; cursor: pointer;
} }
</style> </style>
</head> </head>
<body> <body>
<div>
{% if game_id %} {% if game_id %}
<p>Selected game to join is: <strong>{{ game_id }}</strong></p> <p>Selected game to join is: <strong>{{ game_id }}</strong></p>
{% endif %} {% endif %}
@ -67,25 +88,26 @@
</select> </select>
<input type="submit" value="Join Game"> <input type="submit" value="Join Game">
</form> </form>
{% else %} {% else %}
<p>No players found in game, please recreate the game.</p> <p>No players found in game, please recreate the game.</p>
{% endif %} {% endif %}
{% if player_name %} {% if player_name %}
<p>Selected player to join as: {{ player_name }}</p> <noscript>
<p>Selected player to join as: {{ player_name }}</p>
<p>manual redirect</p>
<a href="/game/{{ game_id }}/player/{{ player_name }}">Go to game</a>
</noscript>
<script> <script>
// Save player name in browser session for auto fill in game page // Save player name in browser session for auto fill in game page
sessionStorage.setItem('player_name', '{{ player_name }}'); sessionStorage.setItem('player_name', '{{ player_name }}');
//redirect to game //redirect to game
window.location.href = '/game/{{ game_id }}/player/{{ player_name }}'; window.location.href = '/game/{{ game_id }}/player/{{ player_name }}';
</script> </script>
<noscript>
<p>manual redirect</p>
<a href="/game/{{ game_id }}/player/{{ player_name }}">Go to game</a>
</noscript>
{% endif %} {% endif %}
</div>
</body> </body>
</html> </html>