fixes + style start
This commit is contained in:
parent
956af04671
commit
ccbdd92300
GPG Key ID:
D33368A59745C2F0
42
main.py
42
main.py
@ -5,10 +5,21 @@ import requests
|
||||
ozai_url = 'http://localhost:8000/api/'
|
||||
app = Flask(__name__)
|
||||
|
||||
# @app.route('/azul.webp')
|
||||
# def background():
|
||||
# #return the background image
|
||||
# return app.send_static_file('azul.webp')
|
||||
|
||||
@app.route('/')
|
||||
def home():
|
||||
return render_template('home.html')
|
||||
|
||||
|
||||
@app.route('/azul.webp')
|
||||
def background():
|
||||
#return the background image
|
||||
return app.send_static_file('azul.webp')
|
||||
|
||||
@app.route('/create', methods=['GET', 'POST'])
|
||||
def create():
|
||||
if request.method == 'POST':
|
||||
@ -25,7 +36,7 @@ def create():
|
||||
#replace spaces with underscores
|
||||
player_name = player_name.replace(' ', '_')
|
||||
# replace illegal characters with nothing
|
||||
illegal_chars = ['<', '>', '(', ')', '[', ']', ',', '.', 'exec', 'spectator']
|
||||
illegal_chars = ['<', '>', '(', ')', '[', ']', ',', '.', ':', ';', '-', '/', '|', '\\', 'exec', 'spectator']
|
||||
for char in illegal_chars:
|
||||
player_name = player_name.replace(char, '')
|
||||
if player_name:
|
||||
@ -37,19 +48,15 @@ def create():
|
||||
if response.status_code == 200:
|
||||
game_id = response.json()
|
||||
print("Game ID:", game_id)
|
||||
return render_template('create.html', game_id=game_id)
|
||||
else:
|
||||
print("Error:", response.status_code, response.text)#log the game id
|
||||
|
||||
print('Game ID:', game_id)
|
||||
|
||||
#return the game id to the user
|
||||
return render_template('create.html', game_id=game_id)
|
||||
pass
|
||||
return render_template('create.html')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@app.route('/join', methods=['GET', 'POST'])
|
||||
def join():
|
||||
if request.method == 'POST':
|
||||
@ -64,6 +71,9 @@ 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':
|
||||
@ -85,22 +95,22 @@ def game(game_id, player_name):
|
||||
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)
|
||||
|
||||
if source != "market":
|
||||
source = int(source)-1
|
||||
if destination != "floor":
|
||||
destination = int(destination)-1
|
||||
|
||||
move = {
|
||||
'player': player_name,
|
||||
'player': str(player_name),
|
||||
'policy': 'strict', # or 'loose' depending on your needs
|
||||
'color': color,
|
||||
'color': str(color),
|
||||
'source': source,
|
||||
'destination': destination
|
||||
}
|
||||
response = requests.put(ozai_url + 'game/' + game_id, json=move)
|
||||
|
||||
print(move)
|
||||
response = requests.put(ozai_url + 'game/' + game_id, json=move)
|
||||
if response.status_code == 200:
|
||||
move_status = "Move Successful"
|
||||
else:
|
||||
|
||||
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
@ -3,6 +3,65 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Create Game</title>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 20vw;
|
||||
width: 60vw;
|
||||
background: url({{ url_for('static', filename='azul.webp') }}) no-repeat center center fixed;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 20px;
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid #000;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
background-color: #0000FF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="submit"]:hover {
|
||||
background-color: #000099;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
background-color: #0000FF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #000099;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% if not game_id %}
|
||||
@ -11,8 +70,8 @@
|
||||
<div>Leave empty for no player ...</div>
|
||||
<input type="text" name="player1" placeholder="Player 1" required>
|
||||
<input type="text" name="player2" placeholder="Player 2" required>
|
||||
<input type="text" name="player3" placeholder="Player 3">
|
||||
<input type="text" name="player4" placeholder="Player 4">\
|
||||
<input type="text" name="player3" placeholder="Player 3" style="background-color: #D3D3D3;">
|
||||
<input type="text" name="player4" placeholder="Player 4" style="background-color: #D3D3D3;">
|
||||
<!-- Add more input fields for more players -->
|
||||
<input type="submit" value="Create Game">
|
||||
</form>
|
||||
@ -36,7 +95,7 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
{% endif %}
|
||||
{% if game_id %}
|
||||
<p>Your game ID is: {{ game_id }}</p>
|
||||
@ -44,10 +103,10 @@
|
||||
<a href="/join_game/{{ game_id }}">Join Game</a>
|
||||
|
||||
<script>
|
||||
// Save game ID in browser session for auto fill in join page
|
||||
sessionStorage.setItem('game_id', '{{ game_id }}');
|
||||
alert('Game created with ID: {{ game_id }}');
|
||||
</script>
|
||||
//redirect to join game
|
||||
window.location.href = '/join_game/{{ game_id }}';
|
||||
</script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
@ -4,6 +4,19 @@
|
||||
<head>
|
||||
<title>Game</title>
|
||||
<style>
|
||||
a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
background-color: #c3bfbf;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em; /* increase font size */
|
||||
|
||||
}
|
||||
a:hover {
|
||||
background-color: #868787;
|
||||
}
|
||||
/* flexbox class */
|
||||
.flex-row {
|
||||
display: flex;
|
||||
@ -21,6 +34,56 @@
|
||||
justify-content:space-around;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.factory {
|
||||
overflow: hidden;
|
||||
border: 2px solid black;
|
||||
border-radius: 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* flex wrap */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
height: 5em;
|
||||
width: 5em;
|
||||
|
||||
}
|
||||
#market {
|
||||
height: 10em;
|
||||
width: 10em;
|
||||
}
|
||||
/* put the first element in the corner of the factory */
|
||||
.factory-name {
|
||||
border-radius: 20%;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 2px solid black;
|
||||
text-align: center;
|
||||
margin: 0.1em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.factory > * {
|
||||
border-radius: 10%;
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin: 0.1em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.wall {
|
||||
/* 5*5 grid */
|
||||
display: grid;
|
||||
@ -30,8 +93,8 @@
|
||||
}
|
||||
.wall > * {
|
||||
border: 1px solid black;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
text-align: center;
|
||||
margin-top: 0.1em;
|
||||
}
|
||||
@ -44,15 +107,18 @@
|
||||
.pattern_line {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
flex-direction: row;
|
||||
flex-direction:row-reverse;
|
||||
align-items:baseline;
|
||||
}
|
||||
.pattern_line > * {
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
margin: 0.1em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.floor {
|
||||
display: flex;
|
||||
@ -63,6 +129,8 @@
|
||||
.floor > * {
|
||||
border: 1px solid black;
|
||||
text-align: center;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
.blue {
|
||||
@ -78,7 +146,7 @@
|
||||
background-color: rgb(93, 93, 93);
|
||||
}
|
||||
.white {
|
||||
background-color:rgb(216, 169, 112);
|
||||
background-color:rgb(208, 202, 195);
|
||||
}
|
||||
.start {
|
||||
background-color: rgb(255, 1, 238);
|
||||
@ -87,39 +155,46 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Game</h1>
|
||||
<p>Game ID: {{ game_id }}</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>
|
||||
<div class="flex-row">
|
||||
{% for color, number in gamestate.market.items() %}
|
||||
<div class="{{ color }}">{{ color }}: {{ number }}</div>
|
||||
{% 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 %}
|
||||
<!-- market -->
|
||||
<div class="flex-col">
|
||||
<div class="factory-name">M</div>
|
||||
<div class="factory" id="market">
|
||||
{% for color, number in gamestate.market.items() %}
|
||||
{% if number > 0 %}
|
||||
{% for i in range(0, number) %}
|
||||
<div onclick="selectTile(this)" class="{{ color }}">{{ color[:1] }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<!-- factories -->
|
||||
{% for factory in gamestate.factories %}
|
||||
<div class="flex col">
|
||||
<div class="factory-name">{{ loop.index }}</div>
|
||||
<div class="factory" id="factory{{ loop.index }}">
|
||||
{% for color, number in factory.items() %}
|
||||
{% if number > 0 %}
|
||||
{% for i in range(0, number) %}
|
||||
<div onclick="selectTile(this)" class="{{ color }}">{{ color[:1] }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<h1>Players:</h1>
|
||||
|
||||
|
||||
|
||||
<div class="flex-row">
|
||||
{% for name, player_data in gamestate.players.items() %}
|
||||
<div class="flex-col">
|
||||
@ -129,8 +204,11 @@
|
||||
{% else %}
|
||||
<h2>{{ name }}</h2>
|
||||
{% endif %}
|
||||
{% if gamestate.current_player == name %}
|
||||
<p>(current)</p>
|
||||
{% endif %}
|
||||
{% if player_data.ready %}
|
||||
<p>Ready: {{ player_data.ready }}</p>
|
||||
<p>Ready</p>
|
||||
{% endif %}
|
||||
<p>Points: {{ player_data.points }}</p>
|
||||
</div>
|
||||
@ -140,35 +218,62 @@
|
||||
<!-- <h3>Pattern Lines</h3> -->
|
||||
{% for line in player_data.pattern_lines %}
|
||||
<div class="pattern_line">
|
||||
<!-- TODO: Fix this to not fill empty spaces. -->
|
||||
{% for i in range(0, loop.index) %}
|
||||
<div class="{{ line.color }}">{% if line.color %}{{ line.color }}{% else %}{{ '_' }}{% endif %}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if line.number > i %}
|
||||
<div class="{{ line.color }}">{{ line.color[:1] }}</div>
|
||||
{% else %}
|
||||
<div>_</div>
|
||||
{% endif %}
|
||||
{% 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>
|
||||
<div class="{{ cell }}">{% if cell %}{{ cell[:1] }}{% else %}{{ '_' }}{% endif %}</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Floor</h3>
|
||||
<div class="flex-row">
|
||||
<div style="width: 0.7em;">1</div>
|
||||
<div style="width: 0.7em;">1</div>
|
||||
<div style="width: 0.7em;">2</div>
|
||||
<div style="width: 0.7em;">2</div>
|
||||
<div style="width: 0.7em;">2</div>
|
||||
<div style="width: 0.7em;">3</div>
|
||||
<div style="width: 0.7em;">3</div>
|
||||
</div>
|
||||
<div class="floor">
|
||||
{% set floor_count = 0 %}
|
||||
{% for color, number in player_data.floor.items() %}
|
||||
<div class="{{ color }}">{{ color }}: {{ number }}</div>
|
||||
{% if number > 0 %}
|
||||
{% set floor_count = floor_count + number %}
|
||||
{% for i in range(0, number) %}
|
||||
<div class="{{ color }}">{{ color[:1] }}</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if floor_count < 7 %}
|
||||
{% set floor_blank_tiles = 7 - floor_count %}
|
||||
{% for i in range(0, floor_blank_tiles) %}
|
||||
<div>_</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% if player_name %}
|
||||
<h1>Play area</h1>
|
||||
@ -194,16 +299,20 @@
|
||||
|
||||
<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="1">Pattern Line 1</option>
|
||||
<option value="2">Pattern Line 2</option>
|
||||
<option value="3">Pattern Line 3</option>
|
||||
<option value="4">Pattern Line 4</option>
|
||||
<option value="5">Pattern Line 5</option>
|
||||
<option value="floor">Floor</option>
|
||||
</select>
|
||||
|
||||
<input type="submit" value="Submit Move">
|
||||
</form>
|
||||
<!-- button to go to next player -->
|
||||
{% set current_index = gamestate.player_names.index(player_name) %}
|
||||
{% set next_index = current_index + 1 if current_index + 1 < gamestate.player_names|length else 0 %}
|
||||
<a href="/game/{{ game_id }}/player/{{ gamestate.player_names[next_index] }}">Next Player</a>
|
||||
|
||||
{% if move_status %}
|
||||
<div>{{ move_status }}</div>
|
||||
@ -217,6 +326,43 @@
|
||||
console.log('Game ID: {{ game_id }}');
|
||||
console.log('Player Name: {{ player_name }}');
|
||||
console.log('Gamestate: {{ gamestate }}');
|
||||
|
||||
function selectTile(tile) {
|
||||
var source = tile.parentElement.id;
|
||||
if (source == 'market') {
|
||||
source = 'market';
|
||||
}else {
|
||||
source = source.replace('factory', '');
|
||||
}
|
||||
var color = tile.getAttribute('class');
|
||||
console.log('Selected tile: ' + color + ' from ' + source);
|
||||
//get elements of the form
|
||||
var sourceElement = document.getElementById('source');
|
||||
var colorElement = document.getElementById('color');
|
||||
//select the selected source and color
|
||||
console.log(sourceElement);
|
||||
console.log(colorElement);
|
||||
|
||||
//find the element in the dropdowns with the same value as the source and color
|
||||
var sourceOption = sourceElement.querySelector('option[value="' + source + '"]');
|
||||
var colorOption = colorElement.querySelector('option[value="' + color + '"]');
|
||||
console.log(sourceOption);
|
||||
console.log(colorOption);
|
||||
//set the selected attribute to true
|
||||
sourceOption.selected = true;
|
||||
colorOption.selected = true;
|
||||
|
||||
}
|
||||
|
||||
function select_pattern_line(pattern_line) {
|
||||
pattern_line = pattern_line.getAttribute('pattern_line');
|
||||
console.log('Selected pattern line: ' + pattern_line);
|
||||
var destinationElement = document.getElementById('destination');
|
||||
var destinationOption = destinationElement.querySelector('option[value="' + pattern_line + '"]');
|
||||
destinationOption.selected = true;
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -4,12 +4,46 @@
|
||||
<head>
|
||||
<title>Ozai webui:Join Game</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin-left: 3em;
|
||||
}
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
select, input[type="submit"] {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: #3779fd;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% if game_id %}
|
||||
<p>Selected game to join is: {{ game_id }}</p>
|
||||
<p>Selected game to join is: <strong>{{ game_id }}</strong></p>
|
||||
{% endif %}
|
||||
|
||||
{% if players %}
|
||||
@ -22,8 +56,7 @@
|
||||
<!-- 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="" selected disabled>Select player</option>
|
||||
<option value="spectator">Spectator</option>
|
||||
<option value="spectator" selected>Spectator</option>
|
||||
{% for player in players %}
|
||||
<option value="{{ player }}">{{ player }}</option>
|
||||
{% endfor %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user