tezlm/board
1
0
Fork 0
Code Issues Pull requests Releases Activity

a

Browse source
This commit is contained in:
tezlm 2022-10-04 18:03:22 -07:00
parent ca51abb958
commit a9ab31ad2f
4 changed files with 30 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
board.html
View file

@ -13,6 +13,10 @@
<body>
<div id="loading">loading...</div>
<canvas id="canvas"></canvas>
<div id="bottom"><div id="picker"></div><div id="status">loading</div></div>
<div id="bottom">
<div id="picker"></div>
<div id="position">(0, 0)</div>
<div id="status">loading</div>
</div>
</body>
</html>

2
index.js
View file

@ -24,7 +24,7 @@ app.get("/*", (_, res) => {
res.sendFile(__dirname + "/board.html");
});
const server = app.listen(process.env.PORT || 3000);
const server = app.listen(process.env.PORT || 2893);
const io = require("socket.io")(server);
io.on("connection", (socket) => {

20
public/client.js
View file

@ -1,5 +1,6 @@
const $ = e => document.getElementById(e);
const setStatus = str => $("status").innerText = str;
const setPos = (x, y) => $("position").innerText = `(${x}, ${y})`;
const socket = io();
// someone's (or your) pen
@ -66,6 +67,7 @@ class Renderer {
this.pan[0] += x;
this.pan[1] += y;
this.ctx.translate(x, y);
setPos(this.pan[0], this.pan[1]);
}
resize() {
@ -155,7 +157,7 @@ class ColorSelection {
}
}
const cursor = { pressed: false, x: 0, y: 0 };
const cursor = { pressed: false, button: 0, x: 0, y: 0 };
const renderer = new Renderer($("canvas"));
const colors = new ColorSelection($("picker"));
colors.addAll([
@ -211,22 +213,26 @@ function handle(e) {
const coords = parseCoords(e);
if(!coords) return;
const type = parseType(e);
if(e.which === 1) {
setStatus(e.shiftKey ? "line" : "drawing");
if (type === "drawstart") cursor.button = e.which;
if (cursor.button === 1) {
const event = parseDrawEvent(coords, type);
if (!event) return;
setStatus(e.shiftKey ? "line" : "drawing");
if (e.shiftKey && type === "drawmove") event.type = "drawline";
renderer.add(event);
socket.emit("draw", event);
} else if(e.which === 2) {
} else if (cursor.button === 2 && cursor.pressed) {
setStatus("panning");
renderer.panBy(coords.x - cursor.x, coords.y - cursor.y);
renderer.redraw();
}
if(type === "drawstart") cursor.pressed = true;
if(type === "drawend") {
setStatus("ready");
if (type === "drawstart") {
cursor.pressed = true;
} else if (type === "drawend") {
cursor.pressed = false;
setStatus("ready");
}
cursor.x = coords.x;

9
public/style.css
View file

@ -39,12 +39,17 @@ body {
transform: scale(0.8);
}
#status {
flex: 0;
#status, #position {
margin-left: 16px;
display: flex;
align-items: center;
}
#position {
color: #444;
display: none;
}
#loading {
z-index: 9999;
position: fixed;