style updates
This commit is contained in:
parent
7ea30fee79
commit
bd224094c7
GPG Key ID:
D33368A59745C2F0
6
main.py
6
main.py
|
|
@ -22,6 +22,12 @@ def home():
|
|||
def background():
|
||||
#return the background image
|
||||
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')
|
||||
def logo():
|
||||
#return the background image
|
||||
|
|
|
|||
|
|
@ -10,40 +10,49 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 20vw;
|
||||
width: 60vw;
|
||||
/* removed due to low visibility */
|
||||
/* background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover; */
|
||||
margin-left: 10vw;
|
||||
width: 80vw;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
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 {
|
||||
margin-top: 20px;
|
||||
width: 300px;
|
||||
margin-top: 20vh;
|
||||
max-width: 40em;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 1em;
|
||||
margin-top: 1em;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #000;
|
||||
border-radius: 4px;
|
||||
border: 0.5em solid #000;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 1em;
|
||||
margin-top: 3em;
|
||||
width: 100%;
|
||||
background-color: #0000FF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: 1em;
|
||||
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 {
|
||||
|
|
@ -51,12 +60,12 @@
|
|||
}
|
||||
|
||||
button {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 1em;
|
||||
margin-top: 1em;
|
||||
background-color: #0000FF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: 0.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -67,13 +76,16 @@
|
|||
</head>
|
||||
<body>
|
||||
{% 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">
|
||||
<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="player2" placeholder="Player 2" required>
|
||||
<input type="text" name="player3" placeholder="Player 3" style="background-color: #D3D3D3;">
|
||||
<input type="text" name="player4" placeholder="Player 4" 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: #2a2929;">
|
||||
<!-- Add more input fields for more players -->
|
||||
<input type="submit" value="Create Game">
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -5,30 +5,74 @@
|
|||
<title>Ozai:game</title>
|
||||
<link rel="icon" type="image/png" href="/azul-flake.png">
|
||||
<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 {
|
||||
padding: 1em;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
background-color: #c3bfbf;
|
||||
border-radius: 5px;
|
||||
color: #aba4f6;
|
||||
background-color: #1919a7;
|
||||
border-radius: 1em;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em; /* increase font size */
|
||||
|
||||
}
|
||||
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 */
|
||||
.flex-row {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
flex-direction: row;
|
||||
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 > * {
|
||||
margin-right: 5px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.flex-col {
|
||||
display: flex;
|
||||
|
|
@ -38,7 +82,7 @@
|
|||
|
||||
.factory {
|
||||
overflow: hidden;
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -47,13 +91,13 @@
|
|||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
height: 5em;
|
||||
width: 5em;
|
||||
height: calc(var(--tile-size) * 3);
|
||||
width: calc(var(--tile-size) * 3);
|
||||
|
||||
}
|
||||
#market {
|
||||
height: 10em;
|
||||
width: 10em;
|
||||
height: calc(var(--tile-size) * 6);
|
||||
width: calc(var(--tile-size) * 6);
|
||||
}
|
||||
/* put the first element in the corner of the factory */
|
||||
.factory-name {
|
||||
|
|
@ -63,7 +107,7 @@
|
|||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 2px solid black;
|
||||
border: 2px solid var(--border-color);
|
||||
text-align: center;
|
||||
margin: 0.1em;
|
||||
width: 1.5em;
|
||||
|
|
@ -75,16 +119,23 @@
|
|||
|
||||
.factory > * {
|
||||
border-radius: 10%;
|
||||
border: 1px solid black;
|
||||
border: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
margin: 0.1em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
width: var(--tile-size);
|
||||
height: var(--tile-size);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.player_area {
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 20px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.wall {
|
||||
/* 5*5 grid */
|
||||
display: grid;
|
||||
|
|
@ -93,9 +144,9 @@
|
|||
gap: 0.1em;
|
||||
}
|
||||
.wall > * {
|
||||
border: 1px solid black;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
border: 1px solid var(--border-color);
|
||||
width: var(--tile-size);
|
||||
height: var(--tile-size);
|
||||
text-align: center;
|
||||
margin-top: 0.1em;
|
||||
}
|
||||
|
|
@ -112,69 +163,85 @@
|
|||
align-items:baseline;
|
||||
}
|
||||
.pattern_line > * {
|
||||
border: 1px solid black;
|
||||
border: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
margin: 0.1em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
width: var(--tile-size);
|
||||
height: var(--tile-size);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.floor {
|
||||
.floor_container {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
flex-direction: row;
|
||||
align-items:baseline;
|
||||
}
|
||||
.floor > * {
|
||||
border: 1px solid black;
|
||||
.floor {
|
||||
border: 1px solid var(--border-color);
|
||||
text-align: center;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
width: var(--tile-size);
|
||||
height: var(--tile-size);
|
||||
}
|
||||
.floor_value {
|
||||
text-align: center;
|
||||
width: var(--tile-size);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.blue_bg {
|
||||
background-color: rgb(49, 157, 245, 0.5);
|
||||
background-color: rgb(49, 157, 245, var(--bg-transparency));
|
||||
}
|
||||
.yellow_bg {
|
||||
background-color: rgb(245, 245, 10, 0.5);
|
||||
background-color: rgb(247, 148, 62, var(--bg-transparency));
|
||||
}
|
||||
.red_bg {
|
||||
background-color: rgb(255, 0, 0, 0.5);
|
||||
background-color: rgb(200, 50, 50, var(--bg-transparency));
|
||||
}
|
||||
.black_bg {
|
||||
background-color: rgb(93, 93, 93, 0.5);
|
||||
background-color: rgb(30, 30, 30, var(--bg-transparency));
|
||||
}
|
||||
.white_bg {
|
||||
background-color:rgb(208, 202, 195, 0.5);
|
||||
background-color:rgb(130, 130, 130, var(--bg-transparency));
|
||||
}
|
||||
|
||||
|
||||
.blue {
|
||||
border-radius: calc(var(--tile-size) * 0.2);
|
||||
background-color: rgb(49, 157, 245);
|
||||
}
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
border-radius: calc(var(--tile-size) * 0.2);
|
||||
background-color: rgb(247, 148, 62);
|
||||
}
|
||||
.red {
|
||||
background-color: red;
|
||||
border-radius: calc(var(--tile-size) * 0.2);
|
||||
background-color: rgb(200, 50, 50);
|
||||
}
|
||||
.black {
|
||||
background-color: rgb(93, 93, 93);
|
||||
border-radius: calc(var(--tile-size) * 0.2);
|
||||
background-color: rgb(30, 30, 30);
|
||||
}
|
||||
.white {
|
||||
background-color:rgb(208, 202, 195);
|
||||
border-radius: calc(var(--tile-size) * 0.2);
|
||||
background-color:rgb(130, 130, 130);
|
||||
}
|
||||
.start {
|
||||
background-color: rgb(255, 1, 238);
|
||||
border-radius: calc(var(--tile-size) * 0.2);
|
||||
background-color: rgb(165, 1, 155);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="flex-row">
|
||||
<p>Number of Players: {{ gamestate.n_players }}</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>Rounds: {{ gamestate.rounds }}</p>
|
||||
<p>Days: {{ gamestate.days }}</p>
|
||||
|
|
@ -210,19 +277,20 @@
|
|||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex-row">
|
||||
{% for name, player_data in gamestate.players.items() %}
|
||||
<div class="flex-col">
|
||||
<div class="flex-col player_area">
|
||||
<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>
|
||||
<p>◉</p>
|
||||
{% else %}
|
||||
<p>○</p>
|
||||
{% endif %}
|
||||
{% if player_name == name %}
|
||||
<div><strong>{{ name }}</strong></div>
|
||||
{% else %}
|
||||
<div>{{ name }}</div>
|
||||
{% endif %}
|
||||
{% if player_data.ready %}
|
||||
<p>Ready</p>
|
||||
|
|
@ -261,32 +329,75 @@
|
|||
</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" onclick="selectPatternLine(this)" value="floor">
|
||||
<div class="floor_container" onclick="selectPatternLine(this)" value="floor">
|
||||
{% set floor_count = 0 %}
|
||||
{% set floor_negative_values = [1,1,2,2,2,3,3] %}
|
||||
{% 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>
|
||||
<!-- 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 %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if floor_count < 7 %}
|
||||
{% set floor_blank_tiles = 7 - floor_count %}
|
||||
{% 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 %}
|
||||
{% endif %}
|
||||
</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>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
@ -296,39 +407,8 @@
|
|||
|
||||
|
||||
{% 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 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 -->
|
||||
{% 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 %}
|
||||
|
|
@ -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>
|
||||
console.log('Game ID: {{ game_id }}');
|
||||
console.log('Player Name: {{ player_name }}');
|
||||
|
|
|
|||
|
|
@ -5,38 +5,50 @@
|
|||
<link rel="icon" type="image/png" href="/azul-flake.png">
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
padding: 10px;
|
||||
background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
flex-wrap: wrap; /* Allow the flex items to wrap onto the next line */
|
||||
width: 90%;
|
||||
position: relative;
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
left: 40%;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-right: 10vh;
|
||||
margin-left: 10vh;
|
||||
padding: 10vh 20vh; /* increase padding to make buttons larger */
|
||||
margin: 5%;
|
||||
padding: 5vh 5vw; /* increase padding to make buttons larger */
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
background-color: rgba(0, 123, 255, 0.7); /* Semi-transparent blue color to mimic the tiles */
|
||||
border-radius: 5px;
|
||||
background-color: rgb(0, 120, 247); /* Semi-transparent blue color to mimic the tiles */
|
||||
border-radius: 1em;
|
||||
font-weight: bold;
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<a href="/create">Create Game</a>
|
||||
<a href="/join">Join Game</a>
|
||||
<img src="azul-flake.png" alt="">
|
||||
<div>
|
||||
<a href="/create">Create Game</a>
|
||||
<a href="/join">Join Game</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -7,26 +7,62 @@
|
|||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
padding: 10px;
|
||||
background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
background-color: black;
|
||||
color: white;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<img src="azul-flake.png" alt="">
|
||||
<!-- a field to add a game id -->
|
||||
<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="submit" value="Join Game">
|
||||
<button onclick="window.history.back();">Back</button>
|
||||
</form>
|
||||
<button onclick="window.history.back();">Back</button>
|
||||
<!-- script to get from localstorage and prefill join game -->
|
||||
|
||||
|
||||
</body>
|
||||
<script>
|
||||
function submitForm(e) {
|
||||
e.preventDefault();
|
||||
|
|
@ -48,15 +84,5 @@
|
|||
//redirect to join game
|
||||
window.location.href = '/join_game/' + game_id;
|
||||
</script>
|
||||
<noscript>
|
||||
<p>manual redirect</p>
|
||||
<a href="/join_game/+{{ game_id }}">Go to player selection</a>
|
||||
</noscript>
|
||||
{% endif %}
|
||||
|
||||
|
||||
<noscript>
|
||||
<p>JavaScript is not enabled. Some convenience migth not work.</p>
|
||||
</noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,10 +4,6 @@
|
|||
<head>
|
||||
<title>Ozai webui:Join Game</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin-left: 3em;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
|
|
@ -16,36 +12,61 @@
|
|||
flex-direction: column;
|
||||
justify-content: 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 {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
select, input[type="submit"] {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
padding: 1em;
|
||||
margin-top: 1em;
|
||||
width: 40%;
|
||||
min-width: 30em;
|
||||
max-width: 50em;
|
||||
height: 8vh;
|
||||
}
|
||||
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: #3779fd;
|
||||
border: none;
|
||||
border-radius: 1em;
|
||||
text-decoration: none;
|
||||
margin: 4px 2px;
|
||||
margin: 6em 1em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
|
||||
{% if game_id %}
|
||||
<p>Selected game to join is: <strong>{{ game_id }}</strong></p>
|
||||
{% endif %}
|
||||
|
|
@ -67,25 +88,26 @@
|
|||
</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>
|
||||
<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>
|
||||
// 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 %}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue