HTML sound selector

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.

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;
+}

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

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;

src/client/pong.html

@@ -9,22 +9,27 @@
 	<div id="preload_font">.</div>
 
 	<div id="div_game_options">
-		<fieldset>
-			<legend>Game options</legend>
-			<div>
-				<input type="checkbox" id="multiBalls" name="multiBalls">
-				<label for="multiBalls">Multiples balls</label>
-			</div>
-			
-			<div>
-				<input type="checkbox" id="movingWalls" name="movingWalls">
-				<label for="movingWalls">Moving walls</label>
-			</div>
-			
-			<div>
-				<button id="play_pong_button">Play</button>
-			</div>
-		</fieldset>
+			<fieldset>
+				<legend>game options</legend>
+				<div>
+					<input type="checkbox" id="multi_balls" name="multi_balls">
+					<label for="multi_balls">multiples balls</label>
+				</div>
+				<div>
+					<input type="checkbox" id="moving_walls" name="moving_walls">
+					<label for="moving_walls">moving walls</label>
+				</div>
+				<div>
+					<label>sound :</label>
+					<input type="radio" id="sound_on" name="sound_selector" value="on" checked>
+					<label for="sound_on">on</label>
+					<input type="radio" id="sound_off" name="sound_selector" value="off">
+					<label for="sound_off">off</label>
+				</div>
+				<div>
+					<button id="play_pong_button">PLAY</button>
+				</div>
+			</fieldset>
 	</div>
 
 	<div id="canvas_container">

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:"+(<HTMLInputElement>document.getElementById("multiBalls")).checked);
-	console.log("movingWalls:"+(<HTMLInputElement>document.getElementById("movingWalls")).checked);
-	
-	if ( (<HTMLInputElement>document.getElementById("multiBalls")).checked ) {
+	console.log("multi_balls:"+(<HTMLInputElement>document.getElementById("multi_balls")).checked);
+	console.log("moving_walls:"+(<HTMLInputElement>document.getElementById("moving_walls")).checked);
+	console.log("sound_on:"+(<HTMLInputElement>document.getElementById("sound_on")).checked);
+
+	let soundMutedFlag = false;
+	if ( (<HTMLInputElement>document.getElementById("sound_off")).checked ) {
+		soundMutedFlag = true;
+	}
+	initAudio(soundMutedFlag);
+
+	if ( (<HTMLInputElement>document.getElementById("multi_balls")).checked ) {
 		matchOptions |= en.MatchOptions.multiBalls;
 	}
-	if ( (<HTMLInputElement>document.getElementById("movingWalls")).checked ) {
+	if ( (<HTMLInputElement>document.getElementById("moving_walls")).checked ) {
 		matchOptions |= en.MatchOptions.movingWalls;
 	}