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

64
src/templates/join_game.html
View File

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