first commit the code is uploaded
This commit is contained in:
Martin
commit
c8598bfa6a
6 changed files with 1761 additions and 0 deletions
1432
package-lock.json
generated
Normal file
1432
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
17
package.json
Normal file
17
package.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"cookie-parser": "^1.4.6",
|
||||
"express": "^4.18.2",
|
||||
"socket.io": "^4.7.1"
|
||||
},
|
||||
"name": "collaborative-pixel-art",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": ""
|
||||
}
|
||||
35
public/index.html
Normal file
35
public/index.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!-- index.html -->
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Collaborative Pixel Art</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>Collaborative Pixel Art</h1>
|
||||
<div id="pixel-count"></div> <!-- Element to display pixel count -->
|
||||
</div>
|
||||
<div class="container">
|
||||
<div id="canvas">
|
||||
<!-- Canvas will be generated dynamically -->
|
||||
</div>
|
||||
|
||||
<div class="color-selector">
|
||||
<div class="color-option" style="background-color: #000000;"></div>
|
||||
<div class="color-option" style="background-color: #FF0000;"></div>
|
||||
<div class="color-option" style="background-color: #00FF00;"></div>
|
||||
<div class="color-option" style="background-color: #0000FF;"></div>
|
||||
<div class="color-option" style="background-color: #FFFF00;"></div>
|
||||
<div class="color-option" style="background-color: #FF00FF;"></div>
|
||||
<div class="color-option" style="background-color: #00FFFF;"></div>
|
||||
<div class="color-option" style="background-color: #FFFFFF;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
115
public/script.js
Normal file
115
public/script.js
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
// 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 = 50;
|
||||
const canvasHeight = 50;
|
||||
|
||||
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
|
||||
114
public/styles.css
Normal file
114
public/styles.css
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
/* styles.css */
|
||||
|
||||
/* General styling for the body and page layout */
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif; /* Set font family for the entire page */
|
||||
background-color: #f0f0f0; /* Light gray background color */
|
||||
}
|
||||
|
||||
/* Styling for the header section */
|
||||
.header {
|
||||
margin-bottom: 20px; /* Add spacing at the bottom of the header */
|
||||
color: #333; /* Dark text color */
|
||||
font-size: 24px; /* Larger font size for the header */
|
||||
font-weight: bold; /* Make the header text bold */
|
||||
text-align: center; /* Center-align the text within the header */
|
||||
}
|
||||
|
||||
/* Styling for the pixel count display */
|
||||
#pixel-count {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin-top: 10px; /* Add spacing above the pixel count */
|
||||
}
|
||||
|
||||
/* Styling for the main container that wraps canvas and color selector */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* Allow the container to wrap on smaller screens */
|
||||
justify-content: center; /* Center the content horizontally */
|
||||
align-items: center; /* Center the content vertically */
|
||||
background-color: #fff; /* White background color */
|
||||
border-radius: 8px; /* Rounded corners for the container */
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow effect */
|
||||
padding: 20px; /* Add padding inside the container */
|
||||
max-width: 800px; /* Set a maximum width for the container */
|
||||
}
|
||||
|
||||
/* Styling for the canvas where pixels will be placed */
|
||||
#canvas {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(50, 10px); /* Create 50 columns of 10px each */
|
||||
grid-template-rows: repeat(50, 10px); /* Create 50 rows of 10px each */
|
||||
gap: 0; /* Remove any gap between pixels */
|
||||
}
|
||||
|
||||
/* Styling for individual pixels */
|
||||
.pixel {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc; /* Add a 1px border around each pixel */
|
||||
}
|
||||
|
||||
/* Styling for the color selector section */
|
||||
.color-selector {
|
||||
display: flex;
|
||||
flex-direction: column; /* Color options arranged vertically */
|
||||
align-items: center; /* Center color options horizontally */
|
||||
margin-left: 20px; /* Add some space to the left of the color selector */
|
||||
}
|
||||
|
||||
/* Styling for individual color options */
|
||||
.color-option {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%; /* Make the color options circular */
|
||||
margin: 5px; /* Add spacing between color options */
|
||||
cursor: pointer; /* Show pointer cursor on hover */
|
||||
border: 2px solid #ccc; /* Add a 2px border around each color option */
|
||||
/* Color options will have their background color set dynamically */
|
||||
}
|
||||
|
||||
/* Styling for the currently selected color option */
|
||||
.color-option.selected {
|
||||
border-color: #000; /* Change the border color for the selected color */
|
||||
}
|
||||
|
||||
/* Responsive design for phone-friendly UI */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
flex-direction: column; /* Stack canvas and color selector vertically */
|
||||
}
|
||||
|
||||
#canvas {
|
||||
width: 90%; /* Adjust canvas width to fit smaller screens */
|
||||
height: auto; /* Allow canvas height to adapt based on content */
|
||||
margin: 20px 0; /* Add some spacing around the canvas */
|
||||
}
|
||||
|
||||
.color-selector {
|
||||
flex-direction: row; /* Arrange color options horizontally */
|
||||
justify-content: center; /* Center color options horizontally */
|
||||
margin: 0; /* Remove any margin on smaller screens */
|
||||
margin-top: 20px; /* Add some spacing above the color selector */
|
||||
}
|
||||
|
||||
.color-option {
|
||||
margin: 5px 8px; /* Adjust spacing between color options */
|
||||
}
|
||||
|
||||
/* Adjust pixel count styles for phone-friendly UI */
|
||||
#pixel-count {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
48
server.js
Normal file
48
server.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
// server.js
|
||||
const express = require('express');
|
||||
const app = express();
|
||||
const http = require('http').createServer(app);
|
||||
const io = require('socket.io')(http);
|
||||
|
||||
const initialPixelColor = '#FFFFFF'; // Default color: White
|
||||
const canvasWidth = 50;
|
||||
const canvasHeight = 50;
|
||||
let pixels = new Array(canvasWidth * canvasHeight).fill(initialPixelColor);
|
||||
let totalPixelsPlaced = 0; // Counter for total pixels placed by everyone
|
||||
|
||||
app.use(express.static(__dirname + '/public'));
|
||||
|
||||
io.on('connection', (socket) => {
|
||||
// Send the initial pixel data to the connected client
|
||||
socket.emit('initPixels', pixels);
|
||||
|
||||
// Send the total pixels count to the connected client
|
||||
socket.emit('totalPixelsCount', totalPixelsPlaced);
|
||||
|
||||
socket.on('placePixel', (index, color) => {
|
||||
// Update the pixel color in the array
|
||||
pixels[index] = color;
|
||||
// Broadcast the updated pixel color to all clients
|
||||
io.emit('updatePixel', index, color);
|
||||
|
||||
// Increment the total pixels counter when a pixel is placed
|
||||
totalPixelsPlaced++;
|
||||
// Broadcast the updated total count to all clients
|
||||
io.emit('totalPixelsCount', totalPixelsPlaced);
|
||||
});
|
||||
});
|
||||
|
||||
// Function to clear the "yourPixelsPlaced" cookie
|
||||
function clearYourPixelsCookie(res) {
|
||||
res.clearCookie('yourPixelsPlaced');
|
||||
}
|
||||
|
||||
http.listen(3000, () => {
|
||||
console.log('Server started on http://localhost:3000');
|
||||
});
|
||||
|
||||
// Clear "yourPixelsPlaced" cookie when the server starts
|
||||
app.get('/', (req, res) => {
|
||||
clearYourPixelsCookie(res);
|
||||
res.sendFile(__dirname + '/public/index.html');
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue