Initial version of an idle game

2024-12-31 23:09:09 -08:00 · 2024-12-31 23:09:09 -08:00 · 98bd863f24
commit 98bd863f24
47 changed files with 3394 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/index.html
+++ b/index.html
@ -0,0 +1,12 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>idle VAMPIRES!</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,20 @@
 {
  "name": "idlevamp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "preact": "^10.25.3",
    "sass": "^1.83.0"
  },
  "devDependencies": {
    "@preact/preset-vite": "^2.9.3",
    "typescript": "~5.6.2",
    "vite": "^6.0.5"
  }
 }
--- a/src/app.sass
+++ b/src/app.sass
@ -0,0 +1,171 @@
 // reusable: cell internal padding and color
 $font-size-large: 24px
 $font-size-medium: 20px
 $font-size-small: 16px
 $bg-hue: 15deg
 $fg-hue: 280deg
 $bg-hud: oklch(0.8 0.05 $bg-hue)
 $bg-page: oklch(0.2 0.05 $bg-hue)
 $bg-tile-insetbutton: oklch(0.7 0.05 $bg-hue)
 $bg-tile-insetbutton-hover: oklch(0.95 0.03 $bg-hue)
 $bg-tile: oklch(0.8 0.05 $bg-hue)
 $fg-shadow: oklch(0.05 0.05 $fg-hue)
 $padding-between: 1em
 $padding-inside: $padding-between / 2
 $border-radius: 2px
 .large
  font-size: $font-size-large
 .medium
  font-size: $font-size-medium
 .small
  font-size: $font-size-small
@mixin cell-internal
  border-radius: $border-radius
  padding: $padding-inside
  box-sizing: border-box
  border: 1px $fg-shadow solid
  box-shadow: 4px 4px 4px 2px $fg-shadow
 /* general layout */
 body
  background-color: $bg-page
 .hud
  margin-bottom: $padding-between
  background-color: $bg-hud
  padding: $padding-inside
 .tiles
  display: flex
  flex-flow: row wrap
  column-gap: $padding-between
  row-gap: $padding-between
  justify-content: center
  align-items: start
  margin-bottom: 1em
 /* tiles */
 .tile
  display: block
  width: 360px
  @include cell-internal
  background-color: $bg-tile
 /* action tiles */
 .actions
  display: flex
  flex-flow: column
  column-gap: $padding-between
  .action
    border-radius: $border-radius
    padding: $padding-inside
    font-size: $font-size-medium
    display: flex
    flex-flow: row
    justify-content: space-between
    align-items: center
    .text
    .cost
      display: flex
      flex-flow: row
      img.icon
        height: 0.9em
    &.unavailable
      opacity: 30%
    &.available
      cursor: pointer
      box-sizing: content-box
      border: 1px $bg-tile-insetbutton solid
      &:hover
        background-color: $bg-tile-insetbutton-hover
 /* hud layout */
 .hud
  display: flex
  flex-flow: row
  justify-content: space-between
  align-items: center
  .message
    display: block
  .resources
    font-size: $font-size-medium
    display: flex
    flex-flow: row
    column-gap: $padding-between
 /* icons */
 img.icon
  height: 1em
 /* lair tiles */
 .tile
  .lair
    display: flex
    flex-flow: column
    row-gap: $padding-inside
    .agent
      $icon-dimension: 57px
      display: flex
      flex-flow: row
      column-gap: $padding-inside
      border-radius: $border-radius
      height: $icon-dimension
      .portrait
        background-color: $bg-tile-insetbutton
        border-radius: $border-radius
        width: $icon-dimension
        height: $icon-dimension
      .caption
        flex-grow: 1
        display: flex
        flex-flow: column
        justify-content: center
        row-gap: $padding-inside / 4
 .progressBar
  position: relative
  padding: 0.15em
  .backdrop
    border-radius: $border-radius
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    background-color: $bg-tile-insetbutton
  .caption
    text-align: center
    position: relative
    color: #fff
    font-size: 0.7em
    height: 1em
  &.disabled
    .caption
      color: #000
