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

Compare commits

base: adriangl:0924b4ee45fbf7dedcebbbb212be604c00b7966c
Branches Tags
adriangl:main
..
compare: adriangl:bd224094c7d9b3e4a02a217b7c60720a7086bdc9
Branches Tags
adriangl:main

2 Commits
0924b4ee45 ... bd224094c7

Author SHA1 Message Date
Adrian Gunnar Lauterer bd224094c7
style updates 2024-03-21 23:32:44 +01:00
Adrian Gunnar Lauterer 7ea30fee79
added socket lib to static 2024-03-21 19:36:46 +01:00
7 changed files with 6199 additions and 171 deletions
Show Stats Expand all files Collapse all files

6
main.py
View File

@ -22,6 +22,12 @@ def home():
def background():
#return the background image
return app.send_static_file('azul.webp')
@app.route('/socket.io.js')
def socketio_js():
#return the background image
return app.send_static_file('socket.io.js')
@app.route('/azul-flake.png')
def logo():
#return the background image

5870
static/socket.io.js Normal file
View File

File diff suppressed because it is too large Load Diff

60
templates/create.html
View File

@ -10,40 +10,49 @@
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 20vw;
width: 60vw;
/* removed due to low visibility */
/* 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; */
margin-left: 10vw;
width: 80vw;
background-color: #000;
color: #fff;
color-scheme: dark;
}
div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap; /* Allow the flex items to wrap onto the next line */
width: 100%;
}
form {
margin-top: 20px;
width: 300px;
margin-top: 20vh;
max-width: 40em;
min-width: 300px;
margin: 0 auto;
}
input[type="text"] {
padding: 10px;
margin-top: 10px;
padding: 1em;
margin-top: 1em;
width: 100%;
box-sizing: border-box;
border: 2px solid #000;
border-radius: 4px;
border: 0.5em solid #000;
border-radius: 1em;
}
input[type="submit"] {
padding: 10px;
margin-top: 10px;
padding: 1em;
margin-top: 3em;
width: 100%;
background-color: #0000FF;
color: #fff;
border: none;
border-radius: 4px;
border-radius: 1em;
cursor: pointer;
box-shadow: 0px 0.1em 0.5em rgba(255, 255, 255, 0.333); /* Add some shadow for depth */
transition: background-color 0.3s ease;
}
input[type="submit"]:hover {
@ -51,12 +60,12 @@
}
button {
padding: 10px;
margin-top: 10px;
padding: 1em;
margin-top: 1em;
background-color: #0000FF;
color: #fff;
border: none;
border-radius: 4px;
border-radius: 0.5em;
cursor: pointer;
}
@ -67,13 +76,16 @@
</head>
<body>
{% if not game_id %}
<div>
<h1>Create Game</h1>
<h2>Fill in playernames for wanted players</h2>
<h3>Leave empty for no player ...</h3>
</div>
<form method="POST" action="/create">
<div>Fill inn playernames for wanted players ...</div>
<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" style="background-color: #D3D3D3;">
<input type="text" name="player4" placeholder="Player 4" style="background-color: #D3D3D3;">
<input type="text" name="player3" placeholder="Player 3" style="background-color: #2a2929;">
<input type="text" name="player4" placeholder="Player 4" style="background-color: #2a2929;">
<!-- Add more input fields for more players -->
<input type="submit" value="Create Game">
</form>

254
templates/game.html
View File

