trying join with js
This commit is contained in:
parent
a0539f6872
commit
58b72ca5b1
GPG Key ID:
D33368A59745C2F0
|
|
@ -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'])
|
||||
|
||||
|
||||
|
||||
@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
|
||||
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)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<!-- HTML -->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ozai webui:Join Game</title>
|
||||
<link rel="icon" type="image/png" href="/azul-flake.png">
|
||||
<title>Ozai webui: Join Game</title>
|
||||
<link rel="icon" type="image/png" href="/azul-flake.png">
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
|
|
@ -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,57 +51,49 @@
|
|||
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 %}
|
||||
|
||||
{% if game_id %}
|
||||
<p>Selected game to join is: <strong>{{ game_id }}</strong></p>
|
||||
{% endif %}
|
||||
|
||||
{% 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>
|
||||
{% if players %}
|
||||
<p>Players in game:</p>
|
||||
<ul>
|
||||
{% for player in players %}
|
||||
<option value="{{ player }}">{{ player }}</option>
|
||||
<li>{{ player }}</li>
|
||||
{% endfor %}
|
||||
</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">
|
||||
</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 %}
|
||||
|
||||
</ul>
|
||||
<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" id="gameTypeSelect" required>
|
||||
<option value="True" selected>Local</option>
|
||||
<option value="False">Online</option>
|
||||
</select>
|
||||
<input type="button" value="Join Game" onclick="redirectToGame()">
|
||||
</form>
|
||||
{% else %}
|
||||
<p>No players found in game, please recreate the game.</p>
|
||||
{% 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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue