Fix token scaling (#408)

Author: CodeyBoi

src/app/botc/actions-modal.tsx

@@ -1,12 +1,13 @@
-import { useState } from 'react';
-import { CharacterId, CHARACTERS } from './characters';
+import { useMemo, useState } from 'react';
+import { CharacterId, CHARACTERS, Reminder } from './characters';
 import ReminderToken from './reminder-token';
 import Modal from 'components/modal';
 import { BotcPlayer } from './blood-on-the-clocktower-game';
 import Button from 'components/input/button';
 import Switch from 'components/input/switch';
+import Divider from 'components/divider';
 
-type SelectMode = 'none' | 'reminder' | 'player';
+type SelectMode = 'none' | 'player';
 
 interface BotcActionsModalProps {
   open: boolean;
@@ -37,16 +38,19 @@ const BotcActionsModal = ({
   const [addMultipleReminders, setAddMultipleReminders] = useState(false);
 
   const characters = new Set(players.map((p) => p.characterId));
-  const reminderTokens = (
-    showAllReminders
-      ? allCharacters
-      : allCharacters.filter((id) => characters.has(id))
-  ).flatMap(
-    (id) =>
-      CHARACTERS[id].reminderTokens?.map((reminderText) => ({
-        id,
-        reminderText,
-      })) ?? [],
+  const reminderTokens = useMemo(
+    () =>
+      (showAllReminders
+        ? allCharacters
+        : allCharacters.filter((id) => characters.has(id))
+      ).flatMap(
+        (id) =>
+          CHARACTERS[id].reminderTokens?.map((reminderText) => ({
+            characterId: id,
+            message: reminderText,
+          })) ?? [],
+      ),
+    [showAllReminders, allCharacters, characters],
   );
 
   const killOrRevivePlayer = () => {
@@ -60,13 +64,30 @@ const BotcActionsModal = ({
 
   const canKill = character.reminderTokens?.includes('Killed by') ?? false;
 
+  const reminderHash = (reminder: Reminder) =>
+    `id:${reminder.characterId},message:${reminder.message}`;
+  const alreadyAdded = new Set(player.reminders.map(reminderHash));
+
+  const filterReminderTokens = (reminder: Reminder) => {
+    if (alreadyAdded.has(reminderHash(reminder))) {
+      return false;
+    }
+
+    if (
+      reminder.message === 'No ability' &&
+      reminder.characterId !== player.characterId
+    ) {
+      return false;
+    }
+
+    return true;
+  };
+
   return (
     <Modal
       title={
         selectMode === 'none'
           ? character.name + (player.name ? ` (${player.name})` : '')
-          : selectMode === 'reminder'
-          ? 'Add reminder token'
           : 'Select player'
       }
       withCloseButton
@@ -86,31 +107,64 @@ const BotcActionsModal = ({
             <Button fullWidth onClick={killOrRevivePlayer}>
               {player.isAlive ? 'Kill' : 'Revive'} this player
             </Button>
-            <Button fullWidth disabled={!canKill} onClick={killOrRevivePlayer}>
+            <Button fullWidth disabled={!canKill}>
               Kill another player
             </Button>
-            <Button
-              fullWidth
-              onClick={() => {
-                setSelectMode('reminder');
-              }}
-            >
-              Add reminder
-            </Button>
+          </div>
+          <Divider />
+          <div className='flex flex-col gap-2 px-2'>
+            <div className='flex flex-col gap-4 md:flex-row'>
+              <h4>Add Reminder</h4>
+              <Switch
+                label='Show tokens not in play'
+                value={showAllReminders}
+                onChange={setShowAllReminders}
+              />
+              <Switch
+                label='Add multiple tokens'
+                value={addMultipleReminders}
+                onChange={setAddMultipleReminders}
+              />
+            </div>
+            <div className='grid grid-cols-3 gap-4 md:grid-cols-5 lg:grid-cols-7'>
+              {reminderTokens
+                .filter(filterReminderTokens)
+                .map(({ characterId, message }) => (
+                  <ReminderToken
+                    key={characterId + message}
+                    onClick={() => {
+                      const newPlayers = players.slice();
+                      newPlayers[playerIndex]?.reminders.push({
+                        characterId,
+                        message,
+                      });
+                      setPlayers(newPlayers);
+                      if (!addMultipleReminders) {
+                        setOpen(false);
+                      }
+                    }}
+                    characterId={characterId}
+                    text={message}
+                  />
+                ))}
+            </div>
           </div>
           {player.reminders.length > 0 && (
             <>
-              <h5>Added reminders (click to remove)</h5>
-              <div className='grid grid-cols-4 gap-y-2 md:grid-cols-5 lg:grid-cols-7'>
+              <h4>Added reminders (click to remove)</h4>
+              <div className='grid grid-cols-3 gap-4 px-2 md:grid-cols-5 lg:grid-cols-7'>
                 {player.reminders.map((reminder, i) => (
                   <ReminderToken
-                    key={`index:${playerIndex}${reminder.characterId}${reminder.message}`}
+                    key={`player:${playerIndex}${reminder.characterId}${reminder.message}`}
                     characterId={reminder.characterId}
                     text={reminder.message}
                     onClick={() => {
                       const newPlayers = players.slice();
                       newPlayers[playerIndex]?.reminders.splice(i, 1);
                       setPlayers(newPlayers);
+                      if (!addMultipleReminders) {
+                        setOpen(false);
+                      }
                     }}
                   />
                 ))}
@@ -119,50 +173,6 @@ const BotcActionsModal = ({
           )}
         </div>
       )}
-      {selectMode === 'reminder' && (
-        <div className='flex flex-col gap-4'>
-          <div className='flex gap-4'>
-            <Switch
-              label='Show all'
-              value={showAllReminders}
-              onChange={setShowAllReminders}
-            />
-            <Switch
-              label='Add multiple'
-              value={addMultipleReminders}
-              onChange={setAddMultipleReminders}
-            />
-          </div>
-          <div className='grid grid-cols-4 gap-y-2 md:grid-cols-5 lg:grid-cols-7'>
-            {reminderTokens.map(({ id, reminderText }) => (
-              <ReminderToken
-                key={id + reminderText}
-                onClick={() => {
-                  const newPlayers = players.slice();
-                  newPlayers[playerIndex]?.reminders.push({
-                    characterId: id,
-                    message: reminderText,
-                  });
-                  setPlayers(newPlayers);
-                  if (!addMultipleReminders) {
-                    setOpen(false);
-                    setSelectMode('none');
-                  }
-                }}
-                characterId={id}
-                text={reminderText}
-              />
-            ))}
-          </div>
-          <Button
-            onClick={() => {
-              setSelectMode('none');
-            }}
-          >
-            Cancel
-          </Button>
-        </div>
-      )}
       {selectMode === 'player' && 'test'}
     </Modal>
   );

src/app/botc/blood-on-the-clocktower-game.ts

@@ -1,4 +1,4 @@
-import { shuffle, zip } from 'utils/array';
+import { chooseRandom, shuffle, zip } from 'utils/array';
 import {
   Alignment,
   CHARACTER_TYPES,
@@ -15,6 +15,7 @@ export class BotcGame {
   edition: Edition;
   lobby: { name: string; corpsId?: string }[];
   players: BotcPlayer[];
+  demonBluffs: CharacterId[];
 
   constructor(initial: {
     edition: Edition;
@@ -24,6 +25,7 @@ export class BotcGame {
     this.edition = initial.edition;
     this.lobby = initial.lobby ?? [];
     this.players = initial.players ?? [];
+    this.demonBluffs = [];
   }
 
   static fromJSON(json: string) {
@@ -59,12 +61,36 @@ export class BotcGame {
     return CHARACTER_TYPES.flatMap((t) => this.edition[t]);
   }
 
+  charactersInPlay() {
+    return this.players.map((p) => p.characterId);
+  }
+
   assignCharacters(characters: CharacterId[]) {
     this.players = zip(shuffle(characters.slice()), this.lobby).map(
       ([characterId, player], index) =>
         new BotcPlayer({ ...player, characterId, index }),
     );
   }
+
+  generateDemonBluffs(numberOfBluffs: number = 3) {
+    const chosenCharacterSet = new Set(this.charactersInPlay());
+    const validTownsfolk = shuffle(
+      this.edition.townsfolk.filter((t) => !chosenCharacterSet.has(t)),
+    );
+    const validOutsiders = this.edition.outsiders.filter(
+      (t) => !chosenCharacterSet.has(t),
+    );
+
+    const outsiderBluff = chooseRandom(validOutsiders);
+
+    if (!outsiderBluff || numberOfBluffs === 1) {
+      return validTownsfolk.slice(0, numberOfBluffs);
+    } else {
+      const bluffs = validTownsfolk.slice(0, numberOfBluffs - 1);
+      bluffs.push(outsiderBluff);
+      return bluffs;
+    }
+  }
 }
 
 // interface Neighbours {

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

@@ -13,6 +13,7 @@ import Grimoire from './grimoire';
 import ParamsTextInput from 'components/input/params-text-input';
 import { BotcGame } from './blood-on-the-clocktower-game';
 import BotcActionsModal from './actions-modal';
+import InfoTokenList from './info-token-list';
 
 export const metadata: Metadata = {
   title: 'Blood on the Clocktower',
@@ -185,6 +186,14 @@ const BloodOnTheClocktowerElement = () => {
                 allCharacters={getAllCharacters(edition)}
               />
             </details>
+            <details open={detailsStartOpen} className='border p-2 shadow-md'>
+              <summary className='select-none'>Info Tokens</summary>
+
+              <InfoTokenList
+                chosenCharacters={gameState.charactersInPlay()}
+                allCharacters={gameState.characters()}
+              />
+            </details>
           </>
         )}
       </div>

src/app/botc/character-token.tsx

@@ -32,7 +32,7 @@ const CharacterToken = ({
   return (
     <div
       className={cn(
-        'relative mt-1 h-32 w-32 -translate-x-1/2 -translate-y-1/2 rounded-full bg-[repeat] bg-[url(/botc/token-noise.webp)] bg-auto text-center shadow-md transition-all hover:scale-105 hover:cursor-pointer',
+        'relative mt-1 aspect-square w-full -translate-x-1/2 -translate-y-1/2 rounded-full bg-[repeat] bg-[url(/botc/token-noise.webp)] bg-auto text-center shadow-md transition-all hover:scale-105 hover:cursor-pointer',
         dead && 'grayscale',
       )}
       onClick={onClick}

src/app/botc/grimoire.tsx

@@ -26,7 +26,7 @@ const Grimoire = ({ players, setCurrentPlayerIndex }: GrimoireProps) => {
         return (
           <React.Fragment key={key}>
             <div
-              className='absolute'
+              className='absolute w-[18%] min-w-[92px]'
               style={{
                 left: toPercent(point.left),
                 top: toPercent(point.top),
@@ -45,7 +45,7 @@ const Grimoire = ({ players, setCurrentPlayerIndex }: GrimoireProps) => {
               .concat(player.automaticReminders)
               .map((reminder, i) => (
                 <div
-                  className='absolute -translate-x-1/2 -translate-y-1/2'
+                  className='absolute w-[10%] min-w-[64px] -translate-x-1/2 -translate-y-1/2'
                   key={key + reminder.characterId + reminder.message}
                   style={{
                     left: toPercent(

src/app/botc/info-token-list.tsx

@@ -0,0 +1,21 @@
+import { CharacterId } from './characters';
+
+interface InfoTokenListProps {
+  chosenCharacters: CharacterId[];
+  allCharacters: CharacterId[];
+}
+
+const InfoTokenList = ({
+  chosenCharacters,
+  allCharacters,
+}: InfoTokenListProps) => {
+  return (
+    <div className='text-wrap grid grid-cols-2 lg:grid-cols-3'>
+      PLACE INFO TOKENS HERE
+      {` chosenCharacters: [${chosenCharacters.join(', ')}]\n\n`}
+      {`allCharacters: [${allCharacters.join(', ')}]`}
+    </div>
+  );
+};
+
+export default InfoTokenList;

src/app/botc/reminder-token.tsx

@@ -1,5 +1,10 @@
 import { cn } from 'utils/class-names';
-import { CharacterId, CHARACTERS, getImagePathFromId } from './characters';
+import {
+  CharacterId,
+  CHARACTERS,
+  getDefaultAlignment,
+  getImagePathFromId,
+} from './characters';
 
 interface ReminderTokenProps {
   characterId: CharacterId;
@@ -9,10 +14,14 @@ interface ReminderTokenProps {
 
 const ReminderToken = ({ characterId, text, onClick }: ReminderTokenProps) => {
   const character = CHARACTERS[characterId];
+  const defaultAlignment = getDefaultAlignment(character.id);
   const imgSrc = getImagePathFromId(characterId);
   return (
     <div
-      className='relative h-24 w-24 scale-75 rounded-full bg-blue-900 shadow-md hover:cursor-pointer'
+      className={cn(
+        'relative aspect-square w-full rounded-full shadow-md hover:cursor-pointer',
+        defaultAlignment === 'good' ? 'bg-blue-900' : 'bg-red-900',
+      )}
       onClick={onClick}
     >
       <img

src/utils/array.ts

@@ -49,6 +49,9 @@ export const intersection = <T>(a: T[], b: T[]) => {
 export const filterNone = <T>(list: (T | null | undefined)[]): T[] =>
   list.flatMap((e) => (e !== null && e !== undefined ? [e] : []));
 
+export const chooseRandom = <T>(list: T[]) =>
+  list[Math.floor(Math.random() * list.length)];
+
 export const shuffle = <T>(list: T[]) => {
   for (let i = list.length - 1; i >= 0; i--) {
     const randomIndex = Math.floor(Math.random() * (i + 1));