mirror of
https://github.com/YusufB5/ASCILINE.git
synced 2026-06-17 22:35:13 +02:00
297 lines
9 KiB
JavaScript
297 lines
9 KiB
JavaScript
/**
|
|
* ASCILINE ENGINE - Core Logic
|
|
* =========================================
|
|
* Handles WebSocket communication, frame buffering,
|
|
* and dual-mode rendering (Canvas/DOM).
|
|
*/
|
|
|
|
const player = document.getElementById('ascii-player');
|
|
const canvas = document.getElementById('ascii-canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const statusEl = document.getElementById('status');
|
|
const container = document.getElementById('player-container');
|
|
const overlay = document.getElementById('play-overlay');
|
|
|
|
// ── STATE ──
|
|
let state = 'IDLE'; // IDLE | PLAYING | DISSOLVING
|
|
let ws = null;
|
|
const frameBuffer = [];
|
|
const BUFFER_SIZE = 4;
|
|
let targetFps = 24;
|
|
let frameInterval = 1000 / targetFps;
|
|
let renderMode = 1;
|
|
|
|
// Grid & Dimensions
|
|
let gridCols = 0, gridRows = 0;
|
|
let charWidth = 0, charHeight = 0;
|
|
let xPos = null, yPos = null;
|
|
|
|
// Timing & Metrics
|
|
let lastRenderTime = 0;
|
|
let frameCount = 0, currentFps = 0, lastFpsUpdate = 0;
|
|
let lastFrameView = null; // Stored for the ripple effect
|
|
|
|
// Character Lookup Table (optimization)
|
|
const CHAR_LUT = new Array(128);
|
|
for (let i = 0; i < 128; i++) CHAR_LUT[i] = String.fromCharCode(i);
|
|
|
|
/**
|
|
* Pre-calculates positions and scales canvas for high-performance rendering.
|
|
*/
|
|
function buildCanvas(cols, rows) {
|
|
gridCols = cols;
|
|
gridRows = rows;
|
|
ctx.font = 'bold 8px Courier New';
|
|
charWidth = Math.ceil(ctx.measureText('M').width);
|
|
charHeight = 8;
|
|
|
|
canvas.width = cols * charWidth;
|
|
canvas.height = rows * charHeight;
|
|
canvas.style.display = 'block';
|
|
player.style.display = 'none';
|
|
|
|
container.style.minWidth = canvas.width + 'px';
|
|
container.style.minHeight = canvas.height + 'px';
|
|
|
|
ctx.font = 'bold 8px Courier New';
|
|
ctx.textBaseline = 'top';
|
|
|
|
xPos = new Float32Array(cols);
|
|
yPos = new Float32Array(rows);
|
|
for (let c = 0; c < cols; c++) xPos[c] = c * charWidth;
|
|
for (let r = 0; r < rows; r++) yPos[r] = r * charHeight;
|
|
}
|
|
|
|
/**
|
|
* Initiates WebSocket connection and stream handling.
|
|
*/
|
|
function startStream() {
|
|
if (state !== 'IDLE') return;
|
|
state = 'PLAYING';
|
|
overlay.classList.add('hidden');
|
|
statusEl.textContent = 'Connecting...';
|
|
statusEl.style.color = 'var(--accent-color)';
|
|
|
|
frameBuffer.length = 0;
|
|
lastFrameView = null;
|
|
frameCount = 0;
|
|
currentFps = 0;
|
|
|
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
ws = new WebSocket(`${protocol}//${location.host}/ws`);
|
|
ws.binaryType = 'arraybuffer';
|
|
|
|
ws.onmessage = (event) => {
|
|
if (state !== 'PLAYING') return;
|
|
|
|
if (typeof event.data === 'string') {
|
|
if (event.data.startsWith('Error:')) {
|
|
statusEl.textContent = event.data;
|
|
statusEl.style.color = '#ff0000';
|
|
state = 'IDLE';
|
|
if (ws) ws.close();
|
|
setTimeout(() => resetToIdle(), 3000);
|
|
return;
|
|
}
|
|
|
|
if (event.data.startsWith('INIT:')) {
|
|
const p = event.data.split(':');
|
|
targetFps = parseFloat(p[1]);
|
|
frameInterval = 1000 / targetFps;
|
|
renderMode = parseInt(p[2]);
|
|
if (renderMode > 1) {
|
|
buildCanvas(parseInt(p[3]), parseInt(p[4]));
|
|
} else {
|
|
player.style.display = 'block';
|
|
canvas.style.display = 'none';
|
|
}
|
|
return;
|
|
}
|
|
frameBuffer.push(event.data);
|
|
} else {
|
|
frameBuffer.push(event.data);
|
|
}
|
|
|
|
// Buffer Overflow Protection
|
|
while (frameBuffer.length > BUFFER_SIZE * 3) frameBuffer.shift();
|
|
|
|
// Start render loop once buffered
|
|
if (frameBuffer.length >= BUFFER_SIZE && lastRenderTime === 0) {
|
|
lastRenderTime = performance.now();
|
|
lastFpsUpdate = lastRenderTime;
|
|
requestAnimationFrame(renderFrame);
|
|
}
|
|
};
|
|
|
|
ws.onopen = () => {
|
|
statusEl.textContent = 'Buffering...';
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
if (state === 'PLAYING') {
|
|
statusEl.textContent = 'Stream Ended.';
|
|
statusEl.style.color = '#888';
|
|
setTimeout(() => resetToIdle(), 1500);
|
|
}
|
|
};
|
|
|
|
ws.onerror = () => {
|
|
statusEl.textContent = 'Connection Error!';
|
|
statusEl.style.color = '#ff0000';
|
|
setTimeout(() => resetToIdle(), 2000);
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Main render loop using requestAnimationFrame.
|
|
*/
|
|
function renderFrame(now) {
|
|
if (state !== 'PLAYING') return;
|
|
requestAnimationFrame(renderFrame);
|
|
|
|
const elapsed = now - lastRenderTime;
|
|
if (elapsed < frameInterval) return;
|
|
|
|
// FPS Counter
|
|
frameCount++;
|
|
if (now - lastFpsUpdate >= 1000) {
|
|
currentFps = frameCount;
|
|
frameCount = 0;
|
|
lastFpsUpdate = now;
|
|
let modeText = 'B&W';
|
|
const modes = { 2: '512 Color', 3: '32K Color', 4: '262K Color', 5: '16M Ultra' };
|
|
modeText = modes[renderMode] || 'B&W';
|
|
statusEl.textContent = `FPS: ${currentFps}/${Math.round(targetFps)} | Buf: ${frameBuffer.length} | ${modeText}`;
|
|
}
|
|
|
|
if (frameBuffer.length === 0) return;
|
|
lastRenderTime = now;
|
|
|
|
const frame = frameBuffer.shift();
|
|
|
|
if (renderMode === 1) {
|
|
player.textContent = frame;
|
|
} else {
|
|
const view = new Uint8Array(frame);
|
|
lastFrameView = view;
|
|
|
|
ctx.fillStyle = '#050505';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.font = 'bold 8px Courier New';
|
|
ctx.textBaseline = 'top';
|
|
|
|
let col = 0, row = 0, prevPacked = -1;
|
|
for (let idx = 0; idx < view.length; idx += 4) {
|
|
const packed = (view[idx+1] << 16) | (view[idx+2] << 8) | view[idx+3];
|
|
if (packed !== prevPacked) {
|
|
ctx.fillStyle = `rgb(${view[idx+1]},${view[idx+2]},${view[idx+3]})`;
|
|
prevPacked = packed;
|
|
}
|
|
ctx.fillText(CHAR_LUT[view[idx]], xPos[col], yPos[row]);
|
|
col++;
|
|
if (col >= gridCols) { col = 0; row++; }
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Visual Effect: Ripple Dissolve
|
|
* Triggered on click during playback.
|
|
*/
|
|
function triggerRipple(clickX, clickY) {
|
|
if (!lastFrameView || renderMode === 1) {
|
|
resetToIdle();
|
|
return;
|
|
}
|
|
|
|
state = 'DISSOLVING';
|
|
if (ws) { ws.onclose = null; ws.close(); ws = null; }
|
|
|
|
const fv = lastFrameView;
|
|
const rippleSpeed = 400;
|
|
const waveFront = 70;
|
|
const maxShake = 6;
|
|
const maxDist = Math.sqrt(canvas.width * canvas.width + canvas.height * canvas.height);
|
|
const startTime = performance.now();
|
|
|
|
statusEl.textContent = '';
|
|
|
|
function animateRipple(now) {
|
|
const elapsed = (now - startTime) / 1000;
|
|
const radius = elapsed * rippleSpeed;
|
|
|
|
if (radius > maxDist + waveFront + 20) {
|
|
resetToIdle();
|
|
return;
|
|
}
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
ctx.font = 'bold 8px Courier New';
|
|
ctx.textBaseline = 'top';
|
|
|
|
let col = 0, row = 0;
|
|
|
|
for (let idx = 0; idx < fv.length; idx += 4) {
|
|
const px = xPos[col];
|
|
const py = yPos[row];
|
|
const dx = px - clickX;
|
|
const dy = py - clickY;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
|
|
if (dist > radius) {
|
|
ctx.globalAlpha = 1;
|
|
ctx.fillStyle = `rgb(${fv[idx+1]},${fv[idx+2]},${fv[idx+3]})`;
|
|
ctx.fillText(CHAR_LUT[fv[idx]], px, py);
|
|
} else if (dist > radius - waveFront) {
|
|
const progress = (radius - dist) / waveFront;
|
|
const shake = Math.sin(progress * Math.PI) * maxShake;
|
|
const ox = (Math.random() - 0.5) * shake * 2;
|
|
const oy = (Math.random() - 0.5) * shake * 2;
|
|
|
|
ctx.globalAlpha = 1 - progress;
|
|
ctx.fillStyle = `rgb(${fv[idx+1]},${fv[idx+2]},${fv[idx+3]})`;
|
|
ctx.fillText(CHAR_LUT[fv[idx]], px + ox, py + oy);
|
|
}
|
|
|
|
col++;
|
|
if (col >= gridCols) { col = 0; row++; }
|
|
}
|
|
|
|
ctx.globalAlpha = 1;
|
|
requestAnimationFrame(animateRipple);
|
|
}
|
|
|
|
requestAnimationFrame(animateRipple);
|
|
}
|
|
|
|
function resetToIdle() {
|
|
state = 'IDLE';
|
|
if (ws) { ws.onclose = null; ws.close(); ws = null; }
|
|
frameBuffer.length = 0;
|
|
lastRenderTime = 0;
|
|
lastFrameView = null;
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
player.textContent = '';
|
|
overlay.classList.remove('hidden');
|
|
statusEl.textContent = 'Ready';
|
|
statusEl.style.color = 'rgba(255,255,255,0.6)';
|
|
}
|
|
|
|
// ── EVENT LISTENERS ──
|
|
overlay.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
startStream();
|
|
});
|
|
|
|
container.addEventListener('click', (e) => {
|
|
if (state !== 'PLAYING') return;
|
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
const scaleX = canvas.width / rect.width;
|
|
const scaleY = canvas.height / rect.height;
|
|
const clickX = (e.clientX - rect.left) * scaleX;
|
|
const clickY = (e.clientY - rect.top) * scaleY;
|
|
|
|
triggerRipple(clickX, clickY);
|
|
});
|