94 lines
2.5 KiB
JavaScript
94 lines
2.5 KiB
JavaScript
import io from 'socket.io-client';
|
|
|
|
// 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
|
|
|
|
let lastPixelTime = parseInt(localStorage.getItem('lastPixelTime') || '0');
|
|
|
|
const socket = io(`${wsProtocol}//${wsHost}`, {
|
|
transports: ['websocket'],
|
|
});
|
|
|
|
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) => {
|
|
alert(message);
|
|
});
|
|
|
|
canvas.addEventListener('click', (event) => {
|
|
const now = Date.now();
|
|
|
|
if (now - lastPixelTime < pixelCooldown) {
|
|
alert(
|
|
`Please wait ${Math.round(
|
|
(pixelCooldown - (now - lastPixelTime)) / 1000
|
|
)} more seconds before placing a new pixel.`
|
|
);
|
|
return;
|
|
}
|
|
|
|
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);
|
|
|
|
const update = { x, y, color };
|
|
socket.emit('place-pixel', update);
|
|
|
|
lastPixelTime = now;
|
|
localStorage.setItem('lastPixelTime', now.toString());
|
|
});
|
|
|
|
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);
|