115 lines
3.5 KiB
JavaScript
115 lines
3.5 KiB
JavaScript
// script.js
|
|
const socket = io();
|
|
|
|
let yourPixelsPlaced = 0; // Counter for pixels placed by you
|
|
|
|
// Function to set a cookie
|
|
function setCookie(name, value, days) {
|
|
const date = new Date();
|
|
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
|
const expires = "expires=" + date.toUTCString();
|
|
document.cookie = name + "=" + value + ";" + expires + ";path=/";
|
|
}
|
|
|
|
// Function to get a cookie
|
|
function getCookie(name) {
|
|
const cookieName = name + "=";
|
|
const decodedCookie = decodeURIComponent(document.cookie);
|
|
const cookieArray = decodedCookie.split(';');
|
|
for (let i = 0; i < cookieArray.length; i++) {
|
|
let cookie = cookieArray[i];
|
|
while (cookie.charAt(0) === ' ') {
|
|
cookie = cookie.substring(1);
|
|
}
|
|
if (cookie.indexOf(cookieName) === 0) {
|
|
return cookie.substring(cookieName.length, cookie.length);
|
|
}
|
|
}
|
|
return "";
|
|
}
|
|
|
|
const colorOptions = document.querySelectorAll('.color-option');
|
|
let currentColor = '#000000'; // Default: Black
|
|
|
|
// Set the current color when a color option is clicked
|
|
colorOptions.forEach(option => {
|
|
option.addEventListener('click', () => {
|
|
currentColor = option.style.backgroundColor;
|
|
// Remove the 'selected' class from all color options
|
|
colorOptions.forEach(opt => opt.classList.remove('selected'));
|
|
// Add the 'selected' class to the clicked color option
|
|
option.classList.add('selected');
|
|
});
|
|
});
|
|
|
|
// Update the current color of the pixel and place it on the canvas
|
|
function placePixel(index, color) {
|
|
socket.emit('placePixel', index, color);
|
|
}
|
|
|
|
// Create the canvas
|
|
const canvasDiv = document.getElementById('canvas');
|
|
const canvasWidth = 200;
|
|
const canvasHeight = 200;
|
|
|
|
function createCanvas() {
|
|
for (let i = 0; i < canvasWidth * canvasHeight; i++) {
|
|
const pixel = document.createElement('div');
|
|
pixel.classList.add('pixel');
|
|
canvasDiv.appendChild(pixel);
|
|
}
|
|
}
|
|
|
|
// Update a pixel on the canvas
|
|
function updatePixel(index, color) {
|
|
const pixel = document.getElementsByClassName('pixel')[index];
|
|
pixel.style.backgroundColor = color;
|
|
}
|
|
|
|
// Function to update the pixel count display
|
|
function updatePixelCount() {
|
|
const pixelCountElement = document.getElementById('pixel-count');
|
|
pixelCountElement.textContent = `Total Pixels: ${totalPixelsPlaced}, Your Pixels: ${yourPixelsPlaced}`;
|
|
}
|
|
|
|
// Retrieve yourPixelsPlaced value from the cookie
|
|
const savedPixelCount = parseInt(getCookie('yourPixelsPlaced'));
|
|
if (!isNaN(savedPixelCount)) {
|
|
yourPixelsPlaced = savedPixelCount;
|
|
}
|
|
|
|
// Handle initial pixel data from the server
|
|
socket.on('initPixels', (pixels) => {
|
|
for (let i = 0; i < pixels.length; i++) {
|
|
updatePixel(i, pixels[i]);
|
|
}
|
|
});
|
|
|
|
// Handle pixel placement from the client
|
|
canvasDiv.addEventListener('click', (event) => {
|
|
if (event.target.classList.contains('pixel')) {
|
|
const index = Array.prototype.indexOf.call(canvasDiv.children, event.target);
|
|
updatePixel(index, currentColor);
|
|
placePixel(index, currentColor);
|
|
|
|
// Increment yourPixelsPlaced when you place a pixel
|
|
yourPixelsPlaced++;
|
|
updatePixelCount();
|
|
// Save yourPixelsPlaced value to the cookie
|
|
setCookie('yourPixelsPlaced', yourPixelsPlaced, 365); // Cookie expires in 365 days
|
|
}
|
|
});
|
|
|
|
// Handle updates from other clients
|
|
socket.on('updatePixel', (index, color) => {
|
|
updatePixel(index, color);
|
|
});
|
|
|
|
// Receive the total pixels count from the server
|
|
socket.on('totalPixelsCount', (count) => {
|
|
totalPixelsPlaced = count;
|
|
updatePixelCount();
|
|
});
|
|
|
|
createCanvas();
|
|
updatePixelCount(); // Call to initialize the pixel count display
|