lumbridge-public/tera
Archived
1
0
Fork 0
Code Activity

California gets roads, traffic, and a car to follow

Browse Source
This commit is contained in:
Kartios
2026-08-11 18:24:53 -07:00
parent 9c9e78f6f9
commit fe58290728
43 changed files with 5593 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+70 -5
View File
@@ -60,7 +60,7 @@
<meta property="og:image:height" content="630" />
<meta
property="og:image:alt"
content="The San Francisco Bay Area rendered from above in Tera, under a midday sun."
content="California rendered from above in Tera, with Los Angeles and San Francisco joined by the US-101 and I-5 corridors."
/>
<meta name="twitter:card" content="summary_large_image" />
@@ -80,7 +80,7 @@
* here is what the browser gets. It also means the first paint needs
* nothing but this document — which is the entire reason the boot card at
* the bottom of the body can be on screen before a single module has been
* fetched, let alone before the Bay Area heightfield has been built.
* fetched, let alone before the California heightfield has been built.
*
* Two constraints shape every rule below.
*
@@ -666,6 +666,54 @@
color: var(--ink-3);
}
/* ---- Touch driving ---------------------------------------------------
Keyboard and standard gamepads need no chrome. Coarse pointers do, and
only while a route chapter owns the follow camera. Full words rather
than mystery glyphs: the controls disappear everywhere space is tight
except on the devices that cannot drive without them. */
.drive-controls { display: none; }
@media (pointer: coarse) {
.drive-controls:not([hidden]) {
position: fixed;
left: 50%;
bottom: calc(var(--s3) + env(safe-area-inset-bottom));
transform: translateX(-50%);
z-index: 5;
width: min(23rem, calc(100vw - var(--s4) * 2));
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--s1);
padding: var(--s1);
border: 1px solid var(--hairline);
border-radius: var(--r);
background: var(--glass-strong);
backdrop-filter: var(--blur);
-webkit-backdrop-filter: var(--blur);
box-shadow: var(--shadow);
}
.drive-control {
min-height: 48px;
border: 1px solid var(--hairline);
border-radius: var(--r-sm);
background: rgba(255, 255, 255, 0.08);
color: var(--ink);
font: inherit;
font-size: 10px;
letter-spacing: 0.05em;
text-transform: uppercase;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.drive-control[aria-pressed="true"] {
border-color: rgba(242, 177, 52, 0.65);
background: rgba(242, 177, 52, 0.28);
color: var(--amber-ink);
}
/* The source line is useful but cannot sit underneath the controls. */
body:has(.drive-controls:not([hidden])) .source { bottom: 7.5rem; }
}
/* ---- Responsive -------------------------------------------------------
Two breakpoints and no more. At 900 the left column stops being furniture
and becomes a sheet you open; at 600 the plan stops fitting beside the
@@ -835,15 +883,15 @@
</style>
</head>
<body>
<canvas id="scene" aria-label="Map of San Francisco, seen from above. Drag to orbit, scroll to zoom."></canvas>
<canvas id="scene" aria-label="Map of California, seen from above. Drag to orbit, scroll to zoom."></canvas>
<button id="panel-toggle" class="panel-toggle" aria-expanded="true" aria-controls="panel">
<span class="glyph" aria-hidden="true">☰</span><span id="panel-toggle-label">Bay Area</span>
<span class="glyph" aria-hidden="true">☰</span><span id="panel-toggle-label">California</span>
</button>
<div id="panel">
<section class="card">
<h1 id="title">San Francisco</h1>
<h1 id="title">California</h1>
<p id="subtitle">Tera · Lumbridge Simulate</p>
<p id="clock" class="clock" aria-live="polite"></p>
</section>
@@ -870,6 +918,7 @@
</div>
<div class="card hint" id="hint">
<span><kbd>1</kbd>–<kbd>9</kbd> chapters</span>
<span>choose <kbd>2</kbd> or <kbd>3</kbd> to follow</span>
<span><kbd>[</kbd> <kbd>]</kbd> city</span>
<span><kbd>O</kbd> office</span>
<span><kbd>M</kbd> plan</span>
@@ -886,6 +935,17 @@
</div>
</div>
<div id="drive-controls" class="drive-controls" aria-label="Vehicle controls" hidden>
<button class="drive-control" data-drive-key="a" aria-pressed="false">Left</button>
<button class="drive-control" data-drive-key="w" aria-pressed="false">Throttle</button>
<button class="drive-control" data-drive-key="s" aria-pressed="false">Brake</button>
<button class="drive-control" data-drive-key="d" aria-pressed="false">Right</button>
<button class="drive-control" data-drive-key=" " aria-pressed="false">Handbrake</button>
<button class="drive-control" data-drive-action="assist">Assist</button>
<button class="drive-control" data-drive-action="reset">Reset</button>
<button class="drive-control" data-drive-action="camera">Camera</button>
</div>
<p id="source" class="source"></p>
<!-- Behind the panel sheet on a phone, and nowhere else. A sheet with no
@@ -899,6 +959,10 @@
<h2 id="shortcuts-title">Keyboard</h2>
<dl class="keys">
<dt><kbd>1</kbd>–<kbd>9</kbd></dt><dd>Fly to a chapter, or an office viewpoint</dd>
<dt><kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd></dt><dd>Drive after choosing the 101 or I-5 chapter</dd>
<dt><kbd>Space</kbd></dt><dd>Handbrake while driving</dd>
<dt><kbd>P</kbd> / <kbd>R</kbd></dt><dd>Resume assisted drive / reset the car</dd>
<dt><kbd>C</kbd></dt><dd>Switch chase / driver-height camera</dd>
<dt><kbd>[</kbd> <kbd>]</kbd></dt><dd>Previous / next city</dd>
<dt><kbd>O</kbd></dt><dd>Enter or leave the office</dd>
<dt><kbd>M</kbd></dt><dd>Show or hide the plan view</dd>
@@ -913,6 +977,7 @@
<dt>One finger</dt><dd>Orbit</dd>
<dt>Two fingers</dt><dd>Pinch to zoom, drag to move over the ground</dd>
<dt>Tap a marker</dt><dd>Its card, at the bottom of the screen</dd>
<dt>Route controls</dt><dd>Choose 101 or I-5; the driving pad appears at the bottom</dd>
<dt>Tap the map</dt><dd>Dismiss the card; tap the ☰ sheet's scrim to close it</dd>
<dt>Plan view</dt><dd>The button on the rail shows or hides it, as a sheet above the rail</dd>
</dl>