Merge pull request #35 from arongida/development

UI improvements, fix duplicate fight bug
arongida · Jun 21, 2024 · 7f8d7da · 7f8d7da
2 parents 1019735 + d811cb2
commit 7f8d7da
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 98 deletions.
diff --git a/src/app/draft/components/character-sheet/character-avatar/character-avatar.component.html b/src/app/draft/components/character-sheet/character-avatar/character-avatar.component.html
@@ -42,8 +42,10 @@ <h4 class="text-center">Level up for gold:</h4>
           mat-raised-button
           color="primary"
           (click)="draftService.sendMessage('buy_xp', {})"
+          (mouseenter)="switchHoverExperience()"
+          (mouseleave)="switchHoverExperience()"
         >
-          XP<mat-icon>keyboard_arrow_up</mat-icon>
+          XP<mat-icon [ngClass]="{'animate-bounce': hoverExperience}">keyboard_arrow_up</mat-icon>
         </button>
       </div>
     }

diff --git a/src/app/draft/components/character-sheet/character-avatar/character-avatar.component.ts b/src/app/draft/components/character-sheet/character-avatar/character-avatar.component.ts
@@ -5,15 +5,24 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatButton } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { NgClass } from '@angular/common';
 
 @Component({
   selector: 'app-character-avatar',
   standalone: true,
-  imports: [MatProgressBarModule, MatTooltipModule, MatButton, MatIconModule],
+  imports: [
+    MatProgressBarModule,
+    MatTooltipModule,
+    MatButton,
+    MatIconModule,
+    NgClass,
+  ],
   templateUrl: './character-avatar.component.html',
   styleUrl: './character-avatar.component.css',
 })
 export class CharacterAvatarComponent {
+  hoverExperience = false;
+
   constructor(public draftService: DraftService) {
     this.player = {} as Player;
   }
@@ -40,4 +49,8 @@ export class CharacterAvatarComponent {
       'https://chungus-battles.b-cdn.net/chungus-battles-assets/Item_ID_0_Empty.png';
     return this.showExperience ? empty : avatar;
   }
+
+  switchHoverExperience() {
+    this.hoverExperience = !this.hoverExperience;
+  }
 }
diff --git a/src/app/draft/components/draft-menu/draft-menu.component.html b/src/app/draft/components/draft-menu/draft-menu.component.html
@@ -1,5 +1,9 @@
 <div class="fixed-button">
-  <button mat-raised-button color="warn" (click)="startFight()">
+  <button [disabled]="loading" mat-raised-button color="warn" (click)="startFight()">
+    @if (loading) {
+    Loading...
+    } @else {
     Ready to Chungus!
+    }
   </button>
-</div>
+</div>
diff --git a/src/app/draft/components/draft-menu/draft-menu.component.ts b/src/app/draft/components/draft-menu/draft-menu.component.ts
@@ -2,23 +2,28 @@ import { Component } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { DraftService } from '../../services/draft.service';
 import { FightService } from '../../../fight/services/fight.service';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 @Component({
   selector: 'app-draft-menu',
   standalone: true,
-  imports: [MatButton],
+  imports: [MatButton, MatProgressSpinnerModule],
   templateUrl: './draft-menu.component.html',
   styleUrl: './draft-menu.component.css',
 })
 export class DraftMenuComponent {
+  loading = false;
   constructor(
     private draftService: DraftService,
-    private fightService: FightService,
+    private fightService: FightService
   ) {}
 
-  public startFight() {
+  async startFight() {
+    if (this.loading) return;
+    this.loading = true;
     const playerId = localStorage.getItem('playerId');
     if (!playerId) return;
-    this.draftService.leave(false);
-    this.fightService.joinOrCreate(parseInt(playerId));
+    await this.draftService.leave(false);
+    await this.fightService.joinOrCreate(parseInt(playerId));
+    this.loading = false;
   }
 }
diff --git a/src/app/draft/components/shop/shop.component.css b/src/app/draft/components/shop/shop.component.css
@@ -1,9 +1,3 @@
 ::ng-deep .item-tooltip {
   white-space: pre-line;
 }
-
-#refresh-button {
-  position: fixed;
-  left: 50%;
-  transform: translate(-50%);
-}
diff --git a/src/app/draft/components/shop/shop.component.html b/src/app/draft/components/shop/shop.component.html
@@ -1,90 +1,66 @@
-<div
-  id="shop"
-  class="grid-cols-3 grid-rows-2 gap-1 grid max-w-fit bg-cover bg-center p-4 border-4 border-black"
-  [style.background-image]="
+<div id="shop" class="relative">
+  <div class="grid-cols-3 grid-rows-2 gap-1 grid max-w-fit bg-cover bg-center p-4 border-4 border-black"
+    [style.background-image]="
     'url(https://chungus-battles.b-cdn.net/chungus-battles-assets/Chungus_table_01.png)'
