Merge pull request #37 from arongida/development

refresh talent, ui improvements
arongida · Jun 23, 2024 · 39d17b4 · 39d17b4
2 parents 9baee41 + 67abff8
commit 39d17b4
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 55 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
@@ -1,17 +1,11 @@
 <!-- Avatar Section -->
-<div
-  id="avatar-{{ player.playerId }}"
+<div id="avatar-{{ player.playerId }}"
   class="bg-cover bg-center w-48 h-64 flex flex-col-reverse items-center bg-gray-800 p-4 shadow-lg"
-  style="background-image: url('{{ getAvatarImage() }}');"
-  (mouseenter)="onAvatarMouseEnter()"
-  (mouseleave)="onAvatarMouseLeave()"
->
+  style="background-image: url('{{ getAvatarImage() }}');" (mouseenter)="onAvatarMouseEnter()"
+  (mouseleave)="onAvatarMouseLeave()">
   <div class="relative w-full rounded-md">
     <!-- Floating Damage Numbers Container -->
-    <div
-      id="damage-numbers-{{ player.playerId }}"
-      class="relative pointer-events-none"
-    ></div>
+    <div id="damage-numbers-{{ player.playerId }}" class="relative pointer-events-none"></div>
 
     <div class="w-full text-center text-white bg-black bg-opacity-40 py-1">
       {{ player ? player.name : 'Avatar Name' }} <br />
@@ -20,35 +14,22 @@
   </div>
   <div class="w-full text-white mt-4">
     @if (!combat && showExperience) {
-      <h4 class="text-center">Level up for gold:</h4>
-      <div
-        class="flex flex-row justify-between p-1 hover:bg-slate-700 rounded-sm"
-      >
-        <label for="xp" class="">XP:</label>
-        <label for="xp">({{ player.xp }} / {{ player.maxXp }})</label>
-      </div>
-      <mat-progress-bar
-        id="xp"
-        mode="determinate"
-        value="{{ (player.xp / player.maxXp) * 100 }}"
-      ></mat-progress-bar>
-      <div class="flex justify-center mt-2">
-        <button
-          #tooltip="matTooltip"
-          matTooltip="4 gold = 4 xp"
-          matTooltipHideDelay="1000"
-          matTooltipPosition="right"
-          class="m-4"
-          mat-raised-button
-          color="primary"
-          (click)="draftService.sendMessage('buy_xp', {})"
-          (mouseenter)="switchHoverExperience()"
-          (mouseleave)="switchHoverExperience()"
-        >
-          XP<mat-icon [ngClass]="{'animate-bounce': hoverExperience}">keyboard_arrow_up</mat-icon>
+    <h4 class="text-center">Level up for gold:</h4>
+    <div class="flex flex-row justify-between p-1 hover:bg-slate-700 rounded-sm">
+      <label for="xp" class="">XP:</label>
+      <label for="xp">({{ player.xp }} / {{ player.maxXp }})</label>
+    </div>
+    <mat-progress-bar id="xp" mode="determinate" value="{{ (player.xp / player.maxXp) * 100 }}"></mat-progress-bar>
+    <div class="flex justify-center mt-2">
+      @if (player.level < 6) { <button #tooltip="matTooltip" matTooltip="4 gold = 4 xp" matTooltipHideDelay="1000"
+        matTooltipPosition="right" class="m-4" mat-raised-button color="primary"
+        (click)="draftService.sendMessage('buy_xp', {})" (mouseenter)="switchHoverExperience()"
+        (mouseleave)="switchHoverExperience()">
+        XP<mat-icon [ngClass]="{'animate-bounce': hoverExperience}">keyboard_arrow_up</mat-icon>
         </button>
-      </div>
+        }
+    </div>
     }
   </div>
   <div class="absolute" id="attack-{{ player.playerId }}"></div>
-</div>
+</div>
diff --git a/src/app/draft/components/draft-room/draft-room.component.html b/src/app/draft/components/draft-room/draft-room.component.html
@@ -8,7 +8,7 @@
     </div>
 
     <div id="shop" class="items-center flex justify-center p-1">
-      <app-shop [shop]="shop!"></app-shop>
+      <app-shop [shop]="shop ?? []" [playerLevel]="player?.level ?? 1" [playerGold]="player?.gold ?? 0"></app-shop>
     </div>
 
     <div id="talents" class="justify-center content-center text-center p-5">

