prettyfy, and rudimentary moves
This commit is contained in:
parent
b8bd161577
commit
956af04671
GPG Key ID:
D33368A59745C2F0
48
main.py
48
main.py
@ -75,25 +75,47 @@ def join_game(game_id):
|
||||
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):
|
||||
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':
|
||||
gamestate = requests.get(ozai_url + 'game/' + game_id).json()
|
||||
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()
|
||||
return render_template('game.html', game_id=game_id, gamestate=gamestate, player_name=player_name)
|
||||
|
||||
|
||||
|
||||
@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'
|
||||
return render_template('game.html', game_id=game_id, gamestate=gamestate, player_name=player_name, move_status=move_status)
|
||||
else:
|
||||
return 'Move failed'
|
||||
return 'Player not found', 404
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(debug=True)
|
||||
@ -3,65 +3,222 @@
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
<body>
|
||||
<h1>Game</h1>
|
||||
<p>Game ID: {{ game_id }}</p>
|
||||
<p>gamestate: {{ gamestate }}</p>
|
||||
|
||||
<p>Number of Players: {{ gamestate.n_players }}</p>
|
||||
<p>Current Player: {{ gamestate.current_player }}</p>
|
||||
<p>Starting Player: {{ gamestate.starting_player }}</p>
|
||||
<p>Player Names: {{ gamestate.player_names }}</p>
|
||||
<p>Game End: {{ gamestate.game_end }}</p>
|
||||
<p>Rounds: {{ gamestate.rounds }}</p>
|
||||
<p>Days: {{ gamestate.days }}</p>
|
||||
<div class="flex-row">
|
||||
<p>Number of Players: {{ gamestate.n_players }}</p>
|
||||
<p>Current Player: {{ gamestate.current_player }}</p>
|
||||
<p>Starting Player: {{ gamestate.starting_player }}</p>
|
||||
<p>Player Names: {{ gamestate.player_names | join(', ') }}</p>
|
||||
<p>Game Status: {% if gamestate.game_end %}Ended{% else %}Active{% endif %}</p>
|
||||
<p>Rounds: {{ gamestate.rounds }}</p>
|
||||
<p>Days: {{ gamestate.days }}</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Market</h2>
|
||||
{% for color, number in gamestate.market.items() %}
|
||||
<p>{{ color }}: {{ number }}</p>
|
||||
{% endfor %}
|
||||
|
||||
<h1>Factories</h1>
|
||||
{% for factory in gamestate.factories %}
|
||||
<h2>factory nr: {{ loop.index }}</h2>
|
||||
{% for color, number in factory.items() %}
|
||||
<p>{{ color }}: {{ number }}</p>
|
||||
<div class="flex-row">
|
||||
{% for color, number in gamestate.market.items() %}
|
||||
<div class="{{ color }}">{{ color }}: {{ number }}</div>
|
||||
{% 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>
|
||||
|
||||
|
||||
<div class="flex-row">
|
||||
{% for name, player_data in gamestate.players.items() %}
|
||||
{% if player_name == name %}
|
||||
<h2>{{ player_name }} (You)</h2>
|
||||
{% else %}
|
||||
<h2>{{ name }}</h2>
|
||||
{% endif %}
|
||||
<p>Ready: {{ player_data.ready }}</p>
|
||||
<p>Points: {{ player_data.points }}</p>
|
||||
<h3>Pattern Lines</h3>
|
||||
{% for line in player_data.pattern_lines %}
|
||||
<p>Color: {{ line.color }}, Number: {{ line.number }}</p>
|
||||
{% endfor %}
|
||||
<h3>Wall</h3>
|
||||
{% for row in player_data.wall %}
|
||||
<p>{{ row }}</p>
|
||||
{% endfor %}
|
||||
<h3>Floor</h3>
|
||||
{% for color, number in player_data.floor.items() %}
|
||||
<p>{{ color }}: {{ number }}</p>
|
||||
{% endfor %}
|
||||
<div class="flex-col">
|
||||
<div class="flex-row">
|
||||
{% if player_name == name %}
|
||||
<h2>{{ player_name }} (You)</h2>
|
||||
{% else %}
|
||||
<h2>{{ name }}</h2>
|
||||
{% endif %}
|
||||
{% if player_data.ready %}
|
||||
<p>Ready: {{ player_data.ready }}</p>
|
||||
{% endif %}
|
||||
<p>Points: {{ player_data.points }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-row">
|
||||
<div class="flex-col">
|
||||
<!-- <h3>Pattern Lines</h3> -->
|
||||
{% for line in player_data.pattern_lines %}
|
||||
<div class="pattern_line">
|
||||
{% 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 %}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% if player_name %}
|
||||
<h1>Play area</h1>
|
||||
<p>Playing as: {{ player_name }}</p>
|
||||
<!-- form for submitting a move -->
|
||||
<!-- <form method="POST" action="/game/{{ game_id }}/player/{{ player_name }}">
|
||||
<input type="text" name="move" placeholder="Move" required>
|
||||
<input type="submit" value="Submit 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 action="/game/{{ game_id }}/player/{{ player_name }}" method="POST">
|
||||
<label for="source">Source:</label>
|
||||
<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 %}
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
console.log('Game ID: {{ game_id }}');
|
||||
console.log('Player Name: {{ player_name }}');
|
||||
console.log('Gamestate: {{ gamestate }}');
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>API Interface</title>
|
||||
<title>Ozai webui:home</title>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
|
||||
@ -2,7 +2,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Join Game</title>
|
||||
<title>Ozai webui:Join Game</title>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- a field to add a game id -->
|
||||
@ -25,7 +28,7 @@
|
||||
document.querySelector('input[name="game_id"]').value = game_id;
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
{% if game_id %}
|
||||
<script>
|
||||
var game_id = '{{ game_id }}';
|
||||
|
||||
@ -2,7 +2,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Join Game</title>
|
||||
<title>Ozai webui:Join Game</title>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% if game_id %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user