-  "
->
-  @for (item of shop; track $index) {
-    <mat-card
-      [style.background-image]="'url(' + getItemImage(item) + ')'"
-      id="item-{{ $index }}"
+  ">
+    @for (item of shop; track $index) {
+    <mat-card [style.background-image]="'url(' + getItemImage(item) + ')'" id="item-{{ $index }}"
       class="w-60 h-80 items-center rounded-lg shadow-lg transform transition-transform scale-75 hover:scale-90"
-      (mouseenter)="onMouseEnterItem(item)"
-      (mouseleave)="onMouseLeaveItem(item)"
-    >
+      (mouseenter)="onMouseEnterItem(item)" (mouseleave)="onMouseLeaveItem(item)">
       <mat-card-header class="mb-5 text-center mt-2">
-        <mat-card-title>{{ item.name }}</mat-card-title>
+        <mat-card-title>{{ item.name | titlecase }}</mat-card-title>
       </mat-card-header>
 
       @if (item.showDetails) {
-        <mat-card-content
-          class="flex flex-col flex-1 text-center text-white p-1 rounded-b-lg content-evenly"
-        >
-          <div class="mb-2">
-            <p class="font-semibold">
-              Price: <span class="text-yellow-300">{{ item.price }} 🪙</span>
-            </p>
-          </div>
-          <div class="grid grid-cols-2 gap-1 text-xs">
-            <p>
-              Attack:
-              <span class="text-red-500"
-                >{{ item.affectedStats.attack }} ⚔️</span
-              >
-            </p>
-            <p>
-              A.speed:
-              <span class="text-blue-500"
-                >{{ item.affectedStats.attackSpeed }} ⏩</span
-              >
-            </p>
-            <p>
-              Defense:
-              <span class="text-green-500"
-                >{{ item.affectedStats.defense }} 🛡️</span
-              >
-            </p>
-            <p>
-              Health:
-              <span class="text-pink-500">{{ item.affectedStats.hp }} ❤️</span>
-            </p>
-          </div>
-          <div class="ml-2 mr-2">
-            <p class="font-thin text-sm">{{ item.description }}</p>
-            @for (tag of item.tags; track $index) {
-              <mat-chip class="mr-1 py-1">{{ tag }}</mat-chip>
-            }
-          </div>
-        </mat-card-content>
-        <mat-card-footer class="flex justify-center">
-          <div class="mt-auto">
-            <button
-              id="buy-{{ $index }}"
-              mat-raised-button
-              color="warn"
-              (click)="draftService.sendMessage('buy', { itemId: item.itemId })"
-            >
-              Buy
-            </button>
-          </div>
-        </mat-card-footer>
+      <mat-card-content class="flex flex-col flex-1 text-center text-white p-1 rounded-b-lg content-evenly">
+        <div class="mb-2">
+          <p class="font-semibold">
+            Price: <span class="text-yellow-300">{{ item.price }} 🪙</span>
+          </p>
+        </div>
+        <div class="grid grid-cols-2 gap-1 text-xs">
+          <p>
+            Attack:
+            <span class="text-red-500">{{ item.affectedStats.attack }} ⚔️</span>
+          </p>
+          <p>
+            A.speed:
+            <span class="text-blue-500">{{ item.affectedStats.attackSpeed }} ⏩</span>
+          </p>
+          <p>
+            Defense:
+            <span class="text-green-500">{{ item.affectedStats.defense }} 🛡️</span>
+          </p>
+          <p>
+            Health:
+            <span class="text-pink-500">{{ item.affectedStats.hp }} ❤️</span>
+          </p>
+        </div>
+        <div class="ml-2 mr-2">
+          <p class="font-thin text-sm">{{ item.description }}</p>
+          @for (tag of item.tags; track $index) {
+          <mat-chip class="mr-1 py-1">{{ tag }}</mat-chip>
+          }
+        </div>
+      </mat-card-content>
+      <mat-card-footer class="flex justify-center">
+        <div class="mt-auto">
+          <button id="buy-{{ $index }}" mat-raised-button color="warn"
+            (click)="draftService.sendMessage('buy', { itemId: item.itemId })">
+            Buy
+          </button>
+        </div>
+      </mat-card-footer>
       }
     </mat-card>
-  }
-  <div class="min-w-full flex-1 justify-center">
-    <button
-      id="refresh-button"
-      #tooltip="matTooltip"
-      matTooltip="2 gold"
-      matTooltipHideDelay="1000"
-      mat-raised-button
-      matTooltipPosition="right"
-      color="primary"
-      class="fixed bottom-0 m-7 p-7"
-      (click)="draftService.sendMessage('refresh_shop', {})"
-    >
-      Refresh shop<mat-icon>refresh</mat-icon>
+    }
+  </div>
+  <div class="absolute top-0 right-0 flex-row-reverse">
+    <button id="refresh-button" #tooltip="matTooltip" matTooltip="2 gold" mat-stroked-button
+      matTooltipPosition="right" color="text-white" class="m-2 p-2 flex-1"
+      (click)="draftService.sendMessage('refresh_shop', {})" (mouseenter)="hoverRefreshButton()"
+      (mouseleave)="leaveRefreshButton()">
+      Refresh shop<mat-icon [ngClass]="{'animate-spin': hoverRefresh}">refresh</mat-icon>
     </button>
   </div>