--- a/src/app.tsx
+++ b/src/app.tsx
@ -0,0 +1,203 @@
 // import { useState } from 'preact/hooks'
 // import preactLogo from './assets/preact.svg'
 // import viteLogo from '/vite.svg'
 import './app.sass'
 import {ComponentChildren} from "preact";
 import {Icon} from "./icons.tsx";
 import {Resource, ResourceBundle, resourceTypes} from "./model/resources.ts";
 import {useModel} from "./hooks.tsx";
 import {NewLairPrice} from "./model/prices.ts";
 import {Lair} from "./model/lair.ts";
 import * as portraits from "./portraits.ts";
 import {ProgressBar, ProgressBarCallback} from "./progressbar.tsx";
 import {generateExtensions} from "./model/extensions.ts";
 import {TaskType} from "./model/agent.ts";
 export function App() {
  return (
    <>
      <Hud />
      <Tiles />
    </>
  )
 }
 export function Hud() {
  const model = useModel();
  return <div className={"hud"}>
    <div className={"message"}>
      <p>Greetings, <strong>{"Master"}</strong>! You have...</p>
    </div>
    <div className={"resources"}>
      {resourceTypes.map((resource) => {
        let amount = model.resources.get(resource);
        if (amount == 0) return <></>
        return <div class={"resource"}>
          <Icon resource={resource} amount={amount}/> {amount}
        </div>
      })}
    </div>
  </div>
 }
 export function Tiles() {
  const model = useModel();
  return <div className={"tiles"}>
    {model.lairs.values.map((i) => <LairTile lair={i} />)}
    <ActionsTile />
  </div>
 }
 export function Tile({children}: { children: ComponentChildren }) {
  return <div class={"tile"}>
    {children}
  </div>
 }
 export function LairTile({lair}: {lair: Lair}) {
  const model = useModel();
  let extensions = generateExtensions(model);
  let projects = model.lairs.listProjects(extensions, lair.index)
  let fragments = []
  for (let part of projects.parts) {
    if (part.title) {
      fragments.push(<p className={"medium"}><strong>{part.title}</strong></p>);
    }
    let disabled = false;
    if (lair.activeProject) {
      disabled = true;  // can't switch
    }
    fragments.push(<Actions>
      {part.projects.map((p) =>
        <Action text={p.label} cost={{}} callback={() => {
          /*
          p.callback(model);
          model.notify();
           */
          model.startWorkingOn(lair.index, p);
        }} disabled={disabled} />
      )}
    </Actions>)
  }
  return <Tile>
    <div class={"lair"}>
      <p><strong>{lair.name}</strong></p>
      <LairTileAgent agentId={lair.vampire}/>
      <LairTileAgent agentId={lair.thrall}/>
      {fragments}
    </div>
  </Tile>
  // {/* Build rooms */}
  // <Actions>
  //   <Action text={"Build Grounds."} cost={{}} callback={() => alert("party")}></Action>
  // </Actions>
  // {/* Build buildings for room */}
  // <p className={"medium"}><strong>Grounds</strong></p>
  // <Actions>
  //   <Action text={"Build party zone."} cost={{[Resource.Wisdom]: 1}} callback={() => alert("party")}></Action>
  // </Actions>
 }
 export function LairTileAgent({agentId}: {agentId: number | null}) {
  const model = useModel();
  let name = null;
  let portrait = portraits.blank;
  let progressBarCallback: ProgressBarCallback = () => { return {
      value: null,
      caption: ""
  }}
  if (agentId != null) {
    let agent = model.agents.get(agentId);
    name = agent.name;
    portrait = portraits.suggest(agent.name);
    progressBarCallback = () => {
      let agentActive = model.agents.get(agentId);
      let currentFractionalTurn = model.turn + model.lifecycle.turnProgress();
      let startedAtTurn = agentActive.activeTask.startedAt;
      let willFinishAtTurn = model.turn + agentActive.activeTask.remainingTurns;
      let value = (currentFractionalTurn - startedAtTurn) / (willFinishAtTurn - startedAtTurn);
      // TODO: Get progress for agent
      return {
        value: agentActive.activeTask.taskType == TaskType.Idle ? null : value,
        caption: agentActive.activeTask.caption,
      }
    }
  }
  let displayName = name ?? "-"
  let portraitAltText = `portrait (${name ?? 'blank'})`
  return <div class={"agent"}>
    <img class={"portrait"} src={portrait} alt={portraitAltText} />
    <div class={"caption"}>
      <div class={"medium"}>{displayName}</div>
      <ProgressBar callback={progressBarCallback}/>
    </div>
  </div>
 }
 export function ActionsTile({}) {
  const model = useModel();
  return <Tile>
    <Actions>
      <Action text={"Build new lair."} cost={NewLairPrice} callback={
        () => model.buildNewLair()
      }/>
    </Actions>
  </Tile>
 }
 export function Actions({children}: {children: ComponentChildren}) {
  return <div class={"actions"}>
    {children}
  </div>
 }
 export function Action({text, cost, callback, disabled}: {text: string, cost: ResourceBundle, callback: () => void, disabled?: boolean}) {
  const model = useModel();
  let available = true;
  if (disabled) {
    available = false
  }
  if (callback == null) {
    available = false;
  }
  if (!model.resources.canSpend(cost)) {
    available = false;
  }
  return <div
    className={"action " + (available ? "available " : "unavailable ")}
    onClick={available ? callback : undefined}
  >
    <div className={"text"}>
      <p>{text}</p>
    </div>
    <div className={"cost"}>
      <ResourceCostFragment cost={cost} />
    </div>
  </div>
 }
 export function ResourceCostFragment({cost}: {cost: ResourceBundle}) {
  return <>{resourceTypes.map((resource: Resource) => {
      let amount = cost[resource];
      if (amount == 0 || amount == undefined) return <></>
      return <div class={"resource"}>
        <Icon resource={resource} amount={amount}/> {amount}
      </div>
    })}</>;
 }
