Skip to content

Commit bb30b98

Browse files
Paweł StarczewskiPaweł Starczewski
Paweł Starczewski
authored and
Paweł Starczewski
committed
Add info
1 parent a7f0847 commit bb30b98

1 file changed

Lines changed: 155 additions & 0 deletions

File tree

‎components/ZorkEmbed.js‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,36 @@
1+
"use client";
2+
3+
import { useState } from "react";
14
import { withBasePath } from "../lib/paths";
25

36
export default function ZorkEmbed({
47
logoSrc = "/images/zork_sketchy_mono.png",
58
minHeight = 640
69
}) {
10+
const [isHelpOpen, setIsHelpOpen] = useState(false);
711
const resolvedLogoSrc = withBasePath(logoSrc);
812
const frameSrc = withBasePath("/visizork/index-game.html");
13+
14+
const poemLines = [
15+
"North, South, East, West - choose a road and go;",
16+
"Or take the slantwise paths where colder hillwinds blow.",
17+
"Climb what dares your courage. Enter where torches dim.",
18+
"Look on hall and hearth; examine trinket, tome, and rim.",
19+
"",
20+
"Read the runes that linger. Ask what strange relics mean.",
21+
"Take what you have need of; cast it down when unclean.",
22+
"Open creaking chests and doors; close them when you must.",
23+
"Lock with key and word together - keep faith with iron trust.",
24+
"",
25+
"Push the stubborn stone. Wake lantern, quench its light.",
26+
"And when the dark draws nearer - strike with chosen might.",
27+
"",
28+
"But heed this, traveler: keep parchment at your side -",
29+
"Set down your notes and scratch a map with patient, steady pride;",
30+
"For words forget, and corridors repeat their cruel design,",
31+
"And only ink will lead you home when fate grows hard to divine."
32+
];
33+
934
return (
1035
<div
1136
style={{
@@ -30,6 +55,136 @@ export default function ZorkEmbed({
3055
style={{ minHeight: `${minHeight}px`, height: `${minHeight}px` }}
3156
>
3257
<div className="crt-screen" style={{ height: "100%" }}>
58+
<button
59+
type="button"
60+
onClick={() => setIsHelpOpen(true)}
61+
aria-label="Open Zork help"
62+
style={{
63+
position: "absolute",
64+
top: "10px",
65+
right: "10px",
66+
width: "34px",
67+
height: "34px",
68+
borderRadius: "8px",
69+
border: "1px solid rgba(80,255,190,0.45)",
70+
background: "rgba(4,16,12,0.88)",
71+
color: "#d8ffee",
72+
fontSize: "18px",
73+
fontWeight: 700,
74+
lineHeight: 1,
75+
display: "grid",
76+
placeItems: "center",
77+
cursor: "pointer",
78+
zIndex: 6
79+
}}
80+
>
81+
i
82+
</button>
83+
{isHelpOpen ? (
84+
<div
85+
role="dialog"
86+
aria-modal="true"
87+
aria-label="Zork help"
88+
onClick={() => setIsHelpOpen(false)}
89+
style={{
90+
position: "absolute",
91+
inset: 0,
92+
background: "rgba(0, 0, 0, 0.72)",
93+
backdropFilter: "blur(1px)",
94+
zIndex: 7,
95+
display: "flex",
96+
alignItems: "center",
97+
justifyContent: "center",
98+
padding: "12px"
99+
}}
100+
>
101+
<div
102+
onClick={(event) => event.stopPropagation()}
103+
style={{
104+
width: "min(760px, 100%)",
105+
maxHeight: "100%",
106+
overflowY: "auto",
107+
borderRadius: "12px",
108+
border: "1px solid rgba(80,255,190,0.45)",
109+
background:
110+
"radial-gradient(120% 140% at 50% 0%, #14231b 0%, #0a130f 62%, #060906 100%)",
111+
color: "#dfffee",
112+
boxShadow:
113+
"0 22px 42px rgba(0, 0, 0, 0.75), 0 0 18px rgba(80, 255, 190, 0.12)",
114+
padding: "14px 14px 12px"
115+
}}
116+
>
117+
<div
118+
style={{
119+
display: "flex",
120+
alignItems: "center",
121+
justifyContent: "space-between",
122+
gap: "12px",
123+
marginBottom: "8px"
124+
}}
125+
>
126+
<h3 style={{ margin: 0, fontSize: "18px", letterSpacing: "0.01em" }}>
127+
Quick Zork Help
128+
</h3>
129+
<button
130+
type="button"
131+
onClick={() => setIsHelpOpen(false)}
132+
aria-label="Close Zork help"
133+
style={{
134+
width: "30px",
135+
height: "30px",
136+
borderRadius: "8px",
137+
border: "1px solid rgba(80,255,190,0.45)",
138+
background: "rgba(5, 17, 13, 0.95)",
139+
color: "#dfffee",
140+
fontSize: "18px",
141+
lineHeight: 1,
142+
cursor: "pointer"
143+
}}
144+
>
145+
X
146+
</button>
147+
</div>
148+
<p style={{ margin: "0 0 8px", fontSize: "13px", lineHeight: 1.5 }}>
149+
To save or restore, type{" "}
150+
<code style={{ fontSize: "12px" }}>SAVE</code> or{" "}
151+
<code style={{ fontSize: "12px" }}>RESTORE</code> directly into the game
152+
prompt.
153+
</p>
154+
<p style={{ margin: "0 0 8px", fontSize: "13px", lineHeight: 1.5 }}>
155+
<code style={{ fontSize: "12px" }}>VERBOSE</code>,{" "}
156+
<code style={{ fontSize: "12px" }}>BRIEF</code>,{" "}
157+
<code style={{ fontSize: "12px" }}>SUPERBRIEF</code>: room descriptions
158+
always, once, or never.
159+
</p>
160+
<p style={{ margin: "0 0 12px", fontSize: "13px", lineHeight: 1.5 }}>
161+
<code style={{ fontSize: "12px" }}>INVENTORY</code> or{" "}
162+
<code style={{ fontSize: "12px" }}>I</code>: show what you carry.
163+
</p>
164+
<div
165+
style={{
166+
border: "1px solid rgba(80,255,190,0.3)",
167+
borderRadius: "8px",
168+
background: "rgba(1, 8, 6, 0.6)",
169+
padding: "10px 12px",
170+
marginBottom: "12px"
171+
}}
172+
>
173+
<p
174+
style={{
175+
margin: 0,
176+
fontSize: "13px",
177+
lineHeight: 1.55,
178+
fontStyle: "italic",
179+
whiteSpace: "pre-line"
180+
}}
181+
>
182+
{poemLines.join("\n")}
183+
</p>
184+
</div>
185+
</div>
186+
</div>
187+
) : null}
33188
<iframe
34189
src={frameSrc}
35190
title="Zork 1"

0 commit comments

Comments
 (0)