chore: add all actions

taiga-family · Aug 28, 2024 · 9b1ad95 · 9b1ad95
1 parent 204bbdb
commit 9b1ad95
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git a/...a-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.ts b/...a-lumbermill/src/dashboards/space-zoo/components/administrator/administrator.component.ts
@@ -24,6 +24,8 @@ import {
 } from '@taiga-ui/kit';
 import {TuiCardLarge, TuiCell, TuiHeader} from '@taiga-ui/layout';
 
+export const actions = ['doctor', 'play', 'clean', 'feed'];
+
 export const animals = [
     {
         src: './nft/1.jpg',

diff --git a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.html b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.html
@@ -47,9 +47,10 @@ <h3 tuiTitle>
             </h2>
         </header>
         <div>
-            <h3 class="about">From: {{ animal.from }}</h3>
-            <h4 class="about">Description: {{ animal.about }}</h4>
+            <p class="about">From: {{ animal.from }}</p>
+            <p class="about">Description: {{ animal.about }}</p>
         </div>
+        <div></div>
     </div>
     <div
         tuiAppearance="whiteblock"
@@ -65,8 +66,9 @@ <h4 class="about">Description: {{ animal.about }}</h4>
             </h2>
         </header>
         <div class="list">
-            @for (act of animal.action; track $index) {
+            @for (act of actions; track $index) {
                 <div
+                    [class.disable]="!inArray(act)"
                     [style.display]="'flex'"
                     [style.gap]="'1rem'"
                 >
@@ -76,14 +78,11 @@ <h4 class="about">Description: {{ animal.about }}</h4>
                         class="card"
                         [style.margin-bottom]="'auto'"
                         [style.margin-top]="'auto'"
-                        (click)="states[$index] = !states[$index]"
+                        (click)="inArray(act) ? (states[$index] = !states[$index]) : ''"
                     >
-                        <h3
-                            tuiTitle="m"
-                            class="tui-space_top-0 tui-space_bottom-0"
-                        >
+                        <p class="tui-space_top-0 tui-space_bottom-0 action-text">
                             {{ act }}
-                        </h3>
+                        </p>
                     </button>
                     @if (states[$index]) {
                         <label

diff --git a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.less b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.less
@@ -15,7 +15,9 @@
 }
 
 .tags {
+    display: flex;
     margin-top: 0.3rem;
+    gap: 0.3rem;
 }
 
 .main {
@@ -31,7 +33,7 @@
 
 .about {
     margin: 0.3rem 0;
-    font-size: 1.4rem;
+    font-size: 1.3rem;
     font-weight: 500;
 }
 
@@ -47,4 +49,15 @@
 .list {
     display: flex;
     flex-direction: column;
+    gap: 0.4rem;
+}
+
+.disable {
+    color: var(--tui-text-tertiary);
+}
+
+.action-text {
+    font-size: 1.3rem;
+    font-weight: 600;
+    text-align: left;
 }
diff --git a/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.ts b/apps/taiga-lumbermill/src/dashboards/space-zoo/components/animal/animal.component.ts
@@ -7,7 +7,7 @@ import {TuiAvatar, TuiBadge, TuiProgress} from '@taiga-ui/kit';
 import {TuiCardLarge, TuiHeader} from '@taiga-ui/layout';
 import {map, startWith, takeWhile, timer} from 'rxjs';
 
-import {animals} from '../administrator/administrator.component';
+import {actions, animals} from '../administrator/administrator.component';
 
 @Component({
     standalone: true,
@@ -31,6 +31,7 @@ export class AnimalComponent {
     private readonly activatedRoute = inject(ActivatedRoute);
     protected id = toSignal(this.activatedRoute.params)()?.['id'];
     protected animals = animals;
+    protected actions = actions;
     protected readonly max = 100;
     protected readonly value$ = timer(140, 80).pipe(
         map((i) => i + 30),
@@ -39,4 +40,8 @@ export class AnimalComponent {
     );
 
     protected states = animals[this.id].action.map((_) => false);
+
+    protected inArray(value: string): boolean {
+        return this.animals[this.id].action.includes(value);
+    }
 }