--- a/src/assets/icons/blood.png
+++ b/src/assets/icons/blood.png
--- a/src/assets/icons/enforcer.png
+++ b/src/assets/icons/enforcer.png
--- a/src/assets/icons/gold/gold_pile_1.png
+++ b/src/assets/icons/gold/gold_pile_1.png
--- a/src/assets/icons/gold/gold_pile_10.png
+++ b/src/assets/icons/gold/gold_pile_10.png
--- a/src/assets/icons/gold/gold_pile_16.png
+++ b/src/assets/icons/gold/gold_pile_16.png
--- a/src/assets/icons/gold/gold_pile_19.png
+++ b/src/assets/icons/gold/gold_pile_19.png
--- a/src/assets/icons/gold/gold_pile_2.png
+++ b/src/assets/icons/gold/gold_pile_2.png
--- a/src/assets/icons/gold/gold_pile_23.png
+++ b/src/assets/icons/gold/gold_pile_23.png
--- a/src/assets/icons/gold/gold_pile_25.png
+++ b/src/assets/icons/gold/gold_pile_25.png
--- a/src/assets/icons/gold/gold_pile_3.png
+++ b/src/assets/icons/gold/gold_pile_3.png
--- a/src/assets/icons/gold/gold_pile_4.png
+++ b/src/assets/icons/gold/gold_pile_4.png
--- a/src/assets/icons/gold/gold_pile_5.png
+++ b/src/assets/icons/gold/gold_pile_5.png
--- a/src/assets/icons/gold/gold_pile_6.png
+++ b/src/assets/icons/gold/gold_pile_6.png
--- a/src/assets/icons/gold/gold_pile_7.png
+++ b/src/assets/icons/gold/gold_pile_7.png
--- a/src/assets/icons/gold/gold_pile_8.png
+++ b/src/assets/icons/gold/gold_pile_8.png
--- a/src/assets/icons/gold/gold_pile_9.png
+++ b/src/assets/icons/gold/gold_pile_9.png
--- a/src/assets/icons/legend.png
+++ b/src/assets/icons/legend.png
--- a/src/assets/icons/thrall.png
+++ b/src/assets/icons/thrall.png
--- a/src/assets/icons/wisdom.png
+++ b/src/assets/icons/wisdom.png
--- a/src/assets/portraits/blank.png
+++ b/src/assets/portraits/blank.png
--- a/src/assets/portraits/pyrex.png
+++ b/src/assets/portraits/pyrex.png
--- a/src/hooks.tsx
+++ b/src/hooks.tsx
@ -0,0 +1,55 @@
 import {Model} from "./model/model.ts";
 import {ComponentChildren} from "preact";
 import {Context, createContext, useContext, useEffect, useState} from "react";
 import {Supervisor} from "./model/supervisor.ts";
 import {TurnDuration} from "./model/lifecycle.ts";
 function loadAndSuperviseModel(supervisor: Supervisor): Model {
  let model = new Model();
  model.setSupervisor(supervisor);
  let sched = (turnProgress: number) => {
    let milliseconds = TurnDuration * (1 - turnProgress);
    setTimeout(upd, milliseconds)
  }
  let upd = () => {
    model.nextTurn();
    sched(0.0);
  }
  sched(0.0);
  return model;
 }
 let SupervisorContext: Context<[Supervisor, Model] | undefined> = createContext(
  undefined as [Supervisor, Model] | undefined);
 export function HasModel({children}: {children: ComponentChildren}) {
  let [val, setVal] =
    useState(undefined as [Supervisor, Model] | undefined);
  useEffect(() => {
    let supervisor = new Supervisor();
    let model = loadAndSuperviseModel(supervisor);
    setVal([supervisor, model]);
    return () => setVal(undefined);
  }, []);
  if (val == undefined) {
    return <></>
  } else {
    return <SupervisorContext.Provider value = {val}>{children}</SupervisorContext.Provider>
  }
 }
 export function useModel(): Model {
  const val = useContext(SupervisorContext)
  if (val == undefined) {
    throw new Error("should never be undefined due to the structure of HasModel")
  }
  let [supervisor, model] = val;
  const [version, setVersion] = useState(0);
  useEffect(() => {
    let handle = supervisor.onNotify(() => setVersion(version + 1));
    return () => { supervisor.removeOnNotify(handle); }
  });
  return model
 }
