added server option
This commit is contained in:
parent
d6a335f293
commit
80545b0538
|
@ -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()"/>
|
||||||
|
|
|
@ -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,34 +13,12 @@ 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 drawPixel(x, y, color) {
|
function connect() {
|
||||||
let pixelNumber;
|
socket.close();
|
||||||
if (y > 0)
|
serverAddress = document.getElementById("server-address").value;
|
||||||
pixelNumber = (y) * canvas.width + x
|
serverPort = document.getElementById("server-port").value
|
||||||
if (y == 0)
|
console.log(`Connecting ${serverAddress}:${serverPort}`)
|
||||||
pixelNumber = x
|
socket = new WebSocket(`ws://${serverAddress}:${serverPort}`)
|
||||||
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
|
|
||||||
}
|
|
||||||
|
|
||||||
socket.addEventListener("open", (event) => {
|
socket.addEventListener("open", (event) => {
|
||||||
socket.send("{\"code\":0}");
|
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!
|
// 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);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue