forked from genewildish/Mainline
feat(integration): Complete feature rewrite with pipeline architecture, effects system, and display improvements
Major changes: - Pipeline architecture with capability-based dependency resolution - Effects plugin system with performance monitoring - Display abstraction with multiple backends (terminal, null, websocket) - Camera system for viewport scrolling - Sensor framework for real-time input - Command-and-control system via ntfy - WebSocket display backend for browser clients - Comprehensive test suite and documentation Issue #48: ADR for preset scripting language included This commit consolidates 110 individual commits into a single feature integration that can be reviewed and tested before further refinement.
This commit is contained in:
313
client/editor.html
Normal file
313
client/editor.html
Normal file
@@ -0,0 +1,313 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mainline Pipeline Editor</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
|
||||
background: #1a1a1a;
|
||||
color: #eee;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
#sidebar {
|
||||
width: 300px;
|
||||
background: #222;
|
||||
padding: 15px;
|
||||
border-right: 1px solid #333;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#main {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.stage-list {
|
||||
list-style: none;
|
||||
}
|
||||
.stage-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 8px;
|
||||
background: #333;
|
||||
margin-bottom: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.stage-item:hover { background: #444; }
|
||||
.stage-item.selected { background: #0066cc; }
|
||||
.stage-item input[type="checkbox"] {
|
||||
margin-right: 8px;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.stage-name {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
}
|
||||
.param-group {
|
||||
background: #2a2a2a;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.param-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.param-name {
|
||||
width: 100px;
|
||||
color: #aaa;
|
||||
}
|
||||
.param-slider {
|
||||
flex: 1;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.param-value {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
color: #4f4;
|
||||
}
|
||||
.preset-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.preset-btn {
|
||||
background: #333;
|
||||
border: 1px solid #444;
|
||||
color: #ccc;
|
||||
padding: 4px 10px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
}
|
||||
.preset-btn:hover { background: #444; }
|
||||
.preset-btn.active { background: #0066cc; border-color: #0077ff; color: #fff; }
|
||||
button.action-btn {
|
||||
background: #0066cc;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
button.action-btn:hover { background: #0077ee; }
|
||||
#status {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
#status.connected { color: #4f4; }
|
||||
#status.disconnected { color: #f44; }
|
||||
#pipeline-view {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.pipeline-node {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
margin: 2px;
|
||||
background: #333;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.pipeline-node.enabled { border-left: 3px solid #4f4; }
|
||||
.pipeline-node.disabled { border-left: 3px solid #666; opacity: 0.6; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sidebar">
|
||||
<div class="section">
|
||||
<h2>Preset</h2>
|
||||
<div id="preset-list" class="preset-list"></div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Stages</h2>
|
||||
<ul id="stage-list" class="stage-list"></ul>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Parameters</h2>
|
||||
<div id="param-editor" class="param-group"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<h2>Pipeline</h2>
|
||||
<div id="pipeline-view"></div>
|
||||
<div style="margin-top: 20px;">
|
||||
<button class="action-btn" onclick="sendCommand({action: 'cycle_preset', direction: 1})">Next Preset</button>
|
||||
<button class="action-btn" onclick="sendCommand({action: 'cycle_preset', direction: -1})">Prev Preset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="status">Disconnected</div>
|
||||
|
||||
<script>
|
||||
const ws = new WebSocket(`ws://${location.hostname}:8765`);
|
||||
let state = { stages: {}, preset: '', presets: [], selected_stage: null };
|
||||
|
||||
function updateStatus(connected) {
|
||||
const status = document.getElementById('status');
|
||||
status.textContent = connected ? 'Connected' : 'Disconnected';
|
||||
status.className = connected ? 'connected' : 'disconnected';
|
||||
}
|
||||
|
||||
function connect() {
|
||||
ws.onopen = () => {
|
||||
updateStatus(true);
|
||||
// Request initial state
|
||||
ws.send(JSON.stringify({ type: 'state_request' }));
|
||||
};
|
||||
ws.onclose = () => {
|
||||
updateStatus(false);
|
||||
setTimeout(connect, 2000);
|
||||
};
|
||||
ws.onerror = () => {
|
||||
updateStatus(false);
|
||||
};
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.type === 'state') {
|
||||
state = data.state;
|
||||
render();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Parse error:', e);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function sendCommand(command) {
|
||||
ws.send(JSON.stringify({ type: 'command', command }));
|
||||
}
|
||||
|
||||
function render() {
|
||||
renderPresets();
|
||||
renderStageList();
|
||||
renderPipeline();
|
||||
renderParams();
|
||||
}
|
||||
|
||||
function renderPresets() {
|
||||
const container = document.getElementById('preset-list');
|
||||
container.innerHTML = '';
|
||||
(state.presets || []).forEach(preset => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'preset-btn' + (preset === state.preset ? ' active' : '');
|
||||
btn.textContent = preset;
|
||||
btn.onclick = () => sendCommand({ action: 'change_preset', preset });
|
||||
container.appendChild(btn);
|
||||
});
|
||||
}
|
||||
|
||||
function renderStageList() {
|
||||
const list = document.getElementById('stage-list');
|
||||
list.innerHTML = '';
|
||||
Object.entries(state.stages || {}).forEach(([name, info]) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'stage-item' + (name === state.selected_stage ? ' selected' : '');
|
||||
li.innerHTML = `
|
||||
<input type="checkbox" ${info.enabled ? 'checked' : ''}
|
||||
onchange="sendCommand({action: 'toggle_stage', stage: '${name}'})">
|
||||
<span class="stage-name">${name}</span>
|
||||
`;
|
||||
li.onclick = (e) => {
|
||||
if (e.target.type !== 'checkbox') {
|
||||
sendCommand({ action: 'select_stage', stage: name });
|
||||
}
|
||||
};
|
||||
list.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPipeline() {
|
||||
const view = document.getElementById('pipeline-view');
|
||||
view.innerHTML = '';
|
||||
const stages = Object.entries(state.stages || {});
|
||||
if (stages.length === 0) {
|
||||
view.textContent = '(No stages)';
|
||||
return;
|
||||
}
|
||||
stages.forEach(([name, info]) => {
|
||||
const span = document.createElement('span');
|
||||
span.className = 'pipeline-node' + (info.enabled ? ' enabled' : ' disabled');
|
||||
span.textContent = name;
|
||||
view.appendChild(span);
|
||||
});
|
||||
}
|
||||
|
||||
function renderParams() {
|
||||
const container = document.getElementById('param-editor');
|
||||
container.innerHTML = '';
|
||||
const selected = state.selected_stage;
|
||||
if (!selected || !state.stages[selected]) {
|
||||
container.innerHTML = '<div style="color:#666;font-size:11px;">(select a stage)</div>';
|
||||
return;
|
||||
}
|
||||
const stage = state.stages[selected];
|
||||
if (!stage.params || Object.keys(stage.params).length === 0) {
|
||||
container.innerHTML = '<div style="color:#666;font-size:11px;">(no params)</div>';
|
||||
return;
|
||||
}
|
||||
Object.entries(stage.params).forEach(([key, value]) => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'param-row';
|
||||
// Infer min/max/step from typical ranges
|
||||
let min = 0, max = 1, step = 0.1;
|
||||
if (typeof value === 'number') {
|
||||
if (value > 1) { max = value * 2; step = 1; }
|
||||
else { max = 1; step = 0.1; }
|
||||
}
|
||||
row.innerHTML = `
|
||||
<div class="param-name">${key}</div>
|
||||
<input type="range" class="param-slider" min="${min}" max="${max}" step="${step}"
|
||||
value="${value}"
|
||||
oninput="adjustParam('${key}', this.value)">
|
||||
<div class="param-value">${typeof value === 'number' ? Number(value).toFixed(2) : value}</div>
|
||||
`;
|
||||
container.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
function adjustParam(param, newValue) {
|
||||
const selected = state.selected_stage;
|
||||
if (!selected) return;
|
||||
// Update display immediately for responsiveness
|
||||
const num = parseFloat(newValue);
|
||||
if (!isNaN(num)) {
|
||||
// Show updated value
|
||||
document.querySelectorAll('.param-value').forEach(el => {
|
||||
if (el.parentElement.querySelector('.param-name').textContent === param) {
|
||||
el.textContent = num.toFixed(2);
|
||||
}
|
||||
});
|
||||
}
|
||||
// Send command
|
||||
sendCommand({
|
||||
action: 'adjust_param',
|
||||
stage: selected,
|
||||
param: param,
|
||||
delta: num - (state.stages[selected].params[param] || 0)
|
||||
});
|
||||
}
|
||||
|
||||
connect();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
369
client/index.html
Normal file
369
client/index.html
Normal file
@@ -0,0 +1,369 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mainline Terminal</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background: #0a0a0a;
|
||||
color: #ccc;
|
||||
font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
body.fullscreen {
|
||||
padding: 0;
|
||||
}
|
||||
body.fullscreen #controls {
|
||||
display: none;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
canvas {
|
||||
background: #000;
|
||||
border: 1px solid #333;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
body.fullscreen canvas {
|
||||
border: none;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-width: 100vw;
|
||||
max-height: 100vh;
|
||||
}
|
||||
#controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
#controls button {
|
||||
background: #333;
|
||||
color: #ccc;
|
||||
border: 1px solid #555;
|
||||
padding: 5px 12px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
}
|
||||
#controls button:hover {
|
||||
background: #444;
|
||||
}
|
||||
#controls input {
|
||||
width: 60px;
|
||||
background: #222;
|
||||
color: #ccc;
|
||||
border: 1px solid #444;
|
||||
padding: 4px 8px;
|
||||
font-family: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
#status {
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
#status.connected {
|
||||
color: #4f4;
|
||||
}
|
||||
#status.disconnected {
|
||||
color: #f44;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
<canvas id="terminal"></canvas>
|
||||
</div>
|
||||
<div id="controls">
|
||||
<label>Cols: <input type="number" id="cols" value="80" min="20" max="200"></label>
|
||||
<label>Rows: <input type="number" id="rows" value="24" min="10" max="60"></label>
|
||||
<button id="apply">Apply</button>
|
||||
<button id="fullscreen">Fullscreen</button>
|
||||
</div>
|
||||
<div id="status" class="disconnected">Connecting...</div>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('terminal');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const status = document.getElementById('status');
|
||||
const colsInput = document.getElementById('cols');
|
||||
const rowsInput = document.getElementById('rows');
|
||||
const applyBtn = document.getElementById('apply');
|
||||
const fullscreenBtn = document.getElementById('fullscreen');
|
||||
|
||||
const CHAR_WIDTH = 9;
|
||||
const CHAR_HEIGHT = 16;
|
||||
|
||||
const ANSI_COLORS = {
|
||||
0: '#000000', 1: '#cd3131', 2: '#0dbc79', 3: '#e5e510',
|
||||
4: '#2472c8', 5: '#bc3fbc', 6: '#11a8cd', 7: '#e5e5e5',
|
||||
8: '#666666', 9: '#f14c4c', 10: '#23d18b', 11: '#f5f543',
|
||||
12: '#3b8eea', 13: '#d670d6', 14: '#29b8db', 15: '#ffffff',
|
||||
};
|
||||
|
||||
let cols = 80;
|
||||
let rows = 24;
|
||||
let ws = null;
|
||||
|
||||
function resizeCanvas() {
|
||||
canvas.width = cols * CHAR_WIDTH;
|
||||
canvas.height = rows * CHAR_HEIGHT;
|
||||
}
|
||||
|
||||
function parseAnsi(text) {
|
||||
if (!text) return [];
|
||||
|
||||
const tokens = [];
|
||||
let currentText = '';
|
||||
let fg = '#cccccc';
|
||||
let bg = '#000000';
|
||||
let bold = false;
|
||||
let i = 0;
|
||||
let inEscape = false;
|
||||
let escapeCode = '';
|
||||
|
||||
while (i < text.length) {
|
||||
const char = text[i];
|
||||
|
||||
if (inEscape) {
|
||||
if (char >= '0' && char <= '9' || char === ';' || char === '[') {
|
||||
escapeCode += char;
|
||||
}
|
||||
|
||||
if (char === 'm') {
|
||||
const codes = escapeCode.replace('\x1b[', '').split(';');
|
||||
|
||||
for (const code of codes) {
|
||||
const num = parseInt(code) || 0;
|
||||
|
||||
if (num === 0) {
|
||||
fg = '#cccccc';
|
||||
bg = '#000000';
|
||||
bold = false;
|
||||
} else if (num === 1) {
|
||||
bold = true;
|
||||
} else if (num === 22) {
|
||||
bold = false;
|
||||
} else if (num === 39) {
|
||||
fg = '#cccccc';
|
||||
} else if (num === 49) {
|
||||
bg = '#000000';
|
||||
} else if (num >= 30 && num <= 37) {
|
||||
fg = ANSI_COLORS[num - 30 + (bold ? 8 : 0)] || '#cccccc';
|
||||
} else if (num >= 40 && num <= 47) {
|
||||
bg = ANSI_COLORS[num - 40] || '#000000';
|
||||
} else if (num >= 90 && num <= 97) {
|
||||
fg = ANSI_COLORS[num - 90 + 8] || '#cccccc';
|
||||
} else if (num >= 100 && num <= 107) {
|
||||
bg = ANSI_COLORS[num - 100 + 8] || '#000000';
|
||||
} else if (num >= 1 && num <= 256) {
|
||||
// 256 colors
|
||||
if (num < 16) {
|
||||
fg = ANSI_COLORS[num] || '#cccccc';
|
||||
} else if (num < 232) {
|
||||
const c = num - 16;
|
||||
const r = Math.floor(c / 36) * 51;
|
||||
const g = Math.floor((c % 36) / 6) * 51;
|
||||
const b = (c % 6) * 51;
|
||||
fg = `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${b.toString(16).padStart(2,'0')}`;
|
||||
} else {
|
||||
const gray = (num - 232) * 10 + 8;
|
||||
fg = `#${gray.toString(16).repeat(2)}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (currentText) {
|
||||
tokens.push({ text: currentText, fg, bg, bold });
|
||||
currentText = '';
|
||||
}
|
||||
inEscape = false;
|
||||
escapeCode = '';
|
||||
}
|
||||
} else if (char === '\x1b' && text[i + 1] === '[') {
|
||||
if (currentText) {
|
||||
tokens.push({ text: currentText, fg, bg, bold });
|
||||
currentText = '';
|
||||
}
|
||||
inEscape = true;
|
||||
escapeCode = '';
|
||||
i++;
|
||||
} else {
|
||||
currentText += char;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
|
||||
if (currentText) {
|
||||
tokens.push({ text: currentText, fg, bg, bold });
|
||||
}
|
||||
|
||||
return tokens;
|
||||
}
|
||||
|
||||
function renderLine(text, x, y, lineHeight) {
|
||||
const tokens = parseAnsi(text);
|
||||
let xOffset = x;
|
||||
|
||||
for (const token of tokens) {
|
||||
if (token.text) {
|
||||
if (token.bold) {
|
||||
ctx.font = 'bold 16px monospace';
|
||||
} else {
|
||||
ctx.font = '16px monospace';
|
||||
}
|
||||
|
||||
const metrics = ctx.measureText(token.text);
|
||||
|
||||
if (token.bg !== '#000000') {
|
||||
ctx.fillStyle = token.bg;
|
||||
ctx.fillRect(xOffset, y - 2, metrics.width + 1, lineHeight);
|
||||
}
|
||||
|
||||
ctx.fillStyle = token.fg;
|
||||
ctx.fillText(token.text, xOffset, y);
|
||||
xOffset += metrics.width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function connect() {
|
||||
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const wsUrl = `${protocol}//${window.location.hostname}:8765`;
|
||||
|
||||
ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.onopen = () => {
|
||||
status.textContent = 'Connected';
|
||||
status.className = 'connected';
|
||||
sendSize();
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
status.textContent = 'Disconnected - Reconnecting...';
|
||||
status.className = 'disconnected';
|
||||
setTimeout(connect, 1000);
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
status.textContent = 'Connection error';
|
||||
status.className = 'disconnected';
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
|
||||
if (data.type === 'frame') {
|
||||
cols = data.width || 80;
|
||||
rows = data.height || 24;
|
||||
colsInput.value = cols;
|
||||
rowsInput.value = rows;
|
||||
resizeCanvas();
|
||||
render(data.lines || []);
|
||||
} else if (data.type === 'clear') {
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
} else if (data.type === 'state') {
|
||||
// Log state updates for debugging (can be extended for UI)
|
||||
console.log('State update:', data.state);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to parse message:', e);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function sendSize() {
|
||||
if (ws && ws.readyState === WebSocket.OPEN) {
|
||||
ws.send(JSON.stringify({
|
||||
type: 'resize',
|
||||
width: parseInt(colsInput.value),
|
||||
height: parseInt(rowsInput.value)
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
function render(lines) {
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
ctx.font = '16px monospace';
|
||||
ctx.textBaseline = 'top';
|
||||
|
||||
const lineHeight = CHAR_HEIGHT;
|
||||
const maxLines = Math.min(lines.length, rows);
|
||||
|
||||
for (let i = 0; i < maxLines; i++) {
|
||||
const line = lines[i] || '';
|
||||
renderLine(line, 0, i * lineHeight, lineHeight);
|
||||
}
|
||||
}
|
||||
|
||||
function calculateViewportSize() {
|
||||
const isFullscreen = document.fullscreenElement !== null;
|
||||
const padding = isFullscreen ? 0 : 40;
|
||||
const controlsHeight = isFullscreen ? 0 : 60;
|
||||
const availableWidth = window.innerWidth - padding;
|
||||
const availableHeight = window.innerHeight - controlsHeight;
|
||||
cols = Math.max(20, Math.floor(availableWidth / CHAR_WIDTH));
|
||||
rows = Math.max(10, Math.floor(availableHeight / CHAR_HEIGHT));
|
||||
colsInput.value = cols;
|
||||
rowsInput.value = rows;
|
||||
resizeCanvas();
|
||||
console.log('Fullscreen:', isFullscreen, 'Size:', cols, 'x', rows);
|
||||
sendSize();
|
||||
}
|
||||
|
||||
applyBtn.addEventListener('click', () => {
|
||||
cols = parseInt(colsInput.value);
|
||||
rows = parseInt(rowsInput.value);
|
||||
resizeCanvas();
|
||||
sendSize();
|
||||
});
|
||||
|
||||
fullscreenBtn.addEventListener('click', () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.body.classList.add('fullscreen');
|
||||
document.documentElement.requestFullscreen().then(() => {
|
||||
calculateViewportSize();
|
||||
});
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
calculateViewportSize();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('fullscreenchange', () => {
|
||||
if (!document.fullscreenElement) {
|
||||
document.body.classList.remove('fullscreen');
|
||||
calculateViewportSize();
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (document.fullscreenElement) {
|
||||
calculateViewportSize();
|
||||
}
|
||||
});
|
||||
|
||||
// Initial setup
|
||||
resizeCanvas();
|
||||
connect();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user