Martin/Collaborative-pixel-art
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit the code is uploaded

Browse source
This commit is contained in:
Martin 2023-07-21 17:46:01 +02:00
commit c8598bfa6a
6 changed files with 1761 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1432
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

17
package.json Normal file
View 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
View 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
View 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
View 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
View 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');
});