diff --git a/memo.txt b/memo.txt
index be25ed46..98951849 100644
--- a/memo.txt
+++ b/memo.txt
@@ -5,16 +5,17 @@ Done:
- client prediction
- server reconciliation (buffer des inputs côté client + id sur les inputs)
- amélioration collision avec Hugo
- - du son (balle, foule qui applaudi/musique de victoire) (son de la raquette "Oof" de Roblox ? 🤡)
+ - du son (rebonds de la balle, "Oof" de Roblox sur un point)
- init de GameComponents partagé entre serveur et client.
- draw on the canvas "WIN", "LOSE", "MATCHMAKING COMPLETE", ...
- interpolation (mis à jour progressif des mouvements de l'adversaire)
- - traitement groupé des inputs clients toutes les x millisecondes
+ - traitement groupé des inputs clients toutes les x millisecondes
(BUG désynchronisation: revenu à un traitement immédiat en attendant)
- Détruire les GameSession une fois finies.
- mode multi-balles
- mode murs mouvant (la zone de jeu rétréci / agrandi en continu)
- Selection des modes de jeu via HTML
+ - Selection audio on/off via HTML
TODO:
- Match Abort si tout les joueurs ne sont pas pret assez vite (~15 secondes)
@@ -22,11 +23,13 @@ TODO:
- certaines utilisations de Math.floor() superflu ? Vérifier les appels.
(éventuellement Math.round() ?)
- un autre mode de jeu alternatif ?
+- changer les "localhost:8080" dans le code.
-----------
idées modes de jeu :
- mode 2 raquettes (un joueur haut/gauche et bas/droite)
- skin patate ???
- (prediction de l'avancement de la balle basé sur la latence serveur ?)
+- d'autres sons (foule qui applaudi/musique de victoire)
-----------
- BUG: Si la balle va très vite, elle peut ignorer la collision avec une raquette ou mur.
la collision est testée seulement après le mouvement.
diff --git a/src/client/audio.ts b/src/client/audio.ts
index 5990b1d8..f1a817d3 100644
--- a/src/client/audio.ts
+++ b/src/client/audio.ts
@@ -2,13 +2,15 @@
import * as c from "./constants.js"
export const soundPongArr: HTMLAudioElement[] = [];
-
-for (let i = 0; i <= 32; i++) {
- soundPongArr.push(new Audio("http://localhost:8080/sound/pong/"+i+".mp3"));
- soundPongArr[i].volume = c.soundPongVolume;
- soundPongArr[i].muted = c.soundMutedFlag;
-}
-
export const soundRoblox = new Audio("http://localhost:8080/sound/roblox-oof.mp3");
-soundRoblox.volume = c.soundRobloxVolume;
-soundRoblox.muted = c.soundMutedFlag;
+
+export function initAudio(muteFlag: boolean)
+{
+ for (let i = 0; i <= 32; i++) {
+ soundPongArr.push(new Audio("http://localhost:8080/sound/pong/"+i+".mp3"));
+ soundPongArr[i].volume = c.soundPongVolume;
+ soundPongArr[i].muted = muteFlag;
+ }
+ soundRoblox.volume = c.soundRobloxVolume;
+ soundRoblox.muted = muteFlag;
+}
diff --git a/src/client/constants.ts b/src/client/constants.ts
index 39a3a043..97bae265 100644
--- a/src/client/constants.ts
+++ b/src/client/constants.ts
@@ -14,6 +14,5 @@ export const drawLoopIntervalMS = 15; // millisecond
export const fixedDeltaTime = gameLoopIntervalMS/1000; // second
-export const soundMutedFlag = true; // TODO: Radio selector on website
export const soundRobloxVolume = 0.3; // between 0 and 1
export const soundPongVolume = 0.3; // between 0 and 1
diff --git a/src/client/pong.css b/src/client/pong.css
index cc90b07e..c481c502 100644
--- a/src/client/pong.css
+++ b/src/client/pong.css
@@ -20,14 +20,14 @@ body {
}
#canvas_container {
text-align: center;
- /* border: dashed white 5px; */
+ /* border: dashed rgb(245, 245, 245) 5px; */
/* max-height: 80vh; */
/* overflow: hidden; */
}
#div_game_options {
text-align: center;
font-family: "Bit5x3";
- color: white;
+ color: rgb(245, 245, 245);
font-size: x-large;
}
#div_game_options fieldset {
@@ -40,7 +40,7 @@ body {
}
#play_pong_button {
font-family: "Bit5x3";
- color: white;
+ color: rgb(245, 245, 245);
background-color: #333333;
font-size: x-large;
padding: 10px;
diff --git a/src/client/pong.html b/src/client/pong.html
index f4d97fa5..cea6522b 100644
--- a/src/client/pong.html
+++ b/src/client/pong.html
@@ -9,22 +9,27 @@
.
diff --git a/src/client/pong.ts b/src/client/pong.ts
index dfb857ac..5c9dcce0 100644
--- a/src/client/pong.ts
+++ b/src/client/pong.ts
@@ -13,7 +13,8 @@ import { handleInput } from "./handleInput.js";
import { gameLoop } from "./gameLoop.js"
import { drawLoop } from "./draw.js";
import { countdown } from "./utils.js";
-import {initWebSocket} from "./ws.js";
+import { initWebSocket } from "./ws.js";
+import { initAudio } from "./audio.js";
/* Keys
@@ -28,13 +29,20 @@ export let matchOptions: en.MatchOptions = en.MatchOptions.noOption;
function init()
{
- console.log("multiBalls:"+(document.getElementById("multiBalls")).checked);
- console.log("movingWalls:"+(document.getElementById("movingWalls")).checked);
-
- if ( (document.getElementById("multiBalls")).checked ) {
+ console.log("multi_balls:"+(document.getElementById("multi_balls")).checked);
+ console.log("moving_walls:"+(document.getElementById("moving_walls")).checked);
+ console.log("sound_on:"+(document.getElementById("sound_on")).checked);
+
+ let soundMutedFlag = false;
+ if ( (document.getElementById("sound_off")).checked ) {
+ soundMutedFlag = true;
+ }
+ initAudio(soundMutedFlag);
+
+ if ( (document.getElementById("multi_balls")).checked ) {
matchOptions |= en.MatchOptions.multiBalls;
}
- if ( (document.getElementById("movingWalls")).checked ) {
+ if ( (document.getElementById("moving_walls")).checked ) {
matchOptions |= en.MatchOptions.movingWalls;
}