TheSunIsLeaking/recflare
3
0
Fork 0
mirror of https://github.com/djdevin/recflare.git synced 2026-09-09 15:11:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

www stuff

Browse Source
This commit is contained in:
Devin Zuczek
2026-07-27 18:46:37 -04:00
parent d5e3d3946e
commit 8c773da137
8 changed files with 468 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/www/src/client/App.tsx
+13 -21
View File
@@ -1,19 +1,9 @@
import { useCallback, useEffect, useState } from 'react'
import { DISCORD_INVITE, DOWNLOAD_URL, LICENSE_URL, SOURCE_REPO } from '../links'
import type { ReactNode } from 'react'
/** The community Discord — the join instructions and the build both live there. */
const DISCORD_INVITE = 'https://discord.gg/HhmMAKhrz'
/** Where the stage's "Download for PC" button goes: the client's release listing. */
const DOWNLOAD_URL = 'https://github.com/djdevin/recflare-client/releases'
/** The public source repo, linked from the homepage and footer. */
const SOURCE_REPO = 'https://github.com/djdevin/recflare'
/** The repo's licence, behind the footer's "MIT licensed". */
const LICENSE_URL = `${SOURCE_REPO}/blob/main/LICENSE`
/** The self-account shape returned by the www BFF (`/api/me`, `/api/login`, …). */
interface SelfAccount {
accountId: number
@@ -132,9 +122,12 @@ function SiteFooter() {
<a href={LICENSE_URL} target="_blank" rel="noreferrer">
MIT licensed
</a>{' '}
· a fan project, not affiliated with Rec Room Inc.
— made by fans, not affiliated with Rec Room Inc.
</span>
<nav>
{/* A real navigation, not a client-side route: /privacy is rendered by the
Worker (see src/privacy.ts) so it reads without JavaScript. */}
<a href="/privacy">Privacy</a>
<a href={DISCORD_INVITE} target="_blank" rel="noreferrer">
Discord
</a>
@@ -301,12 +294,11 @@ function About({ slides, error }: { slides: Slide[] | null; error: string }) {
return (
<section className="about">
<div>
<h2 className="about-title">
An open source implementation of the 2023 RecNet servers, designed for the cloud
</h2>
<h2 className="about-title">An open source rebuild of the 2023 servers</h2>
<p className="about-lede">
A free, independent fan project, aiming to be <strong>feature-complete</strong> and
infinitely scalable. No gatekeeping, no basement server. Designed for Cloudflare Workers.
A free fan project, made by players who missed it. Aiming to be{' '}
<strong>feature-complete</strong> and infinitely scalable — no gatekeeping, no basement
server.
</p>
</div>
<div className="about-side">
@@ -319,10 +311,10 @@ function About({ slides, error }: { slides: Slide[] | null; error: string }) {
<p className={`status ${state}`}>
<span className="dot" />
{state === 'online'
? 'Server online'
? 'Servers are up'
: state === 'down'
? 'Server unreachable'
: 'Checking the server'}
? "Can't reach the servers"
: 'Checking…'}
</p>
{/* Only when it's actually up: when it isn't, people want the status, not the joke. */}
{state === 'online' && <p className="status-quip">The cloud never goes down, right?</p>}
apps/www/src/client/styles.css
+16 -22
View File
@@ -1,14 +1,15 @@
/*
* RecFlare — a live-service readout.
* RecFlare — a poster for a game that's up right now.
*
* The page's job is to show that this server is actually up and that real people are
* on it, then get you into the Discord. So the surface is warm-dark (the room the
* The page's job is to show that real people are playing on this server, then get you
* into the game or the Discord. So the surface is warm-dark (the room the
* screenshots are lit against), and the logo orange (#FE7101) is spent only on actions
* and the brand mark — never as decoration, or it stops reading as "click this". Green
* means one thing throughout, healthy: the server is up, or the change saved.
*
* Type: Archivo for the nameplate, IBM Plex Sans for prose, IBM Plex Mono for anything
* the server itself would say (handles, room names, counts, endpoint paths).
* Type: Archivo for the nameplate, IBM Plex Sans for everything else. There is
* deliberately no monospace anywhere — this is a game, and mono type made the whole
* page read like a status dashboard.
*/
:root {
color-scheme: dark light;
@@ -29,7 +30,6 @@
--display: Archivo, system-ui, sans-serif;
--body: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--radius: 10px;
}
@@ -109,9 +109,8 @@ body {
gap: 9px;
font-family: var(--display);
font-weight: 800;
font-size: 1.05rem;
letter-spacing: 0.02em;
text-transform: uppercase;
font-size: 1.2rem;
letter-spacing: -0.015em;
color: var(--text);
text-decoration: none;
}
@@ -132,9 +131,8 @@ body {
.nav-links a,
.linkish {
font-family: var(--mono);
font-size: 0.8rem;
letter-spacing: 0.02em;
font-family: var(--body);
font-size: 0.95rem;
color: var(--muted);
text-decoration: none;
}
@@ -345,16 +343,15 @@ body {
opacity: 0.8;
}
/* Status of the actual server, not decoration — see About. */
/* Status of the actual server, not decoration — see About. Set in plain sentence
case: uppercase mono made a friendly "we're up" read like a monitoring alert. */
.status {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0;
font-family: var(--mono);
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 0.95rem;
font-weight: 500;
color: var(--muted);
}
@@ -443,8 +440,7 @@ body {
margin: 0 auto;
padding: 24px 20px 40px;
border-top: 1px solid var(--line);
font-family: var(--mono);
font-size: 0.75rem;
font-size: 0.875rem;
color: var(--muted);
}
@@ -543,10 +539,8 @@ h2 {
margin-bottom: 0;
}
/* Identity strip on the account page: the account's own record, set in mono. */
.identity .handle {
font-family: var(--mono);
font-size: 0.85rem;
font-size: 0.9rem;
color: var(--muted);
}