.
-
+
.
+
+
+
+
+
diff --git a/src/client/pong.ts b/src/client/pong.ts
index 44eab63c..dfb857ac 100644
--- a/src/client/pong.ts
+++ b/src/client/pong.ts
@@ -1,5 +1,11 @@
+initDom();
+function initDom() {
+ document.getElementById("play_pong_button").addEventListener("click", init);
+}
+
import * as c from "./constants.js"
+import * as en from "../shared_js/enums.js"
import { GameArea } from "./class/GameArea.js";
import { GameComponentsClient } from "./class/GameComponentsClient.js";
import { handleInput } from "./handleInput.js";
@@ -7,16 +13,37 @@ 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 {socket} from "./ws.js"; socket; // no-op, just for loading
/* Keys
Racket: W/S OR Up/Down
Grid On-Off: G
*/
-export const pong = new GameArea();
-export const gc = new GameComponentsClient(c.optionsPLACEHOLDER, pong.ctx);
+/* TODO: A way to delay the init of variables, but still use "const" not "let" ? */
+export let pong: GameArea;
+export let gc: GameComponentsClient;
+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 ) {
+ matchOptions |= en.MatchOptions.multiBalls;
+ }
+ if ( (document.getElementById("movingWalls")).checked ) {
+ matchOptions |= en.MatchOptions.movingWalls;
+ }
+
+ document.getElementById("div_game_options").hidden = true;
+
+ pong = new GameArea();
+ gc = new GameComponentsClient(matchOptions, pong.ctx);
+ initWebSocket(matchOptions);
+}
function matchmaking()
{
diff --git a/src/client/ws.ts b/src/client/ws.ts
index fd97756c..60f1ab87 100644
--- a/src/client/ws.ts
+++ b/src/client/ws.ts
@@ -1,6 +1,6 @@
import * as c from "./constants.js"
-import { gc } from "./global.js"
+import { gc, matchOptions } from "./global.js"
import * as ev from "../shared_js/class/Event.js"
import * as en from "../shared_js/enums.js"
import { matchmaking, matchmakingComplete, startGame } from "./pong.js";
@@ -10,10 +10,6 @@ import { soundRoblox } from "./audio.js"
import { sleep } from "./utils.js";
import { Vector, VectorInteger } from "../shared_js/class/Vector.js";
-const wsPort = 8042;
-const wsUrl = "ws://" + document.location.hostname + ":" + wsPort + "/pong";
-export const socket = new WebSocket(wsUrl, "json");
-
class ClientInfo {
id = "";
side: en.PlayerSide;
@@ -22,20 +18,27 @@ class ClientInfo {
opponentNextPos: VectorInteger;
}
+const wsPort = 8042;
+const wsUrl = "ws://" + document.location.hostname + ":" + wsPort + "/pong";
+export let socket: WebSocket; /* TODO: A way to still use "const" not "let" ? */
export const clientInfo = new ClientInfo();
-socket.addEventListener("open", (event) => {
- socket.send(JSON.stringify( new ev.ClientAnnounce(en.ClientRole.player, c.optionsPLACEHOLDER, clientInfo.id) ));
-});
-
-// socket.addEventListener("message", logListener); // for testing purpose
-socket.addEventListener("message", preMatchListener);
+export function initWebSocket(options: en.MatchOptions)
+{
+ socket = new WebSocket(wsUrl, "json");
+ socket.addEventListener("open", (event) => {
+ socket.send(JSON.stringify( new ev.ClientAnnounce(en.ClientRole.player, options, clientInfo.id) ));
+ });
+ // socket.addEventListener("message", logListener); // for testing purpose
+ socket.addEventListener("message", preMatchListener);
+}
function logListener(this: WebSocket, event: MessageEvent) {
console.log("%i: " + event.data, Date.now());
}
-function preMatchListener(this: WebSocket, event: MessageEvent) {
+function preMatchListener(this: WebSocket, event: MessageEvent)
+{
const data: ev.ServerEvent = JSON.parse(event.data);
switch (data.type) {
case en.EventTypes.assignId:
@@ -90,7 +93,7 @@ function gameUpdate(data: ev.EventGameUpdate)
{
console.log("gameUpdate");
- if (c.optionsPLACEHOLDER & en.MatchOptions.movingWalls) {
+ if (matchOptions & en.MatchOptions.movingWalls) {
gc.wallTop.pos.y = data.wallTop.y;
gc.wallBottom.pos.y = data.wallBottom.y;
}