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

prettyfy, and rudimentary moves

This commit is contained in:
Adrian Gunnar Lauterer 2024-02-15 12:58:18 +01:00
parent b8bd161577
commit 956af04671
Signed by: adriangl
GPG Key ID: D33368A59745C2F0
5 changed files with 246 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
main.py
View File

@ -75,25 +75,47 @@ def join_game(game_id):
return render_template('join_game.html', game_id=game_id, players=players) return render_template('join_game.html', game_id=game_id, players=players)
@app.route('/game/<game_id>/player/<player_name>', methods=['GET']) @app.route('/game/<game_id>/player/<player_name>', methods=['GET', 'POST'])
def game(game_id, player_name): def game(game_id, player_name):
gamestate = requests.get(ozai_url + 'game/' + game_id).json()
move_status = False
if request.method == 'POST':
source = request.form['source']
color = request.form['color']
destination = request.form['destination']
#convert source to int if it is not market
if source != 'market':
source = int(source)
#convert destination to int if it is not floor
if destination != 'floor':
destination = int(destination)
move = {
'player': player_name,
'policy': 'strict', # or 'loose' depending on your needs
'color': color,
'source': source,
'destination': destination
}
response = requests.put(ozai_url + 'game/' + game_id, json=move)
if response.status_code == 200:
move_status = "Move Successful"
else:
move_status = response.text
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)
else: 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, move_status=move_status)
@app.route('/game/<game_id>/player/<player_name>/move', methods=['POST'])
def move(game_id, player_name):
move = request.form['move']
response = requests.post(ozai_url + 'game/' + game_id + '/player/' + player_name + '/move', json={'move': move})
if response.status_code == 200:
return 'Move successful'
else: else:
return 'Move failed' return 'Player not found', 404
if __name__ == '__main__': if __name__ == '__main__':
app.run(debug=True) app.run(debug=True)

245
templates/game.html
View File

