game improvements
This commit is contained in:
parent
a5b7198beb
commit
bb4a86c29d
GPG Key ID:
D33368A59745C2F0
@ -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):
|
||||
|
||||
@ -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
58
src/templates/gametitle.html
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user