Merge pull request #1 from Kotmin/reScreen

Kotmin · web-flow · commit bccf526524bc · 2025-05-11T00:02:35.000+02:00
feat: updated responsiveness border limit
diff --git a/ViInvaders.ino b/ViInvaders.ino
@@ -34,6 +34,26 @@ void notifyClients() {
   ws.textAll(msg);
 }
 
+void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
+               AwsEventType type, void *arg, uint8_t *data, size_t len) {
+  switch (type) {
+    case WS_EVT_CONNECT:
+      Serial.printf("[WS] Client %u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
+      break;
+    case WS_EVT_DISCONNECT:
+      Serial.printf("[WS] Client %u disconnected\n", client->id());
+      break;
+    case WS_EVT_ERROR:
+      Serial.printf("[WS] Error on client %u\n", client->id());
+      break;
+    case WS_EVT_DATA:
+      // Optional: handle incoming client messages here
+      break;
+    default:
+      break;
+  }
+}
+
 
 void setup() {
   Serial.begin(115200);
@@ -57,10 +77,12 @@ void setup() {
     request->send(SPIFFS, "/index.html", "text/html");
   });
 
-  ws.onEvent([](AsyncWebSocket *server, AsyncWebSocketClient *client,
-                AwsEventType type, void *arg, uint8_t *data, size_t len) {
-    // optional: handle messages from clients
-  });
+  // ws.onEvent([](AsyncWebSocket *server, AsyncWebSocketClient *client,
+  //               AwsEventType type, void *arg, uint8_t *data, size_t len) {
+  //   // optional: handle messages from clients
+  // });
+  
+  ws.onEvent(onWsEvent);
   server.addHandler(&ws);
 
   server.begin();
@@ -72,4 +94,5 @@ void loop() {
     notifyClients();
     lastSend = millis();
   }
+  ws.cleanupClients(); // rm unactive clients
 }
diff --git a/data/game.js b/data/game.js
@@ -1,29 +1,67 @@
-// game.js z aktywacją gracza ruchem i wstrzymaniem wrogów przed aktywacją
-
 const canvas = document.getElementById("gameCanvas");
 const ctx = canvas.getContext("2d");
-canvas.width = 800;
-canvas.height = 600;
 
+let player1 = null;
+let player2 = null;
+
+function resizeCanvas() {
+  const ratio = 4 / 3;
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  if (w / h > ratio) {
+    canvas.height = h;
+    canvas.width = h * ratio;
+  } else {
+    canvas.width = w;
+    canvas.height = w / ratio;
+  }
+  if (player1) {
+    player1.y = canvas.height - 50;
+    player1.x = canvas.width / 2 - 60;
+  }
+  if (player2) {
+    player2.y = canvas.height - 50;
+    player2.x = canvas.width / 2 + 60;
+  }
+}
+window.addEventListener('resize', resizeCanvas);
+
+let wakeLock = null;
+async function requestWakeLock() {
+  try {
+    if ('wakeLock' in navigator) {
+		wakeLock = await navigator.wakeLock.request('screen');
+	}
+  } catch (err) {
+    console.warn("WakeLock error:", err);
+  }
+}
+document.addEventListener("visibilitychange", () => {
+  if (wakeLock !== null && document.visibilityState === "visible") {
+    requestWakeLock();
+  }
+});
+requestWakeLock();
 
 const pauseBtn = document.createElement("button");
 pauseBtn.innerText = "⏸️ Pauza";
-pauseBtn.style.position = "absolute";
+pauseBtn.className = "game-button";
+pauseBtn.style.right = "120px";
 pauseBtn.style.top = "10px";
-pauseBtn.style.left = "10px";
-pauseBtn.style.zIndex = 10;
 pauseBtn.onclick = () => paused = !paused;
 document.body.appendChild(pauseBtn);
 
 const restartBtn = document.createElement("button");
 restartBtn.innerText = "🔄 Restart";
-restartBtn.style.position = "absolute";
+restartBtn.className = "game-button";
+restartBtn.style.right = "10px";
 restartBtn.style.top = "10px";
-restartBtn.style.left = "100px";
-restartBtn.style.zIndex = 10;
 restartBtn.onclick = () => newGame();
 document.body.appendChild(restartBtn);
 
