42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

HTML sound selector

Browse Source
This commit is contained in:
LuckyLaszlo
2022-12-06 03:53:44 +01:00
parent 9dde821f67
commit 4be38c59e8
6 changed files with 54 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/client/audio.ts
View File

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

1
src/client/constants.ts
View File

@@ -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

6
src/client/pong.css
View File

@@ -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;

37
src/client/pong.html
View File

@@ -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">

20
src/client/pong.ts
View File

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