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">
</head>
<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>
<input type="color" id="color" />
<input type="button" id="submitColor" value="change color" onclick="changeColor()"/>

71
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 colorInput = document.getElementById("color");
var canvasHidden = document.getElementById("hidden");
@@ -11,34 +13,12 @@ canvasHidden.width = 1920;
canvasHidden.height = 1080;
var imgData = ctx2.createImageData(canvasHidden.width, canvasHidden.height)
function drawPixel(x, y, color) {
let pixelNumber;
if (y > 0)
pixelNumber = (y) * canvas.width + x
if (y == 0)
pixelNumber = x
if (color == undefined) rgbColor = hexToRgb(currentColor);
for (let l = 0; l < 4; l ++)
for (let l = 0; l < 5; l ++){
imgData.data[pixelNumber + 0] = color == undefined? rgbColor.r : color.r;
imgData.data[pixelNumber + 1] = color == undefined? rgbColor.g : color.g;
imgData.data[pixelNumber + 2] = color == undefined? rgbColor.b : color.b;
imgData.data[pixelNumber + 3] = 255;
}
redraw();
}
function redraw() {
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();
ctx2.putImageData(imgData, 0, 0);
ctx.drawImage(canvasHidden, 0, 0)
ctx.imageSmoothingEnabled = false
}
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}");
@@ -74,8 +54,41 @@ socket.addEventListener("message", (event) => {
});
});
// socket.send("{\"code\":0}");
}
function drawPixel(x, y, color) {
let pixelNumber;
if (y > 0)
pixelNumber = (y) * canvas.width + x
if (y == 0)
pixelNumber = x
if (color == undefined) rgbColor = hexToRgb(currentColor);
for (let l = 0; l < 4; l ++)
for (let l = 0; l < 5; l ++){
imgData.data[pixelNumber + 0] = color == undefined? rgbColor.r : color.r;
imgData.data[pixelNumber + 1] = color == undefined? rgbColor.g : color.g;
imgData.data[pixelNumber + 2] = color == undefined? rgbColor.b : color.b;
imgData.data[pixelNumber + 3] = 255;
}
redraw();
}
function redraw() {
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.restore();
ctx2.putImageData(imgData, 0, 0);
ctx.drawImage(canvasHidden, 0, 0)
ctx.imageSmoothingEnabled = false
}
// 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);