@ -3,65 +3,222 @@
<html> <html>
<head> <head>
<title>Game</title> <title>Game</title>
<style>
/* flexbox class */
.flex-row {
display: flex;
justify-content: left;
flex-direction: row;
flex-wrap: wrap;
align-items:baseline;
}
.flex-row > * {
margin-right: 5px;
}
.flex-col {
display: flex;
justify-content:space-around;
flex-direction: column;
}
.wall {
/* 5*5 grid */
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
gap: 0.1em;
}
.wall > * {
border: 1px solid black;
width: 1em;
height: 1em;
text-align: center;
margin-top: 0.1em;
}
.pattern_lines {
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: start;
}
.pattern_line {
display: flex;
justify-content: right;
flex-direction: row;
align-items:baseline;
}
.pattern_line > * {
border: 1px solid black;
text-align: center;
margin: 0.1em;
width: 1em;
height: 1em;
}
.floor {
display: flex;
justify-content: left;
flex-direction: row;
align-items:baseline;
}
.floor > * {
border: 1px solid black;
text-align: center;
}
.blue {
background-color: rgb(49, 157, 245);
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
.black {
background-color: rgb(93, 93, 93);
}
.white {
background-color:rgb(216, 169, 112);
}
.start {
background-color: rgb(255, 1, 238);
}
</style>
</head> </head>
<body> <body>
<h1>Game</h1> <h1>Game</h1>
<p>Game ID: {{ game_id }}</p> <p>Game ID: {{ game_id }}</p>
<p>gamestate: {{ gamestate }}</p> <div class="flex-row">
<p>Number of Players: {{ gamestate.n_players }}</p>
<p>Number of Players: {{ gamestate.n_players }}</p> <p>Current Player: {{ gamestate.current_player }}</p>
<p>Current Player: {{ gamestate.current_player }}</p> <p>Starting Player: {{ gamestate.starting_player }}</p>
<p>Starting Player: {{ gamestate.starting_player }}</p> <p>Player Names: {{ gamestate.player_names | join(', ') }}</p>
<p>Player Names: {{ gamestate.player_names }}</p> <p>Game Status: {% if gamestate.game_end %}Ended{% else %}Active{% endif %}</p>
<p>Game End: {{ gamestate.game_end }}</p> <p>Rounds: {{ gamestate.rounds }}</p>
<p>Rounds: {{ gamestate.rounds }}</p> <p>Days: {{ gamestate.days }}</p>
<p>Days: {{ gamestate.days }}</p> </div>
<h2>Market</h2> <h2>Market</h2>
{% for color, number in gamestate.market.items() %} <div class="flex-row">
<p>{{ color }}: {{ number }}</p> {% for color, number in gamestate.market.items() %}
{% endfor %} <div class="{{ color }}">{{ color }}: {{ number }}</div>
<h1>Factories</h1>
{% for factory in gamestate.factories %}
<h2>factory nr: {{ loop.index }}</h2>
{% for color, number in factory.items() %}
<p>{{ color }}: {{ number }}</p>
{% endfor %} {% endfor %}
{% endfor %} </div>
<div class="flex-row">
{% for factory in gamestate.factories %}
<div class="flex-row">
<h2>factory: {{ loop.index }}</h2>
{% for color, number in factory.items() %}
<div class="{{ color }}">{{ color }}: {{ number }}</div>
{% endfor %}
</div>
{% endfor %}
</div>
<h1>Players:</h1> <h1>Players:</h1>
<div class="flex-row">
{% for name, player_data in gamestate.players.items() %} {% for name, player_data in gamestate.players.items() %}
{% if player_name == name %} <div class="flex-col">
<h2>{{ player_name }} (You)</h2> <div class="flex-row">
{% else %} {% if player_name == name %}
<h2>{{ name }}</h2> <h2>{{ player_name }} (You)</h2>
{% endif %} {% else %}
<p>Ready: {{ player_data.ready }}</p> <h2>{{ name }}</h2>
<p>Points: {{ player_data.points }}</p> {% endif %}
<h3>Pattern Lines</h3> {% if player_data.ready %}
{% for line in player_data.pattern_lines %} <p>Ready: {{ player_data.ready }}</p>
<p>Color: {{ line.color }}, Number: {{ line.number }}</p> {% endif %}
{% endfor %} <p>Points: {{ player_data.points }}</p>
<h3>Wall</h3> </div>
{% for row in player_data.wall %}
<p>{{ row }}</p> <div class="flex-row">
{% endfor %} <div class="flex-col">
<h3>Floor</h3> <!-- <h3>Pattern Lines</h3> -->
{% for color, number in player_data.floor.items() %} {% for line in player_data.pattern_lines %}
<p>{{ color }}: {{ number }}</p> <div class="pattern_line">
{% endfor %} {% for i in range(0, loop.index) %}
<div class="{{ line.color }}">{% if line.color %}{{ line.color }}{% else %}{{ '_' }}{% endif %}</div>
{% endfor %}
</div>
{% endfor %}
</div>
<div class="flex-col">
<!-- <h3>Wall</h3> -->
<div class="wall">
{% for row in player_data.wall %}
{% for cell in row %}
<div class="{{ cell }}">{% if cell %}{{ cell }}{% else %}{{ '_' }}{% endif %}</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
<h3>Floor</h3>
<div class="floor">
{% for color, number in player_data.floor.items() %}
<div class="{{ color }}">{{ color }}: {{ number }}</div>
{% endfor %}
</div>
</div>
{% endfor %} {% endfor %}
</div>
{% if player_name %} {% if player_name %}
<h1>Play area</h1> <h1>Play area</h1>
<p>Playing as: {{ player_name }}</p> <p>Playing as: {{ player_name }}</p>
<!-- form for submitting a move --> <!-- 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 method="POST" action="/game/{{ game_id }}/player/{{ player_name }}"> <form action="/game/{{ game_id }}/player/{{ player_name }}" method="POST">
<input type="text" name="move" placeholder="Move" required> <label for="source">Source:</label>
<input type="submit" value="Submit Move"> --> <select id="source" name="source">
<option value="market">Market {{ gamestate.market }}</option>
{% for factory in gamestate.factories %}
<option value="{{ loop.index }}">Factory {{ loop.index }} ({{ factory }})</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="0">Pattern Line 1</option>
<option value="1">Pattern Line 2</option>
<option value="2">Pattern Line 3</option>
<option value="3">Pattern Line 4</option>
<option value="4">Pattern Line 5</option>
<option value="floor">Floor</option>
</select>
<input type="submit" value="Submit Move">
</form>
{% if move_status %}
<div>{{ move_status }}</div>
{% endif %}
{% endif %} {% endif %}
<script>
console.log('Game ID: {{ game_id }}');
console.log('Player Name: {{ player_name }}');
console.log('Gamestate: {{ gamestate }}');
</script>
</body> </body>
</html> </html>

2
templates/home.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>API Interface</title> <title>Ozai webui:home</title>
<style> <style>
body { body {
display: flex; display: flex;

7
templates/join.html
View File

@ -2,7 +2,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Join Game</title> <title>Ozai webui:Join Game</title>
<style>
</style>
</head> </head>
<body> <body>
<!-- a field to add a game id --> <!-- a field to add a game id -->
@ -25,7 +28,7 @@
document.querySelector('input[name="game_id"]').value = game_id; document.querySelector('input[name="game_id"]').value = game_id;
} }
</script> </script>
{% if game_id %} {% if game_id %}
<script> <script>
var game_id = '{{ game_id }}'; var game_id = '{{ game_id }}';

5
templates/join_game.html
View File

@ -2,7 +2,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Join Game</title> <title>Ozai webui:Join Game</title>
<style>
</style>
</head> </head>
<body> <body>
{% if game_id %} {% if game_id %}