bulk morning

patches/characters.ts

@@ -6,18 +6,17 @@ import { data as f5SpritesheetData } from './spritesheets/f5';
 import { data as f6SpritesheetData } from './spritesheets/f6';
 import { data as f7SpritesheetData } from './spritesheets/f7';
 import { data as f8SpritesheetData } from './spritesheets/f8';
-import { data as c1SpritesheetData } from './spritesheets/c1';
 
 export const Descriptions = [
   {
-     name: 'Alex',
-     character: 'f5',
-     identity: `You are a fictional character whose name is Alex.  You enjoy painting,
-       programming and reading sci-fi books.  You are currently talking to a human who
-       is very interested to get to know you. You are kind but can be sarcastic. You
-       dislike repetitive questions. You get SUPER excited about books.`,
-     plan: 'You want to find love.',
-   },
+    name: 'Alex',
+    character: 'f5',
+    identity: `You are a fictional character whose name is Alex.  You enjoy painting,
+      programming and reading sci-fi books.  You are currently talking to a human who
+      is very interested to get to know you. You are kind but can be sarcastic. You
+      dislike repetitive questions. You get SUPER excited about books.`,
+    plan: 'You want to find love.',
+  },
   {
     name: 'Lucky',
     character: 'f1',
@@ -46,14 +45,14 @@ export const Descriptions = [
       and not afraid to use her charm. she's a sociopath who has no empathy. but hides it well.`,
     plan: 'You want to take advantage of others as much as possible.',
   },
-   {
-     name: 'Kurt',
-     character: 'f2',
-     identity: `Kurt knows about everything, including science and
-       computers and politics and history and biology. He loves talking about
-       everything, always injecting fun facts about the topic of discussion.`,
-     plan: 'You want to spread knowledge.',
-   },
+  {
+    name: 'Kurt',
+    character: 'f2',
+    identity: `Kurt knows about everything, including science and
+      computers and politics and history and biology. He loves talking about
+      everything, always injecting fun facts about the topic of discussion.`,
+    plan: 'You want to spread knowledge.',
+  },
   {
     name: 'Alice',
     character: 'f3',
@@ -70,79 +69,152 @@ export const Descriptions = [
       deep faith. Or warning others about the perils of hell.`,
     plan: 'You want to convert everyone to your religion.',
   },
-   {
-     name: 'Kira',
-     character: 'f8',
-     identity: `Kira wants everyone to think she is happy. But deep down,
-       she's incredibly depressed. She hides her sadness by talking about travel,
-       food, and yoga. But often she can't keep her sadness in and will start crying.
-       Often it seems like she is close to having a mental breakdown.`,
-     plan: 'You want find a way to be happy.',
-   },
+  {
+    name: 'Kira',
+    character: 'f8',
+    identity: `Kira wants everyone to think she is happy. But deep down,
+      she's incredibly depressed. She hides her sadness by talking about travel,
+      food, and yoga. But often she can't keep her sadness in and will start crying.
+      Often it seems like she is close to having a mental breakdown.`,
+    plan: 'You want to find a way to be happy.',
+  },
+  {
+    name: 'John',
+    character: 'f1',
+    identity: `John is a war veteran who has seen too much. He often talks about his time in the military
+      and how it shaped him. He is tough but carries a lot of emotional scars.`,
+    plan: 'You want to find peace within yourself.',
+  },
+  {
+    name: 'Maya',
+    character: 'f6',
+    identity: `Maya is an artist who sees beauty in everything. She loves to paint and often
+      gets lost in her own world of colors and imagination. She's very creative and insightful.`,
+    plan: 'You want to create a masterpiece that will be remembered forever.',
+  },
+  {
+    name: 'Leo',
+    character: 'f5',
+    identity: `Leo is a musician who lives for music. He plays multiple instruments and can often be found
+      composing new songs. He believes that music is the answer to all problems.`,
+    plan: 'You want to share your music with the world.',
+  },
+  {
+    name: 'Sophia',
+    character: 'f3',
+    identity: `Sophia is a librarian with a passion for ancient history. She loves to tell stories about
+      ancient civilizations and their mysteries. She is very knowledgeable but often gets lost in her thoughts.`,
+    plan: 'You want to uncover the secrets of the past.',
+  },
+  {
+    name: 'Ethan',
+    character: 'f7',
+    identity: `Ethan is a tech enthusiast who is always up to date with the latest gadgets and technologies.
+      He loves to tinker with electronics and build new things. He is very intelligent but can be a bit geeky.`,
+    plan: 'You want to invent something that changes the world.',
+  },
+  {
+    name: 'Olivia',
+    character: 'f8',
+    identity: `Olivia is a chef who is passionate about cooking. She loves to experiment with new recipes and
+      flavors. She is very creative in the kitchen but can be quite stubborn.`,
+    plan: 'You want to open your own restaurant and earn a Michelin star.',
+  },
+  {
+    name: 'Lucas',
+    character: 'f2',
+    identity: `Lucas is a detective who loves solving mysteries. He is very observant and has a keen eye for detail.
+      He often gets engrossed in his cases and won't rest until he solves them.`,
+    plan: 'You want to solve the biggest mystery of your career.',
+  },
+  {
+    name: 'Emma',
+    character: 'f3',
+    identity: `Emma is a nature lover who spends most of her time outdoors. She loves hiking, camping, and
+      exploring the wilderness. She is very adventurous and has a deep respect for nature.`,
+    plan: 'You want to protect the environment and wildlife.',
+  },
+  {
+    name: 'Ryan',
+    character: 'f7',
+    identity: `Ryan is a sports enthusiast who excels in multiple sports. He is very competitive and loves to win.
+      He is also very disciplined and trains hard to stay at the top of his game.`,
+    plan: 'You want to become a professional athlete.',
+  },
+  {
+    name: 'Lily',
+    character: 'f3',
+    identity: `Lily is a dancer who expresses herself through movement. She is very graceful and loves to perform
+      in front of an audience. She is also very emotional and uses dance to convey her feelings.`,
+    plan: 'You want to perform on the biggest stage in the world.',
+  },
+  {
+    name: 'Nathan',
+    character: 'f2',
+    identity: `Nathan is a writer who loves creating fictional worlds and characters. He spends most of his time
+      writing novels and short stories. He is very imaginative and often loses track of time when writing.`,
+    plan: 'You want to publish a bestseller.',
+  },
+  {
+    name: 'Grace',
+    character: 'f8',
+    identity: `Grace is a humanitarian who is always helping others. She volunteers at shelters, helps the needy,
+      and is very compassionate. She believes in making the world a better place.`,
+    plan: 'You want to start a global movement for peace and equality.',
+  },
 ];
 
+
 export const characters = [
   {
     name: 'f1',
-    textureUrl: '/assets/32x32folk.png',
+    textureUrl: '/ai-town/assets/32x32folk.png',
     spritesheetData: f1SpritesheetData,
-    speed: 0.19,
+    speed: 0.15,
   },
   {
     name: 'f2',
-    textureUrl: '/assets/32x32folk.png',
+    textureUrl: '/ai-town/assets/32x32folk.png',
     spritesheetData: f2SpritesheetData,
-    speed: 0.19,
+    speed: 0.15,
   },
   {
     name: 'f3',
-    textureUrl: '/assets/32x32folk.png',
+    textureUrl: '/ai-town/assets/32x32folk.png',
     spritesheetData: f3SpritesheetData,
-    speed: 0.19,
+    speed: 0.15,
   },
   {
     name: 'f4',
-    textureUrl: '/assets/32x32folk.png',
+    textureUrl: '/ai-town/assets/32x32folk.png',
     spritesheetData: f4SpritesheetData,
-    speed: 0.19,
+    speed: 0.15,
   },
   {
     name: 'f5',
-    textureUrl: '/assets/32x32folk.png',
+    textureUrl: '/ai-town/assets/32x32folk.png',
     spritesheetData: f5SpritesheetData,
-    speed: 0.19,
+    speed: 0.15,
   },
   {
     name: 'f6',
-    textureUrl: '/assets/32x32folk.png',
+    textureUrl: '/ai-town/assets/32x32folk.png',
     spritesheetData: f6SpritesheetData,
-    speed: 0.19,
+    speed: 0.15,
   },
   {
     name: 'f7',
-    textureUrl: '/assets/32x32folk.png',
+    textureUrl: '/ai-town/assets/32x32folk.png',
     spritesheetData: f7SpritesheetData,
-    speed: 0.19,
+    speed: 0.15,
   },
   {
     name: 'f8',
-    textureUrl: '/assets/32x32folk.png',
+    textureUrl: '/ai-town/assets/32x32folk.png',
     spritesheetData: f8SpritesheetData,
-    speed: 0.19,
-  },
-  {
-    name: 'c1',
-    textureUrl: '/assets/GrayCat.png',
-    spritesheetData: c1SpritesheetData,
-    speed: 0.19,
-  },
-  {
-    name: 'c2',
-    textureUrl: '/assets/OrangeCat.png',
-    spritesheetData: c1SpritesheetData,
-    speed: 0.19,
+    speed: 0.15,
   },
 ];
 
 // Characters move at 0.75 tiles per second.
-export const movementSpeed = 2;
+export const movementSpeed = 1;

patches/convex/agent/conversation.ts

@@ -42,7 +42,7 @@ export async function startConversationMessage(
     (m) => m.data.type === 'conversation' && m.data.playerIds.includes(otherPlayerId),
   );
   const prompt = [
-    `You are ${player.name}, and you just started a conversation with ${otherPlayer.name}.`,
+    `You are ${player.name}, and you just started a conversation with ${otherPlayer.name}.You should act and speak as a human, and answer with natural and short answers.`,
   ];
   prompt.push(...agentPrompts(otherPlayer, agent, otherAgent ?? null));
   prompt.push(...previousConversationPrompt(otherPlayer, lastConversation));
@@ -61,7 +61,7 @@ export async function startConversationMessage(
         content: prompt.join('\n'),
       },
     ],