--- a/src/icons.tsx
+++ b/src/icons.tsx
@ -0,0 +1,29 @@
 import iconGold from "./assets/icons/gold/gold_pile_25.png";
 import iconBlood from "./assets/icons/blood.png";
 import iconEnforcer from "./assets/icons/enforcer.png";
 import iconThrall from "./assets/icons/thrall.png";
 import iconLegend from "./assets/icons/legend.png";
 import iconWisdom from "./assets/icons/wisdom.png";
 import {Resource} from "./model/resources.ts";
 export function iconFilename(resource: Resource, _amount: number) {
  switch (resource) {
    case Resource.Gold:
      // TODO: Consider other icons
      return iconGold;
    case Resource.Blood:
      return iconBlood;
    case Resource.Enforcer:
      return iconEnforcer;
    case Resource.Thrall:
      return iconThrall;
    case Resource.Legend:
      return iconLegend;
    case Resource.Wisdom:
      return iconWisdom;
  }
 }
 export function Icon({resource, amount}: {resource: Resource, amount: number}) {
  return <img alt={`${resource} (${amount})`} class={"icon"} src={iconFilename(resource, amount)} />;
 }
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,12 @@
 body {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    font-size: 24px;
 }
 strong {
    font-weight: 700;
 }
--- a/src/main.tsx
+++ b/src/main.tsx
@ -0,0 +1,7 @@
 import { render } from 'preact'
 import './minireset.css'
 import './index.css'
 import { App } from './app.tsx'
 import {HasModel} from "./hooks.tsx";
 render(<HasModel><App /></HasModel>, document.getElementById('app')!)
--- a/src/minireset.css
+++ b/src/minireset.css
@ -0,0 +1 @@
 /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
