feat(item): 新增物品品质等级及显示优化

Encaik · Sep 21, 2024 · 67814de · 67814de · vercel · Sep 21, 2024
1 parent 9c3245a
commit 67814de
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 2 deletions.
diff --git a/src/app/components/bag-item-view/bag-item-view.component.html b/src/app/components/bag-item-view/bag-item-view.component.html
@@ -5,6 +5,7 @@
       nz-popover
       [nzPopoverContent]="contentTemplate"
       class="flex flex-col justify-center items-center w-1/4 lg:w-1/6 2xl:w-1/12 h-16 p-2 relative"
+      [ngClass]="[getItemLevelClass(bagItem.item.level)]"
     >
       {{ bagItem.item.name }}
       <div class="absolute bottom-1 right-1 text-xs text-gray-500">
@@ -15,6 +16,10 @@
       <div class="flex flex-col gap-2 justify-center items-center">
         <span class="text-md font-bold">{{ bagItem.item.name }}</span>
         <p class="text-gray-500">{{ bagItem.item.description }}</p>
+        <p>
+          品质:
+          <span [ngClass]="[getItemLevelClass(bagItem.item.level)]">{{ ItemLevelMap[bagItem.item.level] }}</span>
+        </p>
         <div class="flex gap-2">
           @if (bagType === 'character') {
             @if (bagItem.item.uesable) {

diff --git a/src/app/components/bag-item-view/bag-item-view.component.ts b/src/app/components/bag-item-view/bag-item-view.component.ts
@@ -1,17 +1,18 @@
 import { Component, inject, Input } from '@angular/core';
 import { NzCardModule } from 'ng-zorro-antd/card';
-import { BagItem, ItemMap } from '../../models/item.model';
+import { BagItem, ItemLevel, ItemLevelMap, ItemMap } from '../../models/item.model';
 import { NzPopoverModule } from 'ng-zorro-antd/popover';
 import { LogType, LogLevel } from '../../models';
 import { BackpackService } from '../../services/backpack.service';
 import { LogService } from '../../services/log.service';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzMessageModule, NzMessageService } from 'ng-zorro-antd/message';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-item-view',
   standalone: true,
-  imports: [NzCardModule, NzPopoverModule, NzButtonModule, NzMessageModule],
+  imports: [CommonModule, NzCardModule, NzPopoverModule, NzButtonModule, NzMessageModule],
   templateUrl: './bag-item-view.component.html',
   styleUrl: './bag-item-view.component.less'
 })
