visitor list

src/app/components/interaction-menus/food-pantry/food-pantry.component.ts

@@ -1,8 +1,8 @@
 import { Component, inject, input, InputSignal, output, OutputEmitterRef, Signal } from '@angular/core';
-import { ButtonComponent } from "../ui-elements/button/button.component";
+import { ButtonComponent } from "../../ui-elements/button/button.component";
-import { Food } from '../../types/food';
+import { Food } from '../../../types/food';
-import { FoodStore } from '../../api/food.store';
+import { FoodStore } from '../../../api/food.store';
-import { GridComponent } from "../grid/grid.component";
+import { GridComponent } from "../../grid/grid.component";
 
 @Component({
   selector: 'ff-food-pantry',

src/app/components/interaction-menus/inventory/inventory.component.ts

@@ -1,5 +1,5 @@
 import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core';
-import { ButtonComponent } from "../ui-elements/button/button.component";
+import { ButtonComponent } from "../../ui-elements/button/button.component";
 
 @Component({
   selector: 'ff-inventory',

src/app/components/interaction-menus/visitor-list/visitor-list.component.html

@@ -0,0 +1,14 @@
+@if (isVisible()) {
+  <div
+    class="h-full w-full absolute bg-violet-300"
+    animate.enter="animate-slide-in"
+    animate.leave="animate-slide-out"
+  >
+    <div class="py-4 container mx-auto">
+      <div class="flex flex-row justify-between">
+        <p>visitor List works!</p>
+        <ff-button (click)="onClose.emit()">X</ff-button>
+      </div>
+    </div>
+  </div>
+}

src/app/components/interaction-menus/visitor-list/visitor-list.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { VisitorListComponent } from './visitor-list.component';
+
+describe('InventoryComponent', () => {
+  let component: VisitorListComponent;
+  let fixture: ComponentFixture<VisitorListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VisitorListComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(VisitorListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/interaction-menus/visitor-list/visitor-list.component.ts

@@ -0,0 +1,17 @@
+import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core';
+import { ButtonComponent } from "../../ui-elements/button/button.component";
+import { Chibi } from '../../../types/chibi/chibi';
+
+@Component({
+  selector: 'ff-visitor-list',
+  imports: [ButtonComponent],
+  templateUrl: './visitor-list.component.html',
+})
+export class VisitorListComponent {
+  public readonly isVisible: InputSignal<boolean> = input.required();
+  public readonly host: InputSignal<Chibi> = input.required();
+  public readonly visitors: InputSignal<Chibi[]> = input.required();
+  public readonly onClose: OutputEmitterRef<void> = output<void>();
+  public readonly onItemChosen: OutputEmitterRef<any> = output<any>();
+
+}

src/app/pages/interactions/interactions.component.html

@@ -25,6 +25,13 @@
       (onClose)="closeMenu()"
     ></ff-inventory>
 
+    <ff-visitor-list
+      [isVisible]="shownMenu == EInteractionMenuState.VisitorList"
+      (onClose)="closeMenu()"
+      [host]="chibi()"
+      [visitors]="[]"
+    ></ff-visitor-list>
+
     <div class="flex flex-row gap-5 py-4 container mx-auto">
       <ff-button (click)="openInventory()">{{
         lang.game.actions.giveItem
@@ -32,9 +39,18 @@
       <ff-button (click)="openFoodPantry()">{{
         lang.game.actions.feed
       }}</ff-button>
+      <ff-button (click)="openVisitorList()">{{
+        lang.game.actions.inviteVisitor
+      }}</ff-button>
+      @if (isAwake()) {
         <ff-button (click)="interact(EChibiInteraction.WakeUp)">{{
           lang.game.actions.wakeUp
         }}</ff-button>
+      } @else {
+        <ff-button (click)="interact(EChibiInteraction.PutToSleep)">{{
+          lang.game.actions.putToSleep
+        }}</ff-button>
+      }
     </div>
   </div>
 </div>

src/app/pages/interactions/interactions.component.ts

@@ -4,8 +4,8 @@ import { ERouteKey } from '../../types/route-key';
 import { Chibi, ChibiId } from '../../types/chibi/chibi';
 import { InteractionCanvasComponent } from "../../components/interaction-canvas/interaction-canvas.component";
 import { ChibiStore } from '../../api/chibi.store';
-import { FoodPantryComponent } from "../../components/food-pantry/food-pantry.component";
+import { FoodPantryComponent } from "../../components/interaction-menus/food-pantry/food-pantry.component";
-import { InventoryComponent } from "../../components/inventory/inventory.component";
+import { InventoryComponent } from "../../components/interaction-menus/inventory/inventory.component";
 import { ButtonComponent } from "../../components/ui-elements/button/button.component";
 import { EChibiInteraction } from '../../types/chibi/chibi-interaction';
 import { IBrain } from '../../logic/chibi-behaviour/brain';
@@ -15,18 +15,22 @@ import { Food } from '../../types/food';
 import { interval, Subscribable, Subscription } from 'rxjs';
 import { RandomService } from '../../logic/random.service';
 import { ChibiInteraction } from '../../logic/chibi-behaviour/brains/aperio.brain';
+import { isState, STATES } from '../../types/chibi/chibi-state';
+import { EChibiStateName } from '../../types/chibi/chibi-state-name';
+import { VisitorListComponent } from "../../components/interaction-menus/visitor-list/visitor-list.component";
 
 enum EInteractionMenuState {
   Neutral,
   Pantry,
-  Inventory
+  Inventory,
+  VisitorList
 }
 
 const THINKING_INTERVAL: number = 2000;
 
 @Component({
   selector: 'ff-interactions',
-  imports: [HeaderComponent, InteractionCanvasComponent, FoodPantryComponent, InventoryComponent, ButtonComponent],
+  imports: [HeaderComponent, InteractionCanvasComponent, FoodPantryComponent, InventoryComponent, ButtonComponent, VisitorListComponent],
   templateUrl: './interactions.component.html',
 })
 export class InteractionsComponent extends TranslateableComponent implements OnDestroy {
@@ -65,6 +69,10 @@ export class InteractionsComponent extends TranslateableComponent implements OnD
     this.sub.unsubscribe();
   }
 
+  public isAwake(): boolean {
+    return isState(STATES[this.chibi().state], EChibiStateName.Awake);
+  }
+
   public interact(interaction: EChibiInteraction, item?: Food): void {
     console.log(`${interaction} ${this.chibi().name} and item ${item}`);
     this.brain.resolveInteraction({ name: interaction, payload: item } as ChibiInteraction<Food>);
@@ -78,6 +86,10 @@ export class InteractionsComponent extends TranslateableComponent implements OnD
     this.interactionMenuState.set(EInteractionMenuState.Inventory);
   }
 
+  public openVisitorList(): void {
+    this.interactionMenuState.set(EInteractionMenuState.VisitorList);
+  }
+
   public closeMenu(): void {
     this.interactionMenuState.set(EInteractionMenuState.Neutral);
   }

src/app/types/translations/english.ts

@@ -16,8 +16,10 @@ export const ENG_TRANSLATIONS: Translation = {
         inventory: {},
         actions: {
             wakeUp: 'Wake up!',
+            putToSleep: 'Put to Sleep',
             feed: 'Feed',
-            giveItem: 'Give Item'
+            giveItem: 'Give Item',
+            inviteVisitor: 'Invite Friend'
         }
     }
 }

src/app/types/translations/translation.ts

@@ -18,8 +18,10 @@ export type Translation = {
         inventory: {},
         actions: {
             wakeUp: string;
+            putToSleep: string;
             feed: string;
             giveItem: string;
+            inviteVisitor: string;
         }
     }
 }