leca/pixelbattle
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added server option

Browse Source
This commit is contained in:
leca
2023-08-01 08:52:38 +03:00
parent d6a335f293
commit 80545b0538
2 changed files with 54 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
html/index.html
View File

@@ -5,6 +5,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
<body style="background-color: grey;"> <body style="background-color: grey;">
<p>
Server to connect:
<input type="text" id="server-address" value="foxarmy.org"/>
<input type="number" id="server-port" value="7865"/>
<input type="button" id="server-button" value="connect" onclick="connect()">
</p>
<p> <p>
<input type="color" id="color" /> <input type="color" id="color" />
<input type="button" id="submitColor" value="change color" onclick="changeColor()"/> <input type="button" id="submitColor" value="change color" onclick="changeColor()"/>

83
html/logic.js
View File

@@ -1,4 +1,6 @@
const socket = new WebSocket("ws://localhost:7865"); var serverAddress = document.getElementById("server-address").value;
var serverPort = document.getElementById("server-port").value
var socket = new WebSocket(`ws://${serverAddress}:${serverPort}`);
var canvas = document.getElementById("board"); var canvas = document.getElementById("board");
var colorInput = document.getElementById("color"); var colorInput = document.getElementById("color");
var canvasHidden = document.getElementById("hidden"); var canvasHidden = document.getElementById("hidden");
@@ -11,6 +13,50 @@ canvasHidden.width = 1920;
canvasHidden.height = 1080; canvasHidden.height = 1080;
var imgData = ctx2.createImageData(canvasHidden.width, canvasHidden.height) var imgData = ctx2.createImageData(canvasHidden.width, canvasHidden.height)
function connect() {
socket.close();
serverAddress = document.getElementById("server-address").value;
serverPort = document.getElementById("server-port").value
console.log(`Connecting ${serverAddress}:${serverPort}`)
socket = new WebSocket(`ws://${serverAddress}:${serverPort}`)
socket.addEventListener("open", (event) => {
socket.send("{\"code\":0}");
});
socket.addEventListener("message", (event) => {
// console.log("Message from server ", JSON.stringify(event.data.toString()));
event.data.text().then(function(packet){
packet = JSON.parse(packet)
let code = packet.code
let content = packet.content
switch (code){
case 0:
//Ineffective way to do that, fix that later ;)
let converted = Uint8ClampedArray.from(content)
for (let i = 0; i < converted.length; i ++)
imgData.data[i] = converted[i]
redraw();
break;
case 1:
contentJson = JSON.parse(content);
let color = {
r: contentJson.r,
g: contentJson.g,
b: contentJson.b
}
drawPixel(contentJson.x * 4, contentJson.y * 4, color)
redraw();
break;
}
});
});
// socket.send("{\"code\":0}");
}
function drawPixel(x, y, color) { function drawPixel(x, y, color) {
let pixelNumber; let pixelNumber;
if (y > 0) if (y > 0)
@@ -40,42 +86,9 @@ function redraw() {
ctx.imageSmoothingEnabled = false ctx.imageSmoothingEnabled = false
} }
socket.addEventListener("open", (event) => {
socket.send("{\"code\":0}");
});
socket.addEventListener("message", (event) => {
// console.log("Message from server ", JSON.stringify(event.data.toString()));
event.data.text().then(function(packet){
packet = JSON.parse(packet)
let code = packet.code
let content = packet.content
switch (code){
case 0:
//Ineffective way to do that, fix that later ;)
let converted = Uint8ClampedArray.from(content)
for (let i = 0; i < converted.length; i ++)
imgData.data[i] = converted[i]
redraw();
break;
case 1:
contentJson = JSON.parse(content);
let color = {
r: contentJson.r,
g: contentJson.g,
b: contentJson.b
}
drawPixel(contentJson.x * 4, contentJson.y * 4, color)
redraw();
break;
}
});
});
// All the code that is making zooms and moving around cavnas is made with big help of http://phrogz.net/tmp/canvas_zoom_to_cursor.html. Thanks alot! // All the code that is making zooms and moving around cavnas is made with big help of http://phrogz.net/tmp/canvas_zoom_to_cursor.html. Thanks alot!
window.onload = function() { window.onload = function() {
connect();
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
trackTransforms(ctx); trackTransforms(ctx);