W8 done

w7/static/css/styles.css

@@ -0,0 +1,5 @@
+* {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+}

w7/static/js/app.js

@@ -0,0 +1,70 @@
+const socket = io();
+
+let sizeSlider;
+let colorPicker;
+let drawings = [];
+
+const syncDrawing = function(data) {
+    const {roomId, type, params} = data;
+
+    if (data.roomId !== roomId) return;
+
+    push();
+    drawCmd(type, params);
+    pop();
+}
+
+const syncHistory = function(data) {
+    const {roomId, history} = data;
+
+    if (data.roomId !== roomId) return;
+
+    push();
+    for (const hItem of history) {
+        const [when, type, params] = hItem;
+        drawCmd(type, params);
+    }
+    pop();
+}
+
+const drawCmd = function(type, params) {
+    if (type == "stroke") {
+        fill(...params.color);
+        ellipse(params.x, params.y, params.strokeSize);
+    }
+}
+
+
+
+function setup() {
+    createCanvas(windowWidth, windowHeight);
+
+    sizeSlider = createSlider(1, 100, 6);
+    sizeSlider.position(10, 10);
+    sizeSlider.style("width", "200px");
+
+    colorPicker = createColorPicker(color(255, 204, 0));
+    colorPicker.position(10, 40);
+
+    noStroke();
+
+    socket.on("draw_sync", syncDrawing);
+    socket.on("sync_history", syncHistory);
+    
+    socket.emit("sync_me", { roomId });
+}
+
+function draw() {
+    fill(colorPicker.color());
+}
+
+function mouseDragged(event) {
+    if (!event.target.classList.value.includes("p5Canvas")) return;
+
+    socket.emit("draw", { roomId, type: "stroke", params: { color: colorPicker.color().levels, strokeSize: sizeSlider.value(), x: mouseX, y: mouseY } });
+}
+
+function windowResized() {
+    resizeCanvas(windowWidth, windowHeight);
+    socket.emit("sync_me", { roomId });
+}