feat(data): 实现游戏数据的加密存储和新物品类型“材料”

package.json

@@ -25,6 +25,7 @@
     "@antv/g6": "^5.0.21",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
+    "crypto-js": "^4.2.0",
     "ng-zorro-antd": "18.1.1",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
@@ -40,6 +41,7 @@
     "@angular-eslint/template-parser": "^18.2.0",
     "@angular/cli": "^18.2.3",
     "@angular/compiler-cli": "^18.2.0",
+    "@types/crypto-js": "^4",
     "@types/jasmine": "~5.1.0",
     "@types/uuid": "^10",
     "@typescript-eslint/eslint-plugin": "^8.5.0",

src/app/models/item.model.ts

@@ -21,21 +21,24 @@ export enum ItemType {
   Weapon = 1, // 武器
   Armor = 2, // 防具
   Props = 3, // 道具
-  Drug = 4 // 药品
+  Drug = 4, // 药品
+  Material = 5 // 材料
 }
 
 export const ItemTypeMap: Record<ItemType, string> = {
   [ItemType.Weapon]: '武器',
   [ItemType.Armor]: '防具',
   [ItemType.Props]: '道具',
-  [ItemType.Drug]: '药品'
+  [ItemType.Drug]: '药品',
+  [ItemType.Material]: '材料'
 };
 
 export const ItemTypeValueMap: Record<number, ItemType> = {
   1: ItemType.Weapon,
   2: ItemType.Armor,
   3: ItemType.Props,
-  4: ItemType.Drug
+  4: ItemType.Drug,
+  5: ItemType.Material
 };
 
 export const ItemMap: Record<string, Item> = {
@@ -47,6 +50,15 @@ export const ItemMap: Record<string, Item> = {
     uesable: false,
     price: 0
   },
+  // 特殊物品
+  1: {
+    id: '1',
+    name: '灵石',
+    type: ItemType.Material,
+    description: '万界通用货币，可以兑换各种物品',
+    price: 1,
+    uesable: false
+  },
   // 10000 武器
   10000: {
     id: '10000',

src/app/pages/home/home.component.html

@@ -19,13 +19,13 @@ <h5 nz-typography class="underline decoration-sky-500">洞府</h5>
     </div>
     <div>
       <h5 nz-typography class="underline decoration-sky-500">云游</h5>
-      <nz-space>
+      <div class="flex flex-wrap gap-2">
         @for (enemy of enemys; track $index) {
-          <button *nzSpaceItem nz-button nzType="primary" (click)="onBattleClick(enemy)">
+          <button nz-button nzType="primary" (click)="onBattleClick(enemy)">
             {{ enemy.baseInfo.name }}({{ envSrv.levelMap[enemy.levelInfo.level] }})
           </button>
         }
-      </nz-space>
+      </div>
     </div>
   </div>
   <app-backpack class="h-72 sm:h-1/3 flex flex-col" />

src/app/pages/home/home.component.ts

@@ -104,19 +104,31 @@ export class HomeComponent {
         });
         this.enemys = this.enemys.filter(item => item.id !== enemy.id);
         this.enemys.push(...Generate.enemys(1, this.characterSrv.levelInfo.level));
-        const dropItem = ItemMap['40000'];
-        this.backpackSrv.addItem(dropItem, 1);
-        this.logSrv.log({
-          msg: `获得${dropItem.name} * 1`,
-          type: LogType.Item,
-          level: LogLevel.Info
+        const dropItem = [
+          {
+            id: '40000',
+            count: 1
+          },
+          {
+            id: '1',
+            count: Math.round(Math.random() * 100)
+          }
+        ];
+        dropItem.forEach(i => {
+          this.backpackSrv.addItem(ItemMap[i.id], i.count);
+          this.logSrv.log({
+            msg: `获得${i.count}个${ItemMap[i.id].name}`,
+            type: LogType.Item,
+            level: LogLevel.Info
+          });
         });
       } else {
         this.enemys.forEach(item => {
           item.statusInfo.hp = item.attrInfo.hp;
           item.statusInfo.mp = item.attrInfo.mp;
         });
       }
+      this.rtSrv.save();
     });
     const instance = modal.getContentComponent();
     instance.leftCharacters = [this.characterSrv.getCharacter()];

src/app/services/backpack.service.ts

