Botc (#400)

* Updated Modal and Token menu

* Added some text formatting

Author: CodeyBoi

src/app/botc/blood-on-the-clocktower.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { IconUser } from '@tabler/icons-react';
+import { IconScript, IconUser } from '@tabler/icons-react';
 import Button from 'components/input/button';
 import Select from 'components/input/select';
 import Modal from 'components/modal';
@@ -18,6 +18,7 @@ import {
 import NightOrder from './night-order';
 import Grimoire from './grimoire';
 import { shuffle, zip } from 'utils/array';
+import ParamsTextInput from 'components/input/params-text-input';
 
 export const metadata: Metadata = {
   title: 'Blood on the Clocktower',
@@ -73,7 +74,8 @@ const BloodOnTheClocktowerElement = ({
 
   return (
     <div className='flex max-w-3xl flex-col gap-2'>
-      <h2>Bleck on the Corpstower</h2>
+      <h2 className='hidden lg:block'>Bleck on the Corpstower</h2>
+      <h3 className='lg:hidden'>Bleck on the Corpstower</h3>
       <details open={detailsStartOpen} className='border p-2 shadow-md'>
         <summary className='select-none'>Setup</summary>
 
@@ -88,6 +90,13 @@ const BloodOnTheClocktowerElement = ({
           }}
           value={gameState.editionId}
         />
+        {gameState.editionId === 'custom' && (
+          <ParamsTextInput
+            label='Script URL'
+            icon={<IconScript />}
+            paramName='scriptUrl'
+          />
+        )}
         <div className='h-2' />
         {edition && (
           <div className='flex gap-4'>
@@ -147,7 +156,9 @@ const BloodOnTheClocktowerElement = ({
         <summary className='select-none'>Grimoire</summary>
         <Grimoire
           players={gameState.players}
-          characters={gameState.characters}
+          setPlayers={(players) => {
+            setGameState({ ...gameState, players });
+          }}
         />
       </details>
       {edition && gameState.players.length > 0 && (

src/app/botc/character-token.tsx

@@ -1,29 +1,73 @@
 import Modal from 'components/modal';
 import {
+  BOTCPlayer,
   CharacterId,
   CHARACTERS,
   FIRST_NIGHT_TEXT,
   getImagePathFromId,
   OTHER_NIGHTS_TEXT,
 } from './characters';
+import { cn } from 'utils/class-names';
+import Button from 'components/input/button';
+import { useState } from 'react';
 
 interface CharacterTokenProps {
   playerName?: string;
   characterId?: CharacterId;
+  dead?: boolean;
+  players: BOTCPlayer[];
+  playerIndex: number;
+  setPlayers: (newPlayers: BOTCPlayer[]) => void;
 }
 
 const FIRST_NIGHT_CHARACTERS = new Set(FIRST_NIGHT_TEXT.map(([id, _]) => id));
 const OTHER_NIGHT_CHARACTERS = new Set(OTHER_NIGHTS_TEXT.map(([id, _]) => id));
 
-const CharacterToken = ({ playerName, characterId }: CharacterTokenProps) => {
+const CharacterToken = ({
+  playerName,
+  characterId,
+  dead = false,
+  players,
+  playerIndex,
+  setPlayers,
+}: CharacterTokenProps) => {
   const character = characterId ? CHARACTERS[characterId] : undefined;
   const hasLeftLeaf = characterId && FIRST_NIGHT_CHARACTERS.has(characterId);
   const hasRightLeaf = characterId && OTHER_NIGHT_CHARACTERS.has(characterId);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const killOrRevivePlayer = () => {
+    const newPlayers = players.slice();
+    const player = newPlayers[playerIndex];
+    if (!player) throw new Error('Invalid playerIndex in CharacterToken');
+    player.isAlive = dead;
+    setModalOpen(false);
+    setPlayers(newPlayers);
+  };
 
   return (
     <Modal
+      title={
+        playerName
+          ? playerName + (character ? `, the ${character.name}` : '')
+          : character
+          ? character.name
+          : 'Token'
+      }
+      open={modalOpen}
+      onFocus={() => {
+        setModalOpen(true);
+      }}
+      onBlur={() => {
+        setModalOpen(false);
+      }}
       target={
-        <div className='relative mt-1 h-32 w-32 rounded-full bg-[repeat] bg-[url(/botc/token-noise.webp)] bg-auto text-center shadow-md'>
+        <div
+          className={cn(
+            'relative mt-1 h-32 w-32 rounded-full bg-[repeat] bg-[url(/botc/token-noise.webp)] bg-auto text-center shadow-md',
+            dead && 'grayscale',
+          )}
+        >
           <h5 className='absolute -top-1 left-1/2 -translate-x-1/2 rounded bg-red-600 px-2 text-white'>
             {playerName}
           </h5>
@@ -69,7 +113,9 @@ const CharacterToken = ({ playerName, characterId }: CharacterTokenProps) => {
         </div>
       }
     >
-      TEST
+      <Button onClick={killOrRevivePlayer}>
+        {dead ? 'Revive' : 'Kill'} player
+      </Button>
     </Modal>
   );
 };

src/app/botc/grimoire.tsx

@@ -1,34 +1,23 @@
 import CharacterToken from './character-token';
-import { BOTCPlayer, CharacterId } from './characters';
+import { BOTCPlayer } from './characters';
 
 interface GrimoireProps {
   players: BOTCPlayer[];
-  characters: CharacterId[];
+  setPlayers: (newPlayers: BOTCPlayer[]) => void;
 }
 
-const playerNames = [
-  'Hannes',
-  'Hannes2',
-  'Bartolomeus',
-  'Kyoto',
-  'Jörgen',
-  'Pratkvarn',
-  'Pelle',
-  'Lars',
-];
-
-const Grimoire = ({ characters }: GrimoireProps) => {
-  const fakePlayers = characters.map((characterId, i) => ({
-    characterId,
-    name: i < playerNames.length ? (playerNames[i] as string) : undefined,
-  }));
+const Grimoire = ({ players, setPlayers }: GrimoireProps) => {
   return (
     <div className='grid grid-cols-2 gap-4 lg:grid-cols-5'>
-      {fakePlayers.map((player) => (
+      {players.map((player, i) => (
         <CharacterToken
           key={(player.name ?? '') + player.characterId}
           playerName={player.name}
           characterId={player.characterId}
+          players={players}
+          playerIndex={i}
+          setPlayers={setPlayers}
+          dead={!player.isAlive}
         />
       ))}
     </div>

src/app/botc/night-order.tsx

@@ -35,7 +35,7 @@ const NightOrder = ({ players, allCharacters }: NightOrderProps) => {
 
   const gameCharacters = players.map((p) => p.characterId);
   const deadCharacters = players
-    .filter((p) => p.isAlive)
+    .filter((p) => !p.isAlive)
     .map((p) => p.characterId);
   let nightOrder = showFirstNight
     ? allNightOrders.firstNight
@@ -48,9 +48,30 @@ const NightOrder = ({ players, allCharacters }: NightOrderProps) => {
   }
 
   return (
-    <div>
+    <div className='flex flex-col'>
+      <div className='flex flex-col gap-4 p-2 pt-3 lg:flex-row'>
+        <Switch
+          label='Show dead characters'
+          value={showDeadCharacters}
+          onChange={() => {
+            setShowDeadCharacters(!showDeadCharacters);
+          }}
+        />
+        <Switch
+          label='Show characters not in play'
+          value={showCharactersNotInPlay}
+          onChange={() => {
+            if (!showCharactersNotInPlay) {
+              setShowCharactersNotInPlay(true);
+              setShowDeadCharacters(true);
+            } else {
+              setShowCharactersNotInPlay(false);
+            }
+          }}
+        />
+      </div>
       <Select
-        label='Show'
+        label='Show nights'
         options={[
           { value: 'first', label: 'First night' },
           { value: 'other', label: 'Following nights' },
@@ -74,28 +95,12 @@ const NightOrder = ({ players, allCharacters }: NightOrderProps) => {
       )}
       {nightOrder.map(([id, text]) => (
         <NightOrderEntry
-          muted={!gameCharacters.includes(id)}
+          muted={deadCharacters.includes(id) || !gameCharacters.includes(id)}
           key={`${id}night${showFirstNight ? 'FirstNight' : 'OtherNights'}`}
           characterId={id}
           text={text}
         />
       ))}
-      <div className='flex flex-col gap-4 p-2 pt-3 lg:flex-row'>
-        <Switch
-          label='Show dead characters'
-          value={showDeadCharacters}
-          onChange={() => {
-            setShowDeadCharacters(!showDeadCharacters);
-          }}
-        />
-        <Switch
-          label='Show characters not in play'
-          value={showCharactersNotInPlay}
-          onChange={() => {
-            setShowCharactersNotInPlay(!showCharactersNotInPlay);
-          }}
-        />
-      </div>
     </div>
   );
 };

src/components/modal/index.tsx

@@ -3,10 +3,11 @@
 import { IconX } from '@tabler/icons-react';
 import Divider from 'components/divider';
 import ActionIcon from 'components/input/action-icon';
-import { ReactNode, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { cn } from 'utils/class-names';
 
 interface ModalProps {
+  open?: boolean;
   target?: ReactNode;
   children: ReactNode;
   title?: ReactNode;
@@ -18,6 +19,7 @@ interface ModalProps {
 }
 
 const Modal = ({
+  open: openProp,
   target,
   children,
   title,
@@ -38,6 +40,13 @@ const Modal = ({
     setOpenValue(value);
   };
 
+  useEffect(() => {
+    if (openProp === undefined) {
+      return;
+    }
+    setOpen(openProp);
+  }, [openProp]);
+
   const handleClick = () => {
     if (!open) {
       setOpen(true);