mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-10 07:58:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
poke/html/gamehub.ejs

1112 lines
31 KiB
Text
Raw Normal View History

add copyright
2024-01-14 21:09:51 +01:00
<!--
This Source Code Form is subject to the terms of the GNU General Public License:
add games hub
2024-01-06 21:19:11 +01:00
add copyright
2024-01-14 21:09:51 +01:00
Copyright (C) 2021-2024 PokeTube (https://codeberg.org/Ashley/poketube)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see https://www.gnu.org/licenses/.
-->
add games hub
2024-01-06 21:19:11 +01:00
<% if (!game) { %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/css/yt-ukraine.svg?v=3" rel=icon>
<link rel="manifest" href="/manifest.json">
<meta content="▶▶ Poke Games" property=og:title>
fix sudoku lmao
2024-01-07 08:54:22 +01:00
<meta content="Do gaming on poke!" property=twitter:description>
add games hub
2024-01-06 21:19:11 +01:00
<meta content="https://cdn.glitch.global/d68d17bb-f2c0-4bc3-993f-50902734f652/aa70111e-5bcd-4379-8b23-332a33012b78.image.png?v=1701898829884" property="og:image" />
<meta content="summary_large_image" name="twitter:card" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
add touch support :3
2024-01-08 17:04:09 +01:00
font-family: 'PokeTube flex', sans-serif;
add games hub
2024-01-06 21:19:11 +01:00
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(135deg, #2c3e50, #34495e);
color: #fff;
}
.container {
text-align: center;
padding: 20px;
}
add touch support :3
2024-01-08 17:04:09 +01:00
h1 {
add games hub
2024-01-06 21:19:11 +01:00
margin-top: 0;
add touch support :3
2024-01-08 17:04:09 +01:00
font-weight: 1000;
font-stretch: ultra-expanded;
font-family: "Poketube flex";
font-style: italic;
color: #ffabcc;
add games hub
2024-01-06 21:19:11 +01:00
}
.game-container {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
add touch support :3
2024-01-08 17:04:09 +01:00
@font-face {
font-family: "PokeTube Flex";
src: url("https://p.poketube.fun/https://cdn.glitch.global/43b6691a-c8db-41d4-921c-8cf6aa0d9108/robotoflex.ttf?v=1668343428681");
font-style: normal;
font-stretch: 1% 800%;
font-display: swap;
}
add games hub
2024-01-06 21:19:11 +01:00
.game {
flex: 0 0 300px;
padding: 20px;
border: 2px solid #fff;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
transition: background 0.3s ease;
text-decoration: none;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
}
.game:hover {
background: rgba(255, 255, 255, 0.2);
}
canvas {
border: 1px solid #fff;
visibility: collapse;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 5px;
margin-top: 20px;
}
.cell {
width: 100px;
height: 100px;
border: 1px solid #fff;
font-size: 2em;
cursor: pointer;
}
</style>
fix sudoku lmao
2024-01-07 08:54:22 +01:00
<title>Gaming Hub</title>
add games hub
2024-01-06 21:19:11 +01:00
</head>
<body>
<div class="container">
<h1>Poke! Games Hub</h1>
<div class="game-container">
<a href="?game=snake" class="game">
<h2>Snake</h2>
<canvas id="snakeCanvas"></canvas>
</a>
<a href="?game=tic-tac-toe" class="game">
<h2>Tic-Tac-Toe</h2>
<div id="message"></div>
<div class="board" id="board"></div>
</a>
<a href="?game=sudoku" class="game">
<h2>Sudoku</h2>
<div id="sudokuMessage"></div>
<div class="board" id="sudokuBoard"></div>
</a>
<a href="?game=pong" class="game">
<h2>Ping-Pong</h2>
<div id="pingPongMessage"></div>
<div class="board" id="pingPongBoard"></div>
</a>
</div>
</div>
fix a > issue :3
2024-05-31 13:35:34 +02:00
<script src="/static/data-mobile.js"></script>
add games hub
2024-01-06 21:19:11 +01:00
</body>
</html>
<% } %>
<% if (game === "snake") { %>
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/css/yt-ukraine.svg?v=3" rel=icon>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
height: 100%;
margin: 0;
fix sudoku lmao
2024-01-07 08:54:22 +01:00
background: linear-gradient(135deg, #2c3e50, #34495e);
add games hub
2024-01-06 21:19:11 +01:00
overflow: hidden;
}
canvas {
border: 1px solid #000;
display: block;
position: absolute;
}
</style>
fix sudoku lmao
2024-01-07 08:54:22 +01:00
<title>Snak</title>
add games hub
2024-01-06 21:19:11 +01:00
</head>
<body>
<canvas id="snakeCanvas" width="400" height="400"></canvas>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
/**
* @licstart The following is the entire license notice for the JavaScript
* code in this page.
*
* Copyright (C) 2021-2024 POKETUBE (https://codeberg.org/Ashley/poketube)
*
* The JavaScript code in this page is free software: you can redistribute
* it and/or modify it under the terms of the GNU General Public License
* (GNU GPL) as published by the Free Software Foundation, either version 3
* of the License, or (at your option) any later version. The code is
* distributed WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU GPL
* for more details.
*
* As additional permission under GNU GPL version 3 section 7, you may
* distribute non-source (e.g., minimized or compacted) forms of that code
* without the copy of the GNU GPL normally required by section 4, provided
* you include this license notice and a URL through which recipients can
* access the Corresponding Source.
*
* @licend The above is the entire license notice for the JavaScript code
* in this page.
*/
//--><!]]>
</script>
<script>
const canvas = document.getElementById("snakeCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Initial snake position and size
let snake = [
{ x: canvas.width / 2, y: canvas.height / 2 },
{ x: canvas.width / 2, y: canvas.height / 2 + 10 },
{ x: canvas.width / 2, y: canvas.height / 2 + 20 }
];
let direction = "down"; // Initial direction
// Initial food position
let food = { x: 200, y: 200 };
function draw() {
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw the snake
ctx.fillStyle = "#00F";
snake.forEach(segment => {
ctx.fillRect(segment.x, segment.y, 10, 10);
});
// Draw the food
ctx.fillStyle = "#F00";
ctx.fillRect(food.x, food.y, 10, 10);
}
function move() {
const head = { ...snake[0] }; // Create a new object for the head
// Move the head based on the direction
if (direction === "up") head.y -= 10;
else if (direction === "down") head.y += 10;
else if (direction === "left") head.x -= 10;
else if (direction === "right") head.x += 10;
// Add the new head to the front of the snake
snake.unshift(head);
// Check if the snake has eaten the food
if (head.x === food.x && head.y === food.y) {
// Generate new food
food.x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
food.y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
} else {
// If not eaten, remove the tail
snake.pop();
}
}
function checkCollision() {
const head = snake[0];
// Check if the snake hits the walls
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
alert("Game Over!");
resetGame();
}
// Check if the snake collides with itself
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
resetGame();
}
}
}
function resetGame() {
const middleX = Math.floor(canvas.width / 2 / 10) * 10;
const middleY = Math.floor(canvas.height / 2 / 10) * 10;
snake = [
{ x: middleX, y: middleY },
{ x: middleX, y: middleY + 10 },
{ x: middleX, y: middleY + 20 }
];
direction = "down";
food = { x: 200, y: 200 };
}
function gameLoop() {
move();
checkCollision();
draw();
}
// Set up keyboard event listeners
window.addEventListener("keydown", e => {
if (e.key === "ArrowUp" && direction !== "down") {
direction = "up";
} else if (e.key === "ArrowDown" && direction !== "up") {
direction = "down";
} else if (e.key === "ArrowLeft" && direction !== "right") {
direction = "left";
} else if (e.key === "ArrowRight" && direction !== "left") {
direction = "right";
}
});
add touch support :3
2024-01-08 17:04:09 +01:00
// Set up touch controls
let touchStartX, touchStartY;
canvas.addEventListener("touchstart", function(event) {
touchStartX = event.touches[0].clientX;
touchStartY = event.touches[0].clientY;
});
canvas.addEventListener("touchmove", function(event) {
const touchEndX = event.touches[0].clientX;
const touchEndY = event.touches[0].clientY;
const dx = touchEndX - touchStartX;
const dy = touchEndY - touchStartY;
if (Math.abs(dx) > Math.abs(dy)) {
// Horizontal swipe
if (dx > 0 && direction !== "left") {
direction = "right";
} else if (dx < 0 && direction !== "right") {
direction = "left";
}
} else {
// Vertical swipe
if (dy > 0 && direction !== "up") {
direction = "down";
} else if (dy < 0 && direction !== "down") {
direction = "up";
}
}
});
add games hub
2024-01-06 21:19:11 +01:00
// Set up the game loop
setInterval(gameLoop, 100);
</script>
</body>
</html>
<% } %>
<% if (game === "tic-tac-toe") { %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/css/yt-ukraine.svg?v=3" rel=icon>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
add touch support :3
2024-01-08 17:04:09 +01:00
font-family: "Poketube flex", sans-serif;
add games hub
2024-01-06 21:19:11 +01:00
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
fix sudoku lmao
2024-01-07 08:54:22 +01:00
background: linear-gradient(135deg, #2c3e50, #34495e);
add games hub
2024-01-06 21:19:11 +01:00
margin: 0;
}
.container {
text-align: left;
margin-top: 20px;
margin-left: 20px;
fix sudoku lmao
2024-01-07 08:54:22 +01:00
color:#fff;
add games hub
2024-01-06 21:19:11 +01:00
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 5px;
margin: 20px auto;
}
.cell {
width: 100px;
height: 100px;
border: 1px solid #ccc;
font-size: 2em;
cursor: pointer;
}
add touch support :3
2024-01-08 17:04:09 +01:00
@font-face {
font-family: "PokeTube Flex";
src: url("https://p.poketube.fun/https://cdn.glitch.global/43b6691a-c8db-41d4-921c-8cf6aa0d9108/robotoflex.ttf?v=1668343428681");
font-style: normal;
font-stretch: 1% 800%;
font-display: swap;
}
.container > h1 {
font-weight: 1000;
font-stretch: ultra-expanded;
font-style: italic;
}
add games hub
2024-01-06 21:19:11 +01:00
</style>
<title>Tic-Tac-Toe</title>
</head>
<body>
<div class="container">
<h1>Tic-Tac-Toe</h1>
<div id="message"></div>
<div class="board" id="board"></div>
</div>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
/**
* @licstart The following is the entire license notice for the JavaScript
* code in this page.
*
* Copyright (C) 2021-2024 POKETUBE (https://codeberg.org/Ashley/poketube)
*
* The JavaScript code in this page is free software: you can redistribute
* it and/or modify it under the terms of the GNU General Public License
* (GNU GPL) as published by the Free Software Foundation, either version 3
* of the License, or (at your option) any later version. The code is
* distributed WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU GPL
* for more details.
*
* As additional permission under GNU GPL version 3 section 7, you may
* distribute non-source (e.g., minimized or compacted) forms of that code
* without the copy of the GNU GPL normally required by section 4, provided
* you include this license notice and a URL through which recipients can
* access the Corresponding Source.
*
* @licend The above is the entire license notice for the JavaScript code
* in this page.
*/
//--><!]]>
</script>
<script>
const boardElement = document.getElementById("board");
const messageElement = document.getElementById("message");
let currentPlayer = "X";
let board = ["", "", "", "", "", "", "", "", ""];
function checkWinner() {
const winningCombinations = [
[0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
[0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
[0, 4, 8], [2, 4, 6] // Diagonals
];
for (const combination of winningCombinations) {
const [a, b, c] = combination;
if (board[a] && board[a] === board[b] && board[a] === board[c]) {
return board[a];
}
}
return null;
}
function checkDraw() {
return !board.includes("");
}
function handleClick(index) {
if (board[index] === "" && !checkWinner() && !checkDraw()) {
board[index] = currentPlayer;
renderBoard();
const winner = checkWinner();
if (winner) {
fix sudoku lmao
2024-01-07 08:54:22 +01:00
messageElement.textContent = `Player ${winner} won!!!!!! woaah`;
add games hub
2024-01-06 21:19:11 +01:00
} else if (checkDraw()) {
fix sudoku lmao
2024-01-07 08:54:22 +01:00
messageElement.textContent = "It's a draw! oh welp >~<";
add games hub
2024-01-06 21:19:11 +01:00
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
fix sudoku lmao
2024-01-07 08:54:22 +01:00
messageElement.textContent = `Player ${currentPlayer}'s turn :3`;
add games hub
2024-01-06 21:19:11 +01:00
if (currentPlayer === "O") {
make ttc way harder
2024-01-07 12:32:20 +01:00
setTimeout(makeComputerMove, 500); // AI waits for 0.5 second
add games hub
2024-01-06 21:19:11 +01:00
}
}
}
}
function makeComputerMove() {
make ttc way harder
2024-01-07 12:32:20 +01:00
// Look for a winning move, then look to block player, otherwise, choose a random move
const winningMove = findWinningMove();
const blockingMove = findBlockingMove();
if (winningMove !== null) {
board[winningMove] = currentPlayer;
} else if (blockingMove !== null) {
board[blockingMove] = currentPlayer;
} else {
// Randomly choose an empty cell for the computer's move
const emptyCells = board.reduce((acc, value, index) => {
if (value === "") {
acc.push(index);
}
return acc;
}, []);
if (emptyCells.length > 0) {
const randomIndex = Math.floor(Math.random() * emptyCells.length);
const computerMove = emptyCells[randomIndex];
board[computerMove] = currentPlayer;
add games hub
2024-01-06 21:19:11 +01:00
}
make ttc way harder
2024-01-07 12:32:20 +01:00
}
add games hub
2024-01-06 21:19:11 +01:00
make ttc way harder
2024-01-07 12:32:20 +01:00
renderBoard();
const winner = checkWinner();
if (winner) {
messageElement.textContent = `Player ${winner} won!!!!!! woaah`;
} else if (checkDraw()) {
messageElement.textContent = "It's a draw! oh welp >~<";
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
messageElement.textContent = `Player ${currentPlayer}'s turn :3`;
}
}
function findWinningMove() {
for (let i = 0; i < board.length; i++) {
if (board[i] === "") {
board[i] = currentPlayer;
if (checkWinner() === currentPlayer) {
board[i] = ""; // Reset the move
return i;
}
board[i] = ""; // Reset the move
add games hub
2024-01-06 21:19:11 +01:00
}
}
make ttc way harder
2024-01-07 12:32:20 +01:00
return null;
}
function findBlockingMove() {
const opponent = currentPlayer === "X" ? "O" : "X";
for (let i = 0; i < board.length; i++) {
if (board[i] === "") {
board[i] = opponent;
if (checkWinner() === opponent) {
board[i] = ""; // Reset the move
return i;
}
board[i] = ""; // Reset the move
}
}
return null;
add games hub
2024-01-06 21:19:11 +01:00
}
function renderBoard() {
boardElement.innerHTML = "";
board.forEach((value, index) => {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.textContent = value;
cell.addEventListener("click", () => handleClick(index));
boardElement.appendChild(cell);
});
}
function resetGame() {
currentPlayer = "X";
board = ["", "", "", "", "", "", "", "", ""];
fix sudoku lmao
2024-01-07 08:54:22 +01:00
messageElement.textContent = `Player ${currentPlayer}'s turn :3`;
add games hub
2024-01-06 21:19:11 +01:00
renderBoard();
// If AI is the starting player, make the first move
if (currentPlayer === "O") {
make ttc way harder
2024-01-07 12:32:20 +01:00
setTimeout(makeComputerMove, 500); // AI waits for 0.5 second
add games hub
2024-01-06 21:19:11 +01:00
}
}
// Initial setup
resetGame();
</script>
</body>
</html>
<% } %>
<% if (game === "pong") { %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/css/yt-ukraine.svg?v=3" rel=icon>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 100vh;
fix sudoku lmao
2024-01-07 08:54:22 +01:00
background: linear-gradient(135deg, #2c3e50, #34495e);
add games hub
2024-01-06 21:19:11 +01:00
color: #fff;
font-family: 'Arial', sans-serif;
}
canvas {
border: 1px solid #fff;
}
#controls {
margin-bottom: 20px;
}
#score {
position: absolute;
top: 10px;
left: 10px;
}
</style>
<title>Pong</title>
</head>
<body>
<canvas id="pongCanvas" width="800" height="400"></canvas>
<div id="controls">
<p>
fix sudoku lmao
2024-01-07 08:54:22 +01:00
U can press space to start owo
add games hub
2024-01-06 21:19:11 +01:00
</p>
fix sudoku lmao
2024-01-07 08:54:22 +01:00
<p>Left Paddle Controls : W (Up) and S (Down)</p>
add games hub
2024-01-06 21:19:11 +01:00
<p>Right Paddle Controls: Arrow Up (Up) and Arrow Down (Down)</p>
</div>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
/**
* @licstart The following is the entire license notice for the JavaScript
* code in this page.
*
* Copyright (C) 2021-2024 POKETUBE (https://codeberg.org/Ashley/poketube)
*
* The JavaScript code in this page is free software: you can redistribute
* it and/or modify it under the terms of the GNU General Public License
* (GNU GPL) as published by the Free Software Foundation, either version 3
* of the License, or (at your option) any later version. The code is
* distributed WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU GPL
* for more details.
*
* As additional permission under GNU GPL version 3 section 7, you may
* distribute non-source (e.g., minimized or compacted) forms of that code
* without the copy of the GNU GPL normally required by section 4, provided
* you include this license notice and a URL through which recipients can
* access the Corresponding Source.
*
* @licend The above is the entire license notice for the JavaScript code
* in this page.
*/
//--><!]]>
</script>
<script>
add touch support :3
2024-01-08 17:04:09 +01:00
const canvas = document.getElementById("pongCanvas");
add games hub
2024-01-06 21:19:11 +01:00
const ctx = canvas.getContext("2d");
const paddleWidth = 10;
const paddleHeight = 60;
const ballSize = 10;
const paddleSpeed = 5;
const maxScore = 5; // Adjust this to set the score threshold for game restart
let leftPaddleY = canvas.height / 2 - paddleHeight / 2;
let rightPaddleY = canvas.height / 2 - paddleHeight / 2;
let ballX = canvas.width / 2;
let ballY = canvas.height / 2;
let ballSpeedX = 0;
let ballSpeedY = 0;
let leftScore = 0;
let rightScore = 0;
let leftPaddleUp = false;
let leftPaddleDown = false;
let rightPaddleUp = false;
let rightPaddleDown = false;
let gameActive = false;
function drawPaddle(x, y) {
ctx.fillStyle = "#fff";
ctx.fillRect(x, y, paddleWidth, paddleHeight);
}
function drawBall() {
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(ballX, ballY, ballSize, 0, Math.PI * 2);
ctx.fill();
}
function movePaddle() {
if (gameActive) {
document.addEventListener("keydown", function(event) {
switch (event.key) {
case "ArrowUp":
rightPaddleUp = true;
break;
case "ArrowDown":
rightPaddleDown = true;
break;
case "w":
leftPaddleUp = true;
break;
case "s":
leftPaddleDown = true;
break;
}
});
document.addEventListener("keyup", function(event) {
switch (event.key) {
case "ArrowUp":
rightPaddleUp = false;
break;
case "ArrowDown":
rightPaddleDown = false;
break;
case "w":
leftPaddleUp = false;
break;
case "s":
leftPaddleDown = false;
break;
}
});
if (leftPaddleUp && leftPaddleY > 0) leftPaddleY -= paddleSpeed;
if (leftPaddleDown && leftPaddleY < canvas.height - paddleHeight) leftPaddleY += paddleSpeed;
if (rightPaddleUp && rightPaddleY > 0) rightPaddleY -= paddleSpeed;
if (rightPaddleDown && rightPaddleY < canvas.height - paddleHeight) rightPaddleY += paddleSpeed;
}
}
function moveBall() {
if (gameActive) {
ballX += ballSpeedX;
ballY += ballSpeedY;
// Ball hits top or bottom
if (ballY < 0 || ballY > canvas.height) {
ballSpeedY = -ballSpeedY;
}
// Ball hits left paddle
if (ballX - ballSize < paddleWidth && ballY > leftPaddleY && ballY < leftPaddleY + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
// Ball hits right paddle
if (ballX + ballSize > canvas.width - paddleWidth && ballY > rightPaddleY && ballY < rightPaddleY + paddleHeight) {
ballSpeedX = -ballSpeedX;
}
// Ball goes out of bounds
if (ballX < 0) {
// Right player scores
rightScore++;
checkGameOver();
}
if (ballX > canvas.width) {
// Left player scores
leftScore++;
checkGameOver();
}
}
}
function checkGameOver() {
if (leftScore >= maxScore || rightScore >= maxScore) {
resetGame();
} else {
resetBall();
}
}
function resetGame() {
leftScore = 0;
rightScore = 0;
resetBall();
}
function resetBall() {
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = 0;
ballSpeedY = 0;
gameActive = false;
setTimeout(() => {
ballSpeedX = Math.random() > 0.5 ? 5 : -5;
ballSpeedY = Math.random() > 0.5 ? 5 : -5;
gameActive = true;
add touch support :3
2024-01-08 17:04:09 +01:00
}, 100);
add games hub
2024-01-06 21:19:11 +01:00
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPaddle(0, leftPaddleY);
drawPaddle(canvas.width - paddleWidth, rightPaddleY);
drawBall();
movePaddle();
moveBall();
drawScores();
requestAnimationFrame(update);
}
function drawScores() {
ctx.fillStyle = "#fff";
ctx.font = "20px Arial";
ctx.fillText("Left Player: " + leftScore, 20, 30);
ctx.fillText("Right Player: " + rightScore, canvas.width - 160, 30);
}
document.addEventListener("keydown", function(event) {
if (!gameActive && event.key === " ") {
resetGame();
ballSpeedX = Math.random() > 0.5 ? 5 : -5;
ballSpeedY = Math.random() > 0.5 ? 5 : -5;
gameActive = true;
}
});
add touch support :3
2024-01-08 17:04:09 +01:00
// Touch controls
canvas.addEventListener("touchstart", function(event) {
if (!gameActive) {
resetGame();
ballSpeedX = Math.random() > 0.5 ? 5 : -5;
ballSpeedY = Math.random() > 0.5 ? 5 : -5;
gameActive = true;
}
});
canvas.addEventListener("touchmove", function(event) {
const touchY = event.touches[0].clientY - canvas.offsetTop;
if (touchY > leftPaddleY && touchY < leftPaddleY + paddleHeight) {
leftPaddleY = touchY - paddleHeight / 2;
}
});
add games hub
2024-01-06 21:19:11 +01:00
update();
</script>
</body>
</html>
<% } %>
<% if (game === "sudoku") { %>
fix sudoku lmao
2024-01-07 08:54:22 +01:00
<!DOCTYPE html>
add games hub
2024-01-06 21:19:11 +01:00
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="/css/yt-ukraine.svg?v=3" rel=icon>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
fix sudoku lmao
2024-01-07 08:54:22 +01:00
background: linear-gradient(135deg, #2c3e50, #34495e);
add games hub
2024-01-06 21:19:11 +01:00
font-family: 'Arial', sans-serif;
}
#sudoku-board {
display: grid;
grid-template-columns: repeat(9, 40px);
grid-template-rows: repeat(9, 40px);
grid-gap: 1px;
}
.cell {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
background-color: #ddd;
user-select: none;
}
.given {
background-color: #ccc;
}
.error {
background-color: #ffbaba;
}
fix sudoku lmao
2024-01-07 08:54:22 +01:00
#popup {
display: none;
border-radius: 1em;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 999;
}
#popup > button {
border: none;
background: gray;
border-radius: 3px;
color: #fff;
height: 4em;
width: 9em;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 998;
}
add games hub
2024-01-06 21:19:11 +01:00
</style>
<title>Sudoku</title>
</head>
<body>
<div id="sudoku-board"></div>
fix sudoku lmao
2024-01-07 08:54:22 +01:00
<div id="overlay"></div>
<div id="popup">
<h2>U did a incorrect move :sob:</h2>
<p>Please enter a valid number (1-9)</p>
<button onclick="closePopup()">Oki</button>
</div>
<script type="text/javascript">
add games hub
2024-01-06 21:19:11 +01:00
<!--//--><![CDATA[//><!--
/**
* @licstart The following is the entire license notice for the JavaScript
* code in this page.
*
* Copyright (C) 2021-2024 POKETUBE (https://codeberg.org/Ashley/poketube)
*
* The JavaScript code in this page is free software: you can redistribute
* it and/or modify it under the terms of the GNU General Public License
* (GNU GPL) as published by the Free Software Foundation, either version 3
* of the License, or (at your option) any later version. The code is
* distributed WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU GPL
* for more details.
*
* As additional permission under GNU GPL version 3 section 7, you may
* distribute non-source (e.g., minimized or compacted) forms of that code
* without the copy of the GNU GPL normally required by section 4, provided
* you include this license notice and a URL through which recipients can
* access the Corresponding Source.
*
* @licend The above is the entire license notice for the JavaScript code
* in this page.
*/
//--><!]]>
</script>
fix sudoku lmao
2024-01-07 08:54:22 +01:00
<script type="text/javascript">
function closePopup() {
document.getElementById('popup').style.display = 'none';
document.getElementById('overlay').style.display = 'none';
}
function showAlertPopup() {
document.getElementById('popup').style.display = 'block';
document.getElementById('overlay').style.display = 'block';
}
const initialBoard = [
add games hub
2024-01-06 21:19:11 +01:00
[5, 3, 0, 0, 7, 0, 0, 0, 0],
[6, 0, 0, 1, 9, 5, 0, 0, 0],
[0, 9, 8, 0, 0, 0, 0, 6, 0],
[8, 0, 0, 0, 6, 0, 0, 0, 3],
[4, 0, 0, 8, 0, 3, 0, 0, 1],
[7, 0, 0, 0, 2, 0, 0, 0, 6],
[0, 6, 0, 0, 0, 0, 2, 8, 0],
[0, 0, 0, 4, 1, 9, 0, 0, 5],
[0, 0, 0, 0, 8, 0, 0, 7, 9]
];
fix sudoku lmao
2024-01-07 08:54:22 +01:00
let board = JSON.parse(JSON.stringify(initialBoard)); // Deep copy to prevent mutation of the original board
add games hub
2024-01-06 21:19:11 +01:00
function initializeBoard() {
const sudokuBoard = document.getElementById('sudoku-board');
fix sudoku lmao
2024-01-07 08:54:22 +01:00
board = generateRandomBoard(initialBoard);
add games hub
2024-01-06 21:19:11 +01:00
for (let i = 0; i < 9; i++) {
for (let j = 0; j < 9; j++) {
const cell = document.createElement('div');
cell.className = 'cell';
cell.textContent = board[i][j] !== 0 ? board[i][j] : '';
cell.dataset.row = i;
cell.dataset.col = j;
if (board[i][j] !== 0) {
cell.classList.add('given');
}
cell.addEventListener('click', () => handleClick(i, j));
sudokuBoard.appendChild(cell);
}
}
}
fix sudoku lmao
2024-01-07 08:54:22 +01:00
function generateRandomBoard(baseBoard) {
// Randomly shuffle rows and columns
const shuffledRows = shuffleArray(baseBoard);
const shuffledCols = transposeMatrix(shuffleArray(transposeMatrix(baseBoard)));
// Randomly remove some numbers
const modifiedBoard = removeNumbers(shuffledRows);
return modifiedBoard;
}
function shuffleArray(array) {
const newArray = array.slice();
for (let i = newArray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
}
return newArray;
}
function transposeMatrix(matrix) {
return matrix[0].map((_, colIndex) => matrix.map(row => row[colIndex]));
}
function removeNumbers(board) {
const modifiedBoard = board.map(row => row.slice());
const emptyCount = Math.floor(Math.random() * 10) + 20; // Randomly choose 20 to 30 cells to be empty
for (let i = 0; i < emptyCount; i++) {
const row = Math.floor(Math.random() * 9);
const col = Math.floor(Math.random() * 9);
modifiedBoard[row][col] = 0;
}
return modifiedBoard;
}
add games hub
2024-01-06 21:19:11 +01:00
function handleClick(row, col) {
const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
if (!cell.classList.contains('given')) {
const value = prompt('Enter a number (1-9):');
const parsedValue = parseInt(value, 10);
if (!isNaN(parsedValue) && parsedValue >= 1 && parsedValue <= 9) {
board[row][col] = parsedValue;
cell.textContent = parsedValue;
if (isBoardValid()) {
cell.classList.remove('error');
} else {
cell.classList.add('error');
fix sudoku lmao
2024-01-07 08:54:22 +01:00
showAlertPopup();
add games hub
2024-01-06 21:19:11 +01:00
}
} else {
alert('Invalid input. Please enter a number between 1 and 9.');
}
}
}
function isBoardValid() {
// Check rows and columns
for (let i = 0; i < 9; i++) {
const rowSet = new Set();
const colSet = new Set();
for (let j = 0; j < 9; j++) {
if (board[i][j] !== 0 && rowSet.has(board[i][j])) {
return false;
}
rowSet.add(board[i][j]);
if (board[j][i] !== 0 && colSet.has(board[j][i])) {
return false;
}
colSet.add(board[j][i]);
}
}
// Check 3x3 subgrids
for (let i = 0; i < 9; i += 3) {
for (let j = 0; j < 9; j += 3) {
const subgridSet = new Set();
for (let row = i; row < i + 3; row++) {
for (let col = j; col < j + 3; col++) {
if (board[row][col] !== 0 && subgridSet.has(board[row][col])) {
return false;
}
subgridSet.add(board[row][col]);
}
}
}
}
return true;
}
initializeBoard();
</script>
</body>
</html>
<% } %>
add touch support :3
2024-01-08 17:04:09 +01:00
Reference in a new issue Copy permalink