diff --git a/.gitignore b/.gitignore
index a8727e7..acddfd3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,7 @@ __pycache__/
data/
.env
makefile
+docker-compose.old.yml
+docker-compose.yml
logs/django.log
+pong/settings.py
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index e4c2828..aa21870 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,65 +1,4 @@
services:
- setup:
- image: docker.elastic.co/elasticsearch/elasticsearch:${STACK_VERSION}
- container_name: setup
- user: "0"
- volumes:
- - certs:/usr/share/elasticsearch/config/certs
- command: >
- bash -c '
- if [ x${ELASTIC_PASSWORD} == x ]; then
- echo "Set the ELASTIC_PASSWORD environment variable in the .env file";
- exit 1;
- elif [ x${KIBANA_PASSWORD} == x ]; then
- echo "Set the KIBANA_PASSWORD environment variable in the .env file";
- exit 1;
- fi;
- if [ ! -f config/certs/ca.zip ]; then
- echo "Creating CA";
- bin/elasticsearch-certutil ca --silent --pem -out config/certs/ca.zip;
- unzip config/certs/ca.zip -d config/certs;
- fi;
- if [ ! -f config/certs/certs.zip ]; then
- echo "Creating certs";
- echo -ne \
- "instances:\n"\
- " - name: es01\n"\
- " dns:\n"\
- " - es01\n"\
- " - localhost\n"\
- " ip:\n"\
- " - 127.0.0.1\n"\
- " - name: kibana\n"\
- " dns:\n"\
- " - kibana\n"\
- " - localhost\n"\
- " ip:\n"\
- " - 127.0.0.1\n"\
- > config/certs/instances.yml;
-
- bin/elasticsearch-certutil cert --silent --pem -out config/certs/certs.zip --in config/certs/instances.yml --ca-cert config/certs/ca/ca.crt --ca-key config/certs/ca/ca.key;
- unzip config/certs/certs.zip -d config/certs;
- fi;
-
- echo "Setting file permissions"
- chown -R root:root config/certs;
- find . -type d -exec chmod 750 \{\} \;;
- find . -type f -exec chmod 640 \{\} \;;
-
- echo "Waiting for Elasticsearch availability";
- until curl -s --cacert config/certs/ca/ca.crt https://es01:9200 | grep -q "missing authentication credentials"; do sleep 30; done;
- echo "Setting kibana_system password";
- until curl -s -X POST --cacert config/certs/ca/ca.crt -u "elastic:${ELASTIC_PASSWORD}" -H "Content-Type: application/json" https://es01:9200/_security/user/kibana_system/_password -d "{\"password\":\"${KIBANA_PASSWORD}\"}" | grep -q "^{}"; do sleep 10; done;
- echo "All done!";
- '
- healthcheck:
- test: ["CMD-SHELL", "[ -f config/certs/es01/es01.crt ]"]
- interval: 1s
- timeout: 5s
- retries: 120
-
-
-
backend:
build:
context: .
@@ -114,104 +53,6 @@ services:
timeout: 5s
retries: 5
- es01:
- image: docker.elastic.co/elasticsearch/elasticsearch:${STACK_VERSION}
- container_name: es01
- depends_on:
- setup:
- condition: service_healthy
- volumes:
- - certs:/usr/share/elasticsearch/config/certs:ro
- - pong_es_data_01:/usr/share/elasticsearch/data
- labels:
- co.elastic.logs/module: elasticsearch
- ports:
- - 9200:9200
- environment:
- - node.name=es01
- - cluster.name=${CLUSTER_NAME}
- - discovery.type=single-node
- - ELASTIC_PASSWORD=${ELASTIC_PASSWORD}
- - bootstrap.memory_lock=true
- - xpack.security.enabled=true
- - xpack.security.http.ssl.enabled=true
- - xpack.security.http.ssl.key=certs/es01/es01.key
- - xpack.security.http.ssl.certificate=certs/es01/es01.crt
- - xpack.security.http.ssl.certificate_authorities=certs/ca/ca.crt
- - xpack.security.transport.ssl.enabled=true
- - xpack.security.transport.ssl.key=certs/es01/es01.key
- - xpack.security.transport.ssl.certificate=certs/es01/es01.crt
- - xpack.security.transport.ssl.certificate_authorities=certs/ca/ca.crt
- - xpack.security.transport.ssl.verification_mode=certificate
- - xpack.license.self_generated.type=${LICENSE}
- healthcheck:
- test:
- [
- "CMD-SHELL",
- "curl -s --cacert config/certs/ca/ca.crt https://localhost:9200 | grep -q 'missing authentication credentials'",
- ]
- interval: 10s
- timeout: 10s
- retries: 120
-
- kibana:
- image: docker.elastic.co/kibana/kibana:${STACK_VERSION}
- container_name: kibana
- labels:
- co.elastic.logs/module: kibana
- depends_on:
- es01:
- condition: service_healthy
- volumes:
- - certs:/usr/share/kibana/config/certs:ro
- - pong_kibana:/usr/share/kibana/data
- ports:
- - 5601:5601
- environment:
- - SERVERNAME=kibana
- - ELASTICSEARCH_HOSTS=https://es01:9200
- - ELASTICSEARCH_USERNAME=${KIBANA_USERNAME}
- - ELASTICSEARCH_PASSWORD=${KIBANA_PASSWORD}
- - ELASTICSEARCH_SSL_CERTIFICATEAUTHORITIES=config/certs/ca/ca.crt
- - XPACK_SECURITY_ENCRYPTIONKEY=${ENCRYPTION_KEY}
- - XPACK_ENCRYPTEDSAVEDOBJECTS_ENCRYPTIONKEY=${ENCRYPTION_KEY}
- - XPACK_REPORTING_ENCRYPTIONKEY=${ENCRYPTION_KEY}
- healthcheck:
- test:
- [
- "CMD-SHELL",
- "curl -s -I http://localhost:5601 | grep -q 'HTTP/1.1 302 Found'"
- ]
- interval: 10s
- timeout: 10s
- retries: 120
-
- logstash01:
- image: docker.elastic.co/logstash/logstash:${STACK_VERSION}
- container_name: logstash01
- labels:
- co.elastic.logs/module: logstash
- user: root
- depends_on:
- es01:
- condition: service_healthy
- kibana:
- condition: service_healthy
- volumes:
- - certs:/usr/share/logstash/certs
- - pong_logstash_data01:/usr/share/logstash/data
- - ./config/logstash.conf:/usr/share/logstash/pipeline/logstash.conf:ro
- - pong_django_logs:/usr/share/logstash/logs
- ports:
- - "5044:5044/udp"
- command: logstash -f /usr/share/logstash/pipeline/logstash.conf
- environment:
- - NODE_NAME="logstash"
- - ELASTIC_HOSTS=https://es01:9200
- - ELASTIC_USER=${ELASTIC_USERNAME}
- - ELASTIC_PASSWORD=${ELASTIC_PASSWORD}
- - xpack.monitoring.enabled=false
-
volumes:
pong:
driver: local
@@ -227,14 +68,6 @@ volumes:
o: bind
pong_pg_data:
driver: local
- pong_es_data_01:
- driver: local
- pong_kibana:
- driver: local
- pong_logstash_data01:
- driver: local
- certs:
- driver: local
networks:
app-network:
diff --git a/makefile b/makefile
index 0c6d19d..45a9a55 100644
--- a/makefile
+++ b/makefile
@@ -4,7 +4,7 @@ CONTAINER=$(c)
up: down
$(COMPOSE) build
- $(COMPOSE) up -d $(CONTAINER) || true
+ $(COMPOSE) up --remove-orphans $(CONTAINER)
build:
$(COMPOSE) build $(CONTAINER)
@@ -32,7 +32,7 @@ ps:
db-shell:
$(COMPOSE) exec db psql -U 42student players_db
-re: destroy down up
+re: destroy up
help:
@echo "Usage:"
diff --git a/manage.py b/manage.py
index d01a08d..252b26c 100644
--- a/manage.py
+++ b/manage.py
@@ -1,5 +1,4 @@
#!/usr/bin/env python
-"""Django's command-line utility for administrative tasks."""
import os
import sys
diff --git a/pong/asgi.py b/pong/asgi.py
index b47b355..3a8dc68 100644
--- a/pong/asgi.py
+++ b/pong/asgi.py
@@ -18,7 +18,7 @@ django.setup()
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
-import pong.game.routing # Import your routing module
+import pong.game.routing
application = ProtocolTypeRouter({
"http": get_asgi_application(),
diff --git a/pong/game/consumers.py b/pong/game/consumers.py
index e3d68a1..8412496 100644
--- a/pong/game/consumers.py
+++ b/pong/game/consumers.py
@@ -5,6 +5,8 @@ from channels.generic.websocket import AsyncWebsocketConsumer
from django.contrib.auth.models import User
from channels.db import database_sync_to_async
from .matchmaking import match_maker
+from .tournament import tournament_match_maker
+import asyncio
class GameConsumer(AsyncWebsocketConsumer):
async def connect(self):
@@ -18,11 +20,15 @@ class GameConsumer(AsyncWebsocketConsumer):
await self.authenticate(data['token'])
elif data['type'] == 'authenticate2':
await self.authenticate2(data['token_1'], data['token_2'])
+ elif data['type'] == 'authenticate3':
+ await self.authenticate3(data['token'])
elif data['type'] == 'key_press':
if self.game:
await self.game.handle_key_press(self, data['key'])
- else:
- await match_maker.handle_key_press(self, data['key'])
+ elif data['type'] == 'start_tournament':
+ print(f"Start TOURNAMENT received by {self.user}")
+ # Run the tournament in the background
+ asyncio.create_task(tournament_match_maker.start_tournament())
async def authenticate(self, token):
user = await self.get_user_from_token(token)
@@ -74,11 +80,27 @@ class GameConsumer(AsyncWebsocketConsumer):
except User.DoesNotExist:
return None
+ async def authenticate3(self, token):
+ user = await self.get_user_from_token(token)
+ if user:
+ self.user = user
+ await self.send(text_data=json.dumps({'type': 'authenticated'}))
+ print(f"User {self.user.username} authenticated for tournament")
+ await self.join_tournament_waiting_room()
+ else:
+ await self.send(text_data=json.dumps({'type': 'error', 'message': 'Authentication failed'}))
+ print("Tournament authentication failed")
+
+ async def join_tournament_waiting_room(self):
+ await tournament_match_maker.add_player(self)
+
async def disconnect(self, close_code):
if self.game:
await self.game.end_game(disconnected_player=self)
await match_maker.remove_player(self)
+ await tournament_match_maker.remove_player(self)
print(f"User {self.user.username if hasattr(self, 'user') else 'Unknown'} disconnected")
async def set_game(self, game):
+ print(f"({self.user}) Game set to: {game}")
self.game = game
diff --git a/pong/game/game.py b/pong/game/game.py
index fd8c25c..2235970 100644
--- a/pong/game/game.py
+++ b/pong/game/game.py
@@ -4,10 +4,9 @@ import json
import asyncio
import random
from datetime import datetime
-from .utils import endfortheouche
+from .utils import handle_game_data
from asgiref.sync import sync_to_async
-
class Game:
def __init__(self, game_id, player1, player2, localgame):
self.game_id = game_id
@@ -24,7 +23,8 @@ class Game:
'ball_position': {'x': 390, 'y': 190},
'ball_velocity': {'x': random.choice([-5, 5]), 'y': random.choice([-5, 5])},
'player1_score': 0,
- 'player2_score': 0
+ 'player2_score': 0,
+ 'game_text': ''
}
else:
self.botgame = player2 is None
@@ -36,7 +36,8 @@ class Game:
'ball_position': {'x': 390, 'y': 190},
'ball_velocity': {'x': random.choice([-5, 5]), 'y': random.choice([-5, 5])},
'player1_score': 0,
- 'player2_score': 0
+ 'player2_score': 0,
+ 'game-text': ''
}
self.speed = 1
self.game_loop_task = None
@@ -45,32 +46,65 @@ class Game:
self.p2_mov = 0
self.bt1 = 0
self.bt2 = 0
- self.start_time = None
+ self.start_time = datetime.now()
async def start_game(self):
- print(f"- Game #{self.game_id} STARTED")
+ print(f"- Game #{self.game_id} STARTED ({self.game_state['player1_name']} vs {self.game_state['player2_name']}) --- ({self})")
self.game_loop_task = asyncio.create_task(self.game_loop())
- self.start_time = datetime.now()
print(f" Begin MATCH at: {self.start_time}")
async def game_loop(self):
print(" In the game loop..")
+ x = 0
while not self.ended:
if self.botgame:
- await self.update_bot_position()
+ x += 1
+ if x == 60:
+ await self.update_bot_position()
+ x = 0
await self.handle_pad_movement()
await self.update_game_state()
await self.send_game_state()
await asyncio.sleep(1/60) # Around 60 FPS
async def update_bot_position(self):
- target_y = self.game_state['ball_position']['y']
- if self.game_state['player2_position'] < target_y < self.game_state['player2_position'] + 80:
- pass
- elif self.game_state['player2_position'] < target_y:
- self.game_state['player2_position'] = min(self.game_state['player2_position'] + (5 * self.speed), 300)
- elif self.game_state['player2_position'] + 80 > target_y:
- self.game_state['player2_position'] = max(self.game_state['player2_position'] - (5 * self.speed), 0)
+ future_ball_position = self.predict_ball_trajectory()
+
+ target_y = future_ball_position['y']
+ player2_position = self.game_state['player2_position']
+
+ # Adjusts bot position based on expected ball position
+ if player2_position < target_y < player2_position + 80:
+ pass #bot already placed
+ elif player2_position < target_y:
+ #self.p2_mov = 1
+ self.game_state['player2_position'] = min(player2_position + (50 * self.speed), 300)
+ elif player2_position + 80 > target_y:
+ #self.p2_mov = -1
+ self.game_state['player2_position'] = max(player2_position - (50 * self.speed), 0)
+
+ def predict_ball_trajectory(self, steps=60):
+
+ future_x = self.game_state['ball_position']['x']
+ future_y = self.game_state['ball_position']['y']
+ velocity_x = self.game_state['ball_velocity']['x']
+ velocity_y = self.game_state['ball_velocity']['y']
+
+ for _ in range(steps):
+ future_x += velocity_x
+ if future_x <= 10:
+ future_x = 10
+ velocity_x = -velocity_x
+ elif future_x >= 790:
+ future_x = 790
+ else:
+ future_y += velocity_y
+
+ # Dealing with bounces off walls
+ if future_y <= 10 or future_y >= 390:
+ velocity_y = -velocity_y # Reverse the direction of vertical movement
+
+ return {'x': future_x, 'y': future_y}
async def update_game_state(self):
if self.ended:
@@ -94,21 +128,18 @@ class Game:
self.game_state['ball_velocity']['x'] *= -1
self.bt2 += 1
self.update_ball_velocity()
- # Check for scoring
- #print(f"########### score user 1 {self.game_state['player1_score']} ###########")
- #print(f"§§§§§§§§§§§ score user 2 {self.game_state['player2_score']} §§§§§§§§§§§")
-
+ # Check if some player won the game
if self.game_state['ball_position']['x'] <= 10:
self.game_state['player2_score'] += 1
if self.game_state['player2_score'] > 2:
- print("Here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!")
+ self.game_state['game_text'] = f"{self.game_state['player2_name']} WINS!"
await self.send_game_state()
await self.end_game()
self.reset_ball()
elif self.game_state['ball_position']['x'] >= 790:
self.game_state['player1_score'] += 1
if self.game_state['player1_score'] > 2:
- print("Here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!")
+ self.game_state['game_text'] = f"{self.game_state['player1_name']} WINS!"
await self.send_game_state()
await self.end_game()
self.reset_ball()
@@ -181,16 +212,14 @@ class Game:
self.game_state['player2_position'] = min(self.game_state['player2_position'] + (5 * self.speed), 300)
async def end_game(self, disconnected_player=None):
- print("end GAME CALLED")
if not self.ended:
- print("Game ended !!!!! ")
self.ended = True
if self.game_loop_task:
self.game_loop_task.cancel()
- print(f"- Game #{self.game_id} ENDED")
+ print(f"- Game #{self.game_id} ENDED --- ({self})")
end_time = datetime.now()
- duration = (end_time - self.start_time).total_seconds() / 60
+ duration = (end_time - self.start_time).total_seconds() / 60
# Notify that one player left the game
if disconnected_player:
@@ -201,7 +230,8 @@ class Game:
'player': disconnected_name
})
if not self.botgame:
- await remaining_player.send(message)
+ if not self.localgame:
+ await remaining_player.send(message)
# Notify both players that the game has ended
end_message = json.dumps({
'type': 'game_ended',
@@ -211,7 +241,6 @@ class Game:
if not self.botgame:
if not self.localgame:
await self.player2.send(end_message)
- print("save data")
- await sync_to_async(endfortheouche)(self.game_state['player1_name'], self.game_state['player2_name'],
+ await sync_to_async(handle_game_data)(self.game_state['player1_name'], self.game_state['player2_name'],
self.game_state['player1_score'], self.game_state['player2_score'],
self.bt1, self.bt2, duration, False, None)
diff --git a/pong/game/matchmaking.py b/pong/game/matchmaking.py
index 4939c87..6382b95 100644
--- a/pong/game/matchmaking.py
+++ b/pong/game/matchmaking.py
@@ -26,7 +26,8 @@ class MatchMaker:
for game in self.active_games.values():
if player in [game.player1, game.player2]:
await game.end_game(disconnected_player=player)
- del self.active_games[game.game_id]
+ if game.game_id in self.active_games:
+ del self.active_games[game.game_id]
break
async def match_loop(self):
@@ -102,14 +103,5 @@ class MatchMaker:
'player2': 'BOT'
}))
- async def handle_key_press(self, player, key):
- for game in self.active_games.values():
- if player in [game.player1, game.player2]:
- await game.handle_key_press(player, key)
- break
-
# Instance of the class
match_maker = MatchMaker()
-
-# to get what you want use get_player_p_win(player_name) !! (voir utils.py)
-#
diff --git a/pong/game/models.py b/pong/game/models.py
index 2586446..d72178f 100644
--- a/pong/game/models.py
+++ b/pong/game/models.py
@@ -4,7 +4,6 @@ from django.db import models
from django.contrib.auth.models import User
User.add_to_class('auth_token', models.CharField(max_length=100, null=True, blank=True, unique=True))
-# Create your models here.
class Player(models.Model):
name = models.CharField(max_length=100)
@@ -55,7 +54,7 @@ class Match(models.Model):
super().clean()
def save(self, *args, **kwargs):
- self.clean() # Appel de la méthode clean() avant d'enregistrer
+ self.clean()
super().save(*args, **kwargs)
def __str__(self):
diff --git a/pong/game/templates/pong/tournament_brackets.html b/pong/game/templates/pong/tournament_brackets.html
new file mode 100644
index 0000000..f7f0999
--- /dev/null
+++ b/pong/game/templates/pong/tournament_brackets.html
@@ -0,0 +1,54 @@
+
+
+
+ Tournament Brackets
+
+
+
+
+
+
\ No newline at end of file
diff --git a/pong/game/templates/pong/tournament_waiting_room.html b/pong/game/templates/pong/tournament_waiting_room.html
new file mode 100644
index 0000000..cb77338
--- /dev/null
+++ b/pong/game/templates/pong/tournament_waiting_room.html
@@ -0,0 +1,20 @@
+
+
+
Tournament Waiting Room
+
+
Players currently waiting: {{ players_count }}
+
Minimum players needed to start: {{ min_players_to_start }}
+
+
Players:
+
+ {% for player in players %}
+ {{ player }}
+ {% endfor %}
+
+
+ {% if players_count >= min_players_to_start %}
+
Start Tournament
+ {% else %}
+
Waiting for more players to join...
+ {% endif %}
+
${match.id}
+ ${match.player1__name}
+ ${match.player2__name}
+ ${match.score_player1}
+ ${match.score_player2}
+ ${match.winner__name}
+ ${match.nbr_ball_touch_p1}
+ ${match.nbr_ball_touch_p2}
+ ${match.duration}
+ ${match.date}
+ ${match.is_tournoi}
+ ${match.tournoi__name}
+ `;
+ matchListBody.appendChild(row);
+ });
+ } else {
+ row.innerHTML = `
+ No matches found.
+ `;
+ matchListBody.appendChild(row);
+ }
+ }
+
+ function displayPlayers(players) {
+ console.log('Displaying players:');
+ const playersListBody = document.querySelector('#player-list tbody');
+ playersListBody.innerHTML = '';
+
+ if (players.length != 0) {
+ players.forEach(player => {
+ const row = document.createElement('tr');
+ row.innerHTML = `
+ ${player.id}
+ ${player.name}
+ ${player.total_match}
+ ${player.total_win}
+ ${player.p_win}
+ ${player.m_score_match}
+ ${player.m_score_adv_match}
+ ${player.best_score}
+ ${player.m_nbr_ball_touch}
+ ${player.total_duration}
+ ${player.m_duration}
+ ${player.num_participated_tournaments}
+ ${player.num_won_tournaments}
+ `;
+ playersListBody.appendChild(row);
+ });
+ } else {
+ row.innerHTML = `
+ No matches found.
+ `
+ playersListBody.appendChild(row);
+ }
+ }
+
+ function displayTournois(tournois) {
+ console.log('Displaying tournois:');
+ const tournoisListBody = document.querySelector('#tournoi-list tbody');
+ tournoisListBody.innerHTML = '';
+
+ if (tournois.length != 0) {
+ tournois.forEach(tournoi => {
+ const row = document.createElement('tr');
+ row.innerHTML = `
+ ${tournoi.id}
+ ${tournoi.name}
+ ${tournoi.nbr_player}
+ ${tournoi.date}
+ ${tournoi.winner.name}
+ `;
+ tournoisListBody.appendChild(row);
+ });
+ } else {
+ row.innerHTML = `
+ No matches found.
+ `
+ tournoisListBody.appendChild(row);
+ }
+
+ }
+
+ document.getElementById('search-player').addEventListener('input', filterPlayers);
+ document.getElementById('search-match-player').addEventListener('input', filterMatches);
+ document.getElementById('search-match-date').addEventListener('input', filterMatches);
+
+ function filterPlayers() {
+ const searchValue = document.getElementById('search-player').value.toLowerCase();
+ const playersListBody = document.querySelector('#player-list tbody');
+ const rows = playersListBody.getElementsByTagName('tr');
+
+ for (let i = 0; i < rows.length; i++) {
+ const nameCell = rows[i].getElementsByTagName('td')[1];
+ if (nameCell) {
+ const nameValue = nameCell.textContent || nameCell.innerText;
+ if (nameValue.toLowerCase().indexOf(searchValue) > -1 ) {
+ rows[i].style.display = '';
+ } else {
+ rows[i].style.display = 'none';
+ }
+ }
+ }
+ }
+
+ function filterMatches() {
+ const playerSearchValue = document.getElementById('search-match-player').value.toLowerCase();
+ const dateSearchValue = document.getElementById('search-match-date').value;
+ const matchListBody = document.querySelector('#match-list tbody');
+ const rows = matchListBody.getElementsByTagName('tr');
+
+ for (let i = 0; i < rows.length; i++) {
+ const player1Cell = rows[i].getElementsByTagName('td')[1];
+ const player2Cell = rows[i].getElementsByTagName('td')[2];
+ const dateCell = rows[i].getElementsByTagName('td')[9];
+
+ let playerMatch = true;
+ if (playerSearchValue) {
+ const player1Value = player1Cell.textContent || player1Cell.innerText;
+ const player2Value = player2Cell.textContent || player2Cell.innerText;
+ playerMatch = player1Value.toLowerCase().indexOf(playerSearchValue) > -1 ||
+ player2Value.toLowerCase().indexOf(playerSearchValue) > -1;
+ }
+
+ let dateMatch = true;
+ if (dateSearchValue) {
+ const dateValue = dateCell.textContent || dateCell.innerText;
+ dateMatch = dateValue.startsWith(dateSearchValue);
+ }
+
+ if (playerMatch && dateMatch) {
+ rows[i].style.display = '';
+ } else {
+ rows[i].style.display = 'none';
+ }
+ }
+ }
+
+ document.getElementById('generate-player-chart').addEventListener('click', generatePlayerChart);
+ document.getElementById('generate-match-chart').addEventListener('click', generateMatchLinePlot);
+
+ function generatePlayerChart() {
+
+ if (document.getElementById('player-chart').style.display === 'block'){
+ document.getElementById('player-chart').style.display = 'none';
+ return ;
+ }
+
+ if (logo.style.display === 'block'){
+ logo.style.display = 'none';
+ }
+ const rows = document.querySelectorAll('#player-list tbody tr');
+ const playerNames = [];
+ const totalMatches = [];
+ const totalWins = [];
+
+ rows.forEach(row => {
+ const cells = row.getElementsByTagName('td');
+ playerNames.push(cells[1].innerText);
+ totalMatches.push(parseInt(cells[2].innerText));
+ totalWins.push(parseInt(cells[3].innerText));
+ });
+
+ const ctx = document.getElementById('player-chart').getContext('2d');
+ document.getElementById('player-chart').style.display = 'block';
+ new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: playerNames,
+ datasets: [
+ { label: 'Total Matches', data: totalMatches, backgroundColor: 'rgba(75, 192, 192, 0.6)' },
+ { label: 'Total Wins', data: totalWins, backgroundColor: 'rgba(54, 162, 235, 0.6)' },
+ ]
+ },
+ options: {
+ scales: {
+ x: {
+ ticks: {
+ color: '#00ffff'
+ }
+ },
+ y: {
+ beginAtZero: true,
+ ticks: {
+ color: '#00ffff'
+ }
+ }
+ }
+ }
+ });
+ }
+
+ function generateMatchLinePlot() {
+
+ if (document.getElementById('match-chart').style.display === 'block'){
+ document.getElementById('match-chart').style.display = 'none';
+ return ;
+ }
+
+ const rows = document.querySelectorAll('#match-list tbody tr');
+ const playerWins = {};
+ const dates = [];
+
+ rows.forEach(row => {
+ const cells = row.getElementsByTagName('td');
+ const winner = cells[5].innerText;
+ const date = cells[9].innerText;
+
+ if (!dates.includes(date)) {
+ dates.push(date);
+ }
+
+ if (!playerWins[winner]) {
+ playerWins[winner] = [];
+ }
+
+ let existingEntry = playerWins[winner].find(entry => entry.date === date);
+
+ if (existingEntry) {
+ existingEntry.wins += 1;
+ }
+
+ else {
+ let lastWinCount = playerWins[winner].length > 0 ? playerWins[winner][playerWins[winner].length - 1].wins : 0;
+ playerWins[winner].push({ date: date, wins: lastWinCount + 1 });
+ }
+ });
+
+ const datasets = Object.keys(playerWins).map(player => {
+ return {
+ label: player,
+ data: playerWins[player].map(entry => ({ x: entry.date, y: entry.wins })),
+ fill: false,
+ borderColor: getRandomColor(),
+ tension: 0.1
+ };
+ });
+
+ const ctx = document.getElementById('match-chart').getContext('2d');
+ document.getElementById('match-chart').style.display = 'block';
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: dates.sort(),
+ datasets: datasets
+ },
+ options: {
+ scales: {
+ x: {
+ type: 'time',
+ time: {
+ parser: 'YYYY-MM-DD',
+ unit: 'day',
+ tooltipFormat: 'll'
+ },
+ title: {
+ display: true,
+ text: 'Date'
+ },
+ ticks: {
+ color: '#00ffff'
+ }
+ },
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'Nombre de Victoires Cumulées'
+ },
+ ticks: {
+ color: '#00ffff'
+ }
+ }
+ }
+ }
+ });
+ }
+
+ function getRandomColor() {
+ const letters = '0123456789ABCDEF';
+ let color = '#';
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+ }
+
+});
\ No newline at end of file
diff --git a/pong/static/game.js b/pong/static/game.js
index 6305385..1b5a53c 100644
--- a/pong/static/game.js
+++ b/pong/static/game.js
@@ -28,30 +28,20 @@ document.addEventListener('DOMContentLoaded', () => {
const loginButton2 = document.getElementById('login2');
const gameContainer = document.getElementById('game1');
-
- const menuButton = document.querySelector('.burger-menu');
- const dropdownMenu = document.getElementById('dropdown-menu');
-
- const playerList = document.getElementById('player-list');
- const matchList = document.getElementById('match-list');
- const tournoiList = document.getElementById('tournoi-list');
- const blockchainList = document.getElementById('blockchain-list');
+ const tournamentContainer = document.getElementById('tournament-bracket');
const pongElements = document.getElementById('pong-elements');
const logo = document.querySelector('.logo');
+ const postFormButtons = document.getElementById('post-form-buttons');
const localGameButton = document.getElementById('local-game');
const quickMatchButton = document.getElementById('quick-match');
const tournamentButton = document.getElementById('tournament');
- /* const modal = document.getElementById("myModal");
- const btn = document.getElementById("myBtn");
- const span = document.getElementsByClassName("close")[0];
- const jsonContent = document.getElementById("jsonContent"); */
-
let socket;
let token;
let gameState;
+ let saveData = null;
// Auto-focus and key handling for AUTH-FORM
nicknameInput.focus();
@@ -74,16 +64,15 @@ document.addEventListener('DOMContentLoaded', () => {
quickMatchButton.addEventListener('click', startQuickMatch);
tournamentButton.addEventListener('click', startTournament);
-
async function handleCheckNickname() {
const nickname = nicknameInput.value.trim();
if (nickname) {
+ window.firstPlayerName = nickname;
try {
const exists = await checkUserExists(nickname);
if (exists) {
authForm.style.display = 'none';
loginForm.style.display = 'block';
- // Auto-focus and key handling for LOGIN-FORM
loginPasswordInput.focus();
loginPasswordInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
@@ -94,7 +83,6 @@ document.addEventListener('DOMContentLoaded', () => {
} else {
authForm.style.display = 'none';
registerForm.style.display = 'block';
- // Auto-focus and key handling for REGISTER-FORM
passwordInput.focus();
passwordInput.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
@@ -196,8 +184,6 @@ document.addEventListener('DOMContentLoaded', () => {
return data.authenticated;
}
- // functions to handle the second player
-
async function handleCheckNickname2() {
const nickname2 = nicknameInput2.value.trim();
if (nickname2) {
@@ -206,7 +192,6 @@ document.addEventListener('DOMContentLoaded', () => {
if (exists) {
authForm2.style.display = 'none';
loginForm2.style.display = 'block';
- // Auto-focus and key handling for LOGIN-FORM2
loginPasswordInput2.focus();
loginPasswordInput2.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
@@ -217,7 +202,6 @@ document.addEventListener('DOMContentLoaded', () => {
} else {
authForm2.style.display = 'none';
registerForm2.style.display = 'block';
- // Auto-focus and key handling for REGISTER-FORM2
passwordInput2.focus();
passwordInput2.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
@@ -333,25 +317,43 @@ document.addEventListener('DOMContentLoaded', () => {
}
function startLocalGame2() {
+ nickname = nicknameInput.value.trim();
+ nickname2 = nicknameInput2.value.trim();
+ saveData = {
+ type: 'local',
+ player1_name: nickname,
+ player2_name: nickname2
+ };
gameContainer.style.display = 'flex';
logo.style.display = 'none';
pongElements.style.display = 'none';
- //menuButton.style.display = 'none';
formBlock.style.display = 'none';
startWebSocketConnection(token, 2);
}
function startQuickMatch() {
+ saveData = {
+ type: 'quick'
+ }
gameContainer.style.display = 'flex';
logo.style.display = 'none';
pongElements.style.display = 'none';
- //menuButton.style.display = 'none';
formBlock.style.display = 'none';
+ document.getElementById('player1-name').textContent = "player 1";
+ document.getElementById('player2-name').textContent = "player 2";
+ document.getElementById('game-text').textContent = "";
+ document.getElementById('player1-score').textContent = 0;
+ document.getElementById('player2-score').textContent = 0;
+
startWebSocketConnection(token, 1);
}
function startTournament() {
- console.log("For now, do nothing, hurry up and work Senor chaku !!!!")
+ tournamentContainer.style.display = 'flex';
+ logo.style.display = 'none';
+ pongElements.style.display = 'none';
+ formBlock.style.display = 'none';
+ startWebSocketConnection(token, 42);
}
function startWebSocketConnection(token, players) {
@@ -360,11 +362,14 @@ document.addEventListener('DOMContentLoaded', () => {
socket.onopen = function (event) {
console.log('WebSocket connection established');
if (players === 1) {
- console.log("Sending token for 1 player game");
+ console.log("Sending token for a quick match game");
socket.send(JSON.stringify({ type: 'authenticate', token: token }));
- } else {
- console.log("Sending tokens for 2 player game");
+ } else if (players === 2) {
+ console.log("Sending tokens for a local game");
socket.send(JSON.stringify({ type: 'authenticate2', token_1: token, token_2: token2 }));
+ } else {
+ console.log("Sending token for a tournament game")
+ socket.send(JSON.stringify({ type: 'authenticate3', token: token }));
}
};
@@ -376,15 +381,36 @@ document.addEventListener('DOMContentLoaded', () => {
console.log('Entered the WAITING ROOM');
} else if (data.type === 'game_start') {
console.log('Game started:', data.game_id, '(', data.player1, 'vs', data.player2, ')');
- startGame(data.game_id, data.player1, data.player2);
+ gameContainer.style.display = 'flex';
+ document.addEventListener('keydown', handleKeyDown);
} else if (data.type === 'game_state_update') {
updateGameState(data.game_state);
} else if (data.type === 'player_disconnected') {
- console.log("Player disconnected:", data.player);
+ console.log('Player disconnected:', data.player);
} else if (data.type === 'game_ended') {
- console.log("Game ended:", data.game_id);
+ console.log('Game ended:', data.game_id);
} else if (data.type === 'error') {
console.error(data.message);
+ } else if (data.type === 'update_tournament_waiting_room') {
+ // Update the HTML content of the tournament bracket
+ document.getElementById('tournament-bracket').innerHTML = data.html;
+ // Reattach the event listener to the "Start Tournament" button
+ const startButton = document.getElementById('start-tournament-btn');
+ if (startButton) {
+ startButton.addEventListener('click', function() {
+ if (typeof socket !== 'undefined' && socket.readyState === WebSocket.OPEN) {
+ console.log('Start TOURNAMENT sent..');
+ socket.send(JSON.stringify({type: 'start_tournament'}));
+ } else {
+ console.error('WebSocket is not open or undefined');
+ }
+ });
+ }
+ } else if (data.type === 'update_brackets') {
+ // Update the HTML content of the tournament bracket
+ document.getElementById('tournament-bracket').innerHTML = data.html;
+ } else if (data.type === 'tournament_end') {
+ console.log('Tournament ended, the winner is:', data.winner);
} else {
console.log('Message from server:', data.type, data.message);
}
@@ -399,24 +425,14 @@ document.addEventListener('DOMContentLoaded', () => {
};
}
- function startGame(gameCode, player1_name, player2_name) {
- document.getElementById('gameCode').textContent = `Game Code: ${gameCode}`;
- document.getElementById('player1-name').textContent = `${player1_name}`;
- document.getElementById('player2-name').textContent = `${player2_name}`;
- document.addEventListener('keydown', handleKeyDown);
-
- }
-
function handleKeyDown(event) {
if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'w' || event.key === 's') {
- //console.log('Key press: ', event.key);
sendKeyPress(event.key.toLowerCase());
}
}
function sendKeyPress(key) {
if (socket.readyState === WebSocket.OPEN) {
- //console.log('Key sent: ', key);
socket.send(JSON.stringify({ type: 'key_press', key }));
}
}
@@ -424,230 +440,25 @@ document.addEventListener('DOMContentLoaded', () => {
function updateGameState(newState) {
gameState = newState;
renderGame();
+ //checkForWinner();
}
function renderGame() {
- const player1Pad = document.getElementById('player1-pad');
- player1Pad.style.top = `${gameState.player1_position}px`;
+ document.getElementById('player1-name').textContent = `${gameState.player1_name}`;
+ document.getElementById('player2-name').textContent = `${gameState.player2_name}`;
- const player2Pad = document.getElementById('player2-pad');
- player2Pad.style.top = `${gameState.player2_position}px`;
+ document.getElementById('player1-pad').style.top = `${gameState.player1_position}px`;
+ document.getElementById('player2-pad').style.top = `${gameState.player2_position}px`;
- const ball = document.getElementById('ball');
- ball.style.left = `${gameState.ball_position.x}px`;
- ball.style.top = `${gameState.ball_position.y}px`;
+ document.getElementById('ball').style.left = `${gameState.ball_position.x}px`;
+ document.getElementById('ball').style.top = `${gameState.ball_position.y}px`;
- const player1Score = document.getElementById('player1-score');
- player1Score.textContent = gameState.player1_score;
+ document.getElementById('player1-score').textContent = gameState.player1_score;
+ document.getElementById('player2-score').textContent = gameState.player2_score;
- const player2Score = document.getElementById('player2-score');
- player2Score.textContent = gameState.player2_score;
+ document.getElementById('game-text').textContent = gameState.game_text;
}
-
- ////////////////////////////// BEG BURGER BUTTON ////////////////////////////////
-
- menuButton.addEventListener('click', toggleMenu);
-
- function toggleMenu() {
- console.log('Menu toggled');
- if (dropdownMenu.style.display === "block") {
- dropdownMenu.style.display = "none";
- hideAllTables();
- } else {
- dropdownMenu.style.display = "block";
- }
- }
-
- function hideAllTables(){
- if (playerList) playerList.style.display = 'none';
- if (matchList) matchList.style.display = 'none';
- if (tournoiList) tournoiList.style.display = 'none';
- if (blockchainList) blockchainList.style.display = 'none';
- }
-
- const links = document.querySelectorAll('#dropdown-menu a');
-
- links.forEach(link => {
- link.addEventListener('click', (event) => {
- event.preventDefault(); // Empêche le comportement par défaut du lien
- const tableId = link.getAttribute('data-table');
- //console.log("Here !!!!!!!!!!!! NNNNNNNN");
- showTable(tableId);
- });
- });
-
- function showTable(tableId) {
- // Masquer tous les tableaux
- console.log('Entering showTable', tableId);
- hideAllTables();
-
- // Afficher le tableau sélectionné
- if (tableId === 'player-list') {
- console.log('Showing player list 2');
- //if (playerList) {
- playerList.style.display = 'block';
- fetchPlayers();
- //}
- } else if (tableId === 'match-list') {
- console.log('Showing match list 2');
- //if (matchList)
- matchList.style.display = 'block';
- fetchMatches();
- } else if (tableId === 'tournoi-list') {
- console.log('Showing tournoi list 2');
- //if (tournoiList)
- tournoiList.style.display = 'block';
- fetchTournois();
- } else if (tableId === 'blockchain-list') {
- console.log('Opening external page in a new tab');
- window.open('https://sepolia.etherscan.io/address/0x078d04eb6fb97cd863361fc86000647dc876441b', '_blank');
- /* fetch('/web3/')
- .then(response => response.json())
- .then(data => {
- console.log('ok here !!');
- jsonContent.textContent = JSON.stringify(data, null, 2);
- }); */
- }
-
- // Masquer le menu après la sélection
- if (dropdownMenu) {
- dropdownMenu.style.display = 'none';
- }
- }
-
- function fetchMatches() {
- console.log('Fetching matches...');
- fetch('/api/match_list/')
- .then(response => response.json())
- .then(data => {
- if (data.matches) {
- displayMatches(data.matches);
- }
- })
- .catch(error => console.error('Error fetching match data:', error));
- }
-
- function fetchPlayers(){
- console.log('Fetching players...');
- fetch('/api/player_list/')
- .then(response => response.json())
- .then(data => {
- if (data.players) {
- displayPlayers(data.players);
- }
- })
- .catch(error => console.error('Error fetching match data:', error));
- }
-
- function fetchTournois(){
- console.log('Fetching tournois...');
- fetch('/api/tournoi_list/')
- .then(response => response.json())
- .then(data => {
- if (data.tournois) {
- displayTournois(data.tournois);
- }
- })
- .catch(error => console.error('Error fetching match data:', error));
- }
-
- function displayMatches(matches) {
- console.log('Displaying matches:');
- const matchListBody = document.querySelector('#match-list tbody');
- matchListBody.innerHTML = '';
-
- if (matches.length != 0) {
- matches.forEach(match => {
- const row = document.createElement('tr');
- row.innerHTML = `
- ${match.id}
- ${match.player1__name}
- ${match.player2__name}
- ${match.score_player1}
- ${match.score_player2}
- ${match.winner__name}
- ${match.nbr_ball_touch_p1}
- ${match.nbr_ball_touch_p2}
- ${match.duration}
- ${match.date}
- ${match.is_tournoi}
- ${match.tournoi__name}
- `;
- matchListBody.appendChild(row);
- });
- } else {
- row.innerHTML = `
- No matches found.
- `;
- matchListBody.appendChild(row);
- }
- }
-
- function displayPlayers(players) {
- console.log('Displaying players:');
- const playersListBody = document.querySelector('#player-list tbody');
- playersListBody.innerHTML = '';
-
- if (players.length != 0) {
- players.forEach(player => {
- const row = document.createElement('tr');
- row.innerHTML = `
- ${player.id}
- ${player.name}
- ${player.total_match}
- ${player.total_win}
- ${player.p_win}
- ${player.m_score_match}
- ${player.m_score_adv_match}
- ${player.best_score}
- ${player.m_nbr_ball_touch}
- ${player.total_duration}
- ${player.m_duration}
- ${player.num_participated_tournaments}
- ${player.num_won_tournaments}
- `;
- playersListBody.appendChild(row);
- });
- } else {
- row.innerHTML = `
- No matches found.
- `
- playersListBody.appendChild(row);
- }
- }
-
- function displayTournois(tournois) {
- console.log('Displaying tournois:');
- const tournoisListBody = document.querySelector('#tournoi-list tbody');
- tournoisListBody.innerHTML = '';
-
- if (tournois.length != 0) {
- tournois.forEach(tournoi => {
- const row = document.createElement('tr');
- row.innerHTML = `
- ${tournoi.id}
- ${tournoi.name}
- ${tournoi.nbr_player}
- ${tournoi.date}
- ${tournoi.winner.name}
- `;
- tournoisListBody.appendChild(row);
- });
- } else {
- row.innerHTML = `
- No matches found.
- `
- tournoisListBody.appendChild(row);
- }
-
- }
-
- ////////////////////////////// END BURGER BUTTON ////////////////////////////////
-
-
- ////////////////////////////// BEG STARS ////////////////////////////////
-
const starsContainer = document.getElementById('stars');
for (let i = 0; i < 500; i++) {
const star = document.createElement('div');
@@ -660,149 +471,43 @@ document.addEventListener('DOMContentLoaded', () => {
starsContainer.appendChild(star);
}
- ////////////////////////////// END STARS ////////////////////////////////
+ const homeButton = document.getElementById('home');
+ const replayButton = document.getElementById('retry');
+ const gameControls = document.getElementById('game-controls');
+ homeButton.addEventListener('click', () => {
+ gameContainer.style.display = 'none';
+ gameControls.style.display = 'none';
+
+ logo.style.display = 'block'
+
+ formBlock.style.display = 'block';
+ postFormButtons.style.display = 'flex';
- /* btn.onclick = function() {
- fetch('/web3/')
- .then(response => response.json())
- .then(data => {
- console.log('ok here !!');
- jsonContent.textContent = JSON.stringify(data, null, 2);
- modal.style.display = "block";
- });
+ setupFirstPlayer();
+ });
+
+ function setupFirstPlayer() {
+ const firstPlayerName = window.firstPlayerName;
+ document.getElementById('player1-name').textContent = firstPlayerName;
}
- span.onclick = function() {
- modal.style.display = "none";
- }
+ replayButton.addEventListener('click', () => {
+ document.getElementById('player1-name').textContent = saveData.player1_name;
+ document.getElementById('player2-name').textContent = saveData.player2_name;
+ startLocalGame2();
+ });
- window.onclick = function(event) {
- if (event.target == modal) {
- modal.style.display = "none";
- }
- } */
-
- ////////////////////////////// BEG LANGAGE ////////////////////////////////
- const translations = {
- fr: {
- welcome: "BIENVENUE DANS LE PONG 42",
- labelNickname: "Entrez votre surnom:",
- labelPassword: "Entrez votre mot de passe:",
- labelConfirmPassword: "Confirmez votre mot de passe:",
- labelLoginPassword: "Entrez votre mot de passe:"
- },
- en: {
- welcome: "WELCOME TO PONG 42",
- labelNickname: "Enter your nickname:",
- labelPassword: "Enter your password:",
- labelConfirmPassword: "Confirm your password:",
- labelLoginPassword: "Enter your password:"
- },
- it: {
- welcome: "BENVENUTO A PONG 42",
- labelNickname: "Inserisci il tuo soprannome:",
- labelPassword: "Inserisci la tua password:",
- labelConfirmPassword: "Conferma la tua password:",
- labelLoginPassword: "Inserisci la tua password:"
- },
- es: {
- welcome: "BIENVENIDO A PONG 42",
- labelNickname: "Introduce tu apodo:",
- labelPassword: "Introduce tu contraseña:",
- labelConfirmPassword: "Confirma tu contraseña:",
- labelLoginPassword: "Introduce tu contraseña:"
- },
- de: {
- welcome: "WILLKOMMEN BEI PONG 42",
- labelNickname: "Geben Sie Ihren Spitznamen ein:",
- labelPassword: "Geben Sie Ihr Passwort ein:",
- labelConfirmPassword: "Bestätigen Sie Ihr Passwort:",
- labelLoginPassword: "Geben Sie Ihr Passwort ein:"
- }
- };
-
- function setCookie(name, value, days) {
- const d = new Date();
- d.setTime(d.getTime() + (days*24*60*60*1000));
- const expires = "expires=" + d.toUTCString();
- document.cookie = name + "=" + value + ";" + expires + ";path=/";
- }
-
- function getCookie(name) {
- const cname = name + "=";
- const decodedCookie = decodeURIComponent(document.cookie);
- const ca = decodedCookie.split(';');
- for(let i = 0; i < ca.length; i++) {
- let c = ca[i];
- while (c.charAt(0) === ' ') {
- c = c.substring(1);
- }
- if (c.indexOf(cname) === 0) {
- return c.substring(cname.length, c.length);
+ function checkForWinner() {
+ if (gameState.player1_score === 3 || gameState.player2_score === 3) {
+ gameControls.style.display = 'flex';
+ homeButton.style.display = 'block';
+ replayButton.style.display = 'none';
+ console.log(saveData.type);
+ if (saveData.type === 'local'){
+ replayButton.style.display = 'block';
}
}
- return "";
}
- function changeLanguage(lang) {
- setCookie('preferredLanguage', lang, 365); // Store the language preference for 1 year
- document.getElementById('welcome').innerText = translations[lang].welcome;
- document.getElementById('label-nickname').innerText = translations[lang].labelNickname;
- document.getElementById('label-password').innerText = translations[lang].labelPassword;
- document.getElementById('label-confirm-password').innerText = translations[lang].labelConfirmPassword;
- document.getElementById('label-login-password').innerText = translations[lang].labelLoginPassword;
- }
-
- // Function to set the language based on the cookie
- function setLanguageFromCookie() {
- const preferredLanguage = getCookie('preferredLanguage');
- if (preferredLanguage && translations[preferredLanguage]) {
- changeLanguage(preferredLanguage);
- } else {
- changeLanguage('fr'); // Default to French if no cookie is found
- }
- }
-
- document.getElementById('lang-fr').addEventListener('click', () => changeLanguage('fr'));
- document.getElementById('lang-en').addEventListener('click', () => changeLanguage('en'));
- document.getElementById('lang-it').addEventListener('click', () => changeLanguage('it'));
- document.getElementById('lang-es').addEventListener('click', () => changeLanguage('es'));
- document.getElementById('lang-de').addEventListener('click', () => changeLanguage('de'));
-
- // Set the language when the page loads
- window.onload = setLanguageFromCookie;
-
- ////////////////////////////// END LANGAGE ////////////////////////////////
-
-
-
- ////////////////////////////// BEG SETTING ////////////////////////////////
-
- document.getElementById('settings-btn').addEventListener('click', function() {
- document.getElementById('settings-menu').style.display = 'block';
- });
-
- document.getElementById('close-settings').addEventListener('click', function() {
- document.getElementById('settings-menu').style.display = 'none';
- });
-
- // Change the color of the text
- document.getElementById('color-picker').addEventListener('input', function() {
- document.body.style.color = this.value;
- document.querySelectorAll('button').forEach(function(button) {
- button.style.backgroundColor = this.value; // Change la couleur de fond des boutons
- }, this);
- });
-
- document.getElementById('font-selector').addEventListener('change', function() {
- document.body.style.fontFamily = this.value;
- });
-
- document.getElementById('font-size-slider').addEventListener('input', function() {
- document.body.style.fontSize = this.value + 'px';
- });
-
- ////////////////////////////// END SETTING ////////////////////////////////
-
});
diff --git a/pong/static/index.html b/pong/static/index.html
index d261bcf..aa89490 100644
--- a/pong/static/index.html
+++ b/pong/static/index.html
@@ -9,16 +9,7 @@
-
-
-
-
+
@@ -111,21 +102,30 @@
+
+
+
+ Home
+ Rejouer
+
+
-
Game Code :
-
Player 1
-
Player 2
+
+
Players
+
+
Générer le graphique
+
@@ -189,8 +194,14 @@
+
+
+
+
+
+
-