refactoring + add pub

2023-08-08 14:14:34 +02:00 · 2023-08-08 14:14:34 +02:00 · e235fcc749
commit e235fcc749
parent 7ca48a2448
7 changed files with 351 additions and 132 deletions
--- a/pub/index.html
+++ b/pub/index.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>LJ Sketch</title>
+    <meta charset="UTF-8"> 
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+
+    <div id="main">
+      <div id="toolbox">
+	<div id="colors"></div>
+	<input type="color" id="selectedColor"
+	       class="button2x" value="#ffffff"></input>
+	<input type="button" id="clearButton"
+	       class="button2x" value="♻"></input>
+      </div>
+
+      <div>
+	<canvas id="canvas" width="1024" height="1024"></canvas>      
+	<span class="footer">LJ Sketch</span>
+      </div>
+      
+    <script src="main.js"></script>
+
+  </body>
+</html>
--- a/pub/main.js
+++ b/pub/main.js
@ -0,0 +1,130 @@
+const colors = [
+    "#000000",
+    "#1D2B53",
+    "#7E2553",
+    "#008751",
+    "#AB5236",
+    "#5F574F",
+    "#C2C3C7",
+    "#FFF1E8",
+    "#FF004D",
+    "#FFA300",
+    "#FFEC27",
+    "#00E436",
+    "#29ADFF",
+    "#83769C",
+    "#FF77A8",
+    "#FFCCAA"
+];
+
+const initUI = (colorsDiv, selectedColor) => {
+    for (const color of colors) {
+	(color => {
+	    const div = document.createElement("div");
+	    div.setAttribute("class", "color");	
+	    div.setAttribute("style", "background: "+color+";");
+	    div.onclick = evt => { selectedColor.value = color; };
+	    colorsDiv.appendChild(div);
+	})(color);
+    }
+};
+
+//Get Mouse Position
+const getMousePoint = (canvas, evt, color) => {
+    var rect = canvas.getBoundingClientRect();
+    const x = Math.floor(canvas.width * (evt.clientX - rect.left) / rect.width);
+    const y = Math.floor(canvas.height * (evt.clientY - rect.top) / rect.width);
+    return { x, y, color };
+};
+
+const updateLine = (ctx, line) => {
+    ctx.strokeStyle = line[0].color;
+    ctx.beginPath();
+    ctx.moveTo(line[0].x, line[0].y);
+    for(let i=1; i < line.length; ++i) {
+	ctx.lineTo(line[i].x, line[i].y);
+    }
+    ctx.stroke();
+};
+
+const updateCanvas = (canvas, ctx, lines) => {
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);    
+    for(let line of lines) {
+	updateLine(ctx, line);
+    }
+};
+
+const initDrawing = (canvas, clearButton, selectedColor, ws) => {
+    const ctx = canvas.getContext("2d");
+    ctx.lineWidth = 2;
+    let lines = [];
+    let currentLine = null;
+
+    const resetCanvas = () => {
+	ctx.fillStyle = "black";
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+    };
+    resetCanvas();
+    
+    clearButton.onclick = evt => {
+	lines = [];
+	resetCanvas();
+	ws.send(JSON.stringify({ t: "clear" }));
+    };
+    
+    canvas.addEventListener("mousedown", evt => {
+	const pt = getMousePoint(canvas, evt, selectedColor.value);
+	currentLine = [ pt ];
+	ws.send(JSON.stringify({ ...pt, t: "moveTo" }));
+    });
+
+    canvas.addEventListener("mousemove", evt => {
+	if(evt.buttons === 1) {
+	    const pt = getMousePoint(canvas, evt, selectedColor.value);
+	    currentLine.push(pt);
+	    updateLine(ctx, currentLine);
+	    ws.send(JSON.stringify({ ...pt, t: "lineTo" }));
+	}
+    });
+
+    canvas.addEventListener("mouseup", evt => {
+	console.log(currentLine);
+	currentLine = null;
+	ws.send(JSON.stringify({ t: "stroke"})); 
+    });
+
+    ws.addEventListener('message', function (event) {
+	let j = JSON.parse(event.data);
+	console.log(j);
+	if (j.t === "line") {
+	    let line = j.line.map(a => ({ x: a[0], y: a[1], color: a[2] }));
+	    lines.push(line);
+	    updateCanvas(canvas, ctx, lines);
+	} else if (j.t == "clear") {
+	    lines = [];
+	    resetCanvas();	    
+	}
+    });
+};
+
+
+const initWs = () => {
+    const socket = new WebSocket('ws://localhost:3000/ws');
+
+    socket.addEventListener('open', function (event) {
+    });
+    
+    return socket;
+};
+
+window.onload = () => {
+    const colorsDiv = document.querySelector("#colors");
+    const selectedColor = document.querySelector("#selectedColor");
+    const clearButton = document.querySelector("#clearButton");
+    const canvas = document.querySelector("#canvas");
+    initUI(colorsDiv, selectedColor);
+    let ws = initWs();
+    initDrawing(canvas, clearButton, selectedColor, ws);
+    
+};
--- a/pub/style.css
+++ b/pub/style.css
@ -0,0 +1,66 @@
+body {
+    margin: 0px;
+    padding: 0px;
+    background: #222;
+    color: #ddd;
+    font-family: monospace;
+}
+
+#main {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    grid-auto-rows: minmax(100px, auto);
+  
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    margin: 2em;
+}
+
+#canvas {
+    margin: 0 auto;
+    display: block;
+    height: 100%;
+    aspect-ratio: 1/1;   
+}
+
+#canvas:hover {
+    cursor: crosshair;
+}
+
+#toolbox {
+    display: inline-block;
+    margin: 0 auto;
+    width: 128px;
+    padding: 1em;
+}
+
+.button2x {
+    width: 128px !important;
+    height: 128px !important;    
+}
+
+#toolbox > input {
+    display: inline-block;
+    width: 64px;
+    height: 64px;
+    font-size: 64px;
+}
+
+#colors {
+}
+
+.color {
+    display: inline-block;
+    width: 64px;
+    height: 64px;
+}
+
+.footer {
+    display: block;
+    text-align: center;
+}
+