+// resizeCanvas();
+
+
 
 const playerColors = ["white", "lime", "cyan", "orange", "violet"];
 const enemySprites = {
@@ -67,6 +105,14 @@ class Player {
     this.respawnTimer = 0;
   }
 
+  moveLeft() {
+    this.x = Math.max(this.x - this.speed, this.width / 2);
+  }
+
+  moveRight() {
+    this.x = Math.min(this.x + this.speed, canvas.width - this.width / 2);
+  }
+
   draw() {
     if (this.active && this.alive) {
       ctx.beginPath();
@@ -118,6 +164,7 @@ class Player {
   }
 }
 
+
 class Enemy {
   constructor(x, y, type) {
     this.x = x;
@@ -146,12 +193,13 @@ class Enemy {
   }
 }
 
-let player1, player2;
+
 let enemies = [];
 
 function newGame() {
   player1 = new Player(canvas.width / 2 - 60, randomColor());
   player2 = new Player(canvas.width / 2 + 60, randomColor());
+  resizeCanvas();
   enemyBullets = [];
   level = 1;
   gameOver = false;
@@ -321,12 +369,13 @@ function activatePlayer(player) {
   player.active = true;
 }
 
+
 window.addEventListener("keydown", (e) => {
-  if (e.key === "a") { player1.x -= player1.speed; activatePlayer(player1); }
-  if (e.key === "d") { player1.x += player1.speed; activatePlayer(player1); }
+  if (e.key === "a") { player1.moveLeft(); activatePlayer(player1); }
+  if (e.key === "d") { player1.moveRight(); activatePlayer(player1); }
   if (e.key === " ") { player1.shoot(); activatePlayer(player1); }
-  if (e.key === "ArrowLeft") { player2.x -= player2.speed; activatePlayer(player2); }
-  if (e.key === "ArrowRight") { player2.x += player2.speed; activatePlayer(player2); }
+  if (e.key === "ArrowLeft") { player2.moveLeft(); activatePlayer(player2); }
+  if (e.key === "ArrowRight") { player2.moveRight(); activatePlayer(player2); }
   if (e.key === "ArrowUp") { player2.shoot(); activatePlayer(player2); }
   if (e.key === "r") newGame();
 });
@@ -341,6 +390,7 @@ canvas.addEventListener("touchstart", (e) => {
   else player1.shoot();
 }, { passive: false });
 
+
 const ws = new WebSocket("ws://" + location.hostname + "/ws");
 ws.onmessage = (event) => {
   const data = JSON.parse(event.data);
@@ -353,6 +403,7 @@ ws.onmessage = (event) => {
   if (data.j2f) { player2.shoot(); activatePlayer(player2); }
 };
 
+
 waitForSprites(() => {
   newGame();
   draw();
diff --git a/data/game.js.bak b/data/game.js.bak
@@ -1,29 +1,67 @@
-// game.js z aktywacją gracza ruchem i wstrzymaniem wrogów przed aktywacją
-
 const canvas = document.getElementById("gameCanvas");
 const ctx = canvas.getContext("2d");
-canvas.width = 800;
-canvas.height = 600;
 
+let player1 = null;
+let player2 = null;
+
+function resizeCanvas() {
+  const ratio = 4 / 3;
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  if (w / h > ratio) {
+    canvas.height = h;
+    canvas.width = h * ratio;
+  } else {
+    canvas.width = w;
+    canvas.height = w / ratio;
+  }
+  if (player1) {
+    player1.y = canvas.height - 50;
+    player1.x = canvas.width / 2 - 60;
+  }
+  if (player2) {
+    player2.y = canvas.height - 50;
+    player2.x = canvas.width / 2 + 60;
+  }
+}
+window.addEventListener('resize', resizeCanvas);
+
+let wakeLock = null;
+async function requestWakeLock() {
+  try {
+    if ('wakeLock' in navigator) {
+		wakeLock = await navigator.wakeLock.request('screen');
+	}
+  } catch (err) {
+    console.warn("WakeLock error:", err);
+  }
+}
+document.addEventListener("visibilitychange", () => {
+  if (wakeLock !== null && document.visibilityState === "visible") {
+    requestWakeLock();
+  }
+});
+requestWakeLock();
 
 const pauseBtn = document.createElement("button");
 pauseBtn.innerText = "⏸️ Pauza";
-pauseBtn.style.position = "absolute";
+pauseBtn.className = "game-button";
+pauseBtn.style.right = "120px";
 pauseBtn.style.top = "10px";
-pauseBtn.style.left = "10px";
-pauseBtn.style.zIndex = 10;
 pauseBtn.onclick = () => paused = !paused;
 document.body.appendChild(pauseBtn);
 
 const restartBtn = document.createElement("button");
 restartBtn.innerText = "🔄 Restart";
-restartBtn.style.position = "absolute";
+restartBtn.className = "game-button";
+restartBtn.style.right = "10px";
 restartBtn.style.top = "10px";
-restartBtn.style.left = "100px";
-restartBtn.style.zIndex = 10;
 restartBtn.onclick = () => newGame();
 document.body.appendChild(restartBtn);
 
+resizeCanvas();
+
+
 
 const playerColors = ["white", "lime", "cyan", "orange", "violet"];
 const enemySprites = {
@@ -67,6 +105,14 @@ class Player {
     this.respawnTimer = 0;
   }
 
+  moveLeft() {
+    this.x = Math.max(this.x - this.speed, this.width / 2);
+  }
+
+  moveRight() {
+    this.x = Math.min(this.x + this.speed, canvas.width - this.width / 2);
+  }
+
   draw() {
     if (this.active && this.alive) {
       ctx.beginPath();
@@ -118,6 +164,7 @@ class Player {
   }
 }
 
+
 class Enemy {
   constructor(x, y, type) {
     this.x = x;
@@ -146,12 +193,13 @@ class Enemy {
   }
 }
 
-let player1, player2;
+
 let enemies = [];
 
 function newGame() {
   player1 = new Player(canvas.width / 2 - 60, randomColor());
   player2 = new Player(canvas.width / 2 + 60, randomColor());
+  resizeCanvas();
   enemyBullets = [];
   level = 1;
   gameOver = false;
@@ -321,12 +369,13 @@ function activatePlayer(player) {
   player.active = true;
 }
 
+
 window.addEventListener("keydown", (e) => {
-  if (e.key === "a") { player1.x -= player1.speed; activatePlayer(player1); }
-  if (e.key === "d") { player1.x += player1.speed; activatePlayer(player1); }
+  if (e.key === "a") { player1.moveLeft(); activatePlayer(player1); }
+  if (e.key === "d") { player1.moveRight(); activatePlayer(player1); }
   if (e.key === " ") { player1.shoot(); activatePlayer(player1); }
-  if (e.key === "ArrowLeft") { player2.x -= player2.speed; activatePlayer(player2); }
-  if (e.key === "ArrowRight") { player2.x += player2.speed; activatePlayer(player2); }
+  if (e.key === "ArrowLeft") { player2.moveLeft(); activatePlayer(player2); }
+  if (e.key === "ArrowRight") { player2.moveRight(); activatePlayer(player2); }
   if (e.key === "ArrowUp") { player2.shoot(); activatePlayer(player2); }
   if (e.key === "r") newGame();
 });
@@ -341,6 +390,7 @@ canvas.addEventListener("touchstart", (e) => {
   else player1.shoot();
 }, { passive: false });
 
+
 const ws = new WebSocket("ws://" + location.hostname + "/ws");
 ws.onmessage = (event) => {
   const data = JSON.parse(event.data);
@@ -353,6 +403,7 @@ ws.onmessage = (event) => {
   if (data.j2f) { player2.shoot(); activatePlayer(player2); }
 };
 
+
 waitForSprites(() => {
   newGame();
   draw();
diff --git a/data/index.html b/data/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Vi Invaders</title>
+  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
diff --git a/data/index.html.bak b/data/index.html.bak
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Vi Invaders</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <canvas id="gameCanvas" width="800" height="600"></canvas>
+  <script src="game.js"></script>
+</body>
+</html>
diff --git a/data/style.css b/data/style.css
@@ -16,15 +16,16 @@ canvas {
 
 .game-button {
   position: absolute;
-  top: 10px;
-  left: 10px;
   padding: 10px 15px;
-  background: black;
+  background: transparent;
   color: white;
+  font-family: 'Press Start 2P', monospace;
+  font-size: 12px;
   border: 2px solid white;
-  border-radius: 6px;
-  font-size: 16px;
+  border-radius: 8px;
   cursor: pointer;
   z-index: 1000;
+  text-shadow: 1px 1px black;
 }
 
+
diff --git a/data/style.css.bak b/data/style.css.bak
