diff --git a/src/front/static/ts/main.ts b/src/front/static/ts/main.ts index 731a972..032984e 100644 --- a/src/front/static/ts/main.ts +++ b/src/front/static/ts/main.ts @@ -75,8 +75,6 @@ window.addEventListener("popstate", router); document.addEventListener("DOMContentLoaded", () => { isLogged(); - - document.body.addEventListener("click", e => { if (!e.target.closest("#taskbar-menu") && !e.target.matches("#profile-button")) { profile_view.open = false; @@ -121,9 +119,18 @@ function updateClock() clock.innerHTML = `${days[now.getDay()]} ${now.getDate()} ${months[now.getMonth()]} ` + hours + ":" + minutes; } -friends_view.run(); +async function pingClock() { + if (await isLogged()) { + fetch(`http://localhost:3002/ping`, { + method: "POST", + credentials: "include" + }); + } +} setInterval(updateClock, 5000); updateClock(); +setInterval(pingClock, 30000); + oneko(); diff --git a/src/front/static/ts/views/Profile.ts b/src/front/static/ts/views/Profile.ts index e233f52..fe4f4c2 100644 --- a/src/front/static/ts/views/Profile.ts +++ b/src/front/static/ts/views/Profile.ts @@ -49,15 +49,14 @@ export default class extends Aview { uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2]; const userdata_req = await fetch(`http://localhost:3002/users/${uuid}`, { - method: "GET", - credentials: "include", - }); - if (userdata_req.status == 404) - { - console.error("invalid user"); - return ; - } - let userdata = await userdata_req.json(); + method: "GET", + credentials: "include", + }); + if (userdata_req.status == 404) { + console.error("invalid user"); + return; + } + let userdata = await userdata_req.json(); const matchCount_req = await fetch(`http://localhost:3002/users/${uuid}/matchHistory/count`, { method: "GET", @@ -75,39 +74,40 @@ export default class extends Aview { if (!main) return console.error("what"); - console.log(matches); - if (matches.matchHistory) - { - for (let match of matches.matchHistory) - { + if (matches.matchHistory) { + for (let match of matches.matchHistory) { const newEntry = document.createElement("li"); newEntry.classList.add("m-2", "default-button", "bg-neutral-200", "dark:bg-neutral-800", "text-neutral-900", "dark:text-white"); newEntry.innerHTML = match.score.p1Score > match.score.p2Score ? `${match.score.p1} - winner` : `${match.score.p2} - winner`; main.insertBefore(newEntry, main.firstChild); + // ########################################################################################################################################### + // + // ADD TX LINK : https://testnet.snowscan.xyz/tx/${match.tx} + // + // ########################################################################################################################################### console.log(match.tx); } } - const profile = document.getElementById("profile-profile"); + const profile = document.getElementById("profile-profile"); if (!profile) return; - const picture = profile.appendChild(document.createElement("img")); - picture.src = "https://api.kanel.ovh/pp"; - picture.classList.add("text-neutral-900", "dark:text-white", "center", "h-18", "w-18", "mx-3"); + const picture = profile.appendChild(document.createElement("img")); + picture.src = "https://api.kanel.ovh/pp"; + picture.classList.add("text-neutral-900", "dark:text-white", "center", "h-18", "w-18", "mx-3"); - const nametag = profile.appendChild(document.createElement("div")); - nametag.innerHTML = ` + const nametag = profile.appendChild(document.createElement("div")); + nametag.innerHTML = `
Hi ${userdata.displayName} ! :D
${uuid}
`; - nametag.classList.add("text-neutral-900", "dark:text-white"); + nametag.classList.add("text-neutral-900", "dark:text-white"); - const winrate = profile.appendChild(document.createElement("div")); - - winrate.innerHTML = ` + const winrate = profile.appendChild(document.createElement("div")); + winrate.innerHTML = `
wins: ${userdata.wins}
losses: ${userdata.losses}
-
winrate: ${Math.round(userdata.wins / (userdata.wins + userdata.losses) * 100)} %
+
winrate: ${ (userdata.wins != 0 && userdata.losses != 0) ? Math.round(userdata.wins / (userdata.wins + userdata.losses) * 100) + " %" : "-" }
`; winrate.classList.add("text-neutral-900", "dark:text-white", "grow", "content-center"); } diff --git a/src/front/static/ts/views/RegisterPage.ts b/src/front/static/ts/views/RegisterPage.ts index 429cc09..7e374a5 100644 --- a/src/front/static/ts/views/RegisterPage.ts +++ b/src/front/static/ts/views/RegisterPage.ts @@ -29,11 +29,11 @@ export default class extends Aview {

welcome ! please register.

- -
+ +
diff --git a/src/front/static/ts/views/Tetris.ts b/src/front/static/ts/views/Tetris.ts index 1fc2d2d..2b84fa3 100644 --- a/src/front/static/ts/views/Tetris.ts +++ b/src/front/static/ts/views/Tetris.ts @@ -16,7 +16,7 @@ export default class extends Aview { return `
- pong_game.ts + tetris_game.ts
@@ -27,13 +27,13 @@ export default class extends Aview {
- +
-
@@ -242,7 +242,10 @@ export default class extends Aview { } findColorIndex() { - for (const row of this.shape) for (const v of row) if (v) return v; + for (const row of this.shape) + for (const v of row) + if (v) + return v; return 1; } @@ -314,6 +317,11 @@ export default class extends Aview { throw console.error("no canvas :c"); this.holdCtx = this.holdCanvas.getContext("2d"); this.queueCtx = this.queueCanvas.getContext("2d"); + if (!this.holdCtx || !this.queueCtx) + return; + + this.holdCtx.clearRect(0, 0, 200, 200); + this.queueCtx.clearRect(0, 0, 500, 500); this.board = this.createEmptyBoard(); this.fillBag(); @@ -424,7 +432,6 @@ export default class extends Aview { if (linesCleared > 0) { this.lines += linesCleared; - // scoring like classic tetris const points = [0, 40, 100, 300, 1200]; this.score += (points[linesCleared] || 0) * this.level; // level up every 10 lines (Fixed Goal System) @@ -440,7 +447,7 @@ export default class extends Aview { if (!this.piece) return; if (this.isLocking && this.lockRotationCount < 15) this.lockRotationCount++; - // Try rotation with wall kicks + // Try wall kicks const originalIndex = this.piece.rotationIndex; if (dir === "cw") this.piece.rotateCW(); else this.piece.rotateCCW(); @@ -450,7 +457,7 @@ export default class extends Aview { if (!this.collides(this.piece)) return; this.piece.x -= k; } - // no valid kick, revert + // no kick, revert this.piece.rotationIndex = originalIndex; this.piece.shape = this.piece.rotations[originalIndex]; } @@ -479,7 +486,6 @@ export default class extends Aview { softDrop() { if (!this.piece) return; if (!this.movePiece(0, 1)) return; - //this.lockPiece(); else this.score += 1; } @@ -571,8 +577,12 @@ export default class extends Aview { } } this.draw(); + if (this.isGameOver) - return; + { + document.getElementById("game-buttons")?.classList.remove("hidden"); + return ; + } requestAnimationFrame(this.loop.bind(this)); } @@ -627,19 +637,8 @@ export default class extends Aview { for (const row of this.holdPiece.rotations[0]) { let x: number = 0; for (const val of row) { - if (val) { - this.fillBlock(x, y, this.canHold ? COLORS[this.holdPiece.findColorIndex()] : ["#8c8c84", "#393934"], this.holdCtx); - /*this.holdCtx.fillStyle = ; - this.holdCtx.fillRect( - x * BLOCK + - 1 + - (4 - this.holdPiece.rotations[0].length) * 15 + - 10, - y * BLOCK + 1 + 20, - BLOCK - 2, - BLOCK - 2, - );*/ - } + if (val) + this.fillBlock(x + (4 - this.holdPiece.rotations[0].length)/ 2 + 0.35, y + 0.5, this.canHold ? COLORS[this.holdPiece.findColorIndex()] : ["#8c8c84", "#393934"], this.holdCtx); x++; } y++; @@ -655,25 +654,8 @@ export default class extends Aview { for (const row of TETROMINOES[nextPiece][0]) { let x: number = 0; for (const val of row) { - if (val) { - this.queueCtx.fillStyle = - COLORS[ - ["I", "J", "L", "O", "S", "T", "Z"].indexOf(nextPiece) + 1 - ][0]; - this.queueCtx.fillRect( - x * BLOCK + - 1 + - (4 - TETROMINOES[nextPiece][0].length) * 15 + - 10, - y * BLOCK + - 1 + - placement * 80 + - 20 - - (nextPiece === "I" ? 15 : 0), - BLOCK - 2, - BLOCK - 2, - ); - } + if (val) + this.fillBlock(x + (4 - TETROMINOES[nextPiece][0].length) / 2 + 0.25, y + 0.5 + placement * 2.69 - (nextPiece ==="I" ? 0.35 : 0), COLORS[["I", "J", "L", "O", "S", "T", "Z"].indexOf(nextPiece) + 1], this.queueCtx); x++; } y++; @@ -694,17 +676,15 @@ export default class extends Aview { return `#${(r << 16 | g << 8 | b).toString(16).padStart(6, '0')}`; } - fillBlock(x: number, y: number, color: string[], ctx) { + fillBlock(x: number, y: number, color: string[], ctx: CanvasRenderingContext2D | null) { if (!ctx) return; - //const ctx = this.ctx; - //ctx.fillStyle = color; const grad = ctx.createLinearGradient(x * BLOCK, y * BLOCK, x * BLOCK, y * BLOCK + BLOCK); grad.addColorStop(0, color[0]); grad.addColorStop(1, color[1]); ctx.fillStyle = grad; - ctx.fillRect(x * BLOCK + 4, y * BLOCK + 4, BLOCK - 4, BLOCK - 4); - const X = x * BLOCK; - const Y = y * BLOCK; + ctx.fillRect(Math.round(x * BLOCK) + 4, Math.round(y * BLOCK) + 4, BLOCK - 4, BLOCK - 4); + const X = Math.round(x * BLOCK); + const Y = Math.round(y * BLOCK); const W = BLOCK; const H = BLOCK; const S = 4; @@ -779,7 +759,7 @@ export default class extends Aview { ctx.font = "24px Kubasta"; ctx.textAlign = "center"; ctx.fillText( - "PAUSED", + "paused", this.canvas.width / 2, this.canvas.height / 2 + 8, ); @@ -793,7 +773,7 @@ export default class extends Aview { ctx.font = "28px Kubasta"; ctx.textAlign = "center"; ctx.fillText( - "GAME OVER", + "game over", this.canvas.width / 2, this.canvas.height / 2 + 8, ); @@ -830,6 +810,7 @@ export default class extends Aview { } } + document.getElementById("game-retry")?.addEventListener("click", () => { document.getElementById("game-buttons")?.classList.add("hidden"); const game = new Game("board"); }); const game = new Game("board"); } }