--- a/src/model/agent.ts
+++ b/src/model/agent.ts
@ -0,0 +1,105 @@
 import {Model} from "./model.ts";
 import {ActiveProject} from "./lair.ts";
 export enum AgentRole {
  Vampire,
  Thrall
 }
 export type Agent = {
  index: number
  name: string
  activeTask: ActiveTask
 }
 export enum TaskType {
  Idle = 0,
  Project = 1
 }
 export type ActiveTask = {
  taskType: TaskType
  caption: string
  startedAt: number,
  remainingTurns: number
 }
 export class Agents {
  values: Array<Agent> = []
  get(agentId: number): Agent {
    return this.values[agentId];
  }
  generate(role: AgentRole): number {
    let id = this.values.length;
    let agent = {
      index: id,
      name: "Pyrex",
      activeTask: {
        taskType: TaskType.Idle,
        caption: "Idle",
        startedAt: 0,
        remainingTurns: 1
      }
    };
    this.values.push(agent);
    return id;
  }
  computeSchedule(model: Model) {
    // first of all: which agents have a project?
    let onProject: Record<number, [number, ActiveProject]> = {};
    for (let lair of model.lairs.values) {
      if (lair.activeProject) {
        if (lair.vampire != null) {
          onProject[lair.vampire] = [lair.index, lair.activeProject];
        }
        if (lair.thrall != null) {
          onProject[lair.thrall] = [lair.index, lair.activeProject];
        }
      }
    }
    // who has nothing to do?
    let unaccountedFor = [];
    for (let agent of this.values) {
      if (!onProject[agent.index]) {
        unaccountedFor.push(agent.index);
      }
    }
    for (let i of unaccountedFor) {
      this.transitionToIdle(model, i);
    }
    for (let agent of this.values) {
      if (onProject[agent.index]) {
        this.transitionToWork(model, agent.index, onProject[agent.index][1])
      }
    }
  }
  transitionToWork(model: Model, agent: number, project: ActiveProject) {
    let caption = project.verb;
    if (this.values[agent].activeTask.taskType == TaskType.Project) {
      this.values[agent].activeTask.caption = caption;
      this.values[agent].activeTask.remainingTurns = project.remainingTurns;
      return;
    }
    this.values[agent].activeTask = {
      taskType: TaskType.Project,
      caption: caption,
      startedAt: model.turn,
      remainingTurns: project.remainingTurns
    }
  }
  transitionToIdle(model: Model, agent: number) {
    this.values[agent].activeTask = {
      taskType: TaskType.Idle,
      caption: "Idle",
      startedAt: model.turn,
      remainingTurns: 1
    }
  }
 }
--- a/src/model/extensions.ts
+++ b/src/model/extensions.ts
@ -0,0 +1,87 @@
 // == these are the room types ==
 import {ResourceBundle} from "./resources.ts";
 import {Model} from "./model.ts";
 export class LairExtensions {
  extensions: Array<LairExtensionType> = []
  extensionObjects: Record<string, Array<LairExtensionObject>> = {}
  objectInteractions: Record<string, Array<LairExtensionInteraction>> = {}
  createExtension(extension: LairExtensionType): string {
    this.extensions.push(extension);
    return extension.id
  }
  addObjectToExtension(extensionId: string, object: LairExtensionObject): string {
    this.extensionObjects[extensionId] = this.extensionObjects[extensionId] ?? []
    this.extensionObjects[extensionId].push(object)
    return object.id;
  }
  addInteractionToObject(objectId: string, interaction: LairExtensionInteraction): string {
    this.objectInteractions[objectId] = this.objectInteractions[objectId] ?? []
    this.objectInteractions[objectId].push(interaction);
    return interaction.id
  }
 }
 export type LairExtensionType = {
  id: string,
  projectName: string,
  verb: string,
  extensionName: string,
  cost: ResourceBundle,
  turns: number,
  payoff: ((model: Model) => void) | null,
 }
 export type LairExtensionObject = {
  id: string,
  name: string,
  verb: string,
  cost: ResourceBundle,
  turns: number,
  payoff: ((model: Model) => void) | null,
 }
 export type LairExtensionInteraction = {
  id: string,
  name: string,
  verb: string,
  cost: ResourceBundle,
  turns: number,
  payoff: ((model: Model) => void) | null,
 }
 export function generateExtensions(_model: Model): LairExtensions {
  let extensions = new LairExtensions();
  const EXT_GROUNDS = extensions.createExtension({
    id: "grounds",
    projectName: "Renovate the grounds.",
    verb: "Renovating the grounds",
    extensionName: "Grounds",
    cost: {},
    turns: 5,
    payoff: null,
  });
  const OBJ_BOUNCY_CASTLE = extensions.addObjectToExtension(EXT_GROUNDS, {
    id: "bouncyCastle",
    name: "Build a bouncy castle.",
    verb: "Building a bouncy castle",
    cost: {},
    turns: 5,
    payoff: null
  })
  const INT_BOUNCE = extensions.addInteractionToObject(OBJ_BOUNCY_CASTLE, {
    id: "bounce",
    name: "Bounce in the bouncy castle.",
    verb: "Bouncing in the bouncy castle",
    cost: {},
    turns: 5,
    payoff: null,
  });
  return extensions
 }