diff --git a/src/app/draft/components/draft-room/draft-room.component.ts b/src/app/draft/components/draft-room/draft-room.component.ts
@@ -32,7 +32,6 @@ export class DraftRoomComponent implements OnInit {
 
   constructor(
     public draftService: DraftService,
-    private router: Router,
   ) {
     this.player = new Player();
     this.shop = [] as Item[];

diff --git a/src/app/draft/components/shop/shop.component.html b/src/app/draft/components/shop/shop.component.html
@@ -45,7 +45,7 @@
       </mat-card-content>
       <mat-card-footer class="flex justify-center">
         <div class="mt-auto">
-          <button id="buy-{{ $index }}" mat-raised-button color="warn"
+          <button [disabled]="playerGold < item.price" id="buy-{{ $index }}" mat-raised-button color="warn"
             (click)="draftService.sendMessage('buy', { itemId: item.itemId })">
             Buy
           </button>
@@ -56,11 +56,17 @@
     }
   </div>
   <div class="absolute top-0 right-0 flex-row-reverse">
-    <button id="refresh-button" #tooltip="matTooltip" matTooltip="2 gold" mat-stroked-button
+    <button [disabled]="playerGold < 2" #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>
+      (click)="draftService.sendMessage('refresh_shop', {})" (mouseenter)="switchShopRefreshAnimate()"
+      (mouseleave)="switchShopRefreshAnimate()">
+      Refresh shop<mat-icon [ngClass]="{'animate-spin': hoverShopRefresh}">refresh</mat-icon>
+    </button>
+    <button [disabled]="playerGold < playerLevel * 2" #tooltip="matTooltip" matTooltip="{{playerLevel * 2}} gold"
+      mat-stroked-button matTooltipPosition="right" color="text-white" class="m-2 p-2 flex-1"
+      (click)="draftService.sendMessage('refresh_talents', {})" (mouseenter)="switchTalentRefreshAnimate()"
+      (mouseleave)="switchTalentRefreshAnimate()">
+      Refresh talents<mat-icon [ngClass]="{'animate-spin': hoverTelentRefresh}">refresh</mat-icon>
     </button>
   </div>
 </div>
diff --git a/src/app/draft/components/shop/shop.component.ts b/src/app/draft/components/shop/shop.component.ts
@@ -24,13 +24,18 @@ import { MatIconModule } from '@angular/material/icon';
   styleUrl: './shop.component.css',
 })
 export class ShopComponent {
-  hoverRefresh = false;
+  hoverShopRefresh = false;
+  hoverTelentRefresh = false;
 
   constructor(public draftService: DraftService) {
     this.shop = [] as Item[];
+    this.playerLevel = 0;
+    this.playerGold = 0; 
   }
 
   @Input({ required: true }) shop: Item[];
+  @Input({ required: true }) playerLevel: number;
+  @Input({ required: true }) playerGold: number;
 
   onMouseEnterItem(item: Item) {
     item.showDetails = true;
@@ -51,11 +56,12 @@ export class ShopComponent {
       : 'https://chungus-battles.b-cdn.net/chungus-battles-assets/Item_ID_0_Empty.png';
   }
 
-  hoverRefreshButton() {
-    this.hoverRefresh = true;
+  switchShopRefreshAnimate() {
+    this.hoverShopRefresh = !this.hoverShopRefresh;
   }
 
-  leaveRefreshButton() {
-    this.hoverRefresh = false;
+  switchTalentRefreshAnimate() {
+    this.hoverTelentRefresh = !this.hoverTelentRefresh;
   }
+
 }
diff --git a/src/styles.css b/src/styles.css
@@ -24,15 +24,15 @@ body {
   }
 }
 .damage-number {
-  @apply absolute text-red-500 text-lg font-bold transition-all;
-  animation: floatUp 3s ease-out forwards;
+  @apply absolute text-red-500 text-lg font-thin font-sans transition-all;
+  animation: floatUp 3s ease-in forwards;
   -webkit-text-stroke: 1px red;
 }
 
 .healing-number {
-  @apply absolute text-green-500 text-lg font-bold transition-all;
-  animation: floatUp 3s ease-out forwards;
-  -webkit-text-stroke: 1px green;
+  @apply absolute text-green-400 text-lg font-thin font-sans transition-all;
+  animation: floatUp 3s ease-in forwards;
+  -webkit-text-stroke: 1px rgb(8, 238, 96);
 }
 
 .animate-attack {