@ywkrlerche/richardwho 1.0.25 → 1.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app.js +406 -25
- package/config.js +12 -0
- package/games.json +1 -1
- package/index.html +94 -2
- package/package.json +1 -1
- package/style.css +63 -0
- package/logos/gm-test-game.png +0 -0
package/index.html
CHANGED
|
@@ -3,17 +3,32 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>
|
|
6
|
+
<title>Google Classroom</title>
|
|
7
7
|
<meta name="description" content="richardwho: Richards Unblocked Games. Hundreds of games, nothing to install.">
|
|
8
|
-
<link rel="icon"
|
|
8
|
+
<link rel="icon" id="tab-icon" href="https://ssl.gstatic.com/classroom/favicon.png">
|
|
9
9
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
|
|
10
10
|
<link rel="stylesheet" href="style.css">
|
|
11
11
|
<script>
|
|
12
12
|
// Apply saved theme before paint so there's no flash
|
|
13
13
|
try { document.documentElement.dataset.theme = localStorage.getItem("rug-theme") || "dark"; } catch (e) {}
|
|
14
|
+
// Apply the saved tab disguise before anything else shows in the tab
|
|
15
|
+
try {
|
|
16
|
+
var s = JSON.parse(localStorage.getItem("rug-settings") || "{}");
|
|
17
|
+
if (s.tabTitle) document.title = s.tabTitle;
|
|
18
|
+
if (s.tabIcon) document.getElementById("tab-icon").href = s.tabIcon;
|
|
19
|
+
} catch (e) {}
|
|
14
20
|
</script>
|
|
15
21
|
</head>
|
|
16
22
|
<body>
|
|
23
|
+
<!-- Boot screen: shows instantly while the site checks for a newer version and loads the game list -->
|
|
24
|
+
<div class="boot" id="boot" aria-live="polite">
|
|
25
|
+
<div class="boot-inner">
|
|
26
|
+
<div class="boot-word">richardwho</div>
|
|
27
|
+
<div class="boot-bar"><div class="boot-fill" id="boot-fill"></div></div>
|
|
28
|
+
<p class="boot-msg" id="boot-msg">Loading… about 3 hours left</p>
|
|
29
|
+
<p class="boot-ver" id="boot-ver"></p>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
17
32
|
<!-- Soft blue/orange glow behind everything -->
|
|
18
33
|
<div class="aurora" aria-hidden="true"><span class="a1"></span><span class="a2"></span><span class="a3"></span></div>
|
|
19
34
|
|
|
@@ -36,6 +51,9 @@
|
|
|
36
51
|
</button>
|
|
37
52
|
</div>
|
|
38
53
|
<div class="rail-group bottom">
|
|
54
|
+
<button class="rail-btn" type="button" data-nav="settings" title="Settings" aria-label="Settings">
|
|
55
|
+
<svg viewBox="0 0 24 24"><path d="M19.4 13a7.6 7.6 0 0 0 0-2l2.1-1.6-2-3.5-2.5 1a7.4 7.4 0 0 0-1.7-1L15 3.3h-4l-.4 2.6a7.4 7.4 0 0 0-1.7 1l-2.5-1-2 3.5L6.6 11a7.6 7.6 0 0 0 0 2l-2.1 1.6 2 3.5 2.5-1a7.4 7.4 0 0 0 1.7 1l.4 2.6h4l.4-2.6a7.4 7.4 0 0 0 1.7-1l2.5 1 2-3.5L19.4 13ZM13 15.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Z"/></svg>
|
|
56
|
+
</button>
|
|
39
57
|
<button class="rail-btn" type="button" id="theme-btn" title="Toggle theme" aria-label="Toggle theme">
|
|
40
58
|
<svg viewBox="0 0 24 24"><path d="M12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.39 5.39 0 0 1-4.4 2.26 5.4 5.4 0 0 1-3.14-9.8A9.4 9.4 0 0 0 12 3Z"/></svg>
|
|
41
59
|
</button>
|
|
@@ -59,6 +77,7 @@
|
|
|
59
77
|
<span class="sweep" aria-hidden="true"></span>
|
|
60
78
|
</form>
|
|
61
79
|
<p class="home-sub" id="home-sub"></p>
|
|
80
|
+
<p class="online" id="online" hidden><span class="online-dot"></span><span id="online-count"></span></p>
|
|
62
81
|
</section>
|
|
63
82
|
|
|
64
83
|
<!-- GAMES -->
|
|
@@ -109,8 +128,81 @@
|
|
|
109
128
|
<p class="empty" id="empty" hidden>No games match that search.</p>
|
|
110
129
|
</section>
|
|
111
130
|
</section>
|
|
131
|
+
|
|
132
|
+
<!-- SETTINGS -->
|
|
133
|
+
<section id="view-settings" class="view settings" hidden>
|
|
134
|
+
<header class="games-head"><div><h1>Settings</h1><p class="lede">Saved on this device only.</p></div></header>
|
|
135
|
+
|
|
136
|
+
<div class="set-group">
|
|
137
|
+
<h2>Tab disguise</h2>
|
|
138
|
+
<p class="set-help">What the browser tab and your history show instead of the site's name.</p>
|
|
139
|
+
<div class="disguises" id="disguises"></div>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<div class="set-group">
|
|
143
|
+
<h2>Panic button</h2>
|
|
144
|
+
<label class="set-row"><span>Goes to</span>
|
|
145
|
+
<select id="set-panic-url">
|
|
146
|
+
<option value="https://classroom.google.com/">Google Classroom</option>
|
|
147
|
+
<option value="https://docs.google.com/">Google Docs</option>
|
|
148
|
+
<option value="https://drive.google.com/">Google Drive</option>
|
|
149
|
+
<option value="https://www.google.com/">Google</option>
|
|
150
|
+
<option value="custom">Custom website…</option>
|
|
151
|
+
</select>
|
|
152
|
+
</label>
|
|
153
|
+
<label class="set-row" id="set-panic-custom-row" hidden><span>Custom website</span>
|
|
154
|
+
<input id="set-panic-custom" type="url" placeholder="https://…" spellcheck="false">
|
|
155
|
+
</label>
|
|
156
|
+
<div class="set-row"><span>Panic key</span>
|
|
157
|
+
<button class="pill-btn key-btn" type="button" id="set-panic-key">`</button>
|
|
158
|
+
<small class="set-hint" id="set-panic-key-hint">Click, then press any key</small>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<div class="set-group">
|
|
163
|
+
<h2>Look & feel</h2>
|
|
164
|
+
<label class="set-row"><span>Theme</span>
|
|
165
|
+
<select id="set-theme"><option value="dark">Dark</option><option value="light">Light</option></select>
|
|
166
|
+
</label>
|
|
167
|
+
<label class="set-row"><span>Clock</span>
|
|
168
|
+
<select id="set-clock"><option value="12">12-hour</option><option value="24">24-hour</option></select>
|
|
169
|
+
</label>
|
|
170
|
+
<label class="set-row"><span>Games per row</span>
|
|
171
|
+
<select id="set-per-row"><option>5</option><option>6</option><option>7</option><option>8</option></select>
|
|
172
|
+
</label>
|
|
173
|
+
<label class="set-row"><span>Typing search box</span><input type="checkbox" id="set-typing"></label>
|
|
174
|
+
<label class="set-row"><span>Funny loading screen</span><input type="checkbox" id="set-boot"></label>
|
|
175
|
+
</div>
|
|
176
|
+
|
|
177
|
+
<div class="set-group">
|
|
178
|
+
<h2>Your data</h2>
|
|
179
|
+
<div class="set-row"><span>Recently played</span><button class="pill-btn" type="button" id="set-clear-recent">Clear</button></div>
|
|
180
|
+
<div class="set-row"><span>All settings</span><button class="pill-btn danger" type="button" id="set-reset">Reset to default</button></div>
|
|
181
|
+
</div>
|
|
182
|
+
</section>
|
|
112
183
|
</main>
|
|
113
184
|
|
|
185
|
+
<!-- RANDOM GAME WHEEL -->
|
|
186
|
+
<div class="wheel-wrap" id="wheel-wrap" hidden role="dialog" aria-label="Random game wheel">
|
|
187
|
+
<div class="wheel-card">
|
|
188
|
+
<button class="wheel-x" type="button" id="wheel-close" aria-label="Close">✕</button>
|
|
189
|
+
<h2>Spin for a game</h2>
|
|
190
|
+
<div class="wheel-stage">
|
|
191
|
+
<div class="wheel-pointer" aria-hidden="true"></div>
|
|
192
|
+
<canvas id="wheel" width="720" height="720"></canvas>
|
|
193
|
+
</div>
|
|
194
|
+
<div class="wheel-result" id="wheel-result" hidden>
|
|
195
|
+
<div class="wheel-result-art" id="wheel-result-art"></div>
|
|
196
|
+
<div><p class="wheel-result-label">You got</p><p class="wheel-result-name" id="wheel-result-name"></p></div>
|
|
197
|
+
</div>
|
|
198
|
+
<div class="wheel-actions">
|
|
199
|
+
<button class="pill-btn" type="button" id="wheel-skip">Skip ⏭</button>
|
|
200
|
+
<button class="pill-btn" type="button" id="wheel-again" hidden>Spin again</button>
|
|
201
|
+
<button class="pill-btn play" type="button" id="wheel-play" hidden>▶ Play</button>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
114
206
|
<!-- PLAYER -->
|
|
115
207
|
<section class="player" id="player" hidden aria-label="Game player">
|
|
116
208
|
<div class="player-bar">
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -45,6 +45,20 @@ button { cursor: pointer; }
|
|
|
45
45
|
kbd { font: 600 11px ui-monospace, Consolas, monospace; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); background: var(--soft); }
|
|
46
46
|
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
|
|
47
47
|
|
|
48
|
+
/* ---------- Boot screen ---------- */
|
|
49
|
+
.boot {
|
|
50
|
+
position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
|
|
51
|
+
background: radial-gradient(60vw 30vh at 50% 30%, var(--glow-blue), transparent 70%), var(--bg);
|
|
52
|
+
transition: opacity .35s ease, visibility .35s;
|
|
53
|
+
}
|
|
54
|
+
.boot.done { opacity: 0; visibility: hidden; pointer-events: none; }
|
|
55
|
+
.boot-inner { width: min(420px, 86vw); text-align: center; }
|
|
56
|
+
.boot-word { font-size: clamp(44px, 8vw, 72px); font-weight: 800; letter-spacing: -.055em; margin-bottom: 26px; }
|
|
57
|
+
.boot-bar { height: 3px; background: var(--soft-2); overflow: hidden; border-radius: 3px; }
|
|
58
|
+
.boot-fill { height: 100%; width: 0; background: var(--text); transition: width .25s ease; }
|
|
59
|
+
.boot-msg { margin: 14px 0 0; color: var(--muted); font-size: 13px; min-height: 1.4em; font-variant-numeric: tabular-nums; }
|
|
60
|
+
.boot-ver { margin: 6px 0 0; color: var(--muted); font-size: 11px; opacity: .6; min-height: 1.2em; }
|
|
61
|
+
|
|
48
62
|
/* ---------- Aurora glow ---------- */
|
|
49
63
|
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
|
|
50
64
|
.aurora span { position: absolute; border-radius: 50%; filter: blur(90px); }
|
|
@@ -179,6 +193,55 @@ body:has(#view-games:not([hidden])) .aurora { opacity: .7; }
|
|
|
179
193
|
.marquee .tile { width: clamp(300px, 28vw, 440px); aspect-ratio: 16 / 9; flex: none; }
|
|
180
194
|
.marquee .tile-label { font-size: 17px; bottom: 14px; left: 16px; }
|
|
181
195
|
|
|
196
|
+
/* ---------- Online count (home) ---------- */
|
|
197
|
+
.online { margin: 10px 0 0; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
|
|
198
|
+
.online-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 2s infinite; }
|
|
199
|
+
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
|
|
200
|
+
|
|
201
|
+
/* ---------- Settings ---------- */
|
|
202
|
+
.settings { padding-top: 26px; padding-bottom: 60px; max-width: 760px; }
|
|
203
|
+
.set-group { border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--panel) 85%, transparent); padding: 18px 20px; margin-bottom: 16px; }
|
|
204
|
+
.set-group h2 { margin: 0 0 4px; font-size: 16px; }
|
|
205
|
+
.set-help { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
|
|
206
|
+
.set-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
|
|
207
|
+
.set-group h2 + .set-row { margin-top: 10px; }
|
|
208
|
+
.set-row > span { flex: 1; font-size: 14px; }
|
|
209
|
+
.set-row select, .set-row input[type="url"] { height: 36px; min-width: 200px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--panel); color: var(--text); }
|
|
210
|
+
.set-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--text); }
|
|
211
|
+
.set-hint { color: var(--muted); font-size: 12px; }
|
|
212
|
+
.settings .pill-btn { color: var(--text); border-color: var(--line-2); background: var(--soft); }
|
|
213
|
+
.key-btn { min-width: 64px; font-family: ui-monospace, Consolas, monospace; }
|
|
214
|
+
.key-btn.listening { border-color: var(--text); }
|
|
215
|
+
.disguises { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
|
|
216
|
+
.disguise {
|
|
217
|
+
display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 4px; text-align: left;
|
|
218
|
+
border: 1px solid var(--line-2); background: var(--soft); color: var(--text); font-size: 13px; font-weight: 600;
|
|
219
|
+
}
|
|
220
|
+
.disguise img { width: 18px; height: 18px; flex: none; }
|
|
221
|
+
.disguise .none-icon { width: 18px; height: 18px; flex: none; display: grid; place-items: center; font-size: 13px; }
|
|
222
|
+
.disguise[aria-pressed="true"] { border-color: var(--text); background: var(--soft-2); box-shadow: inset 0 0 0 1px var(--text); }
|
|
223
|
+
|
|
224
|
+
/* ---------- Random game wheel ---------- */
|
|
225
|
+
.wheel-wrap { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.7); backdrop-filter: blur(6px); }
|
|
226
|
+
.wheel-card { position: relative; width: min(440px, 100%); text-align: center; background: var(--panel); border: 1px solid var(--line-2); border-radius: 8px; padding: 20px 20px 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
|
|
227
|
+
.wheel-card h2 { margin: 0 0 12px; font-size: 18px; }
|
|
228
|
+
.wheel-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 4px; background: none; color: var(--muted); font-size: 16px; }
|
|
229
|
+
.wheel-x:hover { color: var(--text); background: var(--soft); }
|
|
230
|
+
.wheel-stage { position: relative; width: min(360px, 78vw); aspect-ratio: 1; margin: 0 auto; }
|
|
231
|
+
.wheel-stage canvas { width: 100%; height: 100%; display: block; }
|
|
232
|
+
.wheel-pointer {
|
|
233
|
+
position: absolute; left: 50%; top: -6px; z-index: 1; width: 0; height: 0; transform: translateX(-50%);
|
|
234
|
+
border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid var(--text);
|
|
235
|
+
filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
|
|
236
|
+
}
|
|
237
|
+
.wheel-result { display: flex; align-items: center; gap: 12px; margin: 16px auto 0; padding: 10px; border: 1px solid var(--line-2); border-radius: 6px; text-align: left; max-width: 340px; }
|
|
238
|
+
.wheel-result-art { width: 64px; aspect-ratio: 4/3; border-radius: 4px; flex: none; background: #222 center / cover no-repeat; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; }
|
|
239
|
+
.wheel-result-label { margin: 0; color: var(--muted); font-size: 12px; }
|
|
240
|
+
.wheel-result-name { margin: 2px 0 0; font-size: 16px; font-weight: 800; }
|
|
241
|
+
.wheel-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
|
|
242
|
+
.wheel-card .pill-btn { color: var(--text); border-color: var(--line-2); background: var(--soft); height: 38px; padding: 0 18px; }
|
|
243
|
+
.wheel-card .pill-btn.play { background: var(--text); color: var(--bg); border-color: var(--text); }
|
|
244
|
+
|
|
182
245
|
/* ---------- Player ---------- */
|
|
183
246
|
.player { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; background: #000; }
|
|
184
247
|
.player-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #0a0a0c; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; }
|
package/logos/gm-test-game.png
DELETED
|
Binary file
|