From c3e87d947bfefa258334b7e4cdacc1c31d48b93e Mon Sep 17 00:00:00 2001 From: nicodes Date: Wed, 7 Oct 2026 08:29:57 +0200 Subject: [PATCH] Rebuild Termcade as an arcade cabinet --- src/layouts/Full.astro | 2 +- src/pages/index.astro | 1318 +++++++++++++++++++++++++++++----------- src/styles/global.css | 118 +++- 3 files changed, 1056 insertions(+), 382 deletions(-) diff --git a/src/layouts/Full.astro b/src/layouts/Full.astro index cf77667..fce4058 100644 --- a/src/layouts/Full.astro +++ b/src/layouts/Full.astro @@ -85,7 +85,7 @@ const structuredData = [ - + diff --git a/src/pages/index.astro b/src/pages/index.astro index b73bd71..85a24bd 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -22,8 +22,7 @@ const indexScreen = frame(indexFrame); const repo = 'https://github.com/aviorstudio/termcade'; const releases = 'https://github.com/aviorstudio/termcade/releases'; const docs = 'https://github.com/aviorstudio/termcade/blob/main/docs'; -const icon = (name: keyof typeof octicons, size = 16) => - octicons[name].toSVG({ width: size, height: size }); +const icon = (name: keyof typeof octicons, size = 16) => octicons[name].toSVG({ width: size, height: size }); // Every game in the starter pack. They are packages embedded in the binary, // not game code compiled into the host, and run through the same wasm boundary @@ -44,8 +43,7 @@ const games = [ { name: 'BRICKOUGH', from: 'Bundled', - blurb: - 'Breakout-style brick breaker: steer the ball with paddle english, clear the wall, survive the speed-up.', + blurb: 'Breakout-style brick breaker: steer the ball with paddle english, clear the wall, survive the speed-up.', }, ]; @@ -94,8 +92,14 @@ const commands = [ // What a game author is committing to. All of it is in sdk/game.go and // sdk/input.go, which between them are also the whole dependency list. const contract = [ - { term: 'Ticks', def: 'Update() runs exactly 60 times a second, stepped off the measured clock rather than drifting' }, - { term: 'Input', def: 'four directions, two action buttons and start — with real releases where the terminal sends them' }, + { + term: 'Ticks', + def: 'Update() runs exactly 60 times a second, stepped off the measured clock rather than drifting', + }, + { + term: 'Input', + def: 'four directions, two action buttons and start — with real releases where the terminal sends them', + }, { term: 'Drawing', def: 'a canvas in square logical units; the game never sees the pixel grid it lands on' }, { term: 'HUD', def: 'labelled fields and a hint. The shell owns every pixel of the styling' }, { term: 'Dependencies', def: 'the sdk module, which depends on nothing outside the standard library' }, @@ -104,420 +108,1020 @@ const contract = [ --- -
-
- - - termcade +
+
+ + termcade - Play in browser +
-
-
-

Go · WebAssembly · Bubble Tea

-

An arcade in your terminal.

-

- termcade draws its playfield out of Unicode block elements, so one terminal cell - becomes a 2×2 or 2×3 grid of pixels and the games come out sharper than the font - should allow. Asteroid, Tetris and Brickough are in the binary, and play offline the moment it - starts. -

-
- go run github.com/aviorstudio/termcade@latest -

One static binary · a truecolor terminal at 80×24 or larger

+
+

THE TERMINAL ARCADE / OPEN FOR PLAY

+

+ One more +
+ game. +

+
+ + + THREE CLASSICS +
+ ONE COMMAND +
- -
-
-
termcade / ASTEROID
-
+
+
+ ASTEROID + PLAYER 01 / TERMINAL CAPTURE +
+
+ 
+
+
+ + + PLAY IN YOUR BROWSER ↗
- 

-					
quad 2×2 pixels per cellwasm sandboxed guest60 TPS fixed step

 				

-			

-
-			

-				

-					
 In the arcade

-					
Three games in the box, and the way in for the rest.

+				

 					

-						The starter pack is committed as packages and embedded in the binary, then unpacked
-						into your games directory the first time it runs. The games that come with the arcade
-						are installed exactly the way an added one is — and can be removed exactly the same
-						way.
+						Asteroid, Tetris and Brickough, rendered in Unicode pixels. A small arcade for the terminal you already
+						have.
 					

+					

+						go run github.com/aviorstudio/termcade@latest
+						TRUECOLOR TERMINAL / 80×24 OR LARGER / PLAY OFFLINE
+					

+				

+			

+			

+				

+					
IN THE STARTER PACK

+					

+						Pick your
+						

+						next high score.
+					

 				

 				
    
-					{
-						games.map((game) => (
-							
  • 
-								
    
-									{game.name}
-									{game.from}
-								
    
-								
    {game.blurb}
    
-							
    • 
-						))
-					}
+					{games.map((game, index) => (
+						
  • 
+							0{index + 1}
+							
+							
    {game.name}
    
+							
    {game.blurb}
    
+							BUNDLED / PLAY OFFLINE
+						
    • 
+					))}
 				

 			

-
 			

 				

-					
 TERMCADE_PIXELS

+					

+						 TERMCADE_PIXELS
+					

 					
One ship. Four ways to cut up a cell.

 					

-						Every setting draws the same game into the same terminal cells; only the sharpness,
-						and what the font has to know how to draw, change. Below is Asteroid's ship at the
-						start of a wave, captured four times over and blown up — the same five columns of
-						cells every time, a different number of pixels inside them. In the arcade p cycles the
-						style and keeps it, and TERMCADE_PIXELS overrides the saved choice for a
-						single run.
+						Every setting draws the same game into the same terminal cells; only the sharpness, and what the font has to
+						know how to draw, change. Below is Asteroid's ship at the start of a wave, captured four times over and
+						blown up — the same five columns of cells every time, a different number of pixels inside them. In the
+						arcade p cycles the style and keeps it, and TERMCADE_PIXELS overrides the saved
+						choice for a single run.
 					

 				

 				

-					{
-						pixelStyles.map((style) => (
-							

-								

-								

-									{style.value}
-									{style.grid} per cell
-									
{style.note}

-								

-							

-						))
-					}
+					{pixelStyles.map((style) => (
+						

+							

+								
+							

+							

+								{style.value}
+								{style.grid} per cell
+								
{style.note}

+							

+						

+					))}
 				

 			

-
-			

-				

-					01
-					

-						
Nothing is compiled in

-						

-							Every game is a WebAssembly package, and it runs under
-							wazero with no filesystem, no network, and a
-							watchdog on every call into it. One that panics gets a crash screen instead of
-							taking the arcade with it, and one that fails to install is listed dimmed, with the
-							reason, rather than quietly missing.
-						

-					

-				

-				

-					02
-					

-						
Held keys, without the half-second stall

-						

-							Terminals send no key-release events, so a held key is normally guessed from
-							auto-repeat — which stalls for the OS repeat delay after the first press and makes
-							a paddle feel like it is ignoring you. termcade asks for the Kitty keyboard
-							protocol's event-type reporting, and on terminals that answer — kitty, Ghostty,
-							foot, WezTerm, recent xterm — held keys are exact. Everywhere else it falls back
-							without saying anything.
-						

-					

-				

-				

-					03
-					

-						
The renderer owns the look

-						

-							Games draw in square logical units and never see the pixel grid, so the block
-							style, the cell shape and the ANSI batching are the arcade's business rather than
-							theirs. A game written before a pixel style existed renders in it anyway.
-						

-					

-				

-			

-
 			

 				

-					
 The front door

+					

+						 The front door
+					

 					
Find a game. Make it yours.

 					

-						The arcade opens on Marketplace. Use Ctrl+N to open the sidebar and switch to Library. Browse without signing in; Add saves a game to your account, while Play downloads and installs it. Your installed games stay in Library even when you are signed out.
+						The arcade opens on Marketplace. Use Ctrl+N to open the sidebar and switch to Library. Browse without
+						signing in; Add saves a game to your account, while Play downloads and installs it. Your installed games
+						stay in Library even when you are signed out.
 					

 					

-						The live registry is api.termca.de. Package bytes pass through it and are
-						checked against the sha256 recorded when the release was published before either the
-						terminal or web app runs them. TERMCADE_REGISTRY selects a local registry
-						for development.
+						The live registry is api.termca.de. Package bytes pass through it and are checked against the
+						sha256 recorded when the release was published before either the terminal or web app runs them.{' '}
+						TERMCADE_REGISTRY selects a local registry for development.
 					

 				

 
 				

-					
Library capture from an earlier release. Current releases open on Marketplace.

+					

+						
+					

+					
Library capture from an earlier release. Current releases open on Marketplace.

 					
-							{
-								commands.map((row) => (
-									
-										
-										
-									
-								))
-							}
+							{commands.map((row) => (
+								
+									
+									
+								
+							))}
 						

 						
{row.cmd}{row.what}

+										{row.cmd}
+									{row.what}

 					

 				

 			

-
-			

+			

 				

-					
 termcade dev

+					

+						 termcade dev
+					

 					
The arcade you play with is the dev kit.

 					

 						termcade dev new you/mygame scaffolds a game that already runs,
 						termcade dev build turns the directory into a .tcade, and
 						termcade dev install puts the local build on your own menu. A game is a Go package implementing
-						one interface — and because the boundary is a frozen wasm ABI rather than a Go one, Go
-						is a convenience and not a requirement.
+						one interface — and because the boundary is a frozen wasm ABI rather than a Go one, Go is a convenience and
+						not a requirement.
 					

 					

-						SDK quickstart 
-						Packaging 
-						The wasm ABI 
+						
+							SDK quickstart 
+						
+						
+							Packaging 
+						
+						
+							The wasm ABI 
+						
 					

 				

 				

-					{
-						contract.map((row) => (
-							

-								
{row.term}

-								
{row.def}

-							

-						))
-					}
+					{contract.map((row) => (
+						

+							
{row.term}

+							
{row.def}

+						

+					))}
 				

 			

-
 			

-				
Three games in the box.
The rest is yours to write.

-				
ONE BINARYSANDBOXED GUESTS60 TICKS A SECOND

-				

-					Get termcade 
-					Download a binary 
+				
THREE GAMES IN THE BOX. THE REST IS YOURS.

+				

+					The arcade you play with
+					

+					is the dev kit.
+				

+				
+				
Sandboxed WebAssembly games. A fixed 60-tick update loop. Four directions, two action buttons and start.

 			

 		

-
-		

 
-
 
diff --git a/src/styles/global.css b/src/styles/global.css
index 5e3d848..4fc95ef 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -17,9 +17,9 @@
    would be a picture of something else. */
 :root {
 	--void: #000;
-	--ink: #0b0e10;
+	--ink: #1b1725;
 	--raised: #12171a;
-	--line: #1e262b;
+	--line: #51405a;
 	--line-soft: #171d21;
 	--logo: #3fc4c9;
 	--pick: #e6c945;
@@ -39,13 +39,44 @@
 	color-scheme: dark;
 }
 
-* { box-sizing: border-box; }
-html { scroll-behavior: smooth; background: var(--ink); }
-body { min-width: 320px; min-height: 100svh; margin: 0; background: var(--ink); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
-button, input, textarea, select { font: inherit; }
-img { max-width: 100%; height: auto; }
-::selection { background: var(--logo); color: var(--void); }
-@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
+* {
+	box-sizing: border-box;
+}
+html {
+	scroll-behavior: smooth;
+	background: var(--ink);
+}
+body {
+	min-width: 320px;
+	min-height: 100svh;
+	margin: 0;
+	background: var(--ink);
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+}
+button,
+input,
+textarea,
+select {
+	font: inherit;
+}
+img {
+	max-width: 100%;
+	height: auto;
+}
+::selection {
+	background: var(--logo);
+	color: var(--void);
+}
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		scroll-behavior: auto !important;
+		animation-duration: 0.01ms !important;
+		transition-duration: 0.01ms !important;
+	}
+}
 
 /* The frames. Every 
 on this page is a real capture replayed cell for
    cell, so these classes are a one-for-one map of the ANSI the arcade emitted:
@@ -54,20 +85,59 @@ img { max-width: 100%; height: auto; }
    whole cell has no half-block to draw), and .void for the black the canvas
    clears to. They live here rather than in a component's scoped block because
    the spans arrive through set:html, which Astro's scoping never reaches. */
