@wavegrid/canvas 0.2.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/server.js +5 -2
- package/esm/ui.js +3 -3
- package/package.json +2 -2
- package/server.js +5 -2
- package/ui.d.ts +1 -1
- package/ui.js +3 -3
package/esm/server.js
CHANGED
|
@@ -3,6 +3,8 @@ import { WebSocket, WebSocketServer } from 'ws';
|
|
|
3
3
|
import { getCanvasHTML } from './ui';
|
|
4
4
|
const PORT = parseInt(process.env.PORT || '3001', 10);
|
|
5
5
|
const SIMULATOR_URL = process.env.SIMULATOR_URL || 'ws://localhost:3000';
|
|
6
|
+
const NUM_CANNONS = process.env.NUM_CANNONS ? parseInt(process.env.NUM_CANNONS, 10) : 49;
|
|
7
|
+
const GRID_COLUMNS = process.env.GRID_COLUMNS ? parseInt(process.env.GRID_COLUMNS, 10) : 7;
|
|
6
8
|
// constructive.io brand mark — served as the favicon
|
|
7
9
|
const FAVICON_SVG = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
8
10
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3315 21.7046V28.9348L26.2354 27.2232L29.8206 25.1157L36.9909 29.3307V37.761L30.1657 41.7731V41.785L22.9955 46L19.4102 43.8925L15.8343 41.7848V41.7749L12.5759 39.8595L9 37.7518V21.2924L12.5759 19.1847L15.8343 17.2694V9.25722L19.4102 7.14956L22.6685 5.23418V5.21521L26.2445 3.10755L29.8297 1L37 5.21499V13.6453L30.1657 17.6628V17.6873L23.3315 21.7046ZM16.16 17.8789L12.9168 19.7854L10.0443 21.4784L16.0542 25.0113L22.2948 21.4903L19.4101 19.7945L16.16 17.8789ZM23.6598 5.43249L29.7813 9.0309L35.955 5.40169L33.0743 3.70829L29.8297 1.80095L26.5853 3.70818L23.6598 5.43249ZM22.5139 38.2327L16.8333 41.5721L19.7511 43.2918L22.5185 44.9187L22.5196 38.2427L22.5139 38.2327ZM29.0399 33.6349L29.0153 33.5916L29.1105 33.5357L26.24 31.8482L23.3405 30.1438V33.546V36.9854L29.0399 33.6349ZM29.0998 9.43154L26.24 7.75041L22.9953 5.84307L19.7509 7.7503L16.8486 9.461L22.97 13.0595L29.0348 9.49437L29.0244 9.47595L29.0998 9.43154ZM16.5153 10.0661V13.4722V17.2854L22.5224 20.8167L22.5236 13.598L16.5153 10.0661ZM35.9458 29.5176L33.0651 27.8242L29.8205 25.9168L26.5761 27.8241L23.6705 29.5367L29.7919 33.1352L35.9458 29.5176ZM15.794 33.7218L12.5758 31.8299L9.68105 30.1237V33.5369V37.3517L12.9167 39.2589L15.7928 40.9496L15.794 33.7218ZM15.7954 25.7332L9.68116 22.1389V25.5074V29.3222L12.9168 31.2293L15.7943 32.9208L15.7954 25.7332Z" fill="#01A1FF"/>
|
|
@@ -14,7 +16,7 @@ const server = http.createServer((req, res) => {
|
|
|
14
16
|
return;
|
|
15
17
|
}
|
|
16
18
|
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
|
|
17
|
-
res.end(getCanvasHTML());
|
|
19
|
+
res.end(getCanvasHTML(NUM_CANNONS, GRID_COLUMNS));
|
|
18
20
|
});
|
|
19
21
|
const wss = new WebSocketServer({ server });
|
|
20
22
|
let simulatorWs = null;
|
|
@@ -65,12 +67,13 @@ wss.on('connection', (ws) => {
|
|
|
65
67
|
server.listen(PORT, '0.0.0.0', () => {
|
|
66
68
|
console.log('');
|
|
67
69
|
console.log(' ╭──────────────────────────────────────╮');
|
|
68
|
-
console.log(' │
|
|
70
|
+
console.log(' │ Wavegrid · Canvas │');
|
|
69
71
|
console.log(' │ painting the sky with light │');
|
|
70
72
|
console.log(' ╰──────────────────────────────────────╯');
|
|
71
73
|
console.log('');
|
|
72
74
|
console.log(` → http://localhost:${PORT}`);
|
|
73
75
|
console.log(` → Simulator: ${SIMULATOR_URL}`);
|
|
76
|
+
console.log(` → Grid: ${NUM_CANNONS} cannons (${GRID_COLUMNS} columns)`);
|
|
74
77
|
console.log('');
|
|
75
78
|
connectToSimulator();
|
|
76
79
|
});
|
package/esm/ui.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function getCanvasHTML() {
|
|
1
|
+
export function getCanvasHTML(numCannons = 49, gridColumns = 7) {
|
|
2
2
|
return `<!DOCTYPE html>
|
|
3
3
|
<html>
|
|
4
4
|
<head>
|
|
@@ -462,8 +462,8 @@ export function getCanvasHTML() {
|
|
|
462
462
|
// ═══════════════════════════════════════════════════
|
|
463
463
|
// State
|
|
464
464
|
// ═══════════════════════════════════════════════════
|
|
465
|
-
const NUM =
|
|
466
|
-
const GRID =
|
|
465
|
+
const NUM = ${numCannons};
|
|
466
|
+
const GRID = ${gridColumns};
|
|
467
467
|
const grid = Array.from({length: NUM}, () => ({ h: 220, s: 90, b: 80 }));
|
|
468
468
|
|
|
469
469
|
let currentMode = 'paint';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wavegrid/canvas",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"author": "Dan Lynch <pyramation@gmail.com>",
|
|
5
5
|
"description": "Artist-facing creative canvas for painting with light on the 7×7 grid",
|
|
6
6
|
"main": "index.js",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"@types/ws": "^8.5.13",
|
|
44
44
|
"makage": "^0.3.0"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "1fc162ccd34d4b7e3594d26ee20043fb24a14ec6"
|
|
47
47
|
}
|
package/server.js
CHANGED
|
@@ -9,6 +9,8 @@ const ws_1 = require("ws");
|
|
|
9
9
|
const ui_1 = require("./ui");
|
|
10
10
|
const PORT = parseInt(process.env.PORT || '3001', 10);
|
|
11
11
|
const SIMULATOR_URL = process.env.SIMULATOR_URL || 'ws://localhost:3000';
|
|
12
|
+
const NUM_CANNONS = process.env.NUM_CANNONS ? parseInt(process.env.NUM_CANNONS, 10) : 49;
|
|
13
|
+
const GRID_COLUMNS = process.env.GRID_COLUMNS ? parseInt(process.env.GRID_COLUMNS, 10) : 7;
|
|
12
14
|
// constructive.io brand mark — served as the favicon
|
|
13
15
|
const FAVICON_SVG = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
14
16
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3315 21.7046V28.9348L26.2354 27.2232L29.8206 25.1157L36.9909 29.3307V37.761L30.1657 41.7731V41.785L22.9955 46L19.4102 43.8925L15.8343 41.7848V41.7749L12.5759 39.8595L9 37.7518V21.2924L12.5759 19.1847L15.8343 17.2694V9.25722L19.4102 7.14956L22.6685 5.23418V5.21521L26.2445 3.10755L29.8297 1L37 5.21499V13.6453L30.1657 17.6628V17.6873L23.3315 21.7046ZM16.16 17.8789L12.9168 19.7854L10.0443 21.4784L16.0542 25.0113L22.2948 21.4903L19.4101 19.7945L16.16 17.8789ZM23.6598 5.43249L29.7813 9.0309L35.955 5.40169L33.0743 3.70829L29.8297 1.80095L26.5853 3.70818L23.6598 5.43249ZM22.5139 38.2327L16.8333 41.5721L19.7511 43.2918L22.5185 44.9187L22.5196 38.2427L22.5139 38.2327ZM29.0399 33.6349L29.0153 33.5916L29.1105 33.5357L26.24 31.8482L23.3405 30.1438V33.546V36.9854L29.0399 33.6349ZM29.0998 9.43154L26.24 7.75041L22.9953 5.84307L19.7509 7.7503L16.8486 9.461L22.97 13.0595L29.0348 9.49437L29.0244 9.47595L29.0998 9.43154ZM16.5153 10.0661V13.4722V17.2854L22.5224 20.8167L22.5236 13.598L16.5153 10.0661ZM35.9458 29.5176L33.0651 27.8242L29.8205 25.9168L26.5761 27.8241L23.6705 29.5367L29.7919 33.1352L35.9458 29.5176ZM15.794 33.7218L12.5758 31.8299L9.68105 30.1237V33.5369V37.3517L12.9167 39.2589L15.7928 40.9496L15.794 33.7218ZM15.7954 25.7332L9.68116 22.1389V25.5074V29.3222L12.9168 31.2293L15.7943 32.9208L15.7954 25.7332Z" fill="#01A1FF"/>
|
|
@@ -20,7 +22,7 @@ const server = http_1.default.createServer((req, res) => {
|
|
|
20
22
|
return;
|
|
21
23
|
}
|
|
22
24
|
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
|
|
23
|
-
res.end((0, ui_1.getCanvasHTML)());
|
|
25
|
+
res.end((0, ui_1.getCanvasHTML)(NUM_CANNONS, GRID_COLUMNS));
|
|
24
26
|
});
|
|
25
27
|
exports.server = server;
|
|
26
28
|
const wss = new ws_1.WebSocketServer({ server });
|
|
@@ -72,12 +74,13 @@ wss.on('connection', (ws) => {
|
|
|
72
74
|
server.listen(PORT, '0.0.0.0', () => {
|
|
73
75
|
console.log('');
|
|
74
76
|
console.log(' ╭──────────────────────────────────────╮');
|
|
75
|
-
console.log(' │
|
|
77
|
+
console.log(' │ Wavegrid · Canvas │');
|
|
76
78
|
console.log(' │ painting the sky with light │');
|
|
77
79
|
console.log(' ╰──────────────────────────────────────╯');
|
|
78
80
|
console.log('');
|
|
79
81
|
console.log(` → http://localhost:${PORT}`);
|
|
80
82
|
console.log(` → Simulator: ${SIMULATOR_URL}`);
|
|
83
|
+
console.log(` → Grid: ${NUM_CANNONS} cannons (${GRID_COLUMNS} columns)`);
|
|
81
84
|
console.log('');
|
|
82
85
|
connectToSimulator();
|
|
83
86
|
});
|
package/ui.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function getCanvasHTML(): string;
|
|
1
|
+
export declare function getCanvasHTML(numCannons?: number, gridColumns?: number): string;
|
package/ui.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getCanvasHTML = getCanvasHTML;
|
|
4
|
-
function getCanvasHTML() {
|
|
4
|
+
function getCanvasHTML(numCannons = 49, gridColumns = 7) {
|
|
5
5
|
return `<!DOCTYPE html>
|
|
6
6
|
<html>
|
|
7
7
|
<head>
|
|
@@ -465,8 +465,8 @@ function getCanvasHTML() {
|
|
|
465
465
|
// ═══════════════════════════════════════════════════
|
|
466
466
|
// State
|
|
467
467
|
// ═══════════════════════════════════════════════════
|
|
468
|
-
const NUM =
|
|
469
|
-
const GRID =
|
|
468
|
+
const NUM = ${numCannons};
|
|
469
|
+
const GRID = ${gridColumns};
|
|
470
470
|
const grid = Array.from({length: NUM}, () => ({ h: 220, s: 90, b: 80 }));
|
|
471
471
|
|
|
472
472
|
let currentMode = 'paint';
|