--- a/src/model/lair.ts
+++ b/src/model/lair.ts
@ -0,0 +1,211 @@
 import {generateExtensions, LairExtensions} from "./extensions.ts";
 import {Model} from "./model.ts";
 export type Lair = {
  index: number,
  name: string,
  vampire: number | null
  thrall: number | null
  extensions: Array<string>,
  objects: Array<string>,
  progress: Record<string, number>,
  activeProject: ActiveProject | null,
 }
 export type ActiveProject = {
  id: string
  verb: string
  remainingTurns: number
 }
 export class Lairs {
  values: Array<Lair> = []
  generate(): number {
    let i = this.values.length;
    this.values.push(generateLair(i));
    return i
  }
  setVampire(lair: number, vampire: number | null) {
    this.values[lair].vampire = vampire;
  }
  startWorkingOn(lair: number, project: LairProject) {
    this.values[lair].activeProject = {
      id: project.id,
      verb: project.verb,
      remainingTurns: project.turns,
    }
  }
  updateProjects(model: Model) {
    for (let lair of this.values) {
      let project = lair.activeProject;
      if (project == null) {
        continue;
      }
      if (project.remainingTurns > 0) {
        project.remainingTurns -= 1;
      }
      let extensions = generateExtensions(model);
      if (project.remainingTurns == 0) {
        let projects = this.listProjects(extensions, lair.index)
        let realProject = projects.getById(project.id);
        realProject?.callback(model);
        lair.activeProject = null;
      }
    }
  }
  listProjects(extensions: LairExtensions, lairIx: number): LairProjects {
    let projects = new LairProjects();
    let lair = this.values[lairIx];
    // first: what extensions can be built?
    let unbuilt = []
    for (let extension of extensions.extensions) {
      if (lair.extensions.indexOf(extension.id) >= 0) {
        // already built
        continue;
      }
      unbuilt.push(extension)
    }
    if (unbuilt.length > 0) {
      let section = new LairProjectsSection(null);
      unbuilt.forEach((u) => {
        section.add(new LairProject(
          `addExtension:${u.id}`,
          u.projectName,
          u.verb,
          u.turns,
          (model) => {
          model.lairs.values[lairIx].extensions.push(u.id)
          if (u.payoff != null) {
            u.payoff(model);
          }
        }))
      })
      projects.add(section)
    }
    // next: in each extension, which objects can we build or interact with?
    for (let extensionId of lair.extensions) {
      // find the base implementation
      let extensionData = null;
      for (let realExtension of extensions.extensions) {
        if (realExtension.id == extensionId) {
          extensionData = realExtension;
          break;
        }
      }
      if (extensionData == null) { continue; }
      // now figure out what objects we have (if any)
      let section = new LairProjectsSection(extensionData.extensionName);
      (extensions.extensionObjects[extensionId] ?? []).forEach((o) => {
        let wasBuilt = lair.objects.indexOf(o.id) >= 0;
        if (!wasBuilt) {
          section.add(new LairProject(
            `build:${o.id}`,
            o.name,
            o.verb,
            o.turns,
            (model) => {
              model.lairs.values[lairIx].objects.push(o.id)
              if (o.payoff != null) {
                o.payoff(model);
              }
            }
          ))
        } else {
          (extensions.objectInteractions[o.id] ?? []).forEach((i) => {
            section.add(new LairProject(
              `interact:${o.id}`,
              i.name,
              i.verb,
              i.turns,
              (model) => {
                if (i.payoff != null) {
                  i.payoff(model);
                }
              }
            ))
          })
        }
      });
      projects.add(section);
    }
    return projects
  }
 }
 function generateLair(index: number) {
  return {
    index: index,
    name: "Pyrex's Castle",
    vampire: null,
    thrall: null,
    extensions: [],
    objects: [],
    progress: {},
    activeProject: null,
  }
 }
 // == this is the menu, which is fairly closely coupled to React ==
 export class LairProjects {
  parts: Array<LairProjectsSection> = [];
  add(section: LairProjectsSection) {
    if (section.projects.length == 0) {
      return;
    }
    this.parts.push(section)
  }
  getById(id: string): LairProject | null {
    for (let part of this.parts) {
      for (let project of part.projects) {
        if (project.id == id) { return project; }
      }
    }
    return null;
  }
 }
 export class LairProjectsSection {
  title: string | null
  projects: Array<LairProject> = []
  constructor(title: string | null) {
    this.title = title
  }
  add(project: LairProject) {
    this.projects.push(project)
  }
 }
 export class LairProject {
  id: string
  label: string
  verb: string
  turns: number
  callback: (model: Model) => void
  constructor(id: string, label: string, verb: string, turns: number, callback: (model: Model) => void) {
    this.id = id
    this.label = label
    this.verb = verb
    this.turns = turns
    this.callback = callback
  }
 }
