pong pretty / local rdy in back, need hooking in front
This commit is contained in:
bgoulard
Maix0
parent
c656839450
commit
0727067b27
4 changed files with 150 additions and 77 deletions
|
|
@ -1,35 +1,35 @@
|
|||
<div class="displaybox">
|
||||
<div id="mainbox" class="mainboxDisplay">
|
||||
<button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button>
|
||||
<br>
|
||||
<button id="b-joinQueu" class="btn-style absolute top-16 left-6">Queue Up</button>
|
||||
<button id="QueueBtn" class="btn-style absolute top-4 left-6">Queue Up</button>
|
||||
<br>
|
||||
<h1 class="text-3xl font-bold text-gray-800">
|
||||
Pong Box<span id="t-username"></span>
|
||||
</h1><br>
|
||||
|
||||
<label class="inline-flex items-center gap-3 cursor-pointer select-none">
|
||||
<!-- Checkbox -->
|
||||
<input id="modeToggle" type="checkbox" class="sr-only"/>
|
||||
<!-- Switch -->
|
||||
<div id="toggleTrack" class="relative w-14 h-7 rounded-full bg-gray-300 transition-colors duration-300">
|
||||
<span id="toggleKnob" class="absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full transition-transform duration-300"></span>
|
||||
</div>
|
||||
<!-- Label -->
|
||||
<span id="toggleLabel" class="text-sm font-medium text-gray-700"> Local </span>
|
||||
</label>
|
||||
<!-- on/off switch for local / online play : idea was re-worked, we probably wont use that -->
|
||||
<!-- <label class="inline-flex items-center gap-3 cursor-pointer select-none"> -->
|
||||
<!-- <input id="modeToggle" type="checkbox" class="sr-only"/> -->
|
||||
<!-- <div id="toggleTrack" class="relative w-14 h-7 rounded-full bg-gray-300 transition-colors duration-300"> -->
|
||||
<!-- <span id="toggleKnob" class="absolute top-0.5 left-0.5 w-6 h-6 bg-white rounded-full transition-transform duration-300"></span> -->
|
||||
<!-- </div> -->
|
||||
<!-- <span id="toggleLabel" class="text-sm font-medium text-gray-700"> Local </span> -->
|
||||
<!-- </label> -->
|
||||
|
||||
<!-- Horizontal Message Box -->
|
||||
<div id="system-box" class="system-info">System: connecting ... </div>
|
||||
<h1 id="score-board" class="text-p10 font-bold text-gray-800">0:0</h1>
|
||||
<div id="score-box" class="grid grid-cols-[1fr_auto_1fr] items-center">
|
||||
<h1 id="player-left"></h1>
|
||||
<h1 id="score-board" class="justify-self-center text-p10 font-bold text-gray-800">0:0</h1>
|
||||
<h1 id="player-right"></h1>
|
||||
</div>
|
||||
<!-- Pong Box -->
|
||||
<div class="flex justify-center mt-2">
|
||||
<div id="pongspace" class="flex flex-col">
|
||||
<div id="pongbox" class="pongbox-style">
|
||||
<div class="pong-field">
|
||||
<div id="batleft" class="pong-batleft bg-amber-400 top-0"></div>
|
||||
<div id="batleft" class="pong-batleft top-0"></div>
|
||||
<div class="pong-center-line"></div>
|
||||
<div id="batright" class="pong-batright bg-amber-400 top-0"></div>
|
||||
<div id="batright" class="pong-batright top-0"></div>
|
||||
<div id="ball" class="rounded-full border-4 bg-white border-gray-400"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
import { addRoute, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
|
||||
import { addRoute, navigateTo, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing";
|
||||
import authHtml from './pong.html?raw';
|
||||
import io from 'socket.io-client';
|
||||
import type { CSocket, GameMove, GameUpdate } from "./socket";
|
||||
import { showError, showInfo } from "@app/toast";
|
||||
|
||||
// TODO: local game (2player -> server -> 2player : current setup)
|
||||
// TODO: tournament via remote (dedicated queu? idk)
|
||||
//
|
||||
import { getUser } from "@app/auth";
|
||||
import { isNullish } from "@app/utils";
|
||||
|
||||
// get the name of the machine used to connect
|
||||
declare module 'ft_state' {
|
||||
|
|
@ -15,8 +13,15 @@ declare module 'ft_state' {
|
|||
}
|
||||
}
|
||||
|
||||
// GameRdyDown = "Ready Up?"
|
||||
// GameRdyUp = "Ready down?"
|
||||
enum QueueState {
|
||||
InQueu = "In Queue",
|
||||
InGame = "In Game",
|
||||
Iddle = "Queue Up",
|
||||
};
|
||||
|
||||
document.addEventListener("ft:pageChange", (newUrl) => {
|
||||
// we are still on a pong page => keep the socket around !
|
||||
if (newUrl.detail.startsWith('/app/pong') || newUrl.detail.startsWith('/pong')) return;
|
||||
if (window.__state.pongSock !== undefined) window.__state.pongSock.close();
|
||||
window.__state.pongSock = undefined;
|
||||
|
|
@ -30,73 +35,83 @@ export function getSocket(): CSocket {
|
|||
|
||||
function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
|
||||
setTitle('Pong Game Page');
|
||||
// MAYBE: "queue up" btn : adds timer to page for duration of queue
|
||||
// TODO: "local play" btn : emit "local new game" evt to server; play game on single computer (maybe need to change keys-handling logic)
|
||||
|
||||
return {
|
||||
|
||||
html: authHtml, postInsert: async (app) => {
|
||||
const checkbox = document.getElementById("modeToggle") as HTMLInputElement;
|
||||
const label = document.getElementById("toggleLabel") as HTMLSpanElement;
|
||||
const track = document.getElementById("toggleTrack") as HTMLDivElement;
|
||||
const knob = document.getElementById("toggleKnob") as HTMLSpanElement;
|
||||
|
||||
checkbox.addEventListener("change", () => { // web vs local
|
||||
if (checkbox.checked) {
|
||||
label.textContent = "Web";
|
||||
track.classList.replace("bg-gray-300", "bg-blue-600");
|
||||
knob.classList.add("translate-x-7");
|
||||
} else {
|
||||
label.textContent = "Local";
|
||||
track.classList.replace("bg-blue-600", "bg-gray-300");
|
||||
knob.classList.remove("translate-x-7");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const DEFAULT_COLOR = "white";
|
||||
const SELF_COLOR = "red";
|
||||
|
||||
const user = getUser();
|
||||
let currentGame: GameUpdate | null = null;
|
||||
const batLeft = document.querySelector<HTMLDivElement>("#batleft");
|
||||
const batRight = document.querySelector<HTMLDivElement>("#batright");
|
||||
const ball = document.querySelector<HTMLDivElement>("#ball");
|
||||
const score = document.querySelector<HTMLDivElement>("#score-board");
|
||||
if (!batLeft || !batRight || !ball || !score)
|
||||
return showError('fatal error');
|
||||
const playerL = document.querySelector<HTMLDivElement>('#player-left');
|
||||
const playerR = document.querySelector<HTMLDivElement>('#player-right');
|
||||
const queueBtn = document.querySelector<HTMLButtonElement>("#QueueBtn");
|
||||
|
||||
let socket = getSocket();
|
||||
|
||||
let currentGame: GameUpdate | null = null;
|
||||
if (isNullish(user)) { // if no user (no loggin / other) : GTFO
|
||||
navigateTo("/app");
|
||||
return ;
|
||||
}
|
||||
if (!batLeft || !batRight || !ball || !score || !queueBtn || !playerL || !playerR) // sanity check
|
||||
return showError('fatal error');
|
||||
|
||||
// ---
|
||||
// keys handler
|
||||
// ---
|
||||
const keys: Record<string, boolean> = {};
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
keys[e.key.toLowerCase()] = true;
|
||||
});
|
||||
document.addEventListener("keyup", (e) => {
|
||||
keys[e.key.toLowerCase()] = false;
|
||||
});
|
||||
document.addEventListener("keydown", (e) => {keys[e.key.toLowerCase()] = true;});
|
||||
document.addEventListener("keyup", (e) => {keys[e.key.toLowerCase()] = false;});
|
||||
|
||||
setInterval(() => { // key sender
|
||||
if (queueBtn.innerText !== QueueState.InGame)//we're in game ? continue | gtfo
|
||||
return ;
|
||||
if (currentGame === null) return;
|
||||
|
||||
let packet: GameMove = {
|
||||
move: null,
|
||||
moveRight: null,
|
||||
}
|
||||
if ((keys['w'] !== keys['s'])) {
|
||||
packet.move = keys['w'] ? 'up' : 'down';
|
||||
}
|
||||
if (currentGame.local && (keys['o'] !== keys['l'])) {
|
||||
packet.moveRight = keys['o'] ? 'up' : 'down';
|
||||
}
|
||||
|
||||
if (queueBtn.innerText !== QueueState.InGame)//we're in game ? continue | gtfo
|
||||
return ;
|
||||
if (currentGame === null) return;
|
||||
|
||||
if ((keys['w'] !== keys['s']))
|
||||
packet.move = keys['w'] ? 'up' : 'down';
|
||||
if (currentGame.local && (keys['o'] !== keys['l']))
|
||||
packet.moveRight = keys['o'] ? 'up' : 'down';
|
||||
socket.emit('gameMove', packet);
|
||||
}, 1000 / 60);
|
||||
// ---
|
||||
// keys end
|
||||
// ---
|
||||
|
||||
// ---
|
||||
// position logic (client)
|
||||
// ---
|
||||
const DEFAULT_POSITIONS : GameUpdate = {
|
||||
gameId:"",
|
||||
ball:{size:16, x:800/2, y:450/2},
|
||||
left:{id:"", paddle:{x:40, y:185, width:12, height:80}, score:0},
|
||||
right:{id:"", paddle:{x:748, y:185, width:12, height:80}, score:0},
|
||||
local:false
|
||||
};
|
||||
|
||||
const render = (state: GameUpdate) => {
|
||||
currentGame = state;
|
||||
//batLeft.style.transform = `translateY(${state.left.paddle.y}px) translateX(${state.left.paddle.x}px)`;
|
||||
batLeft.style.top = `${state.left.paddle.y}px`;
|
||||
batLeft.style.left = `${state.left.paddle.x}px`;
|
||||
batLeft.style.width = `${state.left.paddle.width}px`;
|
||||
batLeft.style.height = `${state.left.paddle.height}px`;
|
||||
|
||||
//batRight.style.transform = `translateY(${state.right.paddle.y}px) translateX(-${state.left.paddle.x}px)`;
|
||||
batRight.style.top = `${state.right.paddle.y}px`;
|
||||
batRight.style.left = `${state.right.paddle.x}px`;
|
||||
batRight.style.width = `${state.right.paddle.width}px`;
|
||||
|
|
@ -106,19 +121,71 @@ function pongClient(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
|
|||
ball.style.height = `${state.ball.size * 2}px`;
|
||||
ball.style.width = `${state.ball.size * 2}px`;
|
||||
|
||||
|
||||
score.innerText = `${state.left.score} | ${state.right.score}`
|
||||
}
|
||||
|
||||
socket.on('gameEnd', () => currentGame = null);
|
||||
|
||||
socket.on('gameUpdate', (state: GameUpdate) => render(state));
|
||||
socket.on('newGame', (state: GameUpdate) => render(state));
|
||||
// ---
|
||||
// position logic (client) end
|
||||
// ---
|
||||
|
||||
socket.on('updateInformation', (e) => showInfo(`UpdateInformation: t=${e.totalUser};q=${e.inQueue}`));
|
||||
socket.on('queueEvent', (e) => showInfo(`QueueEvent: ${e}`));
|
||||
//socket.emit('enqueue');
|
||||
socket.emit('localGame');
|
||||
// ---
|
||||
// queue evt
|
||||
// ---
|
||||
function set_pretty(batU : HTMLDivElement, txtU : HTMLDivElement, txtO : HTMLDivElement, colorYou : string) {
|
||||
batU.style.backgroundColor = colorYou;
|
||||
txtU.style.color = colorYou;
|
||||
txtU.innerText = "you";
|
||||
txtO.innerHTML = "The Mechant";
|
||||
}
|
||||
queueBtn.addEventListener("click", ()=>{
|
||||
if (queueBtn.innerText !== QueueState.Iddle) {
|
||||
if (queueBtn.innerText === QueueState.InQueu) {
|
||||
socket.emit("dequeue");
|
||||
queueBtn.innerText = QueueState.Iddle;
|
||||
}
|
||||
return ;
|
||||
}
|
||||
queueBtn.innerText = QueueState.InQueu;
|
||||
socket.emit('enqueue');
|
||||
});
|
||||
socket.on('newGame', (state) => {
|
||||
render(state);
|
||||
queueBtn.innerText = QueueState.InGame;
|
||||
queueBtn.style.color = 'red';
|
||||
batLeft.style.backgroundColor = DEFAULT_COLOR;
|
||||
batRight.style.backgroundColor = DEFAULT_COLOR;
|
||||
if (state.left.id === user.id) {
|
||||
set_pretty(batLeft, playerL, playerR, SELF_COLOR);
|
||||
} else if (state.right.id === user.id) {
|
||||
set_pretty(batRight, playerR, playerL, SELF_COLOR);
|
||||
} else
|
||||
showError("couldn't find your id in game");
|
||||
}); // TODO: notif user of new game w "ready up" btn
|
||||
|
||||
socket.on("gameEnd", () => {
|
||||
queueBtn.innerHTML = QueueState.Iddle;
|
||||
queueBtn.style.color = 'white';
|
||||
render(DEFAULT_POSITIONS);
|
||||
batLeft.style.backgroundColor = DEFAULT_COLOR;
|
||||
batRight.style.backgroundColor = DEFAULT_COLOR;
|
||||
playerR.style.color = "";
|
||||
playerL.style.color = "";
|
||||
playerR.innerText = "";
|
||||
playerL.innerText = "";
|
||||
currentGame = null;
|
||||
})
|
||||
// ---
|
||||
// queue evt end
|
||||
// ---
|
||||
render(DEFAULT_POSITIONS);
|
||||
batLeft.style.backgroundColor = DEFAULT_COLOR;
|
||||
batRight.style.backgroundColor = DEFAULT_COLOR;
|
||||
|
||||
socket.on('updateInformation', (e) => showInfo(`UpdateInformation: t=${e.totalUser};q=${e.inQueue}`)); // queue info TODO: delete for final product
|
||||
socket.on('queueEvent', (e) => showInfo(`QueueEvent: ${e}`)); // queue evt can be left in product
|
||||
showInfo("butter");
|
||||
showInfo("butter-toast");
|
||||
// socket.emit('localGame');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ export type GameMove = {
|
|||
moveRight: 'up' | 'down' | null,
|
||||
}
|
||||
|
||||
// TODO: add new evt such as "local play", "ready-up" see: ./pong.ts
|
||||
export interface ClientToServer {
|
||||
enqueue: () => void;
|
||||
dequeue: () => void;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue