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

game improvements

This commit is contained in:
Adrian Gunnar Lauterer 2024-03-29 13:31:07 +01:00
parent a5b7198beb
commit bb4a86c29d
Signed by: adriangl
GPG Key ID: D33368A59745C2F0
3 changed files with 155 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/main.py
View File

@ -160,6 +160,11 @@ def game(game_id, player_name, local_game=None):
else:
return 'Player not found', 404
@app.route('/gametitle/<game_id>', methods=['GET'])
def gametitle(game_id):
gamestate = requests.get(ozai_url + 'game/' + game_id).json()
return render_template('gametitle.html', game_id=game_id, gamestate=gamestate)
@socketio.on('connect')
def ws_connect(message):

105
src/templates/game.html
View File

@ -236,7 +236,7 @@
{% 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>
<div onclick="selectTile(this)" draggable="true" ondragstart="handleDragStart(event)" class="{{ color }}">{{ color[:1] }}</div>
{% endfor %}
{% endif %}
{% endfor %}
@ -250,7 +250,7 @@
{% for color, number in factory.items() %}
{% if number > 0 %}
{% for i in range(0, number) %}
<div onclick="selectTile(this)" class="{{ color }}">{{ color[:1] }}</div>
<div onclick="selectTile(this)" draggable="true" ondragstart="handleDragStart(event)" class="{{ color }}">{{ color[:1] }}</div>
{% endfor %}
{% endif %}
{% endfor %}
@ -283,7 +283,7 @@
<div class="flex-col">
<!-- <h3>Pattern Lines</h3> -->
{% for line in player_data.pattern_lines %}
<div class="pattern_line" onclick="selectPatternLine(this)" value="{{loop.index}}">
<div class="pattern_line" onclick="selectPatternLine(this)" ondragover="handleDragOver(event)" ondrop="handleDrop(event)" value="{{loop.index}}">
<!-- TODO: Fix this to not fill empty spaces. -->
{% for i in range(0, loop.index) %}
{% if line.number > i %}
@ -313,7 +313,7 @@
</div>
</div>
<div class="floor_container" onclick="selectPatternLine(this)" value="floor">
<div ondragover="handleDragOver(event)" ondrop="handleDrop(event)" 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() %}
@ -377,7 +377,7 @@
</div>
</div>
<input type="submit" value="Submit Move" style="margin-top: 1em;">
<input id="submitButton" type="submit" value="Submit Move" style="margin-top: 1em;">
</div>
</form>
{% endif %}
@ -409,11 +409,97 @@
<script>
console.log('Game ID: {{ game_id }}');
console.log('Player Name: {{ player_name }}');
console.log('Gamestate: {{ gamestate }}');
console.log(JSON.parse('{{ gamestate | tojson }}'));
// refresh the page by listening to websocket events
game_id = '{{ game_id }}';
player_name = '{{ player_name }}';
// if gamestatus ended then redirect to the enscreen
if ('{{ gamestate.game_end }}') {
window.location.href = '/gametitle/{{ game_id }}';
}
// if local_game is tru change player (comments are not ignored by jinja)
//{% if local_game %}
current_player = '{{ gamestate.current_player }}';
if (player_name != current_player) {
window.location.href = '/game/{{ game_id }}/player/' + current_player + '/local/True';
}
//if the market only contains the start tile,
market = JSON.parse('{{ gamestate.market | tojson }}');
if (market['start'] == 1 && market['blue'] == 0 && market['yellow'] == 0 && market['red'] == 0 && market['black'] == 0 && market['white'] == 0) {
//if all the factories do not contain any tiles, switch to the next player
factories = JSON.parse('{{ gamestate.factories | tojson }}');
factory_tile_count = 0;
for (var i = 0; i < factories.length; i++) {
for (var color in factories[i]) {
factory_tile_count += factories[i][color];
}
}
if (factory_tile_count == 0) {
next_player = '{{ gamestate.player_names[(gamestate.player_names.index(gamestate.current_player) + 1) % gamestate.player_names|length] }}';
window.location.href = '/game/{{ game_id }}/player/' + next_player + '/local/True';
}
}
//{% endif %}
// Define the dragstart event handler
function handleDragStart(e) {
console.log(e);
e.dataTransfer.setData('dragged/data', e.target);
e.dataTransfer.setData('dragged/color', e.target.className);
var source = e.target.parentElement.id;
if (source == 'market') {
source = 'market';
}else {
source = source.replace('factory', '');
}
e.dataTransfer.setData('dragged/source', source);
}
// Define the drop event handler
function handleDrop(e) {
e.preventDefault(); // This is necessary to prevent the browser's default handling of the data
console.log(e);
//get element that was dragged
var color = e.dataTransfer.getData('dragged/color');
var source = e.dataTransfer.getData('dragged/source');
destination = e.target.parentElement.getAttribute('value')
if (destination == null) {
destination = e.target.getAttribute('value');
}
if (destination == null) {
destination = e.target.className;
}
console.log(color);
console.log(source);
console.log(destination);
//TODO: set the form values to the color source and destination
var sourceElement = document.getElementById('source');
var colorElement = document.getElementById('color');
var destinationElement = document.getElementById('destination');
var sourceOption = sourceElement.querySelector('option[value="' + source + '"]');
var colorOption = colorElement.querySelector('option[value="' + color + '"]');
var destinationOption = destinationElement.querySelector('option[value="' + destination + '"]');
sourceOption.selected = true;
colorOption.selected = true;
destinationOption.selected = true;
console.log('Dropped tile: ' + color + ' from ' + source + ' to ' + destination);
//submit the form by emiting the submit event as if the submit button was clicked
document.querySelector('#submitButton').click();
}
function handleDragOver(e) {
e.preventDefault();
// console.log(e);
}
function selectTile(tile) {
var source = tile.parentElement.id;
if (source == 'market') {
@ -469,13 +555,6 @@
formData.forEach((value, key) => data[key] = value);
console.log(data);
socket.emit('move', {game_id: game_id, player_name, move: data});
// if local_game is tru change player
//{% if local_game %}
let nextPlayer = '{{ gamestate.player_names[gamestate.player_names.index(player_name) + 1 if gamestate.player_names.index(player_name) + 1 < gamestate.player_names|length else 0] }}';
window.location.href = '/game/{{ game_id }}/player/' + nextPlayer + '/local/True';
//{% endif %}
});
</script>

