Skip to content

Interactive, browser‑based console for running sci‑fi horror tabletop sessions using the Mothership TTRPG

Notifications You must be signed in to change notification settings

Fasust/mothership-console

Repository files navigation

🚀 Mothership Console

Preview of Ypsilon Scenario

What this repo is

Mothership Console is an interactive, browser‑based console for running sci‑fi horror tabletop sessions using the Mothership TTRPG. It shows an in-universe terminal with relevant graphics for different scenarios. I built this for my own Mothership group. The scenarios this app supports are just the scenarios my group and I played through. I thought other groups might find it useful, so I decided to publish it, but I do not currently have plans to extend it further.

The app is built with Next.js 15, React 19, TypeScript, and Tailwind CSS, and is designed to be run on a dedicated screen at the table (TV, projector, or a spare monitor).

🌐 Live site

This console is hosted at: https://mothership-console-jet.vercel.app/

🕹️ Features

Warden Menu

Use Cmd+K / Ctrl+K or click the bottom left text "{{Scenario}} TERMINAL INTERFACE" 3 times to open the Warden Menu. From here you can navigate through any scenario of your choice and choose a color theme.

Emergency Menu

Use Cmd+E / Ctrl+E or click the bottom left text "AUTHORIZED ACCESS ONLY" 3 times to open the Emergency Menu. From here you can start an emergency countdown or put the console into emergency mode. Useful if you want to create a sense of urgency for your players.

You can also press Cmd+Shift+E / Ctrl+Shift+E to toggle the emergency mode on/off without using the menu.

Emergency mode demo

Command Palette

Use Cmd+P / Ctrl+P to open the command palette, which offers a bunch of useful shortcuts.

📚 Scenarios & credits

All scenarios are fan‑made digital aids for running published modules. All setting content remains the property of the original authors and publishers; this project is a non‑commercial companion tool.

Ypsilon 14

Ypsilon demo

You will find two scenarios for Ypsilon: one with the tunnels and one without. In my campaign my players had to unlock the tunnel map, which is why I split them up. This scenario has a very elaborate interior view with interactive controls for different parts of the station. I gave my players access to this view whenever they were at an in-game terminal.

The login data for the Admin User is:

NAME: SONYA
PASSWORD: PRINCES

Greta Base

Greta Base demo

  • Module: Another Bug Hunt
  • Source file: src/models/scenarios/greta-base.ts
  • Source book credits:
    • Written by DG Chapman, Luke Gearing, Alan Gerding, Tyler Kimball
    • Edited by Jarrett Crader
    • Layout & Graphic Design by Lone Archivist, Sean McCoy
    • PDF Remediation by Dai Shugars
    • Art by Don Austin, Franck Besançon, Paul Enami, Jacob Haynes, David Hoskins, Zach Hazard Vaupen, Sam Wildman
    • Playtested by Reece Carter
    • Proofread by Daniel Hallinan and Janne Puonti
    • Published by Tuesday Knight Games

This one has a similar setup for the interior view as Ypsilon 14.

Prospero's Dream

Dream demo

No interior view for the Dream, since it's simply too massive. But instead the exterior view now offers a selection of specific areas of the Deep that you can highlight on the map.

RSV Fidanza

Fidanza demo

For the interior view of this one I chose to just use the ASCII art already provided in the books, since it's basically perfect.

The Deep

Deep demo

  • Module: Gradient Descent
  • Source file: src/models/scenarios/deep.ts
  • Source book credits:
    • Written by Luke Gearing
    • Illustrated by Nick Tofani
    • Edited by Jarrett Crader
    • Layout by Sean McCoy
    • Published by Tuesday Knight Games

You will find two scenarios for Gradient Descent: one for "The Deep" itself and one for Bell Station.

Bell demo

🛠️ Running and building locally

Prerequisites

  • Node.js 20+ recommended
  • npm (or pnpm if you prefer; a pnpm-lock.yaml is included)

Install dependencies

From the repo root:

# using npm
npm i

# or, using pnpm
pnpm i

Start a development server

npm run dev
# or
pnpm dev

Then open http://localhost:3000 in your browser. The root route redirects to /0/exterior (the first scenario’s exterior view).

🗂️ Project structure

root
│
├── public
│   ├── images/
│   └── sounds/
│
├── src
│   ├── app
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── [scenario]/
│   │       ├── page.tsx
│   │       └── [view]/page.tsx
│   │
│   ├── components/
│   ├── context/
│   ├── data/
│   ├── models/
│   │   └── scenarios/
│   └── use-mobile.tsx, utils.ts
│
├── tailwind.config.ts
├── tsconfig.json
└── package.json
  • src/app: Routing, layout, and provider setup.
  • src/components: Exterior/interior views, overlays, menus, and shared UI.
  • src/context: React context state for scenarios, views, theme, admin, audio, diagnostics, emergency, POIs, and table sorting.
  • src/models: Types and data, including all scenario definitions under src/models/scenarios.
  • src/data: Static data such as emergency presets.
  • public: Static assets (images, sounds) used in the console.
  • Root config files: Tooling and framework configuration (tailwind.config.ts, tsconfig.json, .eslintrc.js, package.json).

About

Interactive, browser‑based console for running sci‑fi horror tabletop sessions using the Mothership TTRPG

Topics

Resources

Stars

Watchers

Forks