@@ -23,6 +24,8 @@ export class BagItemViewComponent {
   @Input() bagItems: BagItem[] = [];
   @Input() bagType: 'character' | 'shop' = 'character';
 
+  ItemLevelMap = ItemLevelMap;
+
   onItemUseClick(bagItem: BagItem) {
     this.backpackSrv.useItem(bagItem.item).then(res => {
       if (!res) {
@@ -58,4 +61,27 @@ export class BagItemViewComponent {
       this.msg.warning('你买不起！');
     }
   }
+
+  getItemLevelClass(level: ItemLevel) {
+    switch (level) {
+      case ItemLevel.Common:
+        return 'text-black-500';
+      case ItemLevel.Rare:
+        return 'text-green-500';
+      case ItemLevel.Fine:
+        return 'text-blue-500';
+      case ItemLevel.Premium:
+        return 'text-pink-500';
+      case ItemLevel.Exquisite:
+        return 'text-purple-500';
+      case ItemLevel.Extreme:
+        return 'text-yellow-500';
+      case ItemLevel.Divine:
+        return 'text-orange-500';
+      case ItemLevel.Forbidden:
+        return 'text-red-500';
+      default:
+        return '';
+    }
+  }
 }
diff --git a/src/app/models/item.model.ts b/src/app/models/item.model.ts
@@ -4,6 +4,7 @@ export interface Item {
   id: string; // 物品唯一id
   name: string; // 物品名称
   type: ItemType; // 物品类型
+  level: ItemLevel; // 物品等级
   description: string; // 物品描述
   price: number; // 物品价格
   uesable: boolean; // 是否可用
@@ -41,11 +42,34 @@ export const ItemTypeValueMap: Record<number, ItemType> = {
   5: ItemType.Material
 };
 
+export enum ItemLevel {
+  Common, // 普通
+  Rare, // 稀有
+  Fine, // 精良
+  Premium, // 优质
+  Exquisite, // 极品
+  Extreme, // 极致
+  Divine, // 神话
+  Forbidden // 禁忌
+}
+
+export const ItemLevelMap: Record<ItemLevel, string> = {
+  [ItemLevel.Common]: '普通',
+  [ItemLevel.Rare]: '稀有',
+  [ItemLevel.Fine]: '精良',
+  [ItemLevel.Premium]: '优质',
+  [ItemLevel.Exquisite]: '极品',
+  [ItemLevel.Extreme]: '极致',
+  [ItemLevel.Divine]: '神话',
+  [ItemLevel.Forbidden]: '禁忌'
+};
+
 export const ItemMap: Record<string, Item> = {
   0: {
     id: '0',
     name: 'dev',
     type: ItemType.Props,
+    level: ItemLevel.Forbidden,
     description: '开发测试',
     uesable: false,
     price: 0
@@ -55,15 +79,90 @@ export const ItemMap: Record<string, Item> = {
     id: '1',
     name: '灵石',
     type: ItemType.Material,
+    level: ItemLevel.Common,
     description: '万界通用货币，可以兑换各种物品',
     price: 1,
     uesable: false
   },
+  // 品质等级测试
+  100: {
+    id: '100',
+    name: '普通',
+    type: ItemType.Material,
+    level: ItemLevel.Common,
+    description: '普通物品',
+    price: 1,
+    uesable: false
+  },
+  101: {
+    id: '101',
+    name: '稀有',
+    type: ItemType.Material,
+    level: ItemLevel.Rare,
+    description: '稀有物品',
+    price: 1,
+    uesable: false
+  },
+  102: {
+    id: '102',
+    name: '精良',
+    type: ItemType.Material,
+    level: ItemLevel.Fine,
+    description: '精良物品',
+    price: 1,
+    uesable: false
+  },
+  103: {
+    id: '103',
+    name: '优质',
+    type: ItemType.Material,
+    level: ItemLevel.Premium,
+    description: '优质物品',
+    price: 1,
+    uesable: false
+  },
+  104: {
+    id: '104',
+    name: '极品',
+    type: ItemType.Material,
+    level: ItemLevel.Exquisite,
+    description: '极品物品',
+    price: 1,
+    uesable: false
+  },
+  105: {
+    id: '105',
+    name: '极致',
+    type: ItemType.Material,
+    level: ItemLevel.Extreme,
+    description: '极致物品',
+    price: 1,
+    uesable: false
+  },
+  106: {
+    id: '106',
+    name: '神话',
+    type: ItemType.Material,
+    level: ItemLevel.Divine,
+    description: '神话物品',
+    price: 1,
+    uesable: false
+  },
+  107: {
+    id: '107',
+    name: '禁忌',
+    type: ItemType.Material,
+    level: ItemLevel.Forbidden,
+    description: '禁忌物品',
+    price: 1,
+    uesable: false
+  },
   // 10000 武器
   10000: {
     id: '10000',
     name: 'dev武器',
     type: ItemType.Weapon,
+    level: ItemLevel.Forbidden,
     description: '开发测试使用武器',
     uesable: false,
     price: 0
@@ -73,6 +172,7 @@ export const ItemMap: Record<string, Item> = {
     id: '20000',
     name: 'dev防具',
     type: ItemType.Armor,
+    level: ItemLevel.Forbidden,
     description: '开发测试使用防具',
     uesable: false,
     price: 0
@@ -82,6 +182,7 @@ export const ItemMap: Record<string, Item> = {
     id: '30000',
     name: 'dev道具',
     type: ItemType.Props,
+    level: ItemLevel.Forbidden,
     description: '开发测试使用道具',
     uesable: false,
     price: 0
@@ -91,6 +192,7 @@ export const ItemMap: Record<string, Item> = {
     id: '40000',
     name: '气血散',
     type: ItemType.Drug,
+    level: ItemLevel.Common,
     description: '少量回复气血,服用后恢复50点气血',
     uesable: true,
     price: 10,
@@ -106,6 +208,7 @@ export const ItemMap: Record<string, Item> = {
     id: '40001',
     name: '补血丸',
     type: ItemType.Drug,
+    level: ItemLevel.Common,
     description: '较少量回复气血,服用后恢复100点气血',
     uesable: true,
     price: 50,
@@ -121,6 +224,7 @@ export const ItemMap: Record<string, Item> = {
     id: '40001',
     name: '回血丹',
     type: ItemType.Drug,
+    level: ItemLevel.Divine,
     description: '中等量回复气血,服用后恢复200点气血',
     uesable: true,
     price: 200,
@@ -136,6 +240,7 @@ export const ItemMap: Record<string, Item> = {
     id: '40001',
     name: '强力回血丹',
     type: ItemType.Drug,
+    level: ItemLevel.Divine,
     description: '较大量回复气血,服用后恢复300点气血',
     uesable: true,
     price: 400,
@@ -151,6 +256,7 @@ export const ItemMap: Record<string, Item> = {
     id: '40001',
     name: '再生丹',
     type: ItemType.Drug,
+    level: ItemLevel.Exquisite,
     description: '大量回复气血,服用后恢复500点气血',
     uesable: true,
     price: 1000,
@@ -166,6 +272,7 @@ export const ItemMap: Record<string, Item> = {
     id: '40001',
     name: '强力再生丹',
     type: ItemType.Drug,
+    level: ItemLevel.Exquisite,
     description: '极大量回复气血,服用后恢复1000点气血',
     uesable: true,
     price: 2000,