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

trying join with js

This commit is contained in:
Adrian Gunnar Lauterer 2024-06-06 00:20:14 +02:00
parent a0539f6872
commit 58b72ca5b1
Signed by: adriangl
GPG Key ID: D33368A59745C2F0
2 changed files with 48 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/ozai_webui/__init__.py
View File

@ -141,24 +141,16 @@ def join():
return render_template('join.html', game_id=game_id) return render_template('join.html', game_id=game_id)
return render_template('join.html') return render_template('join.html')
#select player name page
@app.route('/join_game/<game_id>/', methods=['GET','POST'])
@app.route('/join_game/<game_id>/', methods=['GET', 'POST'])
def join_game(game_id): def join_game(game_id):
#get players from servre api and return them to the user
response = requests.get(ozai_url + 'game/' + game_id) response = requests.get(ozai_url + 'game/' + game_id)
if response.status_code != 200: if response.status_code != 200:
#return error message
return 'Game not found', 404 return 'Game not found', 404
players = response.json().get('players') players = response.json().get('players')
if request.method == 'POST':
#get the chosen player name from the form and redirect to the game page
player_name = request.form['player']
# print('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)

106
src/templates/join_game.html
View File

@ -1,9 +1,8 @@
<!-- HTML -->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Ozai webui:Join Game</title> <title>Ozai webui: Join Game</title>
<link rel="icon" type="image/png" href="/azul-flake.png"> <link rel="icon" type="image/png" href="/azul-flake.png">
<style> <style>
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@ -16,25 +15,18 @@
background-color: black; background-color: black;
color: white; color: white;
color-scheme: dark; color-scheme: dark;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} }
div{ div {
margin-top: 20vh; margin-top: 20vh;
} }
div,form { div, form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-wrap: wrap; /* Allow the flex items to wrap onto the next line */ flex-wrap: wrap;
width: 90vw; width: 90vw;
} }
ul { ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
@ -42,8 +34,7 @@
li { li {
margin-bottom: 1em; margin-bottom: 1em;
} }
select, input[type="button"] {
select, input[type="submit"] {
padding: 1em; padding: 1em;
margin-top: 1em; margin-top: 1em;
width: 40%; width: 40%;
@ -51,8 +42,7 @@
max-width: 50em; max-width: 50em;
height: 7vh; height: 7vh;
} }
input[type="button"] {
input[type="submit"] {
background-color: #3779fd; background-color: #3779fd;
border: none; border: none;
border-radius: 1em; border-radius: 1em;
@ -61,57 +51,49 @@
cursor: pointer; cursor: pointer;
} }
</style> </style>
<script src="/browser-polyfill.js"></script>
</head> </head>
<body> <body>
<div> <div>
{% if game_id %}
<p>Selected game to join is: <strong>{{ game_id }}</strong></p>
{% endif %}
{% if game_id %} {% if players %}
<p>Selected game to join is: <strong>{{ game_id }}</strong></p> <p>Players in game:</p>
{% endif %} <ul>
{% 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 %} {% for player in players %}
<option value="{{ player }}">{{ player }}</option> <li>{{ player }}</li>
{% endfor %} {% endfor %}
</select> </ul>
<p>game type</p> <form id="joinGameForm">
<select name="local_game" required> <select name="player" id="playerSelect">
<option value="True" selected>Local</option> <option value="spectator" selected>Spectator</option>
<option value="False">Online</option> {% for player in players %}
</select> <option value="{{ player }}">{{ player }}</option>
<input type="submit" value="Join Game"> {% endfor %}
</form> </select>
<p>Game type</p>
{% else %} <select name="local_game" id="gameTypeSelect" required>
<p>No players found in game, please recreate the game.</p> <option value="True" selected>Local</option>
{% endif %} <option value="False">Online</option>
</select>
<input type="button" value="Join Game" onclick="redirectToGame()">
{% if player_name %} </form>
<noscript> {% else %}
<p>Selected player to join as: {{ player_name }}</p> <p>No players found in game, please recreate the game.</p>
<p>manual redirect</p> {% endif %}
<a href="/game/{{ game_id }}/player/{{ player_name }}/local/{{ local_game }}">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 }}/local/{{ local_game }}';
</script>
{% endif %}
</div> </div>
<script>
function redirectToGame() {
const player = document.getElementById('playerSelect').value;
const gameType = document.getElementById('gameTypeSelect').value;
const gameId = "{{ game_id }}";
const url = gameType === 'True' ? `/game/${gameId}/player/${player}/local/${gameType}` : `/game/${gameId}/player/${player}`;
sessionStorage.setItem('player_name', player);
sessionStorage.setItem('local_game', gameType);
window.location.href = url;
}
</script>
</body> </body>
</html> </html>