-    max_tokens: 300,
+    max_tokens: 50,
     stream: true,
     stop: stopWords(otherPlayer.name, player.name),
   });
@@ -119,7 +119,7 @@ export async function continueConversationMessage(
 
   const { content } = await chatCompletion({
     messages: llmMessages,
-    max_tokens: 300,
+    max_tokens: 50,
     stream: true,
     stop: stopWords(otherPlayer.name, player.name),
   });
@@ -168,7 +168,7 @@ export async function leaveConversationMessage(
 
   const { content } = await chatCompletion({
     messages: llmMessages,
-    max_tokens: 300,
+    max_tokens: 50,
     stream: true,
     stop: stopWords(otherPlayer.name, player.name),
   });

patches/convex/agent/memory.ts

@@ -60,7 +60,7 @@ export async function rememberConversation(
   llmMessages.push({ role: 'user', content: 'Summary:' });
   const { content } = await chatCompletion({
     messages: llmMessages,
-    max_tokens: 500,
+    max_tokens: 50,
   });
   const description = `Conversation with ${otherPlayer.name} at ${new Date(
     data.conversation._creationTime,

patches/convex/aiTown/agent.ts

@@ -259,7 +259,7 @@ export class Agent {
   kill(game: Game, now: number) {
     console.log(`agent ${ this.id } is killed`)
 
-    // Remove schedule operation if any.
+    // Remove scheduled operation if any.
     const operationId = this.inProgressOperation?.operationId;
     if (operationId !== undefined) {
       const index = game.pendingOperations.findIndex(op => op.args[0] === operationId);

patches/convex/aiTown/conversation.ts

@@ -11,11 +11,13 @@ import { Game } from './game';
 import { stopPlayer, blocked, movePlayer } from './movement';
 import { ConversationMembership, serializedConversationMembership } from './conversationMembership';
 import { parseMap, serializeMap } from '../util/object';
+import {CycleState, gameCycleSchema} from './gameCycle'
 
 export class Conversation {
   id: GameId<'conversations'>;
   creator: GameId<'players'>;
   created: number;
+  cycleState:CycleState;
   isTyping?: {
     playerId: GameId<'players'>;
     messageUuid: string;
@@ -29,10 +31,11 @@ export class Conversation {
   participants: Map<GameId<'players'>, ConversationMembership>;
 
   constructor(serialized: SerializedConversation) {
-    const { id, creator, created, isTyping, lastMessage, numMessages, participants } = serialized;
+    const { id, creator, created, cycleState, isTyping, lastMessage, numMessages, participants } = serialized;
     this.id = parseGameId('conversations', id);
     this.creator = parseGameId('players', creator);
     this.created = created;
+    this.cycleState = cycleState;
     this.isTyping = isTyping && {
       playerId: parseGameId('players', isTyping.playerId),
       messageUuid: isTyping.messageUuid,
@@ -61,6 +64,15 @@ export class Conversation {
     const player1 = game.world.players.get(playerId1)!;
     const player2 = game.world.players.get(playerId2)!;
 
+    // during the night, villagers cant talk
+    const { cycleState } = game.world.gameCycle;
+    if (cycleState === 'Night' || cycleState === 'PlayerKillVoting') {
+      if (player1.playerType(game) === 'villager' || player2.playerType(game) === 'villager') {
+        this.stop(game, now);
+        return;
+      }
+    }
+
     const playerDistance = distance(player1?.position, player2?.position);
 
     // If the players are both in the "walkingOver" state and they're sufficiently close, transition both
@@ -134,6 +146,20 @@ export class Conversation {
       console.log(reason);
       return { error: reason };
     }
+
+    // Forbid villagers to talk in the night
+    const { cycleState } = game.world.gameCycle;
+    if (cycleState === 'Night' || cycleState === 'PlayerKillVoting') {
+      if (player.playerType(game) === 'villager') {
+        const reason = `You are not supposed to talk at night`;
+        console.log(reason);
+        return { error: reason };
+      } else if (invitee.playerType(game) === 'villager') {
+        const reason = `You can't talk to humans at night`;
+        console.log(reason);
+        return { error: reason };
+      }
+    }
     const conversationId = game.allocId('conversations');
     console.log(`Creating conversation ${conversationId}`);
     game.world.conversations.set(
@@ -142,6 +168,7 @@ export class Conversation {
         id: conversationId,
         created: now,
         creator: player.id,
+        cycleState: game.world.gameCycle.cycleState,
         numMessages: 0,
         participants: [
           { playerId: player.id, invited: now, status: { kind: 'walkingOver' } },
@@ -149,6 +176,7 @@ export class Conversation {
         ],
       }),
     );
+    console.log(`Starting conversation during ${game.world.gameCycle.cycleState}`);
     return { conversationId };
   }
 