--- a/src/model/lifecycle.ts
+++ b/src/model/lifecycle.ts
@ -0,0 +1,30 @@
 import {Model} from "./model.ts";
 import {Resource} from "./resources.ts";
 export const TurnDuration: number = 1000;
 export class Lifecycle {
  didSetup: boolean
  lastTurn: number = Date.now()
  constructor() {
    this.didSetup = false
  }
  setupGameIfUnstarted(model: Model) {
    if (this.didSetup) { return }
    this.didSetup = true;
    // set up game
    model.resources.receive({[Resource.Enforcer]: 1})
  }
  recordTurn() {
    this.lastTurn = Date.now()
  }
  turnProgress() {
    return Math.max(Math.min(1.0, (Date.now() - this.lastTurn) / TurnDuration), 0.0);
  }
 }
--- a/src/model/model.ts
+++ b/src/model/model.ts
@ -0,0 +1,51 @@
 import {Supervisor} from "./supervisor.ts";
 import {Resources} from "./resources.ts";
 import {Lairs, LairProject} from "./lair.ts";
 import {NewLairPrice} from "./prices.ts";
 import {Lifecycle} from "./lifecycle.ts";
 import {AgentRole, Agents} from "./agent.ts";
 export class Model {
  #supervisor?: Supervisor
  turn: number = 0
  lifecycle: Lifecycle = new Lifecycle()
  resources: Resources = new Resources()
  agents: Agents = new Agents()
  lairs: Lairs = new Lairs()
  constructor() {
    this.lifecycle.setupGameIfUnstarted(this);
  }
  setSupervisor(supervisor: Supervisor) {
    this.#supervisor = supervisor;
  }
  notify() {
    this.#supervisor?.notify()
  }
  nextTurn() {
    this.turn += 1
    this.lifecycle.recordTurn();
    this.lairs.updateProjects(this);
    this.agents.computeSchedule(this);
    this.notify()
  }
  buildNewLair() {
    if (!this.resources.spend(NewLairPrice)) { return; }
    let vampire = this.agents.generate(AgentRole.Vampire);
    let lair = this.lairs.generate();
    this.lairs.setVampire(lair, vampire);
    this.notify();
  }
  startWorkingOn(lair: number, project: LairProject) {
    this.lairs.startWorkingOn(lair, project)
    this.notify()
  }
 }
--- a/src/model/prices.ts
+++ b/src/model/prices.ts
@ -0,0 +1,3 @@
 import {Resource, ResourceBundle} from "./resources.ts";
 export const NewLairPrice: ResourceBundle = {[Resource.Enforcer]: 1}