@ -5,19 +5,56 @@
<title>Ozai:game</title>
<link rel="icon" type="image/png" href="/azul-flake.png">
<style>
* {
--border-color: rgb(172, 172, 172);
--bg-transparency: 0.5;
--tile-size: 2em;
}
body {
background-color: #383737;
color: white;
color-scheme: dark;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
padding: 1em;
display: inline-block;
text-decoration: none;
color: black;
background-color: #c3bfbf;
border-radius: 5px;
color: #aba4f6;
background-color: #1919a7;
border-radius: 1em;
font-weight: bold;
font-size: 1.5em; /* increase font size */
}
a:hover {
background-color: #868787;
background-color: #204ac8;
}
input[type="submit"] {
border: none;
border-radius: 1em;
background-color: #3232d1;
padding: 1em;
}
input[type="submit"]:hover {
background-color: #3f3ff2;
}
select {
font-size: 1.5em;
}
.move_select {
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: baseline;
}
/* flexbox class */
.flex-row {
display: flex;
@ -25,10 +62,17 @@
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
}
@media (max-width: 400px) {
.flex-row {
flex-direction: column;
justify-content: center;
align-items: center;
}
}
.flex-row > * {
margin-right: 5px;
margin-right: 1em;
}
.flex-col {
display: flex;
@ -38,7 +82,7 @@
.factory {
overflow: hidden;
border: 2px solid black;
border: 2px solid var(--border-color);
border-radius: 30%;
display: flex;
justify-content: center;
@ -47,13 +91,13 @@
flex-direction: row;
flex-wrap: wrap;
height: 5em;
width: 5em;
height: calc(var(--tile-size) * 3);
width: calc(var(--tile-size) * 3);
}
#market {
height: 10em;
width: 10em;
height: calc(var(--tile-size) * 6);
width: calc(var(--tile-size) * 6);
}
/* put the first element in the corner of the factory */
.factory-name {
@ -63,7 +107,7 @@
position: relative;
top: 0;
left: 0;
border: 2px solid black;
border: 2px solid var(--border-color);
text-align: center;
margin: 0.1em;
width: 1.5em;
@ -75,16 +119,23 @@
.factory > * {
border-radius: 10%;
border: 1px solid black;
border: 1px solid var(--border-color);
text-align: center;
margin: 0.1em;
width: 1.5em;
height: 1.5em;
width: var(--tile-size);
height: var(--tile-size);
overflow: hidden;
text-align: center;
vertical-align: middle;
}
.player_area {
border: 2px solid var(--border-color);
border-radius: 20px;
padding: 10px;
margin: 10px;
}
.wall {
/* 5*5 grid */
display: grid;
@ -93,9 +144,9 @@
gap: 0.1em;
}
.wall > * {
border: 1px solid black;
width: 1.5em;
height: 1.5em;
border: 1px solid var(--border-color);
width: var(--tile-size);
height: var(--tile-size);
text-align: center;
margin-top: 0.1em;
}
@ -112,69 +163,85 @@
align-items:baseline;
}
.pattern_line > * {
border: 1px solid black;
border: 1px solid var(--border-color);
text-align: center;
margin: 0.1em;
width: 1.5em;
height: 1.5em;
width: var(--tile-size);
height: var(--tile-size);
overflow: hidden;
text-align: center;
vertical-align: middle;
}
.floor {
.floor_container {
display: flex;
justify-content: left;
flex-direction: row;
align-items:baseline;
}
.floor > * {
border: 1px solid black;
.floor {
border: 1px solid var(--border-color);
text-align: center;
width: 1.5em;
height: 1.5em;
width: var(--tile-size);
height: var(--tile-size);
}
.floor_value {
text-align: center;
width: var(--tile-size);
}
.blue_bg {
background-color: rgb(49, 157, 245, 0.5);
background-color: rgb(49, 157, 245, var(--bg-transparency));
}
.yellow_bg {
background-color: rgb(245, 245, 10, 0.5);
background-color: rgb(247, 148, 62, var(--bg-transparency));
}
.red_bg {
background-color: rgb(255, 0, 0, 0.5);
background-color: rgb(200, 50, 50, var(--bg-transparency));
}
.black_bg {
background-color: rgb(93, 93, 93, 0.5);
background-color: rgb(30, 30, 30, var(--bg-transparency));
}
.white_bg {
background-color:rgb(208, 202, 195, 0.5);
background-color:rgb(130, 130, 130, var(--bg-transparency));
}
.blue {
border-radius: calc(var(--tile-size) * 0.2);
background-color: rgb(49, 157, 245);
}
.yellow {
background-color: yellow;
border-radius: calc(var(--tile-size) * 0.2);
background-color: rgb(247, 148, 62);
}
.red {
background-color: red;
border-radius: calc(var(--tile-size) * 0.2);
background-color: rgb(200, 50, 50);
}
.black {
background-color: rgb(93, 93, 93);
border-radius: calc(var(--tile-size) * 0.2);
background-color: rgb(30, 30, 30);
}
.white {
background-color:rgb(208, 202, 195);
border-radius: calc(var(--tile-size) * 0.2);
background-color:rgb(130, 130, 130);
}
.start {
background-color: rgb(255, 1, 238);
border-radius: calc(var(--tile-size) * 0.2);
background-color: rgb(165, 1, 155);
}
</style>
</head>
<body>
<div class="flex-row">
<p>Number of Players: {{ gamestate.n_players }}</p>
<p>Current Player: {{ gamestate.current_player }}</p>
<p>Playing as: {{ player_name }}</p>
<p>Game Status: {% if gamestate.game_end %}Ended{% else %}Active{% endif %}</p>
<p>Rounds: {{ gamestate.rounds }}</p>
<p>Days: {{ gamestate.days }}</p>
@ -211,18 +278,19 @@
{% endfor %}
</div>
<div class="flex-row">
{% for name, player_data in gamestate.players.items() %}
<div class="flex-col">
<div class="flex-col player_area">
<div class="flex-row">
{% if player_name == name %}
<h2>{{ player_name }} (You)</h2>
{% else %}
<h2>{{ name }}</h2>
{% endif %}
{% if gamestate.current_player == name %}
<p>(current)</p>
<p>◉</p>
{% else %}
<p>○</p>
{% endif %}
{% if player_name == name %}
<div><strong>{{ name }}</strong></div>
{% else %}
<div>{{ name }}</div>
{% endif %}
{% if player_data.ready %}
<p>Ready</p>
@ -261,32 +329,75 @@
</div>
</div>
<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" onclick="selectPatternLine(this)" value="floor">
<div class="floor_container" onclick="selectPatternLine(this)" value="floor">
{% set floor_count = 0 %}
{% set floor_negative_values = [1,1,2,2,2,3,3] %}
{% for color, number in player_data.floor.items() %}
{% if number > 0 %}
{% set floor_count = floor_count + number %}
{% for i in range(0, number) %}
<div class="{{ color }}">{{ color[:1] }}</div>
<!-- get index of item and set value to te value of floor_neg.. -->
<div class="flex-col">
<div class="floor_value">-{{ floor_negative_values[i] }}</div>
<div class="{{ color }} floor">{{ color[:1] }}</div>
</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>
<div class="flex-col">
<div class="floor_value">-{{ floor_negative_values[i] }}</div>
<div class="floor">_</div>
</div>
{% endfor %}
{% endif %}
</div>
{% if player_name == name %}
<form id='moveForm'</form>>
<div class="flex-col">
<div class="flex-row move_select">
<div>
<label for="source">from:</label>
<select id="source" name="source">
<option value="market">Market</option>
{% for factory in gamestate.factories %}
<option value="{{ loop.index }}">Factory {{ loop.index }}</option>
{% endfor %}
</select>
</div>
<div>
<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>
</div>
<div>
<label for="destination">to:</label>
<select id="destination" name="destination">
<option value="1">Line 1</option>
<option value="2">Line 2</option>
<option value="3">Line 3</option>
<option value="4">Line 4</option>
<option value="5">Line 5</option>
<option value="floor">Floor</option>
</select>
</div>
</div>
<input type="submit" value="Submit Move" style="margin-top: 1em;">
</div>
</form>
{% endif %}
</div>
{% endfor %}
</div>
@ -296,39 +407,8 @@
{% if player_name %}
<h1>Play area</h1>
<p>Playing as: {{ player_name }}</p>
<!-- 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 id='moveForm'</form>>
<label for="source">Source:</label>
<select id="source" name="source">
<option value="market">Market</option>
{% for factory in gamestate.factories %}
<option value="{{ loop.index }}">Factory {{ loop.index }}</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="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 %}
@ -339,7 +419,7 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.3/socket.io.js"></script>
<script src="/socket.io.js"></script>
<script>
console.log('Game ID: {{ game_id }}');
console.log('Player Name: {{ player_name }}');

42
templates/home.html
View File

@ -5,38 +5,50 @@
<link rel="icon" type="image/png" href="/azul-flake.png">
<style>
body {
background-color: black;
}
div {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
padding: 10px;
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;
flex-wrap: wrap; /* Allow the flex items to wrap onto the next line */
width: 90%;
position: relative;
left: 5%;
}
img {
position: relative;
left: 40%;
width: 20%;
}
a {
display: inline-block;
margin-right: 10vh;
margin-left: 10vh;
padding: 10vh 20vh; /* increase padding to make buttons larger */
margin: 5%;
padding: 5vh 5vw; /* increase padding to make buttons larger */
text-decoration: none;
color: white;
background-color: rgba(0, 123, 255, 0.7); /* Semi-transparent blue color to mimic the tiles */
border-radius: 5px;
background-color: rgb(0, 120, 247); /* Semi-transparent blue color to mimic the tiles */
border-radius: 1em;
font-weight: bold;
font-size: 3em; /* increase font size */
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); /* Add some shadow for depth */
box-shadow: 0px 0.5em 1em rgba(255, 255, 255, 0.333); /* Add some shadow for depth */
transition: background-color 0.3s ease; /* Smooth transition for hover and focus */
}
a:hover {
background-color: rgba(0, 86, 179, 0.7); /* Darker blue on hover */
a:hover, a:focus {
background-color: rgba(0, 120, 247, 0.7); /* Darker blue on hover and focus */
outline: none; /* Remove default focus outline */
}
</style>
</head>
<body>
<img src="azul-flake.png" alt="">
<div>
<a href="/create">Create Game</a>
<a href="/join">Join Game</a>
</div>
</body>
</html>

64
templates/join.html
View File

@ -7,26 +7,62 @@
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
padding: 10px;
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;
background-color: black;
color: white;
color-scheme: dark;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 5vh;
width: 80%;
max-width: 500px;
}
button, input[type="submit"] {
background-color: #0000FF;
cursor: pointer;
box-shadow: 0px 0.1em 0.5em rgba(255, 255, 255, 0.333);
margin-top: 2em;
}
button, input[type="submit"], input[type="text"] {
margin-top: 5vh;
padding: 1em;
margin-top: 1em;
color: #fff;
border: none;
border-radius: 1em;
width: 100%;
}
@media (max-width: 768px) {
input[type="text"], input[type="submit"], button {
font-size: 1.5em;
}
}
</style>
</head>
<body>
<img src="azul-flake.png" alt="">
<!-- a field to add a game id -->
<form id="joinGameForm" method="POST" action="/join" onsubmit="submitForm(event)">
<input type="text" name="game_id" placeholder="Game ID" required value="{{ game_id }}">
<input type="submit" value="Join Game">
</form>
<button onclick="window.history.back();">Back</button>
<!-- script to get from localstorage and prefill join game -->
</form>
</body>
<script>
function submitForm(e) {
e.preventDefault();
@ -48,15 +84,5 @@
//redirect to join game
window.location.href = '/join_game/' + game_id;
</script>
<noscript>
<p>manual redirect</p>
<a href="/join_game/+{{ game_id }}">Go to player selection</a>
</noscript>
{% endif %}
<noscript>
<p>JavaScript is not enabled. Some convenience migth not work.</p>
</noscript>
</body>
</html>

60
templates/join_game.html
View File

@ -4,10 +4,6 @@
<head>
<title>Ozai webui:Join Game</title>
<style>
* {
box-sizing: border-box;
margin-left: 3em;
}
body {
font-family: Arial, sans-serif;
margin: 0;
@ -16,36 +12,61 @@
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
color: white;
color-scheme: dark;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div{
margin-top: 20vh;
}
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 */
width: 90vw;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
form {
margin-top: 20px;
margin-bottom: 1em;
}
select, input[type="submit"] {
padding: 10px;
margin-top: 10px;
padding: 1em;
margin-top: 1em;
width: 40%;
min-width: 30em;
max-width: 50em;
height: 8vh;
}
input[type="submit"] {
background-color: #3779fd;
border: none;
border-radius: 1em;
text-decoration: none;
margin: 4px 2px;
margin: 6em 1em;
cursor: pointer;
}
</style>
</head>
<body>
<div>
{% if game_id %}
<p>Selected game to join is: <strong>{{ game_id }}</strong></p>
{% endif %}
@ -67,25 +88,26 @@
</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 }}">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 }}';
</script>
<noscript>
<p>manual redirect</p>
<a href="/game/{{ game_id }}/player/{{ player_name }}">Go to game</a>
</noscript>
{% endif %}
</div>
</body>
</html>