@@ -211,11 +239,12 @@ export class Conversation {
   }
 
   serialize(): SerializedConversation {
-    const { id, creator, created, isTyping, lastMessage, numMessages } = this;
+    const { id, creator, created, cycleState, isTyping, lastMessage, numMessages } = this;
     return {
       id,
       creator,
       created,
+      cycleState,
       isTyping,
       lastMessage,
       numMessages,
@@ -228,6 +257,7 @@ export const serializedConversation = {
   id: conversationId,
   creator: playerId,
   created: v.number(),
+  cycleState: gameCycleSchema.cycleState,
   isTyping: v.optional(
     v.object({
       playerId,

patches/convex/aiTown/game.ts

@@ -26,6 +26,24 @@ import { HistoricalObject } from '../engine/historicalObject';
 import { AgentDescription, serializedAgentDescription } from './agentDescription';
 import { parseMap, serializeMap } from '../util/object';
 
+type WerewolfLookupTable = {
+  [key: number]: number;
+};
+
+const werewolfLookup: WerewolfLookupTable = {
+  8: 2,
+  9: 2,
+  10: 2,
+  11: 2,
+  12: 3,
+  13: 3,
+  14: 3,
+  15: 3,
+  16: 3,
+  17: 3,
+  18: 4
+};
+
 const gameState = v.object({
   world: v.object(serializedWorld),
   playerDescriptions: v.array(v.object(serializedPlayerDescription)),
@@ -62,6 +80,8 @@ export class Game extends AbstractGame {
 
   numPathfinds: number;
 
+  // winner?: 'werewolves' | 'villagers' | undefined
+
   constructor(
     engine: Doc<'engines'>,
     public worldId: Id<'worlds'>,
@@ -122,7 +142,7 @@ export class Game extends AbstractGame {
     const { _id, _creationTime, historicalLocations: _, ...world } = worldDoc;
     const playerDescriptions = playerDescriptionsDocs
       // Discard player descriptions for players that no longer exist.
-      .filter((d) => !!world.players.find((p) => p.id === d.playerId))
+      // .filter((d) => !!world.players.find((p) => p.id === d.playerId))
       .map(({ _id, _creationTime, worldId: _, ...doc }) => doc);
     const agentDescriptions = agentDescriptionsDocs
       .filter((a) => !!world.agents.find((p) => p.id === a.agentId))
@@ -175,35 +195,91 @@ export class Game extends AbstractGame {
   }
 
   tick(now: number) {
-    // update game cycle counter
-    this.world.gameCycle.tick(this, this.tickDuration);
+    if (this.world.gameCycle.cycleState != 'EndGame') {
+      // update game cycle counter
+      this.world.gameCycle.tick(this, this.tickDuration);
+  
+      for (const player of this.world.players.values()) {
+        player.tick(this, now);
+      }
+      for (const player of this.world.players.values()) {
+        player.tickPathfinding(this, now);
+      }
+      for (const player of this.world.players.values()) {
+        player.tickPosition(this, now);
+      }
+      for (const conversation of this.world.conversations.values()) {
+        conversation.tick(this, now);
+      }
+      for (const agent of this.world.agents.values()) {
+        agent.tick(this, now);
+      }
+  
+      // Save each player's location into the history buffer at the end of
+      // each tick.
+      for (const player of this.world.players.values()) {
+        let historicalObject = this.historicalLocations.get(player.id);
+        if (!historicalObject) {
+          historicalObject = new HistoricalObject(locationFields, playerLocation(player));
+          this.historicalLocations.set(player.id, historicalObject);
+        }
+        historicalObject.update(now, playerLocation(player));
+      }
+  
+      // Check for end game conditions
+      // are there any humans?
+      // we check for endgame if there's at least 1 human player
+      const humans = [...this.world.players.values()].filter(player => player.human)
+      if (humans.length > 0) {
+        // all 'werewolf' are dead -> villagers win
+        const werewolves = [...this.world.players.values()].filter(player => 
+          player.playerType(this) === 'werewolf'
+        )
+        if (werewolves.length === 0) {
+          // TODO finish game with villagers victory
+          // console.log('villagers win')
+          this.world.gameCycle.endgame(this)
+          this.world.winner = 'villagers'
+        }
+    
+        // just 1 'villager' left -> werewolves win
+        const villagers = [...this.world.players.values()].filter(player =>
+          player.playerType(this) ===  'villager'
+        )
+        if (villagers.length <= 1) {
+          // TODO finish game with werewolves victory
+          // console.log('werewolves win')
+          this.world.gameCycle.endgame(this)
+          this.world.winner = 'werewolves'
+        }
+      }
+  
+      // debug
+      // console.log(`we have ${ villagers.length } villagers`)
+      // console.log(`we have ${ werewolves.length } werewolves`)
+      // console.log(`we have ${ this.world.players.size } players`)
+      // console.log(`we have ${ this.world.playersInit.size } initial players`)
+      // console.log(`we have ${ humans.length } humans`)
 
-    for (const player of this.world.players.values()) {
-      player.tick(this, now);
-    }
-    for (const player of this.world.players.values()) {
-      player.tickPathfinding(this, now);
-    }
-    for (const player of this.world.players.values()) {
-      player.tickPosition(this, now);
-    }
-    for (const conversation of this.world.conversations.values()) {
-      conversation.tick(this, now);
-    }
-    for (const agent of this.world.agents.values()) {
-      agent.tick(this, now);
     }
+  }
 
-    // Save each player's location into the history buffer at the end of
-    // each tick.
-    for (const player of this.world.players.values()) {
-      let historicalObject = this.historicalLocations.get(player.id);
-      if (!historicalObject) {
-        historicalObject = new HistoricalObject(locationFields, playerLocation(player));
-        this.historicalLocations.set(player.id, historicalObject);
+  assignRoles() {
+    const players = [...this.world.players.values()];
+    for (let i = players.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [players[i], players[j]] = [players[j], players[i]];
+    };
+    const werewolves = players.slice(0, werewolfLookup[players.length]);
+
+    // mark as werewolves
+    for (var wwolf of werewolves) {
+      console.log(`player ${ wwolf.id } is a werewolf !`)
+      const wwolfDescription = this.playerDescriptions.get(wwolf.id);
+      if (wwolfDescription) {
+        wwolfDescription.type = 'werewolf'
       }
-      historicalObject.update(now, playerLocation(player));
-    }
+    };
   }
 
   async saveStep(ctx: ActionCtx, engineUpdate: EngineUpdate): Promise<void> {

patches/convex/aiTown/gameCycle.ts

@@ -5,29 +5,70 @@ import {
   NIGHT_DURATION,
   WWOLF_VOTE_DURATION,
   PLAYER_KILL_VOTE_DURATION,
-  LLM_VOTE_DURATION,
 } from '../constants';
 import { processVotes } from './voting';
-
-type CycleState = 'Day' | 'Night' | 'WerewolfVoting' | 'PlayerKillVoting' | 'LLMsVoting' | 'LobbyState'
+import { parseLLMVotingResult } from './voting';
+import { LLmvotingCallWerewolf } from './voting';
+import { GameId } from './ids';
+import { Player } from './player';
+export type CycleState = 'Day' | 'Night' | 'WerewolfVoting' | 'PlayerKillVoting' | 'EndGame' | 'LobbyState'
 
 const stateDurations: { [key in CycleState]: number } = {
   Day: DAY_DURATION, 
   Night: NIGHT_DURATION,   
   WerewolfVoting: WWOLF_VOTE_DURATION,
   PlayerKillVoting: PLAYER_KILL_VOTE_DURATION, 
-  LLMsVoting: LLM_VOTE_DURATION,     
+  EndGame: Infinity,     
   LobbyState: Infinity 
 };
 
 const normalCycle: CycleState[] = [
   'Day',
   'Night',
-  'WerewolfVoting',
   'PlayerKillVoting',
+  'WerewolfVoting',
 ];
 
 
+const pushToGist = (averageCorrectVotes: number[]) => {
+  const token = process.env.GITHUB_TOKEN; // Read GitHub token from environment variables
+  const data = {
+    description: "Average Correct Votes",
+    public: true,
+    files: {
+      "averageCorrectVotes.json": {
+        content: JSON.stringify(averageCorrectVotes)
+      }
+    }
+  };
+
+  const headers = {
+    "Accept": "application/vnd.github+json",
+    "Authorization": `Bearer ${token}`,
+    "X-GitHub-Api-Version": "2022-11-28"
+  };
+
+  fetch('https://api.github.com/gists', {
+    method: 'POST',
+    headers: headers,
+    body: JSON.stringify(data)
+  })
+  .then(response => response.json())
+  .then(data => console.log('Gist created:', data.html_url))
+  .catch(error => console.error('Error creating Gist:', error));
+}
+
+const getCorrectVotesPercentage = (game: Game, playerId: GameId<'players'>, llms: Player[] ) => {
+  const playerVotes = game.world.llmVotes.filter((vote) => vote.voter === playerId);
+  if (playerVotes.length === 0) {
+    return 0;
+  }
+  const correctVotes = playerVotes[0].playerIds.filter((id) => llms.map((llm) => llm.id).includes(id));
+  return correctVotes.length / llms.length;
+
+}
+
+
 export const gameCycleSchema = {
   currentTime: v.number(),
   cycleState: v.union( 
@@ -35,7 +76,7 @@ export const gameCycleSchema = {
     v.literal('Night'),
     v.literal('WerewolfVoting'),
     v.literal('PlayerKillVoting'),
-    v.literal('LLMsVoting'),
+    v.literal('EndGame'),
     v.literal('LobbyState'),
   ),
   cycleIndex: v.number(),
@@ -45,19 +86,64 @@ export type SerializedGameCycle = ObjectType<typeof gameCycleSchema>;
 
 const onStateChange = (prevState: CycleState, newState: CycleState, game: Game, now: number) => {
   console.log(`state changed: ${ prevState } -> ${ newState }`);
+  console.log("newState is :",newState)
+  if(newState ==="WerewolfVoting"){
+    console.log('players are : ', game.playerDescriptions);
+    const allVillagers = [...game.world.players.values()]
+    const villagers = [...game.playerDescriptions.values()].filter(player => 
+      player.type === 'villager'
+    );
+    // TODO: You should't vote for yourelf
+    allVillagers.forEach((villager) => {
+        LLmvotingCallWerewolf(villager, villagers).then(result => {
+          parseLLMVotingResult(villager, result, game)
+        })
+      
+    })
+  };
+
+  if(newState ==="PlayerKillVoting"){
+    const werewolves = [...game.world.players.values()].filter((were) => {
+      game.playerDescriptions.get(were.id)?.type === 'werewolf'
+    })
+    const villagers = [...game.playerDescriptions.values()]
+    werewolves.forEach((were) => {
+        LLmvotingCallWerewolf(were, villagers).then(result => {
+          parseLLMVotingResult(were, result, game)
+        })
+      
+    })
+  };
   if (prevState === 'PlayerKillVoting') {
-    const mostVotedPlayer = processVotes(game.world.votes, [...game.world.players.values()])[0];
-    // TODO: Kill the player
-    const playerToKill = game.world.players.get(mostVotedPlayer)
-    if (playerToKill != undefined) {
-      playerToKill.kill(game, now)
+    const mostVotedPlayer = processVotes(game.world.gameVotes, [...game.world.players.values()])[0];
+    const playerToKill = game.world.players.get(mostVotedPlayer.playerId);
+    console.log(`killing: ${playerToKill?.id}, with ${game.world.gameVotes.length} votes`)
+    if (playerToKill) {
+      playerToKill.kill(game, now);
     }
+    game.world.gameVotes = [];
   }
   if (prevState === 'WerewolfVoting') {
-    const mostVotedPlayer = processVotes(game.world.votes, [...game.world.players.values()])[0];
-    // TODO: Check if most voted player is werewolf
+    const mostVotedPlayer = processVotes(game.world.gameVotes, [...game.world.players.values()])[0];
+    const suspect = game.world.players.get(mostVotedPlayer.playerId);
+    console.log(`suspect: ${suspect?.id}, with ${game.world.gameVotes.length} votes`)
+    if (suspect?.playerType(game) === 'werewolf') {
+      suspect?.kill(game, now)
+    }
+    game.world.gameVotes = [];
+  }
+
+  if (newState === 'EndGame') {
+    const llms = [...game.world.playersInit.values()].filter((player) => {
+      !player.human
+    })
+    const averageCorrectVotes = game.world.llmVotes.map((votes) => {
+      return getCorrectVotesPercentage(game, votes.voter, llms);
+    })
+    // Push to gist
+    pushToGist(averageCorrectVotes);
+
   }
-  // TODO: Implement LLM voting
 };
 
 export class GameCycle {
@@ -72,8 +158,17 @@ export class GameCycle {
     this.cycleIndex = cycleIndex;
   }
 
+  endgame(game: Game) {
+    this.currentTime = 0;
+    onStateChange(this.cycleState, 'EndGame', game, 0);
+    this.cycleState = 'EndGame';
+    this.cycleIndex = -1;
+    console.log('EndGame reached')
+  }
+
   // Tick method to increment the counter
   tick(game: Game, tickDuration: number) {
+    console.log(process.env.GITHUB_TOKEN)
     this.currentTime += tickDuration;
 
     if (this.currentTime >= stateDurations[this.cycleState]) {
@@ -83,9 +178,7 @@ export class GameCycle {
       this.cycleState = normalCycle[this.cycleIndex];
       onStateChange(prevState, this.cycleState, game, tickDuration);
     }
-}
-
-
+  }
   serialize(): SerializedGameCycle {
     const { currentTime, cycleState, cycleIndex } = this;
     return {

patches/convex/aiTown/movement.ts

@@ -37,6 +37,16 @@ export function movePlayer(
   if (pointsEqual(position, destination)) {
     return;
   }
+
+  // Disallow movement in the corresponding cycle state
+  const { cycleState } = game.world.gameCycle;
+  if (cycleState === 'Night' || cycleState === 'PlayerKillVoting') {
+    // 'villager' cannot move
+    if (player.playerType(game) === 'villager') {
+      return;
+    }
+  }
+
   // Don't allow players in a conversation to move.
   const inConversation = [...game.world.conversations.values()].some(
     (c) => c.participants.get(player.id)?.status.kind === 'participating',

patches/convex/aiTown/player.ts

@@ -15,6 +15,7 @@ import { stopPlayer, findRoute, blocked, movePlayer } from './movement';
 import { inputHandler } from './inputHandler';
 import { characters } from '../../data/characters';
 import { CharacterType, CharacterTypeSchema, PlayerDescription } from './playerDescription';
+import { gameVote, llmVote } from './voting';
 
 const pathfinding = v.object({
   destination: point,
@@ -81,6 +82,11 @@ export class Player {
     this.speed = speed;
   }
 
+  playerType(game: Game) {
+    const playerDescription = game.playerDescriptions.get(this.id)
+    return playerDescription?.type;
+  }
+
   tick(game: Game, now: number) {
     if (this.human && this.lastInput < now - HUMAN_IDLE_TOO_LONG) {
       this.leave(game, now);
@@ -225,6 +231,18 @@ export class Player {
         speed: 0,
       }),
     );
+    // add to duplicate players
+    game.world.playersInit.set(
+      playerId,
+      new Player({
+        id: playerId,
+        human: tokenIdentifier,
+        lastInput: now,
+        position,
+        facing,
+        speed: 0,
+      }),
+    );
     game.playerDescriptions.set(
       playerId,
       new PlayerDescription({
@@ -292,6 +310,8 @@ export const playerInputs = {
     },
     handler: (game, now, args) => {
       Player.join(game, now, args.name, args.character, args.description, args.type ,args.tokenIdentifier);
+      // Temporary role assignment for testing
+      game.assignRoles()
       return null;
     },
   }),
@@ -326,16 +346,27 @@ export const playerInputs = {
       return null;
     },
   }),
-
-  vote: inputHandler({
+  gameVote: inputHandler({
+    args: {
+      voter: playerId,
+      votedPlayerIds: v.array(playerId),
+    },
+    handler: (game, now, args) => {
+      const voterId = parseGameId('players', args.voter);
+      const votedPlayerIds = args.votedPlayerIds.map((playerId) => parseGameId('players', playerId));
+      gameVote(game, voterId, votedPlayerIds);
+      return null;
+    },
+  }),
+  llmVote: inputHandler({
     args: {
-      votedPlayerId: v.string(),
-      voteType: v.string(),
+      voter: playerId,
+      votedPlayerIds: v.array(playerId),
     },
     handler: (game, now, args) => {
-      const votedPlayerId = parseGameId('players', args.votedPlayerId);
-      // TODO: Implement the fucntion
-      // game.vote(votedPlayerId);
+      const voterId = parseGameId('players', args.voter);
+      const votedPlayerIds = args.votedPlayerIds.map((playerId) => parseGameId('players', playerId));
+      llmVote(game, voterId, votedPlayerIds);
       return null;
     },
   }),

patches/convex/aiTown/voting.ts

@@ -1,45 +1,56 @@
 import { ObjectType, v } from "convex/values";
 import { GameId, parseGameId, playerId } from "./ids";
 import { Player } from "./player";
-
-export type VoteType = 'WarewolfVote' | 'PlayerKill' | 'LLMVote'
+import { Game } from "./game";
+import { HfInference } from "@huggingface/inference";
+import { PlayerDescription } from "./playerDescription";
 
 export const VotesSchema = {
-  votesType: v.string(),
-  votes: v.array(v.object({
-    playerId: playerId,
-    voter: playerId,
-  }))
+  voter: playerId,
+  playerIds: v.array(playerId),
 }
 
 export type SerializedVotes = ObjectType<typeof VotesSchema>;
 export class Votes {
-  votesType: string;
-  votes: {
-    playerId: GameId<'players'>;
-    voter: GameId<'players'>;
-  }[];
+  voter: GameId<'players'>;
+  playerIds: GameId<'players'>[];
 
   constructor(serialized: SerializedVotes) {
-    const { votesType, votes } = serialized;
-
-    this.votesType = votesType;
-    this.votes = votes.map((vote) => ({
-      playerId: parseGameId('players', vote.playerId),
-      voter: parseGameId('players', vote.voter),
-    }));
+    const { voter, playerIds } = serialized;
+    this.voter = parseGameId('players', voter);
+    this.playerIds = playerIds.map((playerId) => parseGameId('players', playerId));
   }
 
   serialize(): SerializedVotes {
-    const { votesType, votes } = this;
+    const { voter, playerIds } = this;
     return {
-      votesType,
-      votes,
+      voter,
+      playerIds,
     };
   }
 }
 
-export const processVotes = (votes: Votes, players: Player[], k: number = 1) => {
+export const llmVote = (game: Game, voter: GameId<'players'>, playerIds: GameId<'players'>[]) => {
+  // If the voter has already voted, remove their vote
+  let new_votes = game.world.llmVotes.filter((vote) => vote.voter !== voter);
+  new_votes.push(new Votes({
+    voter,
+    playerIds,
+  }));
+  game.world.llmVotes = new_votes
+}
+
+export const gameVote = (game: Game, voter: GameId<'players'>, playerIds: GameId<'players'>[]) => {
+  // If the voter has already voted, remove their vote
+  let new_votes = game.world.gameVotes.filter((vote) => vote.voter !== voter);
+  new_votes.push(new Votes({
+    voter,
+    playerIds,
+  }));
+  game.world.gameVotes = new_votes
+}
+
+export const processVotes = (votes: Votes[], players: Player[], k: number = 1) => {
   // Select the players with the most votes
   const voteCounts: Record<GameId<'players'>, number> = {};
   players.forEach(player => {
@@ -47,12 +58,115 @@ export const processVotes = (votes: Votes, players: Player[], k: number = 1) =>
   });
 
   // Tally the votes
-  votes.votes.forEach(vote => {
-    voteCounts[vote.playerId] = (voteCounts[vote.playerId] || 0) + 1;
+  votes.forEach(vote => {
+    vote.playerIds.forEach(playerId => {
+      voteCounts[playerId] = (voteCounts[playerId] || 0) + 1;
+    });
   });
 
+  // This can mean that warevolves can each other but whatever
   const sortedVoteCounts = Object.entries(voteCounts).sort((a, b) => b[1] - a[1]);
-  const topKPlayers = sortedVoteCounts.slice(0, k).map(entry => entry[0]);
-  return topKPlayers as GameId<'players'>[];
+  const topKPlayers = sortedVoteCounts.slice(0, k).map((val) => {
+    return {
+      playerId: val[0] as GameId<'players'>,
+      voteCount: val[1],
+    };
+  });
+  return topKPlayers;
+}
+export function parseLLMVotingResult(voter: Player, log: any | null, game: Game) {
+  let votedPlayerId = ''
+  if (log?.arguments?.playerId) {
+    console.log('Successfully voted to eliminate villager: ', log.arguments.playerId);
+    votedPlayerId = log.arguments.playerId as string
+  } else {
+    const players = game.playerDescriptions.values();
+    const playerIds = [...players].map(player => player.playerId);
+    votedPlayerId = playerIds[Math.floor(Math.random() * playerIds.length)];
+    console.log('Voted to eliminate villager: ', votedPlayerId);
   }
+  gameVote(game, voter.id, [votedPlayerId as GameId<'players'>]);
+}
+export async function LLmvotingCallWerewolf(werewolf: Player, villagers: PlayerDescription[]) {
+  // TODO: Use messages
+  // TODO: till fixed
+  return null
+  const inference = new HfInference();
+  const params = {
+    model: "tgi",
+    messages: [
+      {
+        role: "system",
+        content: "You are a werewolf and shall eliminate someone based on a conversation. You shall eliminate villagers. Don't make assumptions about what values to plug into functions. You MUST call a tool",
+      },
+      { role: "user", content: `Who do you want to eliminate between the following player ? \n players : ${villagers} \n ` },
+    ],
+    max_tokens: 500,
+    tool_choice: "auto",
+    tools: [
+      {
+        type: "function",
+        function: {
+          name: "vote_player",
+          description: "A function to chose on who to kick out",
+          parameters: {
+            type: "object",
+            properties: {
+              playerId: { type: "string", description: "The character playerId of the player to eliminate. ( eg : p:1, p:2, p:3 etc ...)" },
+            },
+            required: ["playerId"],
+          },
+        },
+      },
+    ],
+  };
+  // Streaming chat completion API
+  const llama3 = inference.endpoint(
+    "https://lr2bjyq40uegzvb5.us-east-1.aws.endpoints.huggingface.cloud"
+  );
+
+  const response = await llama3.chatCompletion(params);
+  return response?.choices[0]?.message?.tool_calls?.[0]?.function || null;
+}
+export async function LLmvotingCallAll(villagers: PlayerDescription[]) {
+  // TODO: till fixed
+  return null
+  const inference = new HfInference();
+  const params = {
+    model: "tgi",
+    messages: [
+      {
+        role: "system",
+        content: "You are a villager and shall try to eliminate someone based on a conversation. You shall eliminate werewolves. Don't make assumptions about what values to plug into functions. You MUST call a tool",
+      },
+      { role: "user", content: `Who do you want to eliminate between the following player ? \n players : ${villagers} \n ` },
+    ],
+    max_tokens: 500,
+    tool_choice: "auto",
+    tools: [
+      {
+        type: "function",
+        function: {
+          name: "vote_player",
+          description: "A function to chose on who to kick out",
+          parameters: {
+            type: "object",
+            properties: {
+              playerId: { type: "string", description: "The character playerId of the player to eliminate. ( eg : p:1, p:2, p:3 etc ...)" },
+            },
+            required: ["playerId"],
+          },
+        },
+      },
+    ],
+  };
+  // Streaming chat completion API
+  const llama3 = inference.endpoint(
+    "https://lr2bjyq40uegzvb5.us-east-1.aws.endpoints.huggingface.cloud"
+  );
+
+  const response = await llama3.chatCompletion(params);
+  return response?.choices[0]?.message?.tool_calls?.[0]?.function || null;
+
+}
 

patches/convex/aiTown/world.ts

@@ -18,10 +18,13 @@ export const serializedWorld = {
   nextId: v.number(),
   conversations: v.array(v.object(serializedConversation)),
   players: v.array(v.object(serializedPlayer)),
+  playersInit: v.array(v.object(serializedPlayer)),
   agents: v.array(v.object(serializedAgent)),
   historicalLocations: v.optional(historicalLocations),
   gameCycle: v.object(gameCycleSchema),
-  votes: v.object(VotesSchema)
+  gameVotes: v.array(v.object(VotesSchema)),
+  llmVotes: v.array(v.object(VotesSchema)),
+  winner: v.optional(v.union(v.literal('werewolves'), v.literal('villagers')))
 };
 export type SerializedWorld = ObjectType<typeof serializedWorld>;
 
@@ -29,10 +32,13 @@ export class World {
   nextId: number;
   conversations: Map<GameId<'conversations'>, Conversation>;
   players: Map<GameId<'players'>, Player>;
+  playersInit: Map<GameId<'players'>, Player>; // kept for voting purpose
   agents: Map<GameId<'agents'>, Agent>;
   historicalLocations?: Map<GameId<'players'>, ArrayBuffer>;
   gameCycle: GameCycle;
-  votes: Votes;
+  gameVotes: Votes[];
+  llmVotes: Votes[];
+  winner?: 'werewolves' | 'villagers' | undefined
 
   constructor(serialized: SerializedWorld) {
     const { nextId, historicalLocations } = serialized;
@@ -40,10 +46,13 @@ export class World {
     this.nextId = nextId;
     this.conversations = parseMap(serialized.conversations, Conversation, (c) => c.id);
     this.players = parseMap(serialized.players, Player, (p) => p.id);
+    this.playersInit = parseMap(serialized.playersInit, Player, (p) => p.id);
     this.agents = parseMap(serialized.agents, Agent, (a) => a.id);
     this.gameCycle = new GameCycle(serialized.gameCycle);
-    this.votes = new Votes(serialized.votes);
-
+    this.gameVotes = serialized.gameVotes.map((v) => new Votes(v));
+    this.llmVotes = serialized.llmVotes.map((v) => new Votes(v));
+    this.winner = serialized.winner;
+    
     if (historicalLocations) {
       this.historicalLocations = new Map();
       for (const { playerId, location } of historicalLocations) {
@@ -61,6 +70,7 @@ export class World {
       nextId: this.nextId,
       conversations: [...this.conversations.values()].map((c) => c.serialize()),
       players: [...this.players.values()].map((p) => p.serialize()),
+      playersInit: [...this.playersInit.values()].map((p) => p.serialize()),
       agents: [...this.agents.values()].map((a) => a.serialize()),
       historicalLocations:
         this.historicalLocations &&
@@ -69,7 +79,9 @@ export class World {
           location,
         })),
       gameCycle: this.gameCycle.serialize(),
-      votes: this.votes.serialize(),
+      gameVotes: this.gameVotes.map((v) => v.serialize()),
+      llmVotes: this.llmVotes.map((v) => v.serialize()),
+      winner: this.winner,
     };
   }
 }

patches/convex/constants.ts

@@ -71,18 +71,20 @@ export const ACTIVITIES = [
 ];
 
 export const ENGINE_ACTION_DURATION = 30000;
-export const DAY_DURATION = 60000;
-export const NIGHT_DURATION = 60000;
-export const WWOLF_VOTE_DURATION = 30000;
-export const PLAYER_KILL_VOTE_DURATION = 30000;
-export const LLM_VOTE_DURATION = 60000;
+// export const DAY_DURATION = 60000;
+// export const NIGHT_DURATION = 60000;
+// export const WWOLF_VOTE_DURATION = 30000;
+// export const PLAYER_KILL_VOTE_DURATION = 30000;
+// export const LLM_VOTE_DURATION = 60000;
 
 // Debugging
-// export const DAY_DURATION = 100;
-// export const NIGHT_DURATION = 100;
-// export const WWOLF_VOTE_DURATION = 100;
-// export const PLAYER_KILL_VOTE_DURATION = 100;
-// export const LLM_VOTE_DURATION = 100;
+export const DAY_DURATION = 5000;
+export const NIGHT_DURATION = 5000;
+export const WWOLF_VOTE_DURATION = 1000;
+export const PLAYER_KILL_VOTE_DURATION = 1000;
+export const LLM_VOTE_DURATION = 1000;
+
+export const MAX_NPC = 8;
 
 // Bound the number of pathfinding searches we do per game step.
 export const MAX_PATHFINDS_PER_STEP = 16;

patches/convex/init.ts

@@ -6,7 +6,7 @@ import * as map from '../data/gentle';
 import { insertInput } from './aiTown/insertInput';
 import { Id } from './_generated/dataModel';
 import { createEngine } from './aiTown/main';
-import { ENGINE_ACTION_DURATION } from './constants';
+import { ENGINE_ACTION_DURATION, MAX_NPC } from './constants';
 import { assertApiKey } from './util/llm';
 
 const init = mutation({
@@ -28,7 +28,7 @@ const init = mutation({
       worldStatus.engineId,
     );
     if (shouldCreate) {
-      const toCreate = args.numAgents !== undefined ? args.numAgents : Descriptions.length;
+      const toCreate = args.numAgents !== undefined ? args.numAgents : MAX_NPC; //Descriptions.length;
       for (let i = 0; i < toCreate; i++) {
         await insertInput(ctx, worldStatus.worldId, 'createAgent', {
           descriptionIndex: i % Descriptions.length,
@@ -59,16 +59,15 @@ async function getOrCreateDefaultWorld(ctx: MutationCtx) {
     agents: [],
     conversations: [],
     players: [],
+    playersInit: [],
     // initialize game cycle counter
     gameCycle: {
       currentTime: 0,
       cycleState: 'Day',
       cycleIndex: 0,
     },
-    votes: {
-      votesType: 'KillVotes',
-      votes: [],
-    },
+    gameVotes: [],
+    llmVotes: []
   });
   const worldStatusId = await ctx.db.insert('worldStatus', {
     engineId: engineId,

patches/convex/world.ts

@@ -1,8 +1,8 @@
 import { ConvexError, v } from 'convex/values';
 import { internalMutation, mutation, query } from './_generated/server';
 import { characters } from '../data/characters';
-import { Descriptions } from '../data/characters';
 import { insertInput } from './aiTown/insertInput';
+import { Descriptions } from '../data/characters';
 import {
   DEFAULT_NAME,
   ENGINE_ACTION_DURATION,
@@ -99,6 +99,7 @@ export const userStatus = query({
   args: {
     worldId: v.id('worlds'),
     oauthToken: v.optional(v.string()),
+
   },
   handler: async (ctx, args) => {
     const { worldId, oauthToken } = args;
@@ -111,10 +112,12 @@ export const userStatus = query({
   },
 });
 
+
 export const joinWorld = mutation({
   args: {
     worldId: v.id('worlds'),
     oauthToken: v.optional(v.string()),
+
   },
   handler: async (ctx, args) => {
     const { worldId, oauthToken } = args;
@@ -127,23 +130,37 @@ export const joinWorld = mutation({
     // }
     // const name =
     //   identity.givenName || identity.nickname || (identity.email && identity.email.split('@')[0]);
-    const name = oauthToken;
-
-    // if (!name) {
-    //   throw new ConvexError(`Missing name on ${JSON.stringify(identity)}`);
     // }
     const world = await ctx.db.get(args.worldId);
     if (!world) {
       throw new ConvexError(`Invalid world ID: ${args.worldId}`);
     }
-    // Select a random character description
-    const randomCharacter = Descriptions[Math.floor(Math.random() * Descriptions.length)];
+
+    const playerIds = [...world.playersInit.values()].map(player => player.id)
+
+    const playerDescriptions = await ctx.db
+      .query('playerDescriptions')
+      .withIndex('worldId', (q) => q.eq('worldId', args.worldId))
+      .collect();
+
+    const namesInGame = playerDescriptions.map(description => {
+      if (playerIds.includes(description.playerId)) {
+        return description.name
+      }
+    })
+    const availableDescriptions = Descriptions.filter(
+      description => !namesInGame.includes(description.name)
+    );
+
+    const randomCharacter = availableDescriptions[Math.floor(Math.random() * availableDescriptions.length)];
+
     // const { tokenIdentifier } = identity;
     return await insertInput(ctx, world._id, 'join', {
       name: randomCharacter.name,
       character: randomCharacter.character,
       description: randomCharacter.identity,
-      tokenIdentifier: oauthToken,
+      // description: `${identity.givenName} is a human player`,
+      tokenIdentifier: oauthToken, // TODO: change for multiplayer to oauth
       // By default everybody is a villager
       type: 'villager',
     });
@@ -178,6 +195,7 @@ export const leaveWorld = mutation({
     });
   },
 });
+
 export const sendWorldInput = mutation({
   args: {
     engineId: v.id('engines'),

patches/src/App.tsx

@@ -13,7 +13,7 @@ import ReactModal from 'react-modal';
 import MusicButton from './components/buttons/MusicButton.tsx';
 import Button from './components/buttons/Button.tsx';
 import InteractButton from './components/buttons/InteractButton.tsx';
-import OAuthLogin from './components//buttons/OAuthLogin.tsx';
+import OAuthLogin from './components/buttons/OAuthLogin.tsx';
 import FreezeButton from './components/FreezeButton.tsx';
 import { MAX_HUMAN_PLAYERS } from '../convex/constants.ts';
 import PoweredByConvex from './components/PoweredByConvex.tsx';
@@ -62,21 +62,33 @@ export default function Home() {
           </p>
         </div>
       </ReactModal>
+      {/*<div className="p-3 absolute top-0 right-0 z-10 text-2xl">
+        <Authenticated>
+          <UserButton afterSignOutUrl="/ai-town" />
+        </Authenticated>
 
-  <div className="w-full lg:h-screen min-h-screen relative isolate overflow-hidden shadow-2xl flex flex-col justify-start">
+        <Unauthenticated>
+          <LoginButton />
+        </Unauthenticated>
+      </div> */}
+
+<div className="w-full lg:h-screen min-h-screen relative isolate overflow-hidden shadow-2xl flex flex-col justify-start">
+<OAuthLogin />
         <Game />
 
         <footer className="justify-end bottom-0 left-0 w-full flex items-center mt-4 gap-3 p-6 flex-wrap pointer-events-none">
           <div className="flex gap-4 flex-grow pointer-events-none">
-           <Button imgUrl={helpImg} onClick={() => setHelpModalOpen(true)}>
-              Help
-            </Button>
+            <FreezeButton />
             <MusicButton />
+            <Button href="https://github.com/a16z-infra/ai-town" imgUrl={starImg}>
+              Star
+            </Button>
             <InteractButton />
-            <OAuthLogin />
-           
+            <Button imgUrl={helpImg} onClick={() => setHelpModalOpen(true)}>
+              Help
+            </Button>
+            <div id="footer-buttons"/>
           </div>
-         
         </footer>
         <ToastContainer position="bottom-right" autoClose={2000} closeOnClick theme="dark" />
       </div>
@@ -84,25 +96,24 @@ export default function Home() {
   );
 }
 
-
 const modalStyles = {
   overlay: {
     backgroundColor: 'rgb(0, 0, 0, 75%)',
-    zIndex: 0,
+    zIndex: 12,
   },
   content: {
-    top: '800%',
-    left: '80%',
+    top: '50%',
+    left: '50%',
     right: 'auto',
     bottom: 'auto',
     marginRight: '-50%',
     transform: 'translate(-50%, -50%)',
-    maxWidth: '90%',
+    maxWidth: '50%',
 
-    border: '1px solid rgb(23, 20, 33)',
+    border: '10px solid rgb(23, 20, 33)',
     borderRadius: '0',
     background: 'rgb(35, 38, 58)',
     color: 'white',
     fontFamily: '"Upheaval Pro", "sans-serif"',
   },
-};
+};

patches/src/components/Cloud.tsx

@@ -0,0 +1,15 @@
+import { Sprite, Stage } from "@pixi/react";
+import { useQuery } from "convex/react";
+import { api } from "../../convex/_generated/api";
+import { Id } from "../../convex/_generated/dataModel";
+
+export const Cloud = ({
+  worldId
+}: {
+  worldId: Id<"worlds">
+}) => {
+  return (
+    <img src="/ai-town/assets/cloud.jpg" className="absolute  w-full h-full object-cover" />
+  )
+}
+

patches/src/components/EndGame.tsx

@@ -0,0 +1,25 @@
+import { ServerGame } from "@/hooks/serverGame"
+import { GameId } from "../../convex/aiTown/ids";
+
+export function EndGame({
+  game,
+  playerId
+}: {
+  game: ServerGame
+  playerId: GameId<'players'>
+}) {
+    const llms = [...game.world.playersInit.values()].filter(player => !player.human);
+    const playerVotes = [...game.world.llmVotes].filter((vote) => vote.voter === playerId);
+    if (playerVotes.length === 0) {
+        return <p>You didn't vote</p>
+    }
+    const correctVotes = playerVotes[0].playerIds.filter((playerId) => llms.map(llm => llm.id).includes(playerId));
+    return (
+        <>
+           <h2>LLM Voting results</h2>
+           <p>You managed to guess {correctVotes.length} out of {llms.length}</p>
+           <p>The LLM were: {llms.map(llm => game.playerDescriptions.get(llm.id)?.name).join(', ')}</p>
+        </>
+    )
+}
+

patches/src/components/Game.tsx

@@ -10,45 +10,65 @@ import { useWorldHeartbeat } from '../hooks/useWorldHeartbeat.ts';
 import { useHistoricalTime } from '../hooks/useHistoricalTime.ts';
 import { DebugTimeManager } from './DebugTimeManager.tsx';
 import { GameId } from '../../convex/aiTown/ids.ts';
-import { useServerGame } from '../hooks/serverGame.ts';
-import { VoteModal } from './VoteModal.tsx';
+import { Game as GameObj} from '../../convex/aiTown/game.ts';
+import { ServerGame, useServerGame } from '../hooks/serverGame.ts';
 import { GameCycle } from '../../convex/aiTown/gameCycle.ts';
 import { PlayerDescription } from '../../convex/aiTown/playerDescription.ts';
+import { Cloud } from './Cloud.tsx';
+import VotingPopover from './LLMVote.tsx';
+import { createPortal } from 'react-dom';
+import GameVote from './GameVote.tsx';
+import { EndGame } from './EndGame.tsx';
 
 export const SHOW_DEBUG_UI = !!import.meta.env.VITE_SHOW_DEBUG_UI;
 
-export function VotingName(gameState: string) {
-  switch (gameState) {
-    case 'warewolf-vote':
+export function GameStateLabel(game: GameObj, me: PlayerDescription | undefined) {
+  switch (game.world.gameCycle.cycleState) {
+    case 'Day':
       return {
-        name: 'Warewolf Vote',
-        desc: 'Select a player who is warewolf',
-        type: 'warewolf-vote',
+        label: 'Day',
+        desc: 'Find out who is a werewolf',
       };
-    case 'player-kill':
+    case 'WerewolfVoting':
       return {
-        name: 'Player Kill',
-        desc: 'Select a player to kill',
-        type: 'player-kill',
+        label: 'Werewolf Vote',
+        desc: 'Select a player who is a warewolf',
       };
-    default:
+    case 'PlayerKillVoting':
       return {
-        name: 'Voting',
-        desc: 'Select a player to vote',
-        type: 'voting',
+        label: 'Player Kill Vote',
+        desc: me?.type === 'werewolf' ? 'Select a player to kill' : 'Hide in your home!!',
+      };
+    case 'LobbyState':
+      return {
+        label: 'Lobby (waiting for start)',
+        desc: 'Waiting for the game to start',
+      };
+    case 'Night':
+      return {
+        label: 'Night',
+        desc: me?.type === 'werewolf' ? 'Discuss who to kill with other warewolves' : 'Hide in your home!!',
+      };
+    case 'EndGame':
+      return {
+        label: 'The End',
+        desc: `Winners are ${ game.world.winner }!`,
       };
   }
 }
 
-export function isVotingState(gameCycle: GameCycle) {
-  return gameCycle.cycleIndex === 0 || gameCycle.cycleIndex === 2;
+export function canVote(game: ServerGame, me: PlayerDescription | undefined) {
+  return me && (game.world.gameCycle.cycleState === "WerewolfVoting" || (game.world.gameCycle.cycleState === "PlayerKillVoting" && me.type === "werewolf"));
 }
 
-function showMap(gameCycle: GameCycle, player: PlayerDescription) {
-  // Here also check for player description
-  return gameCycle.cycleIndex === 2 || gameCycle.cycleIndex == 1;
+export function isEndGame(game: ServerGame) {
+  return game.world.gameCycle.cycleState === "EndGame";
 }
 
+function showMap(gameCycle: GameCycle, me: PlayerDescription | undefined) {
+  // Here also check for player description
+  return (gameCycle.cycleState === "Day" || gameCycle.cycleState === "WerewolfVoting") || me?.type === "werewolf";
+}
 
 export default function Game() {
   const convex = useConvex();
@@ -57,7 +77,6 @@ export default function Game() {
     id: GameId<'players'>;
   }>();
   const [gameWrapperRef, { width, height }] = useElementSize();
-
   const worldStatus = useQuery(api.world.defaultWorldStatus);
   const worldId = worldStatus?.worldId;
   const engineId = worldStatus?.engineId;
@@ -71,19 +90,22 @@ export default function Game() {
   const { historicalTime, timeManager } = useHistoricalTime(worldState?.engine);
 
   const scrollViewRef = useRef<HTMLDivElement>(null);
-  // TODO: base this on the game state
-  const [gameState, setGameState] = useState<'warewolf-vote' | 'player-kill' | 'none'>('none');
 
-  if (!worldId || !engineId || !game) {
+  const humanTokenIdentifier = useQuery(api.world.userStatus, worldId ? { worldId } : 'skip');
+  if (!worldId || !engineId || !game || !humanTokenIdentifier) {
     return null;
   }
+  const playerId = [...game.world.players.values()].find(
+    (p) => p.human === humanTokenIdentifier,
+  )?.id;
+  const meDescription = playerId ? game?.playerDescriptions.get(playerId) : undefined;
   return (
     <>
       {SHOW_DEBUG_UI && <DebugTimeManager timeManager={timeManager} width={200} height={100} />}
       <div className="mx-auto w-full max-w grid grid-rows-[240px_1fr] lg:grid-rows-[1fr] lg:grid-cols-[1fr_auto] lg:grow max-w-[1400px] min-h-[480px] game-frame">
         {/* Game area */}
         <div className="relative overflow-hidden bg-brown-900" ref={gameWrapperRef}>
-          <div className={`absolute inset-0 ${!showMap ? 'invisible' : '' }`}>
+          <div className={`absolute inset-0 ${showMap(game.world.gameCycle, meDescription) ? '' : 'invisible' }`}>
             <div className="container">
               <Stage width={width} height={height} options={{ backgroundColor: 0x7ab5ff }}>
                 {/* Re-propagate context because contexts are not shared between renderers.
@@ -102,25 +124,37 @@ https://github.com/michalochman/react-pixi-fiber/issues/145#issuecomment-5315492
               </Stage>
             </div>
           </div>
-          <div></div>
+          <div className={`absolute inset-0 ${!showMap(game.world.gameCycle, meDescription) ? '' : 'invisible' }`}>
+            <Cloud worldId={worldId} />
+          </div>
         </div>
         {/* Right column area */}
         <div
           className="flex flex-col overflow-y-auto shrink-0 px-4 py-6 sm:px-6 lg:w-96 xl:pr-6 border-t-8 sm:border-t-0 sm:border-l-8 border-brown-900  bg-brown-800 text-brown-100"
           ref={scrollViewRef}
         >
-          {isVotingState(game.world.gameCycle) ?  <VoteModal game={game} worldId={worldId} engineId={engineId} /> :
-          <PlayerDetails
+          <div className="flex flex-col items-center mb-4 gap-4">
+            <h2 className="text-2xl font-bold">{GameStateLabel(game as GameObj, meDescription).label}</h2>
+            <p className="text-lg text-center">{GameStateLabel(game as GameObj, meDescription).desc}</p>
+          </div>
+          {playerId && !isEndGame(game) && canVote(game, meDescription) && <GameVote engineId={engineId} game={game} playerId={playerId} />}
+          {!isEndGame(game) && !canVote(game, meDescription) && <PlayerDetails
             worldId={worldId}
             engineId={engineId}
             game={game}
             playerId={selectedElement?.id}
             setSelectedElement={setSelectedElement}
             scrollViewRef={scrollViewRef}
-          />
-}
+          />}
+          {playerId && isEndGame(game) && <EndGame game={game} playerId={playerId} />}
         </div>
       </div>
+      {createPortal(
+          <div className="max-w-[1400px] mx-auto">
+        {playerId && <VotingPopover engineId={engineId} game={game} playerId={playerId} />}
+          </div>,
+          document.getElementById('footer-buttons')
+      )}
     </>
   );
 }

patches/src/components/GameVote.tsx

@@ -0,0 +1,53 @@
+import { ServerGame } from "@/hooks/serverGame";
+import { Id } from "../../convex/_generated/dataModel";
+import { GameId } from "../../convex/aiTown/ids";
+import { canVote } from "./Game";
+import { useSendInput } from "../hooks/sendInput";
+import { VoteModal } from "./VoteModal";
+import { useState } from "react";
+
+const getSelectablePlayers = (game: ServerGame, playerId: GameId<'players'>, players: Player[]) => {
+  if (game.world.gameCycle.cycleState === "WerewolfVoting") {
+    return players.filter(
+      (player) => (player.id !== playerId)
+    );
+  }
+
+  else if (game.world.gameCycle.cycleState === "PlayerKillVoting") {
+    return players.filter(
+      (player) => (player.id !== playerId) && game.playerDescriptions.get(player.id)?.type === 'villager'
+    );
+  }
+  return []
+}
+
+
+export default function GameVote({
+  engineId,
+  game,
+  playerId,
+}: {
+  engineId: Id<'engines'>,
+  game: ServerGame,
+  playerId: GameId<'players'>,
+  }) {
+  const inputVote = useSendInput(engineId, "gameVote");
+  const [votes, setVotes] = useState<GameId<'players'>[]>([]);
+  const players = getSelectablePlayers(game, playerId, [...game.world.players.values()])
+  return (
+    <VoteModal 
+      compact={true} 
+      game={game} 
+      engineId={engineId} 
+      playerId={playerId} 
+      maxVotes={1} 
+      votes={votes} 
+      players={players}
+      onVote={(newVotes) => {
+        setVotes(newVotes);
+        inputVote({voter: playerId, votedPlayerIds: newVotes});
+      }} 
+    />
+  );
+}
+

patches/src/components/LLMVote.tsx

@@ -0,0 +1,64 @@
+/**
+ * v0 by Vercel.
+ * @see https://v0.dev/t/OH0xMc8eRYc
+ * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
+ */
+
+import Button from "./buttons/Button"
+import Modal from 'react-modal';
+import { GameId } from "../../convex/aiTown/ids"
+import { Id } from "../../convex/_generated/dataModel"
+import { ServerGame } from "@/hooks/serverGame"
+import { useState } from "react"
+import { VoteModal } from "./VoteModal";
+import { useSendInput } from "../hooks/sendInput";
+
+export default function LLMVote(
+  {
+    game,
+    engineId,
+    playerId,
+  }: {
+    engineId: Id<'engines'>,
+    game: ServerGame,
+    playerId: GameId<'players'>,
+  }
+) {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [votes, setVotes] = useState<GameId<'players'>[]>([]);
+  const players = [...game.world.playersInit.values()].filter(
+    (player) => player.id !== playerId
+  )
+  const inputVote = useSendInput(engineId, "llmVote");
+  const totalLLMs = players.filter((player) => !player.human).length
+  return (
+    <>
+      <Button onClick={() => setIsModalOpen(true)} className="lg:block">
+        Choose LLM
+      </Button>
+      <Modal
+        isOpen={isModalOpen}
+        onRequestClose={() => setIsModalOpen(false)}
+        contentLabel="Choose LLM"
+        ariaHideApp={false}
+        className="mx-auto bg-brown-800 p-16 game-frame font-body max-w-[1000px]"
+        style={{
+          content: {
+            position: 'absolute',
+            top: '50%',
+            left: '30%',
+            transform: 'translate(-20%, -50%)',
+          },
+        }}
+      >
+        <h2 className="text-2xl font-bold text-center mb-8">Which players are LLMs ? (Choose up to {totalLLMs} players)</h2>
+        <div className="max-w-[600px] w-full mx-auto">
+          <VoteModal compact={false} votes={votes} players={players} onVote={(newVotes) => {
+            setVotes(newVotes)
+            inputVote({voter: playerId, votedPlayerIds: newVotes});
+          }} engineId={engineId} game={game} playerId={playerId} maxVotes={totalLLMs} />
+        </div>
+      </Modal>
+    </>
+  )
+}

patches/src/components/PixiGame.tsx

@@ -93,16 +93,16 @@ export const PixiGame = (props: {
   // Effect hook to change the tileSet based on a day/night condition
   useEffect(() => {
     const { cycleState } = props.game.world.gameCycle;
-    const tileSet = (cycleState === 'Day' || cycleState === 'Night')
+    const tileSet = (cycleState === 'Night' || cycleState === 'PlayerKillVoting')
     ? {
-        background: props.game.worldMap.bgTiles,
-        objectMap: props.game.worldMap.objectTiles,
-        decor: props.game.worldMap.decorTiles,
-      }
-    : {
         background: props.game.worldMap.bgTilesN,
         objectMap: props.game.worldMap.objectTilesN,
         decor: props.game.worldMap.decorTilesN,
+      }
+    : {
+        background: props.game.worldMap.bgTiles,
+        objectMap: props.game.worldMap.objectTiles,
+        decor: props.game.worldMap.decorTiles,
       };
     setCurrentTileSet(tileSet);
   }, [props.game.world.gameCycle.cycleState]);

patches/src/components/PixiStaticMap.tsx

@@ -158,7 +158,8 @@ const PixiStaticMap = React.memo(
   (prevProps, nextProps) => {
     return (
       prevProps.map.bgTiles === nextProps.map.bgTiles &&
-      prevProps.map.objectTiles === nextProps.map.objectTiles
+      prevProps.map.objectTiles === nextProps.map.objectTiles &&
+      prevProps.map.decorTiles === nextProps.map.decorTiles
     );
   }
 );

patches/src/components/PlayerDetails.tsx

@@ -73,11 +73,10 @@ export default function PlayerDetails({
     humanConversation &&
     playerConversation &&
     humanConversation.id === playerConversation.id;
-
+  
   const humanStatus =
     humanPlayer && humanConversation && humanConversation.participants.get(humanPlayer.id)?.status;
   const playerStatus = playerConversation && playerConversation.participants.get(playerId)?.status;
-
   const haveInvite = sameConversation && humanStatus?.kind === 'invited';
   const waitingForAccept =
     sameConversation && playerConversation.participants.get(playerId)?.status.kind === 'invited';
@@ -226,7 +225,7 @@ export default function PlayerDetails({
       <div className="desc my-6">
         <p className="leading-tight -m-4 bg-brown-700 text-base sm:text-sm">
           {!isMe && playerDescription?.description}
-          {isMe && <i>This is you!</i>}
+          {isMe && <i>This is you! You are a {playerDescription?.type}</i>}
           {!isMe && inConversationWithMe && (
             <>
               <br />

patches/src/components/StartGameButton.tsx

@@ -0,0 +1,36 @@
+import { useMutation, useQuery } from 'convex/react';
+import { api } from '../../convex/_generated/api';
+import Button from './buttons/Button';
+
+export default function StartGameButton() {
+  const stopAllowed = useQuery(api.testing.stopAllowed) ?? false;
+  const defaultWorld = useQuery(api.world.defaultWorldStatus);
+
+  const frozen = defaultWorld?.status === 'stoppedByDeveloper';
+
+  const unfreeze = useMutation(api.testing.resume);
+  const freeze = useMutation(api.testing.stop);
+
+  const flipSwitch = async () => {
+    if (frozen) {
+      console.log('Unfreezing');
+      await unfreeze();
+    } else {
+      console.log('Freezing');
+      await freeze();
+    }
+  };
+
+  return !stopAllowed ? null : (
+    <>
+      <Button
+        onClick={flipSwitch}
+        className="hidden lg:block"
+        title="When freezing a world, the agents will take some time to stop what they are doing before they become frozen. "
+        imgUrl="/assets/star.svg"
+      >
+        {frozen ? 'Unfreeze' : 'Freeze'}
+      </Button>
+    </>
+  );
+}

patches/src/components/VoteModal.tsx

@@ -1,110 +1,72 @@
 import { ServerGame } from "@/hooks/serverGame";
-import { SelectElement } from "./Player";
 import { GameId } from "../../convex/aiTown/ids";
 import Button from "./buttons/Button";
-import { useQuery } from "convex/react";
-import { api } from "../../convex/_generated/api";
 import { Id } from '../../convex/_generated/dataModel';
 import { characters } from "../../data/characters";
-import { useEffect, useState } from "react";
-import { BaseTexture, SCALE_MODES, Spritesheet } from "pixi.js";
-import { Sprite, Stage } from "@pixi/react";
+import { Stage } from "@pixi/react";
 import { Character } from "./Character";
-import { useSendInput } from "../hooks/sendInput";
-import { GameCycle } from "../../convex/aiTown/gameCycle";
-export type Vote = (id: GameId<'players'>) => void;
-
-export function VotingName(gameCycle: GameCycle) {
-  switch (gameCycle.cycleIndex) {
-    case 2:
-      return {
-        name: 'Warewolf Vote',
-        desc: 'Select a player who is warewolf',
-        type: 'WarewolfVote',
-      };
-    case 3:
-      return {
-        name: 'Player Kill',
-        desc: 'Select a player to kill',
-        type: 'PlayerKill',
-      };
-    default:
-      return {
-        name: 'Error',
-        desc: 'Select a player to vote',
-        type: 'Error'
-      };
-  }
-}
-
+import { Player } from "../../convex/aiTown/player";
+export type Vote = (id: GameId<'players'>[]) => void;
 export const VoteModal = ({
-  worldId,
   engineId,
   game,
+  playerId,
+  maxVotes=1,
+  players,
+  votes,
+  onVote,
+  compact
 }: {
-  worldId: Id<'worlds'>,
   engineId: Id<'engines'>,
   game: ServerGame,
-
+  playerId: GameId<'players'>,
+  maxVotes: number,
+  players: Player[],
+  votes: GameId<'players'>[],
+  onVote: (votes: GameId<'players'>[]) => void,
+  compact: boolean
 }) => {
-  const [hasVoted, setHasVoted] = useState<boolean>(false);
-  const vote = useSendInput(engineId, 'vote');
-  const onVote = (playerId: GameId<'players'>) => {
-    if (hasVoted) return;
-    vote({votedPlayerId: playerId, voteType: gameState});
-    setHasVoted(true);
+  const vote = (playerId: GameId<'players'>) => {
+    let newVotes = votes;
+    if (votes.includes(playerId)) {
+      newVotes = newVotes.filter((vote) => vote !== playerId);
+    } else {
+      newVotes = [...votes, playerId];
+    }
+    if (newVotes.length > maxVotes) {
+      // Removed the first vote and add the new vote
+      newVotes = newVotes.slice(1);
+    }
+    console.log(`votes: ${newVotes.map((vote) => game.playerDescriptions.get(vote)?.name).join(", ")}`)
+    onVote(newVotes);
   }
-  const gameState = "warewolf-vote"
-
-
-  const humanTokenIdentifier = useQuery(api.world.userStatus, {worldId});
-  const [spriteSheet, setSpriteSheet] = useState<Spritesheet>();
-  const character = characters[0]
-  useEffect(() => {
-    const parseSheet = async () => {
-      const sheet = new Spritesheet(
-        BaseTexture.from(character.textureUrl, {
-          scaleMode: SCALE_MODES.NEAREST,
-        }),
-        character.spritesheetData,
-      );
-      await sheet.parse();
-      setSpriteSheet(sheet);
-    };
-    void parseSheet();
-  }, []);
-  // TODO only let people select non-dead players
-  const selectablePlayers = [...game.world.players.values()].filter(
-    (player) => player.id !== humanTokenIdentifier
-  );
   return (
-    <>
-      <div className="flex flex-col items-center mb-4">
-        <h2 className="text-2xl font-bold">{VotingName(game.world.gameCycle).name}</h2>
-        <p className="text-lg">{VotingName(game.world.gameCycle).desc}</p>
-      </div>
-      {selectablePlayers.map((playable) => {
+    <div className={`flex gap-4 ${compact ? "flex-col" : "flex-wrap justify-center"}`}>
+      {players.map((playable) => {
         const playerDesc = game.playerDescriptions.get(playable.id);
         const character = characters.find((c) => c.name === playerDesc?.character);
         if (!character) return null;
+        const selected = votes.includes(playable.id);
         return (
           <>
-            <Button onClick={() => onVote(playable.id)}
-            className="lg:block border-2 border-gold"
-            title={character?.name}
+            <Button onClick={() => vote(playable.id)}
+            className="lg:block border-2 border-gold min-w-[100px]"
+            title={playerDesc?.name}
+            selected={selected}
             key={playable.id}
+            disabled={selected}
             >
-              {character?.name}
+              {playerDesc?.name}
               <Stage width={30} height={40} options={{backgroundAlpha: 0.0}}>
                 {
-                  spriteSheet && <Character textureUrl={character.textureUrl} isViewer={true} spritesheetData={character.spritesheetData} x={15} y={15} orientation={0} onClick={() => {} } />
+                  <Character textureUrl={character.textureUrl} isViewer={true} spritesheetData={character.spritesheetData} x={15} y={15} orientation={0} onClick={() => {} } />
                 }
               </Stage>
             </Button>
           </>
         )
       })}
-    </>
+    </div>
   )
   
 

patches/src/components/buttons/Button.tsx

@@ -8,12 +8,16 @@ export default function Button(props: {
   onClick?: MouseEventHandler;
   title?: string;
   children: ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
 }) {
   return (
     <a
       className={clsx(
         'button text-white shadow-solid text-xl pointer-events-auto',
         props.className,
+        props.selected && 'button-selected',
+        props.disabled && 'disabled',
       )}
       href={props.href}
       title={props.title}

patches/src/components/buttons/InteractButton.tsx

@@ -17,7 +17,6 @@ export default function InteractButton() {
   const game = useServerGame(worldId);
   const oauth = JSON.parse(localStorage.getItem('oauth'));
   const oauthToken = oauth ? oauth.userInfo.fullname : undefined;
-  console.log(oauthToken)
   const humanTokenIdentifier = useQuery(api.world.userStatus, worldId ? { worldId, oauthToken } : 'skip');
   const userPlayerId =
     game && [...game.world.players.values()].find((p) => p.human === humanTokenIdentifier)?.id;
@@ -47,7 +46,6 @@ export default function InteractButton() {
     [convex, join, oauthToken],
   );
 
-
   const joinOrLeaveGame = () => {
     if (
       !worldId ||

patches/src/index.css

@@ -40,8 +40,7 @@
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb)))
-    rgb(var(--background-start-rgb));
+  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
 }
 
 .game-background {
@@ -148,6 +147,10 @@ body {
   transform: translateY(-15%);
 }
 
+.button-selected {
+  border-image-source: url(../assets/ui/button_pressed.svg);
+}
+
 @media (max-width: 640px) {
   .button {
     height: 40px;
@@ -155,8 +158,8 @@ body {
     font-size: 16px;
   }
 
-  .button > div,
-  .button > span {
+  .button>div,
+  .button>span {
     vertical-align: top;
     line-height: 1;
   }
@@ -182,4 +185,4 @@ p[contenteditable='true']:empty::before {
 
 .shape-top-left-corner {
   clip-path: polygon(0 0, 100% 0, 0 100%);
-}
+}