@@ -14,9 +14,17 @@ export class BackpackService {
 
   constructor() {}
 
-  setItems(items: BagItem[]) {
+  saveItems() {
+    const items: { id: string; count: number }[] = [];
+    this.items.forEach((count, item) => {
+      items.push({ id: item.id, count });
+    });
+    return items;
+  }
+
+  loadItems(items: BagItem[]) {
     items.forEach(item => {
-      this.items.set(item.item, item.count);
+      this.items.set(ItemMap[item.id], item.count);
     });
   }
 

src/app/services/runtime.service.ts

@@ -7,6 +7,9 @@ import { CharacterService } from './character.service';
 import { EnvService } from './env.service';
 import { BackpackService } from './backpack.service';
 import { BagItem } from '../models/item.model';
+import * as CryptoJS from 'crypto-js';
+
+const WANJIE_TOKEN = 'wanjie_data';
 
 @Injectable({
   providedIn: 'root'
@@ -32,31 +35,34 @@ export class RuntimeService {
   init(characterData: Partial<Character>, envData: Env, backpackData?: BagItem[]) {
     this.characterSrv.setCharacter(characterData);
     this.envSrv.setEnv(envData);
-    if (backpackData) this.backpackSrv.setItems(backpackData);
+    if (backpackData) this.backpackSrv.loadItems(backpackData);
     this.isInit = true;
   }
 
   save() {
     const characterData = this.characterSrv.getCharacter();
     const envData = this.envSrv.getEnv();
-    const backpackData = this.backpackSrv.getItems();
+    const backpackData = this.backpackSrv.saveItems();
     const time = new Date();
     localStorage.setItem(
-      'wanjie_data',
-      JSON.stringify({
-        time: time.getTime(),
-        characterData,
-        envData,
-        backpackData
-      })
+      WANJIE_TOKEN,
+      CryptoJS.AES.encrypt(
+        JSON.stringify({
+          time: time.getTime(),
+          characterData,
+          envData,
+          backpackData
+        }),
+        WANJIE_TOKEN
+      ).toString()
     );
     this.notice.success('保存成功', `您的数据已保存,本次保存时间为${time.toLocaleString()}`);
   }
 
   load(): Promise<{ characterData: Character; envData: Env; backpackData: BagItem[] } | null> {
-    const data = localStorage.getItem('wanjie_data');
+    const data = localStorage.getItem(WANJIE_TOKEN);
     if (data) {
-      const parseData = JSON.parse(data);
+      const parseData = JSON.parse(CryptoJS.AES.decrypt(data, WANJIE_TOKEN).toString(CryptoJS.enc.Utf8));
       return Promise.resolve(parseData);
     }
     return Promise.resolve(null);

yarn.lock

@@ -3671,6 +3671,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/crypto-js@npm:^4":
+  version: 4.2.2
+  resolution: "@types/crypto-js@npm:4.2.2"
+  checksum: 10c0/760a2078f36f2a3a1089ef367b0d13229876adcf4bcd6e8824d00d9e9bfad8118dc7e6a3cc66322b083535e12be3a29044ccdc9603bfb12519ff61551a3322c6
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:1.0.5, @types/estree@npm:^1.0.5":
   version: 1.0.5
   resolution: "@types/estree@npm:1.0.5"
@@ -5783,6 +5790,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crypto-js@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "crypto-js@npm:4.2.0"
+  checksum: 10c0/8fbdf9d56f47aea0794ab87b0eb9833baf80b01a7c5c1b0edc7faf25f662fb69ab18dc2199e2afcac54670ff0cd9607a9045a3f7a80336cccd18d77a55b9fdf0
+  languageName: node
+  linkType: hard
+
 "css-functions-list@npm:^3.2.2":
   version: 3.2.2
   resolution: "css-functions-list@npm:3.2.2"
@@ -14653,13 +14667,15 @@ __metadata:
     "@angular/platform-browser-dynamic": "npm:^18.2.0"
     "@angular/router": "npm:^18.2.0"
     "@antv/g6": "npm:^5.0.21"
+    "@types/crypto-js": "npm:^4"
     "@types/jasmine": "npm:~5.1.0"
     "@types/uuid": "npm:^10"
     "@typescript-eslint/eslint-plugin": "npm:^8.5.0"
     "@typescript-eslint/parser": "npm:^8.5.0"
     "@vercel/analytics": "npm:^1.3.1"
     "@vercel/speed-insights": "npm:^1.0.12"
     autoprefixer: "npm:^10.4.20"
+    crypto-js: "npm:^4.2.0"
     eslint: "npm:^8.28.0"
     eslint-config-prettier: "npm:~9.1.0"
     eslint-plugin-deprecation: "npm:^3.0.0"