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

fixes, style and convenience

This commit is contained in:
Adrian Gunnar Lauterer 2024-03-22 00:10:02 +01:00
parent bd224094c7
commit 83969a3067
Signed by: adriangl
GPG Key ID: D33368A59745C2F0
3 changed files with 41 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
main.py
View File

@ -96,22 +96,25 @@ def join_game(game_id):
#get the chosen player name from the form and redirect to the game page #get the chosen player name from the form and redirect to the game page
player_name = request.form['player'] player_name = request.form['player']
print('Player Name:', player_name) print('Player Name:', player_name)
return render_template('join_game.html', game_id=game_id, players=players, player_name=player_name) local_game = request.form.get('local_game')
return render_template('join_game.html', game_id=game_id, players=players, player_name=player_name, local_game=local_game)
return render_template('join_game.html', game_id=game_id, players=players) return render_template('join_game.html', game_id=game_id, players=players)
#play game page #play game page
@app.route('/game/<game_id>/player/<player_name>', methods=['GET']) @app.route('/game/<game_id>/player/<player_name>', methods=['GET'])
def game(game_id, player_name): @app.route('/game/<game_id>/player/<player_name>/local/<local_game>', methods=['GET'])
def game(game_id, player_name, local_game=None):
local_game = local_game == 'True'
gamestate = requests.get(ozai_url + 'game/' + game_id).json() gamestate = requests.get(ozai_url + 'game/' + game_id).json()
#dont send player parameter if the player is a spectator #dont send player parameter if the player is a spectator
if player_name == 'spectator': if player_name == 'spectator':
gamestate = requests.get(ozai_url + 'game/' + game_id).json() gamestate = requests.get(ozai_url + 'game/' + game_id).json()
return render_template('game.html', game_id=game_id, gamestate=gamestate) return render_template('game.html', game_id=game_id, gamestate=gamestate, local_game=False)
elif player_name in gamestate['players']: elif player_name in gamestate['players']:
gamestate = requests.get(ozai_url + 'game/' + game_id + '?player=' + player_name).json() gamestate = requests.get(ozai_url + 'game/' + game_id + '?player=' + player_name).json()
return render_template('game.html', game_id=game_id, gamestate=gamestate, player_name=player_name) return render_template('game.html', game_id=game_id, gamestate=gamestate, player_name=player_name, local_game=local_game)
else: else:
return 'Player not found', 404 return 'Player not found', 404

42
templates/game.html
View File

