From 80545b05382710bedc38e0bc76aff7cc9f45d176 Mon Sep 17 00:00:00 2001 From: leca Date: Tue, 1 Aug 2023 08:52:38 +0300 Subject: [PATCH] added server option --- html/index.html | 6 ++++ html/logic.js | 83 ++++++++++++++++++++++++++++--------------------- 2 files changed, 54 insertions(+), 35 deletions(-) diff --git a/html/index.html b/html/index.html index c96cca3..1178d92 100644 --- a/html/index.html +++ b/html/index.html @@ -5,6 +5,12 @@ +

+ Server to connect: + + + +

diff --git a/html/logic.js b/html/logic.js index f078b4d..e4db91f 100644 --- a/html/logic.js +++ b/html/logic.js @@ -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 colorInput = document.getElementById("color"); var canvasHidden = document.getElementById("hidden"); @@ -11,6 +13,50 @@ canvasHidden.width = 1920; canvasHidden.height = 1080; 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) { let pixelNumber; if (y > 0) @@ -40,42 +86,9 @@ function redraw() { 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! window.onload = function() { + connect(); var ctx = canvas.getContext("2d"); trackTransforms(ctx);