-.void { background: var(--void); }
-.logo { color: var(--logo); }
-.pick { color: var(--pick); }
-.on { color: var(--on); }
-.dim { color: #8a8a8a; }
-.edge { color: var(--edge); }
-.green { color: var(--green); }
-.blue { color: var(--blue); }
-.fill-logo { background: var(--logo); }
-.fill-pick { background: var(--pick); }
-.fill-on { background: var(--on); }
-.b { font-weight: 700; }
+.void {
+	background: var(--void);
+}
+.logo {
+	color: var(--logo);
+}
+.pick {
+	color: var(--pick);
+}
+.on {
+	color: var(--on);
+}
+.dim {
+	color: #8a8a8a;
+}
+.edge {
+	color: var(--edge);
+}
+.green {
+	color: var(--green);
+}
+.blue {
+	color: var(--blue);
+}
+.fill-logo {
+	background: var(--logo);
+}
+.fill-pick {
+	background: var(--pick);
+}
+.fill-on {
+	background: var(--on);
+}
+.b {
+	font-weight: 700;
+}
 
-a:focus-visible, summary:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
+a:focus-visible,
+summary:focus-visible {
+	outline: 3px solid currentColor;
+	outline-offset: 5px;
+}
 
-.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 18px; background: #fff; color: #111; transform: translateY(-160%); }
-.skip-link:focus { transform: translateY(0); }
+.skip-link {
+	position: fixed;
+	top: 12px;
+	left: 12px;
+	z-index: 100;
+	padding: 12px 18px;
+	background: #fff;
+	color: #111;
+	transform: translateY(-160%);
+}
+.skip-link:focus {
+	transform: translateY(0);
+}