58
src/templates/gametitle.html Normal file
View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<title>Game Title</title>
<style>
#win-screen {
display: none;
font-size: 2em;
text-align: center;
margin-top: 20%;
color: white;
}
body {
background-color: #2C3235;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2"></script>
</head>
<body>
<div id="win-screen"></div>
<script>
var gamestate = JSON.parse('{{ gamestate | tojson }}');
var winnerpoints = 0
var winner = null;
console.log(gamestate.players)
//for each player in the gamestate object not a list
for (player in gamestate.players) {
console.log(gamestate.players[player])
//if the player's points are greater than the winnerpoints
if (gamestate.players[player]['points'] > winnerpoints) {
//set the winnerpoints to the player's points
winnerpoints = gamestate.players[player]['points'];
//set the winner to the player
winner = gamestate.players[player];
winner['name'] = player;
}
}
var winnerName = winner['name'];
function showWinScreen() {
// Display confetti
confetti({
particleCount: 200,
spread: 80,
origin: { y: 0.6 }
});
// Display winner's name
var winScreen = document.getElementById('win-screen');
winScreen.innerHTML = "<strong>" + winnerName + "</strong> wins!" + "<br>" + "with <strong>" + winnerpoints + "</strong> points";
winScreen.style.display = 'block';
}
showWinScreen();
</script>
</body>
</html>