Something went wrong. Try again.
My website. cameron.stream
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181// Optional Playwright tooling; never shipped as a runtime dependency.// TIDE_PLAYWRIGHT=/path/to/playwright/index.mjs TIDE_CHANNEL=chrome TIDE_WATCH=1 node scripts/test-tide-pool-browser.mjs [base] [receipts]import assert from 'node:assert/strict';import { mkdir, writeFile } from 'node:fs/promises';import { pathToFileURL } from 'node:url';const { chromium } = await import(process.env.TIDE_PLAYWRIGHT ? pathToFileURL(process.env.TIDE_PLAYWRIGHT).href : 'playwright');const base = process.argv[2] || 'http://localhost:3097';const out = process.argv[3] || '/tmp/tide-pool-immersive-review';await mkdir(out, { recursive: true });const browser = await chromium.launch({ channel: process.env.TIDE_CHANNEL, headless: true, args: ['--enable-unsafe-swiftshader'] });const errors = [], sizes = [];try { const context = await browser.newContext({ viewport: { width: 1440, height: 900 } }); await context.addInitScript(() => { window.__audio = []; const Native = window.AudioContext; window.AudioContext = class extends Native { constructor(...args) { super(...args); window.__audio.push(this); } }; // How many times the page's frame loop runs in each animation frame: never more than once. window.__loops = { frame: 0, most: 0 }; const raf = window.requestAnimationFrame.bind(window); let counted = -1; window.requestAnimationFrame = cb => raf(ts => { if (cb.name === 'loop') { if (ts !== counted) { counted = ts; window.__loops.frame = 0; } window.__loops.most = Math.max(window.__loops.most, ++window.__loops.frame); } cb(ts); }); }); const page = await context.newPage(); page.on('pageerror', e => errors.push(String(e))); page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); }); const response = await page.goto(`${base}/tide-pool?immersive-review=2&shelf=41`, { waitUntil: 'networkidle' }); assert.equal(response.status(), 200); assert.equal(response.headers()['x-robots-tag'], undefined); await page.waitForFunction(() => !document.querySelector('[data-tool="brass"]').disabled); // The view opens out of the veil's ring, and the title settles in its place. await page.waitForFunction(() => document.querySelector('[data-tide-pool]').dataset.titled && !['hole', 'open'].includes(document.querySelector('#tide-veil').dataset.iris)); assert.equal(await page.evaluate(() => window.__audio.length), 0); for (const [width, height] of [[1440,900],[1024,768],[768,1024],[393,852],[320,720],[844,430]]) { await page.setViewportSize({ width, height }); const box = await page.locator('#tide-stage').boundingBox(); assert.equal(box.x, 0); assert.equal(box.y, 0); assert.equal(box.width, width); assert.equal(box.height, height); assert.equal(await page.evaluate(() => document.documentElement.scrollWidth), width); for (const b of await page.locator('.tide-controls button').all()) { const rect = await b.boundingBox(); assert.ok(rect.height >= 40 && rect.x >= 0 && rect.x + rect.width <= width); assert.ok(rect.y >= 0 && rect.y + rect.height <= height); } await page.screenshot({ path: `${out}/${width}x${height}.png` }); sizes.push({ width, height, fullscreen: true, overflow: false }); } await page.setViewportSize({ width: 1440, height: 900 }); for (const kind of ['pebble', 'shell', 'feed', 'brass']) { await page.locator(`[data-tool="${kind}"]`).click(); assert.match(await page.locator('#tide-instructions').textContent(), new RegExp(kind)); await page.locator('#tide-canvas').focus(); await page.keyboard.press('ArrowRight'); await page.keyboard.press('Enter'); assert.match(await page.locator('#tide-status').textContent(), /dropped in pool|blooms in pool/); } assert.equal(await page.locator('[data-tide-pool]').getAttribute('data-engaged'), 'true'); await page.screenshot({ path: `${out}/offering-response.png` }); // Follow a machine from the census, then release it. await page.locator('.tide-census summary').click(); await page.locator('[data-species="scraper"]').click(); assert.ok(await page.locator('#tide-inspect').isVisible()); assert.match(await page.locator('#tide-inspect-title').textContent(), /^SC-\d{3}$/); await page.screenshot({ path: `${out}/following.png` }); await page.locator('#tide-release').click(); assert.ok(await page.locator('#tide-inspect').isHidden()); // Zoom and pool navigation move the camera without leaving the page. const before = await page.evaluate(() => ({ ...window.__tidePool.goal })); await page.locator('#tide-zoom-out').click(); await page.locator('.tide-basins button').first().click(); const after = await page.evaluate(() => ({ ...window.__tidePool.goal })); assert.ok(after.zoom >= 4.5); assert.match(await page.locator('#tide-status').textContent(), /^Pool [IVXLC]+\./); await page.locator('#tide-sound').click(); await page.waitForFunction(() => window.__audio[0]?.state === 'running'); await page.locator('#tide-pause').click(); await page.waitForFunction(() => window.__audio[0]?.state === 'suspended'); await page.mouse.move(2, 2); // Paused, frames stop once the camera has come to rest. await page.waitForFunction(() => { const { goal, view } = window.__tidePool; return Math.abs(goal.x - view.x) < .002 && Math.abs(goal.z - view.z) < .002 && Math.abs(goal.zoom - view.zoom) < .002; }); await page.waitForTimeout(200); const still = await page.locator('#tide-canvas').screenshot(); await page.waitForTimeout(400); assert.ok(still.equals(await page.locator('#tide-canvas').screenshot())); await page.locator('#tide-pause').click(); await page.waitForFunction(() => window.__audio[0]?.state === 'running'); await page.locator('#tide-sound').click(); await page.waitForFunction(() => window.__audio[0]?.state === 'suspended'); await page.locator('#tide-reset').click(); // Driving the view with held keys, the pointer over the pool, as a real keyboard repeats them: the view moves, the // page keeps answering, and the frame loop never runs more than once a frame. await page.evaluate(() => document.activeElement?.blur()); await page.mouse.move(720, 450); await page.evaluate(() => { window.__loops.most = 0; }); const start = await page.evaluate(() => ({ ...window.__tidePool.view })); const hold = (async () => { await page.keyboard.down('KeyW'); for (let i = 0; i < 30; i++) { await page.keyboard.down('KeyW'); await page.waitForTimeout(33); } await page.keyboard.up('KeyW'); })(); const kept = await Promise.race([hold.then(() => true), new Promise(done => setTimeout(() => done(false), 8000))]); assert.ok(kept, 'the page kept up with held keys'); const moved = await page.evaluate(() => ({ ...window.__tidePool.view })); assert.ok(Math.hypot(moved.x - start.x, moved.z - start.z) > .3, 'held W moved the view'); assert.equal(await page.evaluate(() => window.__loops.most), 1); // Night: the light floats under the pointer, clear of the floor, and lights up. await page.evaluate(() => { const P = window.__tidePool; let n = 0; while (document.querySelector('#tide-time').textContent.slice(0, 2) !== '00' && n++ < 20) P.advance(20); }); await page.mouse.move(700, 440); await page.mouse.move(720, 450); await page.waitForFunction(() => window.__tidePool.lantern.glow > .5, null, { timeout: 20000 }); const light = await page.evaluate(() => { const { lantern, floor } = window.__tidePool; return { lit: lantern.lit, clear: lantern.y - floor(lantern.x, lantern.z) }; }); assert.ok(light.lit); assert.ok(light.clear > .3, `the light floats clear of the floor (${light.clear})`); await page.screenshot({ path: `${out}/night-light.png` }); await page.mouse.move(2, 2); if (process.env.TIDE_WATCH === '1') { await page.locator('.tide-notes summary').click(); const watch = await page.evaluate(async () => { let collected = false, built = false, dismantled = false; // In this edition: hoarded brass, standing cairns, and any machine that stopped. const start = performance.now(), observations = new Set(); while (performance.now() - start < 150000) { document.querySelector('#tide-describe').click(); const text = document.querySelector('#tide-description').textContent; observations.add(text); collected ||= /[1-9]\d* brass pieces/.test(text); built ||= /[1-9]\d* stones stacked/.test(text); dismantled ||= /was taken by|was caught by|starved|wore out/.test(text); if (collected && built && dismantled) break; await new Promise(r => setTimeout(r, 700)); } return { collected, built, dismantled, observations: [...observations] }; }); await writeFile(`${out}/watch.json`, JSON.stringify(watch, null, 2)); assert.ok(watch.collected && watch.built && watch.dismantled); await page.locator('.tide-notes summary').click(); await page.screenshot({ path: `${out}/after-ecology-cycle.png` }); } assert.deepEqual(errors, []); await context.close(); const touch = await browser.newContext({ viewport: { width: 393, height: 852 }, isMobile: true, hasTouch: true, reducedMotion: 'reduce' }); const m = await touch.newPage(); await m.goto(`${base}/tide-pool?shelf=41`, { waitUntil: 'networkidle' }); await m.waitForFunction(() => !document.querySelector('[data-tool="brass"]').disabled); assert.equal(await m.locator('#tide-pause').textContent(), 'Play'); await m.locator('#tide-canvas').focus(); for (let i = 0; i < 5; i++) await m.keyboard.press('ArrowRight'); await m.screenshot({ path: `${out}/portrait-keyboard-marker.png` }); await m.keyboard.press('Enter'); assert.match(await m.locator('#tide-status').textContent(), /Brass dropped/); await m.locator('#tide-canvas').tap({ position: { x: 196, y: 420 } }); assert.match(await m.locator('#tide-status').textContent(), /dropped|Tap inside a pool|Following/); await m.screenshot({ path: `${out}/mobile-paused-touch.png` }); await m.locator('#tide-pause').tap(); await m.locator('.tide-notes summary').tap(); await m.locator('#tide-describe').tap(); assert.match(await m.locator('#tide-description').textContent(), /The shelf holds/); await m.locator('.tide-notes summary').tap(); // Losing the 3D context brings the veil back; when the browser returns it, the pool comes back where it was. await m.evaluate(() => { window.__lose = document.querySelector('#tide-canvas').getContext('webgl2').getExtension('WEBGL_lose_context'); window.__lose.loseContext(); }); await m.waitForFunction(() => document.querySelector('#tide-status').textContent.includes('interrupted')); assert.equal(await m.locator('[data-tide-pool]').getAttribute('data-veiled'), 'lost'); assert.ok(await m.locator('.tide-veil-ring').isVisible()); assert.ok(await m.locator('[data-tool="brass"]').isDisabled()); await m.evaluate(() => window.__lose.restoreContext()); await m.waitForFunction(() => !document.querySelector('[data-tool="brass"]').disabled); assert.equal(await m.locator('[data-tide-pool]').getAttribute('data-veiled'), null); assert.match(await m.locator('#tide-status').textContent(), /back/); await touch.close(); const fallback = await browser.newContext({ javaScriptEnabled: false, viewport: { width: 393, height: 852 } }); const f = await fallback.newPage(); await f.goto(`${base}/tide-pool`); assert.ok(await f.locator('.tide-veil-ring').isVisible()); assert.ok(await f.locator('noscript .tide-veil-note').isVisible()); assert.equal(await f.locator('noscript .tide-veil-note').textContent(), 'The pool needs JavaScript to fill'); await f.screenshot({ path: `${out}/no-javascript.png` }); await fallback.close(); await writeFile(`${out}/receipt.json`, JSON.stringify({ base, at: new Date().toISOString(), sizes, errors, passed: ['fullscreen geometry', 'desktop and mobile touch', 'keyboard', 'material-specific instructions', 'instant offering response', 'follow and release', 'zoom and pool navigation', 'pause pixel equality', 'opt-in audio', 'reduced motion', 'context loss and return', 'no-JS veil', 'held keys with the pointer over the pool', 'the night light'] }, null, 2)); console.log(JSON.stringify({ passed: true, base, out, sizes }));} finally { await browser.close(); }