--- a/src/model/resources.ts
+++ b/src/model/resources.ts
@ -0,0 +1,42 @@
 export enum Resource {
  Gold, Blood, Enforcer, Thrall, Legend, Wisdom
 }
 export var resourceTypes: Array<Resource> = [Resource.Gold, Resource.Blood, Resource.Enforcer, Resource.Thrall, Resource.Legend, Resource.Wisdom];
 export type ResourceBundle = {[t in Resource]?: number}
 export class Resources {
  state: {[t in Resource]?: number} = {}
  get(resource: Resource): number {
    return this.state[resource] ?? 0
  }
  set(resource: Resource, amount: number) {
    this.state[resource] = amount
  }
  canSpend(bundle: ResourceBundle): boolean {
    for (let rt of resourceTypes) {
      if (this.get(rt) < (bundle[rt] ?? 0)) {
        return false;
      }
    }
    return true
  }
  receive(bundle: ResourceBundle) {
    for (let rt of resourceTypes) {
      this.set(rt, this.get(rt) + (bundle[rt] ?? 0));
    }
  }
  spend(bundle: ResourceBundle): boolean {
    if (!this.canSpend(bundle)) { return false; }
    for (let rt of resourceTypes) {
      this.set(rt, this.get(rt) - (bundle[rt] ?? 0));
    }
    return true;
  }
 }
--- a/src/model/supervisor.ts
+++ b/src/model/supervisor.ts
@ -0,0 +1,24 @@
 export class Supervisor {
  #subscriberI: number = 0
  #subscribers: Record<number, () => void> = {}
  constructor() {
  }
  notify() {
    for (let i in this.#subscribers) {
      this.#subscribers[i]();
    }
  }
  onNotify(cb: () => void) {
    let i = this.#subscriberI++;
    this.#subscribers[i] = cb;
    return i;
  }
  removeOnNotify(handle: number) {
    delete this.#subscribers[handle]
  }
 }
--- a/src/portraits.ts
+++ b/src/portraits.ts
@ -0,0 +1,13 @@
 import blankPortrait from "./assets/portraits/blank.png"
 import pyrexPortrait from "./assets/portraits/pyrex.png"
 export function suggest(name: string ) {
  switch (name) {
    case "Pyrex": return pyrex;
    default: return blank;
  }
 }
 export var blank = blankPortrait;
 export var pyrex = pyrexPortrait;
--- a/src/progressbar.tsx
+++ b/src/progressbar.tsx
@ -0,0 +1,56 @@
 import { MutableRef } from "preact/hooks";
 import {useEffect, useRef, useState} from "react";
 export type ProgressBarCallback = () => {
  value: number | null,
  caption: string
 }
 export function ProgressBar({callback}: { callback: ProgressBarCallback }) {
  const canvasRef: MutableRef<HTMLCanvasElement | null> = useRef(null);
  const msgRef: MutableRef<HTMLDivElement | null> = useRef(null);
  const [text, setText] = useState("");
  const [enabled, setEnabled] = useState(false);
  useEffect(() => {
    let canceled: boolean = false
    let animate = () => {
      if (canceled || canvasRef.current == null) {
        return;
      }
      let canvas: HTMLCanvasElement = canvasRef.current;
      canvas.width = canvas.offsetWidth;
      canvas.height = 1
      let ctx = canvas.getContext("2d");
      if (ctx == null) {
        return;
      }
      let {value, caption} = callback();
      if (value == null) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        setEnabled(false);
      } else {
        ctx.fillStyle = "#000";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#f00";
        ctx.fillRect(0, 0, value * canvas.width, canvas.height);
        setEnabled(true);
      }
      setText(caption);
      requestAnimationFrame(animate);
    }
    requestAnimationFrame(animate);
    return () => { canceled = true; }
  })
  return <div class={"progressBar " + (enabled ? "enabled" : "disabled")}>
    <canvas ref={canvasRef} className={"backdrop"}></canvas>
    <div ref={msgRef} className={"caption small"}>{text}</div>
  </div>
 }
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
 /// <reference types="vite/client" />
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@ -0,0 +1,31 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "paths": {
      "react": ["./node_modules/preact/compat/"],
      "react-dom": ["./node_modules/preact/compat/"]
    },
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,24 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["vite.config.ts"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,7 @@
 import { defineConfig } from 'vite'
 import preact from '@preact/preset-vite'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [preact()],
 })
		`@ -0,0 +1 @@`
							`/! minireset.css v0.0.6 \| MIT License \| github.com/jgthms/minireset.css /html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{box-sizing:border-box},::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}`
		`@ -0,0 +1,3 @@`
							`import {Resource, ResourceBundle} from "./resources.ts";`

							`export const NewLairPrice: ResourceBundle = {[Resource.Enforcer]: 1}`