thatguygriffandClaude Opus 5
899b6e38d8
CI / Typecheck, test, build (pull_request) Successful in 26s
The plain address is the one thing that button must not offer -- followed in the browser the rewrite rules are installed in, it comes straight back here -- so there is nothing to show until there is a browser to hand it to. The copy button and the selectable URL were always the part carrying the weight; the open link now ships hidden and the script reveals it along with the scheme. That also settles what the button should say. It went back to "Open on <platform>": the browser's name was there to explain a tap that went nowhere, and a button that is not shown until it works needs no such explanation. Co-Authored-By: Claude Opus 5 <[email protected]> Claude-Session: https://claude.ai/code/session_01KF5YF3iZVKbezwALap8LYd
41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
import type { Challenge } from '../challenge/registry.ts';
|
|
import { html } from './html.ts';
|
|
import { badge, layout } from './layout.ts';
|
|
|
|
type Box = { x: number; y: number; width: number; height: number };
|
|
|
|
export function renderChallenge(challenge: Challenge, box: Box | undefined): string {
|
|
const body = html`<article class="post post--challenge" data-challenge="${challenge.id}">
|
|
<header class="post__head">
|
|
${badge(challenge.platform, challenge.platformLabel)}
|
|
<div class="who"><span class="who__handle">wants you to prove you are a person</span></div>
|
|
</header>
|
|
|
|
<p class="challenge__lede">
|
|
Solve it here and the post loads. Drag on the picture exactly as you would on
|
|
${challenge.platformLabel}.
|
|
</p>
|
|
|
|
<div
|
|
class="challenge__stage"
|
|
id="stage"
|
|
data-box="${box ? `${box.x},${box.y},${box.width},${box.height}` : ''}"
|
|
>
|
|
<img id="frame" alt="The verification puzzle" draggable="false">
|
|
<p class="challenge__status" id="status">Loading…</p>
|
|
</div>
|
|
|
|
<footer class="post__foot">
|
|
<div class="original">
|
|
<button type="button" class="copy" id="give-up">Give up and show me the link</button>
|
|
<a class="original__open" href="${challenge.originalUrl}" rel="noopener noreferrer nofollow" target="_blank" hidden>
|
|
Open on ${challenge.platformLabel}
|
|
</a>
|
|
<p class="original__url"><code>${challenge.originalUrl}</code></p>
|
|
</div>
|
|
</footer>
|
|
</article>`;
|
|
|
|
return layout(`Verify — ${challenge.platformLabel}`, body);
|
|
}
|