diff --git a/guide/age-of-four/src/components/toc/SimulationArrow.tsx b/guide/age-of-four/src/components/toc/SimulationArrow.tsx
deleted file mode 100644
index 8ad3842d..00000000
--- a/guide/age-of-four/src/components/toc/SimulationArrow.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { ReactElement } from 'react'
-import styled, { keyframes } from 'styled-components'
-
-const spin3d = keyframes`
- 0% { transform: perspective(60px) rotateX(0deg) }
- 100% { transform: perspective(60px) rotateX(360deg) }
-`
-
-const rainbow = keyframes`
- 0% { color: #ff2222 }
- 14% { color: #ff8800 }
- 28% { color: #ffee00 }
- 42% { color: #00dd00 }
- 57% { color: #2288ff }
- 71% { color: #aa22ff }
- 85% { color: #ff22cc }
- 100% { color: #ff2222 }
-`
-
-const ArrowSpan = styled.span`
- display: inline-flex;
- align-items: center;
- margin-left: 0.375rem;
- font-size: 1rem;
- line-height: 1;
- animation: ${spin3d} 0.9s linear infinite, ${rainbow} 1.4s linear infinite;
- pointer-events: none;
-
- &::after {
- content: '';
- display: inline-block;
- width: 1.25rem;
- height: 2px;
- background: currentColor;
- margin-left: 1px;
- }
-`
-
-export function SimulationArrow(): ReactElement {
- return ◀
-}
diff --git a/guide/age-of-four/src/components/toc/TableOfContents.tsx b/guide/age-of-four/src/components/toc/TableOfContents.tsx
deleted file mode 100644
index 12f460bb..00000000
--- a/guide/age-of-four/src/components/toc/TableOfContents.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-import type { ReactElement } from 'react'
-import { Link } from 'react-router-dom'
-import styled from 'styled-components'
-import { TocNav, TocHeader, TocBrand, TocSettingsButton, TocDivider, TocSection, TocLink, TocIcon } from './toc-styles'
-import { TocEntry } from './TocEntry'
-import { SimulationArrow } from './SimulationArrow'
-
-const RowWrapper = styled.div`
- position: relative;
-`
-
-const GhostBadge = styled(Link)`
- position: absolute;
- right: 0.625rem;
- top: 50%;
- transform: translateY(-50%);
- z-index: 1;
- font-size: 0.5625rem;
- font-weight: 600;
- letter-spacing: 0.5px;
- text-transform: uppercase;
- color: ${({ theme }) => theme.colors.text.muted};
- text-decoration: none;
- padding: 0.125rem 0.375rem;
- border: 1px solid ${({ theme }) => theme.colors.border.default};
- border-radius: 3px;
- background: ${({ theme }) => theme.colors.background.primary};
- white-space: nowrap;
- transition: color 120ms, border-color 120ms;
-
- &:hover {
- color: ${({ theme }) => theme.colors.text.secondary};
- border-color: ${({ theme }) => theme.colors.border.hover};
- }
-`
-
-const NewWindowButton = styled.a`
- position: absolute;
- right: 1.25rem;
- top: 50%;
- transform: translateY(-50%);
- z-index: 1;
- font-size: 0.625rem;
- line-height: 1;
- color: ${({ theme }) => theme.colors.text.muted};
- text-decoration: none;
- padding: 0.125rem 0.25rem;
- border: 1px solid ${({ theme }) => theme.colors.border.default};
- border-radius: 3px;
- background: ${({ theme }) => theme.colors.background.primary};
- transition: color 120ms, border-color 120ms;
-
- &:hover {
- color: ${({ theme }) => theme.colors.text.secondary};
- border-color: ${({ theme }) => theme.colors.border.hover};
- }
-`
-
-interface NavItem {
- to: string
- icon: string
- label: string
- end?: boolean
-}
-
-interface NavGroup {
- title: string
- items: NavItem[]
-}
-
-const NAV: NavGroup[] = [
- {
- title: 'Intro',
- items: [
- { to: '/', icon: '🏠', label: 'Welcome', end: true },
- { to: '/early-access', icon: '⚔', label: 'Early Access' },
- { to: '/encyclopedia', icon: '📖', label: 'Encyclopedia' },
- { to: '/full-game', icon: '🌐', label: 'Full Game' },
- { to: '/expansions', icon: '🔮', label: 'Expansions' },
- { to: '/tools', icon: '🛠', label: 'Tools' },
- ],
- },
- {
- title: 'About',
- items: [
- { to: '/crowdfund', icon: '🎯', label: 'Crowdfund' },
- { to: '/team', icon: '👥', label: 'Team' },
- ],
- },
- {
- title: 'The Map',
- items: [
- { to: '/terrain', icon: '🗺', label: 'Terrain' },
- { to: '/resources', icon: '💎', label: 'Resources' },
- { to: '/map-types', icon: '📍', label: 'Map Types' },
- ],
- },
- {
- title: 'Climate & Survival',
- items: [
- { to: '/climate', icon: '🌍', label: 'Overview', end: true },
- { to: '/climate/weather', icon: '⛈', label: 'Weather' },
- { to: '/climate/terrain', icon: '🌿', label: 'Terrain Evolution' },
- { to: '/climate/survival', icon: '🛡', label: 'Survival' },
- { to: '/climate/ecosystem', icon: '🦌', label: 'Ecosystem', end: true },
- { to: '/climate/ecosystem/biomes', icon: '🌳', label: 'Biome Browser' },
- { to: '/climate/ecosystem/species', icon: '🐾', label: 'Species Browser' },
- { to: '/climate/ecosystem/food-web', icon: '🕸', label: 'Food Web' },
- { to: '/climate/ecosystem/populations', icon: '📈', label: 'Populations' },
- { to: '/climate/simulation', icon: '🎬', label: 'Simulation' },
- ],
- },
- {
- title: 'Races & Empire',
- items: [
- { to: '/races', icon: '🧝', label: 'Races' },
- { to: '/government', icon: '🏛', label: 'Government' },
- { to: '/eras', icon: '📜', label: 'Eras' },
- { to: '/victory', icon: '🏆', label: 'Victory' },
- ],
- },
- {
- title: 'Research',
- items: [
- { to: '/tech-tree', icon: '🔬', label: 'Tech Tree' },
- { to: '/magic-schools', icon: '🎓', label: 'Magic Schools' },
- { to: '/disciplines', icon: '💠', label: 'Disciplines' },
- ],
- },
- {
- title: 'Military',
- items: [
- { to: '/units', icon: '⚔', label: 'Units' },
- { to: '/combat', icon: '🗡', label: 'Combat' },
- { to: '/keywords', icon: '📖', label: 'Keywords' },
- { to: '/promotions', icon: '⭐', label: 'Promotions' },
- { to: '/items', icon: '🎒', label: 'Items' },
- ],
- },
- {
- title: 'Building Your Empire',
- items: [
- { to: '/buildings', icon: '🏗', label: 'Buildings' },
- { to: '/improvements', icon: '⚒', label: 'Improvements' },
- { to: '/wonders', icon: '🏛', label: 'Wonders' },
- { to: '/communications', icon: '📡', label: 'Comms' },
- ],
- },
- {
- title: 'Magic',
- items: [
- { to: '/spells', icon: '✨', label: 'Spells' },
- { to: '/archons', icon: '👑', label: 'Archons' },
- { to: '/ley-lines', icon: '✦', label: 'Ley Lines' },
- ],
- },
-]
-
-interface Props {
- onOpenSettings?: () => void
-}
-
-export function TableOfContents({ onOpenSettings }: Props): ReactElement {
- return (
-
-
- Magic Civilization
- {onOpenSettings && (
-
- ⚙
-
- )}
-
- {NAV.map((group) => (
-
-
- {group.title}
- {group.items.map((item) => {
- if (item.to === '/early-access') {
- return (
-
-
- Progress
-
- )
- }
- if (item.to === '/climate/simulation') {
- return (
-
-
- {item.icon}
- {item.label}
-
-
- ⧉
-
- )
- }
- return (
-
- )
- })}
-
- ))}
-
- )
-}
diff --git a/guide/age-of-four/src/components/toc/TocEntry.tsx b/guide/age-of-four/src/components/toc/TocEntry.tsx
deleted file mode 100644
index 0d70225a..00000000
--- a/guide/age-of-four/src/components/toc/TocEntry.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { ReactElement } from 'react'
-import { TocLink, TocIcon } from './toc-styles'
-
-interface Props {
- to: string
- icon: string
- label: string
- end?: boolean
-}
-
-export function TocEntry({ to, icon, label, end }: Props): ReactElement {
- return (
-
- {icon}
- {label}
-
- )
-}
diff --git a/guide/age-of-four/src/components/toc/toc-styles.ts b/guide/age-of-four/src/components/toc/toc-styles.ts
deleted file mode 100644
index 4fc5284f..00000000
--- a/guide/age-of-four/src/components/toc/toc-styles.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import styled, { css } from 'styled-components'
-import { NavLink } from 'react-router-dom'
-
-export const TocNav = styled.nav`
- display: flex;
- flex-direction: column;
- min-height: 100%;
- padding: 1rem 0 2rem;
-`
-
-export const TocHeader = styled.div`
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 0 1.25rem 0.75rem;
-`
-
-export const TocBrand = styled.div`
- font-size: 0.6875rem;
- font-weight: 700;
- letter-spacing: 2.5px;
- text-transform: uppercase;
- color: ${({ theme }) => theme.colors.primary.main};
-`
-
-export const TocSettingsButton = styled.button`
- display: flex;
- align-items: center;
- justify-content: center;
- width: 26px;
- height: 26px;
- border-radius: 6px;
- border: 1px solid transparent;
- background: transparent;
- color: ${({ theme }) => theme.colors.text.muted};
- font-size: 0.875rem;
- cursor: pointer;
- transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
-
- &:hover {
- color: ${({ theme }) => theme.colors.primary.main};
- background: rgba(255, 255, 255, 0.06);
- border-color: ${({ theme }) => theme.colors.border.default};
- }
-
- &:focus-visible {
- outline: 2px solid ${({ theme }) => theme.colors.primary.main};
- outline-offset: 2px;
- }
-`
-
-export const TocDivider = styled.div`
- height: 1px;
- background: ${({ theme }) => theme.colors.border.default};
- margin: 0 1.25rem 0.5rem;
-`
-
-export const TocLink = styled(NavLink)`
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.4rem 1.25rem;
- text-decoration: none;
- font-size: 0.8125rem;
- font-weight: 500;
- color: ${({ theme }) => theme.colors.text.secondary};
- position: relative;
- transition: color 150ms ease, background 150ms ease;
-
- &:hover {
- color: ${({ theme }) => theme.colors.text.primary};
- background: rgba(255, 255, 255, 0.04);
- }
-
- ${({ theme }) => css`
- &.active {
- color: ${theme.colors.primary.main};
- background: color-mix(in srgb, ${theme.colors.primary.main} 8%, transparent);
-
- &::before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- width: 3px;
- background: ${theme.colors.primary.main};
- border-radius: 0 2px 2px 0;
- }
- }
- `}
-`
-
-export const TocIcon = styled.span`
- font-size: 0.9rem;
- opacity: 0.8;
- flex-shrink: 0;
-`
-
-export const TocSection = styled.div`
- padding: 0.5rem 1.25rem 0.2rem;
- font-size: 0.625rem;
- font-weight: 700;
- letter-spacing: 2px;
- text-transform: uppercase;
- color: ${({ theme }) => theme.colors.text.muted};
-`