-</div>
+</div>
diff --git a/src/app/draft/components/shop/shop.component.ts b/src/app/draft/components/shop/shop.component.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { Item } from '../../../models/colyseus-schema/ItemSchema';
 import { MatCardModule } from '@angular/material/card';
 import { DraftService } from '../../services/draft.service';
-import { NgFor } from '@angular/common';
+import { TitleCasePipe, NgClass } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatChip } from '@angular/material/chips';
@@ -12,8 +12,9 @@ import { MatIconModule } from '@angular/material/icon';
   selector: 'app-shop',
   standalone: true,
   imports: [
+    NgClass,
     MatCardModule,
-    NgFor,
+    TitleCasePipe,
     MatButtonModule,
     MatIconModule,
     MatTooltipModule,
@@ -23,6 +24,8 @@ import { MatIconModule } from '@angular/material/icon';
   styleUrl: './shop.component.css',
 })
 export class ShopComponent {
+  hoverRefresh = false;
+
   constructor(public draftService: DraftService) {
     this.shop = [] as Item[];
   }
@@ -47,4 +50,12 @@ export class ShopComponent {
       ? item.image
       : 'https://chungus-battles.b-cdn.net/chungus-battles-assets/Item_ID_0_Empty.png';
   }
+
+  hoverRefreshButton() {
+    this.hoverRefresh = true;
+  }
+
+  leaveRefreshButton() {
+    this.hoverRefresh = false;
+  }
 }
diff --git a/src/app/join-form/join-form.component.ts b/src/app/join-form/join-form.component.ts
@@ -8,7 +8,6 @@ import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { join } from 'node:path/posix';
 
 @Component({
   selector: 'app-join-form',