@ -45,10 +45,11 @@
background-color: #3f3ff2; background-color: #3f3ff2;
} }
select { select {
font-size: 1.5em; font-size: 1.2em;
} }
.move_select { .move_select {
margin-top: 0.5em;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-direction: row; flex-direction: row;
@ -64,7 +65,7 @@
align-items: baseline; align-items: baseline;
} }
@media (max-width: 400px) { @media (max-width: 40em) {
.flex-row { .flex-row {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -82,7 +83,7 @@
.factory { .factory {
overflow: hidden; overflow: hidden;
border: 2px solid var(--border-color); border: 0.2em solid var(--border-color);
border-radius: 30%; border-radius: 30%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -96,8 +97,8 @@
} }
#market { #market {
height: calc(var(--tile-size) * 6); height: calc(var(--tile-size) * 7);
width: calc(var(--tile-size) * 6); width: calc(var(--tile-size) * 7);
} }
/* put the first element in the corner of the factory */ /* put the first element in the corner of the factory */
.factory-name { .factory-name {
@ -107,7 +108,7 @@
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
border: 2px solid var(--border-color); border: 0.2em solid var(--border-color);
text-align: center; text-align: center;
margin: 0.1em; margin: 0.1em;
width: 1.5em; width: 1.5em;
@ -119,7 +120,7 @@
.factory > * { .factory > * {
border-radius: 10%; border-radius: 10%;
border: 1px solid var(--border-color); border: 0.15em solid var(--border-color);
text-align: center; text-align: center;
margin: 0.1em; margin: 0.1em;
width: var(--tile-size); width: var(--tile-size);
@ -130,10 +131,10 @@
} }
.player_area { .player_area {
border: 2px solid var(--border-color); border: 0.2em solid var(--border-color);
border-radius: 20px; border-radius: 2em;
padding: 10px; padding: 1em;
margin: 10px; margin: 1em;
} }
.wall { .wall {
@ -144,7 +145,7 @@
gap: 0.1em; gap: 0.1em;
} }
.wall > * { .wall > * {
border: 1px solid var(--border-color); border: 0.15em solid var(--border-color);
width: var(--tile-size); width: var(--tile-size);
height: var(--tile-size); height: var(--tile-size);
text-align: center; text-align: center;
@ -163,7 +164,7 @@
align-items:baseline; align-items:baseline;
} }
.pattern_line > * { .pattern_line > * {
border: 1px solid var(--border-color); border: 0.15em solid var(--border-color);
text-align: center; text-align: center;
margin: 0.1em; margin: 0.1em;
width: var(--tile-size); width: var(--tile-size);
@ -179,7 +180,7 @@
align-items:baseline; align-items:baseline;
} }
.floor { .floor {
border: 1px solid var(--border-color); border: 0.15em solid var(--border-color);
text-align: center; text-align: center;
width: var(--tile-size); width: var(--tile-size);
height: var(--tile-size); height: var(--tile-size);
@ -356,7 +357,7 @@
</div> </div>
{% if player_name == name %} {% if player_name == name %}
<form id='moveForm'</form>> <form id='moveForm'</form>
<div class="flex-col"> <div class="flex-col">
<div class="flex-row move_select"> <div class="flex-row move_select">
<div> <div>
@ -410,10 +411,12 @@
<!-- 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. -->
<!-- button to go to next player --> <!-- button to go to next player -->
{% if local_game %}
{% 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 %}
<a href="/game/{{ game_id }}/player/{{ gamestate.player_names[next_index] }}">Next Player</a> <a href="/game/{{ game_id }}/player/{{ gamestate.player_names[next_index] }}">Next Player</a>
{% endif %}
{% endif %} {% endif %}
@ -487,6 +490,13 @@
formData.forEach((value, key) => data[key] = value); formData.forEach((value, key) => data[key] = value);
console.log(data); console.log(data);
socket.emit('move', {game_id: game_id, player_name, move: data}); socket.emit('move', {game_id: game_id, player_name, move: data});
// if local_game is tru change player
//{% if local_game %}
let nextPlayer = '{{ gamestate.player_names[gamestate.player_names.index(player_name) + 1 if gamestate.player_names.index(player_name) + 1 < gamestate.player_names|length else 0] }}';
window.location.href = '/game/{{ game_id }}/player/' + nextPlayer;
//{% endif %}
}); });
</script> </script>

11
templates/join_game.html
View File

@ -48,7 +48,7 @@
width: 40%; width: 40%;
min-width: 30em; min-width: 30em;
max-width: 50em; max-width: 50em;
height: 8vh; height: 7vh;
} }
input[type="submit"] { input[type="submit"] {
@ -86,6 +86,11 @@
<option value="{{ player }}">{{ player }}</option> <option value="{{ player }}">{{ player }}</option>
{% endfor %} {% endfor %}
</select> </select>
<p>game type</p>
<select name="local_game" required>
<option value="True" selected>Local</option>
<option value="False">Online</option>
</select>
<input type="submit" value="Join Game"> <input type="submit" value="Join Game">
</form> </form>
@ -98,13 +103,13 @@
<noscript> <noscript>
<p>Selected player to join as: {{ player_name }}</p> <p>Selected player to join as: {{ player_name }}</p>
<p>manual redirect</p> <p>manual redirect</p>
<a href="/game/{{ game_id }}/player/{{ player_name }}">Go to game</a> <a href="/game/{{ game_id }}/player/{{ player_name }}/local/{{ local_game }}">Go to game</a>
</noscript> </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 }}/local/{{ local_game }}';
</script> </script>
{% endif %} {% endif %}