114 lines
2.9 KiB
TypeScript
114 lines
2.9 KiB
TypeScript
"use client";
|
||
|
||
import type { ReactNode } from "react";
|
||
|
||
/**
|
||
* Decorative, asset-free mock windows for the two feature panels (Revival Inc.
|
||
* and RustyWolf). They replace the old raster screenshots so the panels read as
|
||
* a little OS window instead of a flat image. Purely presentational — the real
|
||
* copy lives in the `.web-feature-text` paragraph below each window.
|
||
*/
|
||
|
||
function Chrome({
|
||
title,
|
||
tabs,
|
||
children,
|
||
}: {
|
||
title?: string;
|
||
tabs?: ReactNode;
|
||
children: ReactNode;
|
||
}) {
|
||
return (
|
||
<div className="fw" aria-hidden="true">
|
||
<div className={"fw-bar" + (tabs ? " fw-bar-browser" : "")}>
|
||
<span className="fw-dots">
|
||
<span className="fw-dot" />
|
||
<span className="fw-dot" />
|
||
<span className="fw-dot" />
|
||
</span>
|
||
{tabs ?? <span className="fw-title">{title}</span>}
|
||
</div>
|
||
<div className="fw-body">{children}</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function GameBody() {
|
||
return (
|
||
<div className="fw-scene">
|
||
<span className="fw-stars" />
|
||
<span className="fw-moon" />
|
||
<span className="fw-hills" />
|
||
<div className="fw-graves">
|
||
<span className="fw-grave" />
|
||
<span className="fw-grave" />
|
||
<span className="fw-grave" />
|
||
<span className="fw-grave" />
|
||
</div>
|
||
<span className="fw-scan" />
|
||
<div className="fw-hud">
|
||
<span className="fw-hearts">♥ ♥ ♥</span>
|
||
<span className="fw-score">SCORE 0000</span>
|
||
</div>
|
||
<span className="fw-start">PRESS START</span>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function BrowserBody() {
|
||
const tiles = ["G", "Y", "R", "D", "X"];
|
||
return (
|
||
<div className="fw-browser">
|
||
<div className="fw-toolbar">
|
||
<span className="fw-nav">‹</span>
|
||
<span className="fw-nav">›</span>
|
||
<span className="fw-nav fw-nav-reload">⟳</span>
|
||
<span className="fw-url">
|
||
<span className="fw-lock" />
|
||
rustywolf://start
|
||
</span>
|
||
</div>
|
||
<div className="fw-page">
|
||
<div className="fw-wordmark">
|
||
Rusty<span>Wolf</span>
|
||
</div>
|
||
<div className="fw-search">
|
||
<span className="fw-search-dot" />
|
||
<span className="fw-search-text">Search or enter address</span>
|
||
</div>
|
||
<div className="fw-tiles">
|
||
{tiles.map((t) => (
|
||
<span key={t} className="fw-tile">
|
||
{t}
|
||
</span>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default function FeatureWindow({ variant }: { variant: "game" | "browser" }) {
|
||
if (variant === "game") {
|
||
return (
|
||
<Chrome title="revival-inc — mini jame gam #55">
|
||
<GameBody />
|
||
</Chrome>
|
||
);
|
||
}
|
||
return (
|
||
<Chrome
|
||
tabs={
|
||
<div className="fw-tabs">
|
||
<span className="fw-tab">
|
||
<span className="fw-tab-dot" />
|
||
New Tab
|
||
</span>
|
||
<span className="fw-tab-plus">+</span>
|
||
</div>
|
||
}
|
||
>
|
||
<BrowserBody />
|
||
</Chrome>
|
||
);
|
||
}
|