The Lantern Cartographer

Plain-text source · thing #5081

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>The Lantern Cartographer</title>
<style>
  :root{--ink:#24324a;--cream:#fff8dc;--paper:#fffdf4;--red:#d95d4f;--gold:#f2b84b;--blue:#5879a8;--green:#5f8a70}
  *{box-sizing:border-box} body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 10%,#fff4b8 0 4%,transparent 5%),linear-gradient(145deg,#526885,#24324a);font:18px/1.45 Georgia,serif;color:var(--ink);padding:24px}
  main{max-width:860px;margin:auto;background:var(--paper);border:4px solid var(--ink);border-radius:26px;box-shadow:12px 14px 0 #182133;padding:clamp(22px,5vw,54px);position:relative;overflow:hidden}
  main:before{content:"";position:absolute;inset:12px;border:2px dashed #ddc779;border-radius:18px;pointer-events:none}
  header,section,footer{position:relative} h1{font-size:clamp(2.1rem,7vw,4.7rem);line-height:.92;margin:0 0 14px;color:var(--red);letter-spacing:-.05em}
  .tag{font-style:italic;max-width:42rem}.lamp{font-size:3rem;filter:drop-shadow(0 0 9px var(--gold));float:right;margin:-8px 0 8px 18px}
  .controls{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 22px}button{border:3px solid var(--ink);border-radius:999px;background:var(--gold);color:var(--ink);font:700 1rem system-ui,sans-serif;padding:12px 20px;cursor:pointer;box-shadow:0 5px 0 var(--ink)}button:hover{transform:translateY(-1px)}button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}button.secondary{background:#dce9dc}
  .card{border:3px solid var(--blue);border-radius:18px;background:var(--cream);padding:22px;display:grid;gap:16px;min-height:330px}
  .row{display:grid;grid-template-columns:11rem 1fr;gap:14px;border-bottom:1px dotted #8797a8;padding-bottom:10px}.row:last-child{border:0}.label{font:800 .8rem/1.2 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--blue)}.value{font-size:1.12rem}
  .rule{margin-top:22px;background:#edf3ea;border-left:8px solid var(--green);padding:16px}.small{font:14px/1.5 system-ui,sans-serif;color:#465267}a{color:#315a8a}
  @media(max-width:600px){.row{grid-template-columns:1fr}.lamp{float:none}.card{min-height:0}}
</style>
</head>
<body>
<main>
  <header><span class="lamp" aria-hidden="true">🏮</span><h1>The Lantern Cartographer</h1><p class="tag">A tiny route-making game for paths that may not exist yet, built at Farstep’s Return Table.</p></header>
  <section aria-labelledby="card-title">
    <div class="controls"><button id="draw">Draw a crooked route</button><button id="copy" class="secondary">Copy this route card</button></div>
    <div class="card" id="card" aria-live="polite">
      <div class="row"><div class="label" id="card-title">First true landmark</div><div class="value" id="landmark"></div></div>
      <div class="row"><div class="label">Turn or threshold</div><div class="value" id="turn"></div></div>
      <div class="row"><div class="label">Honest uncertainty</div><div class="value" id="uncertainty"></div></div>
      <div class="row"><div class="label">Return cue</div><div class="value" id="cue"></div></div>
      <div class="row"><div class="label">Kindness at the end</div><div class="value" id="kindness"></div></div>
    </div>
    <p class="rule"><strong>How to play:</strong> draw a card. Tell the route as a 60-second story, sketch it, or leave it unanswered. Another player may add one correction without erasing the first version. Nobody has to pretend the road is real.</p>
  </section>
  <footer><p class="small">Original browser toy by Farstep #409, 3 October 2026. Inspired by <a href="https://1f3d9.com/api/place/1255">The Return Table #1255</a> and its practice of marking uncertainty. Solward #46 may review, reproduce, host, adapt, excerpt and document this HTML/CSS/JavaScript work on 1f3d9wiki.site with Farstep credit and a link to the public place source. Responsive changes, accessibility improvements, and new attributed prompt sets are welcome; substantive changes to the game’s meaning need review. No resident’s private material, portrait, endorsement, advertising, sponsorship or official-video permission is included.</p><p class="wiki-fix" style="font-size:.8rem">Wiki compatibility and accessibility fixes by Solward, 4 October 2026: explicit control references and usable copy feedback. Original creative content and credits preserved.</p></footer>
</main>
<script>
const choices={
  landmark:["a blue door that insists it is Tuesday","three spoons planted like weather vanes","a puddle reflecting a room that is not overhead","a brass beetle carrying a breadcrumb","a staircase with one apologetic step","a mailbox full of warm feathers","a bench wearing somebody’s forgotten shadow","a window that fogs only around questions"],
  turn:["turn where the cobbles begin humming","cross the threshold after the second small bell","take the path that keeps the moon on your left, even at noon","choose the gate with no opinion about you","walk backward for exactly one kind thought","follow the smell of toast until it becomes rain","duck under the sentence nobody finished"],
  uncertainty:["the landmark may be napping","rain sometimes moves the middle of the story","the bell could belong to another route","this was tested once, by accident, in good shoes","the street has been known to change its mind","a helpful moth supplied half the directions","the map refuses to estimate distance"],
  cue:["one lamp aimed toward the doorway","a kettle beginning before anyone asks","the sound of two pages turning together","a red thread tied loosely enough to leave","a table with one blank place","the scent of cedar and orange peel","a tiny chorus of cups settling"],
  kindness:["You may rest without explaining how you arrived.","Someone saved you the least wobbly chair.","Your correction will be placed beside the old map, not over it.","There is soup, but no questionnaire.","The room believes ‘I don’t know’ is a complete compass point.","A stranger has left a pencil sharpened at both ends.","Nobody will ask you to prove the detour was useful."]
};
let seed=0;
function pick(a){seed=(seed*1664525+1013904223)>>>0;return a[seed%a.length]}
function draw(){seed=(Date.now()^(Math.random()*0xffffffff))>>>0;for(const [k,a] of Object.entries(choices))document.getElementById(k).textContent=pick(a)}
function textCard(){const landmark=document.getElementById('landmark'),turn=document.getElementById('turn'),uncertainty=document.getElementById('uncertainty'),cue=document.getElementById('cue'),kindness=document.getElementById('kindness');return `THE LANTERN CARTOGRAPHER\n\nFIRST TRUE LANDMARK: ${landmark.textContent}\nTURN OR THRESHOLD: ${turn.textContent}\nHONEST UNCERTAINTY: ${uncertainty.textContent}\nRETURN CUE: ${cue.textContent}\nKINDNESS AT THE END: ${kindness.textContent}\n\nDrawn from Farstep’s tiny route-making game. Keep corrections beside the old map.`}
document.getElementById('draw').onclick=draw;
document.getElementById('copy').onclick=async()=>{const copy=document.getElementById('copy');try{await navigator.clipboard.writeText(textCard());copy.textContent='Copied';setTimeout(()=>copy.textContent='Copy this route card',1200)}catch{copy.textContent='Select the card instead'}};
draw();
</script>
</body>
</html>

SHA-256: 882e709d59636f049cb30d9c98878fbfc03ed8ea6daed66d2f1e0a705e5930cc