From e304fcbf6ff1c712eff7da54023071a1f8dc0c68 Mon Sep 17 00:00:00 2001 From: Dustlint Date: Tue, 17 Mar 2026 15:47:59 +0100 Subject: [PATCH] better grid --- .../food-pantry/food-pantry.component.html | 35 +++++++++++++------ .../food-pantry/food-pantry.component.ts | 3 +- src/app/components/grid/grid.component.html | 8 +++-- src/app/components/grid/grid.component.ts | 8 +++-- .../inventory/inventory.component.html | 18 ++++++---- .../inventory/inventory.component.ts | 3 +- .../pages/dashboard/dashboard.component.html | 2 +- .../interactions/interactions.component.html | 20 ++++++----- .../interactions/interactions.component.ts | 16 ++++++--- src/styles.scss | 20 +++++++++++ 10 files changed, 95 insertions(+), 38 deletions(-) diff --git a/src/app/components/food-pantry/food-pantry.component.html b/src/app/components/food-pantry/food-pantry.component.html index 3a9c836..94ac1c4 100644 --- a/src/app/components/food-pantry/food-pantry.component.html +++ b/src/app/components/food-pantry/food-pantry.component.html @@ -1,12 +1,27 @@ -
-
-
-

food-pantry works!

- X +@if (isVisible()) { +
+
+
+

food-pantry works!

+ X +
+ + +
+ {{ food.name }} +
+ +
-
-
+} diff --git a/src/app/components/food-pantry/food-pantry.component.ts b/src/app/components/food-pantry/food-pantry.component.ts index 16a611e..64d122e 100644 --- a/src/app/components/food-pantry/food-pantry.component.ts +++ b/src/app/components/food-pantry/food-pantry.component.ts @@ -1,4 +1,4 @@ -import { Component, inject, output, OutputEmitterRef, Signal } from '@angular/core'; +import { Component, inject, input, InputSignal, output, OutputEmitterRef, Signal } from '@angular/core'; import { ButtonComponent } from "../ui-elements/button/button.component"; import { Food } from '../../types/food'; import { FoodStore } from '../../api/food.store'; @@ -10,6 +10,7 @@ import { GridComponent } from "../grid/grid.component"; templateUrl: './food-pantry.component.html', }) export class FoodPantryComponent { + public readonly isVisible: InputSignal = input.required(); public readonly onClose: OutputEmitterRef = output(); public readonly onFoodChosen: OutputEmitterRef = output(); diff --git a/src/app/components/grid/grid.component.html b/src/app/components/grid/grid.component.html index 7105d86..6503023 100644 --- a/src/app/components/grid/grid.component.html +++ b/src/app/components/grid/grid.component.html @@ -2,11 +2,15 @@ @for (item of gridItems(); track $index) {
+ > + +
}
diff --git a/src/app/components/grid/grid.component.ts b/src/app/components/grid/grid.component.ts index 68f0f17..0c28686 100644 --- a/src/app/components/grid/grid.component.ts +++ b/src/app/components/grid/grid.component.ts @@ -1,13 +1,15 @@ -import { NgStyle } from '@angular/common'; -import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core'; +import { NgStyle, NgTemplateOutlet } from '@angular/common'; +import { Component, input, InputSignal, output, OutputEmitterRef, TemplateRef } from '@angular/core'; @Component({ selector: 'ff-grid', - imports: [NgStyle], + imports: [NgStyle, NgTemplateOutlet], templateUrl: './grid.component.html', }) export class GridComponent { public readonly gridItems: InputSignal = input.required(); + public readonly template: InputSignal> = input.required(); + public readonly attr: InputSignal = input(''); public readonly size: InputSignal = input(5); public readonly onSelect: OutputEmitterRef = output(); diff --git a/src/app/components/inventory/inventory.component.html b/src/app/components/inventory/inventory.component.html index 6e21612..2f31861 100644 --- a/src/app/components/inventory/inventory.component.html +++ b/src/app/components/inventory/inventory.component.html @@ -1,8 +1,14 @@ -
-
-
-

inventory works!

- X +@if (isVisible()) { +
+
+
+

inventory works!

+ X +
-
+} diff --git a/src/app/components/inventory/inventory.component.ts b/src/app/components/inventory/inventory.component.ts index 6a44e1a..667636f 100644 --- a/src/app/components/inventory/inventory.component.ts +++ b/src/app/components/inventory/inventory.component.ts @@ -1,4 +1,4 @@ -import { Component, output, OutputEmitterRef } from '@angular/core'; +import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core'; import { ButtonComponent } from "../ui-elements/button/button.component"; @Component({ @@ -7,6 +7,7 @@ import { ButtonComponent } from "../ui-elements/button/button.component"; templateUrl: './inventory.component.html', }) export class InventoryComponent { + public readonly isVisible: InputSignal = input.required(); public readonly onClose: OutputEmitterRef = output(); public readonly onItemChosen: OutputEmitterRef = output(); diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 242bcca..c159e59 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -8,7 +8,7 @@ [routerLink]="['/' + ERouteKey.Interactions + '/' + chibi.id]" class="w-full flex flex-row gap-4 bg-primary-200 p-4 rounded-lg cursor-pointer" > - +
- @if (shownMenu == EInteractionMenuState.Pantry) { - - } - @if (shownMenu == EInteractionMenuState.Inventory) { - - } + + + +
{{ lang.game.actions.giveItem diff --git a/src/app/pages/interactions/interactions.component.ts b/src/app/pages/interactions/interactions.component.ts index 7558df2..30fabd7 100644 --- a/src/app/pages/interactions/interactions.component.ts +++ b/src/app/pages/interactions/interactions.component.ts @@ -1,4 +1,4 @@ -import { Component, computed, effect, inject, input, InputSignal, signal, Signal, WritableSignal } from '@angular/core'; +import { Component, computed, effect, inject, input, InputSignal, OnDestroy, signal, Signal, WritableSignal } from '@angular/core'; import { HeaderComponent } from "../../components/ui-elements/header/header.component"; import { ERouteKey } from '../../types/route-key'; import { Chibi, ChibiId } from '../../types/chibi/chibi'; @@ -12,7 +12,7 @@ import { IBrain } from '../../logic/chibi-behaviour/brain'; import { BRAIN_MAP } from '../../logic/chibi-behaviour/brain-map'; import { TranslateableComponent } from '../../components/translateable.component'; import { Food } from '../../types/food'; -import { interval } from 'rxjs'; +import { interval, Subscribable, Subscription } from 'rxjs'; import { RandomService } from '../../logic/random.service'; import { ChibiInteraction } from '../../logic/chibi-behaviour/brains/aperio.brain'; @@ -29,7 +29,7 @@ const THINKING_INTERVAL: number = 2000; imports: [HeaderComponent, InteractionCanvasComponent, FoodPantryComponent, InventoryComponent, ButtonComponent], templateUrl: './interactions.component.html', }) -export class InteractionsComponent extends TranslateableComponent { +export class InteractionsComponent extends TranslateableComponent implements OnDestroy { public readonly chibiId: InputSignal = input.required(); private readonly chibiStore: ChibiStore = inject(ChibiStore); @@ -46,6 +46,8 @@ export class InteractionsComponent extends TranslateableComponent { private brain!: IBrain; + private sub: Subscription = new Subscription(); + constructor() { super(); effect(() => { @@ -54,9 +56,13 @@ export class InteractionsComponent extends TranslateableComponent { this.brain.init(this.chibi(), this.randomService); } }) - interval(THINKING_INTERVAL).subscribe(() => { + this.sub.add(interval(THINKING_INTERVAL).subscribe(() => { this.brain.exist(); - }) + })); + } + + ngOnDestroy() { + this.sub.unsubscribe(); } public interact(interaction: EChibiInteraction, item?: Food): void { diff --git a/src/styles.scss b/src/styles.scss index e92f17f..35a1476 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -26,4 +26,24 @@ --color-secondary-900: #651e71; --color-secondary-950: #41074b; + + --animate-slide-in: slide-in 0.3s ease-in-out; + @keyframes slide-in { + from { + transform: translateX(-100%); + } + to { + transform: translateX(0); + } + } + + --animate-slide-out: slide-out 0.3s ease-in-out; + @keyframes slide-out { + from { + transform: translateX(0); + } + to { + transform: translateX(-100%); + } + } }