Various improvements

painter-js/src/main.js

@@ -1,93 +1,37 @@
-import io from 'socket.io-client';
+import socket from "./socket.js";
+import "./canvas.js";
+import "./counter.js";
+import { updateCountdown } from "./counter.js";
+import { pixelSize } from "./constants.js";
 
-// Determine the WebSocket protocol based on the page protocol
-const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-// Use the same host as the page
-const wsHost = window.location.host;
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-const colorPicker = document.getElementById('color-picker');
-const countdownDiv = document.getElementById('countdown');
-const pixelSize = 10;
-const pixelCooldown = 60 * 1000; // 1 minute
+const isDebug = import.meta.env.VITE_IS_DEBUG === "true";
 
-let lastPixelTime = parseInt(localStorage.getItem('lastPixelTime') || '0');
+const currentSoldiersSpan = document.getElementById("current-soldiers");
 
-const socket = io(`${wsProtocol}//${wsHost}`, {
-  transports: ['websocket'],
+let coords = [];
+const canvas = document.getElementById("canvas");
+const coordsText = document.getElementById("coords");
+
+socket.on("connect", () => {
+  console.log("connect");
 });
 
-socket.on('connect', () => {
-  console.log('connect');
-});
-
-socket.on('init-canvas', (data) => {
-  const canvasData = JSON.parse(data);
-  for (let y = 0; y < canvasData.length; y++) {
-    for (let x = 0; x < canvasData[y].length; x++) {
-      const color = u32ToHex(canvasData[y][x]);
-      ctx.fillStyle = color;
-      ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
-    }
-  }
-});
-
-socket.on('pixel-updated', (update) => {
-  const color = u32ToHex(update.color);
-  ctx.fillStyle = color;
-  ctx.fillRect(
-    update.x * pixelSize,
-    update.y * pixelSize,
-    pixelSize,
-    pixelSize
-  );
-});
-
-socket.on('error', (message) => {
+socket.on("error", (message) => {
   alert(message);
 });
 
-canvas.addEventListener('click', (event) => {
-  const now = Date.now();
+socket.on("current_soldiers", (currentSoldiers) => {
+  currentSoldiersSpan.textContent = currentSoldiers;
+});
 
-  if (now - lastPixelTime < pixelCooldown) {
-    alert(
-      `Please wait ${Math.round(
-        (pixelCooldown - (now - lastPixelTime)) / 1000
-      )} more seconds before placing a new pixel.`
-    );
-    return;
-  }
+requestAnimationFrame(updateCountdown);
 
+window.addEventListener("mousemove", (event) => {
+  // get coordinates of the mouse inside the canvas
   const rect = canvas.getBoundingClientRect();
   const x = Math.floor((event.clientX - rect.left) / pixelSize);
   const y = Math.floor((event.clientY - rect.top) / pixelSize);
-  // random color
-  const color = hexToU32(colorPicker.value);
+  coords = [x, y];
 
-  const update = { x, y, color };
-  socket.emit('place-pixel', update);
-
-  lastPixelTime = now;
-  localStorage.setItem('lastPixelTime', now.toString());
+  coordsText.textContent = `${x}, ${y}`;
 });
-
-const u32ToHex = (color) => {
-  return `#${color.toString(16).padStart(6, '0')}`;
-};
-
-const hexToU32 = (color) => {
-  return parseInt(color.slice(1), 16);
-};
-
-setInterval(() => {
-  const now = Date.now();
-  const timeLeft = Math.max(0, pixelCooldown - (now - lastPixelTime));
-  if (timeLeft > 0) {
-    countdownDiv.textContent = `You can place a pixel in ${Math.ceil(
-      timeLeft / 1000
-    )} seconds`;
-  } else {
-    countdownDiv.textContent = 'You can place a pixel now';
-  }
-}, 1000);