pref: get loli data through backend

.vscode/settings.json

@@ -23,6 +23,7 @@
     "Hitomi",
     "Hokenshitsu",
     "iconify",
+    "indexdb",
     "INTLIFY",
     "Irotoridori",
     "Joshu",

src/assets/images/ren/ren.json

@@ -1,802 +0,0 @@
-[
- {
-  "name": "汗",
-  "left": 287,
-  "top": 425,
-  "width": 12,
-  "height": 14,
-  "visible": 1,
-  "layer_id": 2961,
-  "group_layer_id": 2931
- },
- {
-  "name": "追真剣",
-  "left": 234,
-  "top": 383,
-  "width": 76,
-  "height": 27,
-  "visible": 1,
-  "layer_id": 3022,
-  "group_layer_id": 2923
- },
- {
-  "name": "笑１",
-  "left": 232,
-  "top": 380,
-  "width": 78,
-  "height": 29,
-  "visible": 1,
-  "layer_id": 2842,
-  "group_layer_id": 2923
- },
- {
-  "name": "笑２",
-  "left": 235,
-  "top": 385,
-  "width": 76,
-  "height": 32,
-  "visible": 1,
-  "layer_id": 2845,
-  "group_layer_id": 2923
- },
- {
-  "name": "怒１",
-  "left": 239,
-  "top": 382,
-  "width": 63,
-  "height": 28,
-  "visible": 1,
-  "layer_id": 2848,
-  "group_layer_id": 2923
- },
- {
-  "name": "怒２",
-  "left": 240,
-  "top": 382,
-  "width": 60,
-  "height": 26,
-  "visible": 1,
-  "layer_id": 2864,
-  "group_layer_id": 2923
- },
- {
-  "name": "悲１",
-  "left": 237,
-  "top": 386,
-  "width": 70,
-  "height": 28,
-  "visible": 1,
-  "layer_id": 2855,
-  "group_layer_id": 2923
- },
- {
-  "name": "悲２",
-  "left": 238,
-  "top": 391,
-  "width": 66,
-  "height": 28,
-  "visible": 1,
-  "layer_id": 2859,
-  "group_layer_id": 2923
- },
- {
-  "name": "泣１",
-  "left": 243,
-  "top": 388,
-  "width": 58,
-  "height": 30,
-  "visible": 1,
-  "layer_id": 2865,
-  "group_layer_id": 2923
- },
- {
-  "name": "泣２",
-  "left": 240,
-  "top": 386,
-  "width": 65,
-  "height": 31,
-  "visible": 1,
-  "layer_id": 2870,
-  "group_layer_id": 2923
- },
- {
-  "name": "驚１",
-  "left": 232,
-  "top": 379,
-  "width": 78,
-  "height": 31,
-  "visible": 1,
-  "layer_id": 2877,
-  "group_layer_id": 2923
- },
- {
-  "name": "驚２",
-  "left": 232,
-  "top": 379,
-  "width": 78,
-  "height": 33,
-  "visible": 1,
-  "layer_id": 2882,
-  "group_layer_id": 2923
- },
- {
-  "name": "照１",
-  "left": 234,
-  "top": 382,
-  "width": 77,
-  "height": 31,
-  "visible": 1,
-  "layer_id": 2887,
-  "group_layer_id": 2923
- },
- {
-  "name": "照２",
-  "left": 239,
-  "top": 385,
-  "width": 70,
-  "height": 31,
-  "visible": 1,
-  "layer_id": 2893,
-  "group_layer_id": 2923
- },
- {
-  "name": "えっへん",
-  "left": 235,
-  "top": 384,
-  "width": 72,
-  "height": 25,
-  "visible": 1,
-  "layer_id": 2899,
-  "group_layer_id": 2923
- },
- {
-  "name": "ギャグ笑",
-  "left": 234,
-  "top": 383,
-  "width": 76,
-  "height": 33,
-  "visible": 1,
-  "layer_id": 2905,
-  "group_layer_id": 2923
- },
- {
-  "name": "ギャグ怒",
-  "left": 239,
-  "top": 384,
-  "width": 61,
-  "height": 29,
-  "visible": 1,
-  "layer_id": 2910,
-  "group_layer_id": 2923
- },
- {
-  "name": "ギャグ泣",
-  "left": 239,
-  "top": 389,
-  "width": 63,
-  "height": 26,
-  "visible": 1,
-  "layer_id": 2915,
-  "group_layer_id": 2923
- },
- {
-  "name": "ギャグ驚",
-  "left": 235,
-  "top": 383,
-  "width": 66,
-  "height": 23,
-  "visible": 1,
-  "layer_id": 2918,
-  "group_layer_id": 2923
- },
- {
-  "name": "追真剣",
-  "left": 238,
-  "top": 392,
-  "width": 78,
-  "height": 41,
-  "visible": 0,
-  "layer_id": 3020,
-  "group_layer_id": 2925
- },
- {
-  "name": "笑１",
-  "left": 238,
-  "top": 390,
-  "width": 78,
-  "height": 43,
-  "visible": 0,
-  "layer_id": 2843,
-  "group_layer_id": 2925
- },
- {
-  "name": "笑２",
-  "left": 244,
-  "top": 395,
-  "width": 69,
-  "height": 37,
-  "visible": 0,
-  "layer_id": 2846,
-  "group_layer_id": 2925
- },
- {
-  "name": "怒１",
-  "left": 238,
-  "top": 391,
-  "width": 78,
-  "height": 42,
-  "visible": 0,
-  "layer_id": 2850,
-  "group_layer_id": 2925
- },
- {
-  "name": "怒２",
-  "left": 238,
-  "top": 391,
-  "width": 78,
-  "height": 42,
-  "visible": 0,
-  "layer_id": 2853,
-  "group_layer_id": 2925
- },
- {
-  "name": "悲１",
-  "left": 238,
-  "top": 392,
-  "width": 78,
-  "height": 41,
-  "visible": 0,
-  "layer_id": 2856,
-  "group_layer_id": 2925
- },
- {
-  "name": "悲２",
-  "left": 240,
-  "top": 396,
-  "width": 75,
-  "height": 37,
-  "visible": 0,
-  "layer_id": 2861,
-  "group_layer_id": 2925
- },
- {
-  "name": "泣１",
-  "left": 243,
-  "top": 396,
-  "width": 71,
-  "height": 37,
-  "visible": 1,
-  "layer_id": 3025,
-  "group_layer_id": 2925
- },
- {
-  "name": "泣２",
-  "left": 238,
-  "top": 394,
-  "width": 78,
-  "height": 60,
-  "visible": 0,
-  "layer_id": 3024,
-  "group_layer_id": 2925
- },
- {
-  "name": "驚１",
-  "left": 238,
-  "top": 390,
-  "width": 78,
-  "height": 43,
-  "visible": 0,
-  "layer_id": 2880,
-  "group_layer_id": 2925
- },
- {
-  "name": "驚２",
-  "left": 238,
-  "top": 390,
-  "width": 78,
-  "height": 43,
-  "visible": 0,
-  "layer_id": 2885,
-  "group_layer_id": 2925
- },
- {
-  "name": "照１",
-  "left": 238,
-  "top": 392,
-  "width": 78,
-  "height": 41,
-  "visible": 0,
-  "layer_id": 2891,
-  "group_layer_id": 2925
- },
- {
-  "name": "照２",
-  "left": 244,
-  "top": 395,
-  "width": 69,
-  "height": 37,
-  "visible": 0,
-  "layer_id": 2896,
-  "group_layer_id": 2925
- },
- {
-  "name": "えっへん",
-  "left": 244,
-  "top": 396,
-  "width": 68,
-  "height": 38,
-  "visible": 0,
-  "layer_id": 2902,
-  "group_layer_id": 2925
- },
- {
-  "name": "ギャグ笑",
-  "left": 244,
-  "top": 395,
-  "width": 69,
-  "height": 37,
-  "visible": 0,
-  "layer_id": 2908,
-  "group_layer_id": 2925
- },
- {
-  "name": "ギャグ怒",
-  "left": 244,
-  "top": 401,
-  "width": 66,
-  "height": 33,
-  "visible": 0,
-  "layer_id": 2913,
-  "group_layer_id": 2925
- },
- {
-  "name": "ギャグ泣",
-  "left": 244,
-  "top": 405,
-  "width": 66,
-  "height": 47,
-  "visible": 0,
-  "layer_id": 2916,
-  "group_layer_id": 2925
- },
- {
-  "name": "ギャグ驚",
-  "left": 248,
-  "top": 395,
-  "width": 57,
-  "height": 37,
-  "visible": 0,
-  "layer_id": 2920,
-  "group_layer_id": 2925
- },
- {
-  "name": "追開け",
-  "left": 270,
-  "top": 430,
-  "width": 19,
-  "height": 16,
-  "visible": 1,
-  "layer_id": 2980,
-  "group_layer_id": 2927
- },
- {
-  "name": "追閉じ",
-  "left": 271,
-  "top": 430,
-  "width": 18,
-  "height": 14,
-  "visible": 0,
-  "layer_id": 2969,
-  "group_layer_id": 2927
- },
- {
-  "name": "追真剣",
-  "left": 273,
-  "top": 433,
-  "width": 12,
-  "height": 13,
-  "visible": 0,
-  "layer_id": 3023,
-  "group_layer_id": 2927
- },
- {
-  "name": "笑１",
-  "left": 269,
-  "top": 429,
-  "width": 21,
-  "height": 18,
-  "visible": 0,
-  "layer_id": 2844,
-  "group_layer_id": 2927
- },
- {
-  "name": "笑２",
-  "left": 268,
-  "top": 428,
-  "width": 24,
-  "height": 22,
-  "visible": 0,
-  "layer_id": 2847,
-  "group_layer_id": 2927
- },
- {
-  "name": "怒１",
-  "left": 272,
-  "top": 433,
-  "width": 15,
-  "height": 12,
-  "visible": 0,
-  "layer_id": 2851,
-  "group_layer_id": 2927
- },
- {
-  "name": "怒２",
-  "left": 268,
-  "top": 428,
-  "width": 25,
-  "height": 23,
-  "visible": 0,
-  "layer_id": 2854,
-  "group_layer_id": 2927
- },
- {
-  "name": "悲１",
-  "left": 272,
-  "top": 434,
-  "width": 14,
-  "height": 11,
-  "visible": 0,
-  "layer_id": 2857,
-  "group_layer_id": 2927
- },
- {
-  "name": "悲２",
-  "left": 272,
-  "top": 435,
-  "width": 15,
-  "height": 12,
-  "visible": 0,
-  "layer_id": 2862,
-  "group_layer_id": 2927
- },
- {
-  "name": "泣１",
-  "left": 270,
-  "top": 431,
-  "width": 21,
-  "height": 17,
-  "visible": 0,
-  "layer_id": 2869,
-  "group_layer_id": 2927
- },
- {
-  "name": "泣２",
-  "left": 270,
-  "top": 433,
-  "width": 22,
-  "height": 13,
-  "visible": 0,
-  "layer_id": 2876,
-  "group_layer_id": 2927
- },
- {
-  "name": "驚１",
-  "left": 272,
-  "top": 432,
-  "width": 14,
-  "height": 16,
-  "visible": 0,
-  "layer_id": 2881,
-  "group_layer_id": 2927
- },
- {
-  "name": "驚２",
-  "left": 268,
-  "top": 427,
-  "width": 26,
-  "height": 25,
-  "visible": 0,
-  "layer_id": 2886,
-  "group_layer_id": 2927
- },
- {
-  "name": "照１",
-  "left": 269,
-  "top": 431,
-  "width": 20,
-  "height": 15,
-  "visible": 0,
-  "layer_id": 2892,
-  "group_layer_id": 2927
- },
- {
-  "name": "照２",
-  "left": 268,
-  "top": 430,
-  "width": 23,
-  "height": 19,
-  "visible": 0,
-  "layer_id": 2897,
-  "group_layer_id": 2927
- },
- {
-  "name": "えっへん",
-  "left": 269,
-  "top": 429,
-  "width": 22,
-  "height": 20,
-  "visible": 0,
-  "layer_id": 2903,
-  "group_layer_id": 2927
- },
- {
-  "name": "ギャグ笑",
-  "left": 267,
-  "top": 427,
-  "width": 26,
-  "height": 24,
-  "visible": 0,
-  "layer_id": 2909,
-  "group_layer_id": 2927
- },
- {
-  "name": "ギャグ怒",
-  "left": 270,
-  "top": 430,
-  "width": 20,
-  "height": 16,
-  "visible": 0,
-  "layer_id": 2914,
-  "group_layer_id": 2927
- },
- {
-  "name": "ギャグ泣",
-  "left": 270,
-  "top": 434,
-  "width": 19,
-  "height": 11,
-  "visible": 0,
-  "layer_id": 2917,
-  "group_layer_id": 2927
- },
- {
-  "name": "ギャグ驚",
-  "left": 267,
-  "top": 427,
-  "width": 25,
-  "height": 24,
-  "visible": 0,
-  "layer_id": 2921,
-  "group_layer_id": 2927
- },
- {
-  "name": "G頬",
-  "left": 249,
-  "top": 415,
-  "width": 59,
-  "height": 28,
-  "visible": 0,
-  "layer_id": 813,
-  "group_layer_id": 2314
- },
- {
-  "name": "頬１",
-  "left": 246,
-  "top": 410,
-  "width": 65,
-  "height": 35,
-  "visible": 0,
-  "layer_id": 2369,
-  "group_layer_id": 2314
- },
- {
-  "name": "頬２",
-  "left": 245,
-  "top": 410,
-  "width": 66,
-  "height": 35,
-  "visible": 0,
-  "layer_id": 2364,
-  "group_layer_id": 2314
- },
- {
-  "name": "頬３",
-  "left": 245,
-  "top": 408,
-  "width": 66,
-  "height": 38,
-  "visible": 0,
-  "layer_id": 2360,
-  "group_layer_id": 2314
- },
- {
-  "name": "頬４",
-  "left": 242,
-  "top": 406,
-  "width": 69,
-  "height": 44,
-  "visible": 1,
-  "layer_id": 2356,
-  "group_layer_id": 2314
- },
- {
-  "name": "頬５",
-  "left": 245,
-  "top": 410,
-  "width": 66,
-  "height": 36,
-  "visible": 0,
-  "layer_id": 2352,
-  "group_layer_id": 2314
- },
- {
-  "name": "斜め１",
-  "left": 148,
-  "top": 323,
-  "width": 309,
-  "height": 600,
-  "visible": 1,
-  "layer_id": 2346,
-  "group_layer_id": 2086
- },
- {
-  "name": "斜め２",
-  "left": 148,
-  "top": 323,
-  "width": 309,
-  "height": 600,
-  "visible": 0,
-  "layer_id": 2345,
-  "group_layer_id": 2086
- },
- {
-  "name": "斜め１",
-  "left": 147,
-  "top": 323,
-  "width": 313,
-  "height": 600,
-  "visible": 1,
-  "layer_id": 2934,
-  "group_layer_id": 2090
- },
- {
-  "name": "斜め２",
-  "left": 147,
-  "top": 323,
-  "width": 313,
-  "height": 600,
-  "visible": 1,
-  "layer_id": 2933,
-  "group_layer_id": 2090
- },
- {
-  "name": "斜め１",
-  "left": 137,
-  "top": 323,
-  "width": 367,
-  "height": 602,
-  "visible": 1,
-  "layer_id": 2340,
-  "group_layer_id": 2094
- },
- {
-  "name": "斜め２",
-  "left": 137,
-  "top": 323,
-  "width": 367,
-  "height": 602,
-  "visible": 1,
-  "layer_id": 2339,
-  "group_layer_id": 2094
- },
- {
-  "name": "斜め１",
-  "left": 148,
-  "top": 323,
-  "width": 294,
-  "height": 599,
-  "visible": 0,
-  "layer_id": 2338,
-  "group_layer_id": 2098
- },
- {
-  "name": "斜め２",
-  "left": 148,
-  "top": 323,
-  "width": 290,
-  "height": 599,
-  "visible": 1,
-  "layer_id": 2337,
-  "group_layer_id": 2098
- },
- {
-  "name": "汗",
-  "left": 0,
-  "top": 0,
-  "width": 0,
-  "height": 0,
-  "visible": 0,
-  "layer_id": 2931,
-  "group_layer_id": 974
- },
- {
-  "name": "眉",
-  "left": 0,
-  "top": 0,
-  "width": 0,
-  "height": 0,
-  "visible": 0,
-  "layer_id": 2923,
-  "group_layer_id": 974
- },
- {
-  "name": "目",
-  "left": 0,
-  "top": 0,
-  "width": 0,
-  "height": 0,
-  "visible": 1,
-  "layer_id": 2925,
-  "group_layer_id": 974
- },
- {
-  "name": "口",
-  "left": 0,
-  "top": 0,
-  "width": 0,
-  "height": 0,
-  "visible": 0,
-  "layer_id": 2927,
-  "group_layer_id": 974
- },
- {
-  "name": "頬",
-  "left": 0,
-  "top": 0,
-  "width": 0,
-  "height": 0,
-  "visible": 0,
-  "layer_id": 2314,
-  "group_layer_id": 975
- },
- {
-  "name": "喫茶店服",
-  "left": 0,
-  "top": 0,
-  "width": 0,
-  "height": 0,
-  "visible": 0,
-  "layer_id": 2086,
-  "group_layer_id": 975
- },
- {
-  "name": "パジャマ",
-  "left": 0,
-  "top": 0,
-  "width": 0,
-  "height": 0,
-  "visible": 0,
-  "layer_id": 2090,
-  "group_layer_id": 975
- },
- {
-  "name": "私服２",
-  "left": 0,
-  "top": 0,
-  "width": 0,
-  "height": 0,
-  "visible": 0,
-  "layer_id": 2094,
-  "group_layer_id": 975
- },
- {
-  "name": "私服１",
-  "left": 0,
-  "top": 0,
-  "width": 0,
-  "height": 0,
-  "visible": 1,
-  "layer_id": 2098,
-  "group_layer_id": 975
- }
-]

src/components/setting-panel/components/Loli.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getLoli } from '@/utils/loli'
+import { useLoliDataURL } from '@/hooks/useLoli'
 import { onMounted, ref } from 'vue'
 
 const loliData = ref({
@@ -20,10 +20,10 @@ const loliData = ref({
   face: '',
 })
 
-const reGetLoli = () => (loliData.value = getLoli())
+const reGetLoli = async () => (loliData.value = await useLoliDataURL())
 
-onMounted(() => {
-  loliData.value = getLoli()
+onMounted(async () => {
+  loliData.value = await useLoliDataURL()
 })
 </script>
 
@@ -72,7 +72,7 @@ onMounted(() => {
   position: absolute;
   z-index: 9999;
   top: -270px;
-  left: 150px;
+  left: 130px;
 }
 .body {
   position: absolute;

src/hooks/useLoli.ts

@@ -0,0 +1,80 @@
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+
+// 这里比较怪异，buffer 上有个 data 属性，不知道哪里来的
+interface LoliBuffer {
+  data: Uint8Array
+}
+
+export interface LoliData {
+  loliBodyLeft: string
+  loliBodyTop: string
+  loliEyeLeft: string
+  loliEyeTop: string
+  loliBrowLeft: string
+  loliBrowTop: string
+  loliMouthLeft: string
+  loliMouthTop: string
+  loliFaceLeft: string
+  loliFaceTop: string
+
+  body: LoliBuffer
+  eye: LoliBuffer
+  brow: LoliBuffer
+  mouth: LoliBuffer
+  face: LoliBuffer
+}
+
+export type LoliDataResponseData = KUNGalgameResponseData<LoliData>
+
+const fetchGetLoliData = async (): Promise<
+  KUNGalgameResponseData<LoliData>
+> => {
+  const baseUrl = import.meta.env.VITE_API_BASE_URL
+  const url = `/loli/image`
+  const fullUrl = `${baseUrl}${url}`
+  const response = await fetch(fullUrl, {
+    method: 'GET',
+    headers: {
+      Authorization: `Bearer ${useKUNGalgameUserStore().getToken()}`,
+    },
+  })
+
+  return await response.json()
+}
+
+// 这里不缓存 loli 数据了，不然 indexdb 数据太多了太难看了
+const createImageUrl = (imageBuffer: LoliBuffer) => {
+  const uint8Array = new Uint8Array(imageBuffer.data)
+  const blob = new Blob([uint8Array], { type: 'image/webp' })
+  return URL.createObjectURL(blob)
+}
+
+export const useLoliDataURL = async () => {
+  const loliData = (await fetchGetLoliData()).data
+
+  const imageUrls = [
+    createImageUrl(loliData.body),
+    createImageUrl(loliData.eye),
+    createImageUrl(loliData.brow),
+    createImageUrl(loliData.mouth),
+    createImageUrl(loliData.face),
+  ]
+
+  return {
+    loliBodyLeft: loliData.loliBodyLeft,
+    loliBodyTop: loliData.loliBodyTop,
+    loliEyeLeft: loliData.loliEyeLeft,
+    loliEyeTop: loliData.loliEyeTop,
+    loliBrowLeft: loliData.loliBrowLeft,
+    loliBrowTop: loliData.loliBrowTop,
+    loliMouthLeft: loliData.loliMouthLeft,
+    loliMouthTop: loliData.loliMouthTop,
+    loliFaceLeft: loliData.loliFaceLeft,
+    loliFaceTop: loliData.loliFaceTop,
+    body: imageUrls[0],
+    eye: imageUrls[1],
+    brow: imageUrls[2],
+    mouth: imageUrls[3],
+    face: imageUrls[4],
+  }
+}

src/utils/loli.ts

@@ -1,94 +0,0 @@
-/* KUNGalgame 全局看板娘数据的读取文件 */
-
-// 读取 JSON 文件数据
-import loliData from '@/assets/images/ren/ren.json'
-
-/* 随机数 */
-import { randomNum } from './random'
-
-export const getLoli = () => {
-  // 获取本地图片文件，注意这里不能用 @ 作为基础路径，只能用 ..
-  const getAssetsFile = (url: number) => {
-    return new URL(`../assets/images/ren/${url}.webp`, import.meta.url).href
-  }
-
-  /* 随机汗水 ？ */
-  // const randomSweat = randomNum(0, 1)
-  /* 随机眉毛 */
-  const randomBrow = randomNum(1, 18)
-
-  /* 随机眼睛 */
-  const randomEye = randomNum(19, 36)
-
-  /* 随机嘴巴 */
-  const randomMouth = randomNum(37, 56)
-
-  /* 随机腮红 */
-  const randomFace = randomNum(57, 62)
-
-  /* 随机衣服 */
-  const randomSkirt = randomNum(63, 70)
-
-  // 定义一个 loli 对象
-  const loli = {
-    lass: loliData[randomSkirt],
-    eye: loliData[randomEye],
-    brow: loliData[randomBrow],
-    mouth: loliData[randomMouth],
-    face: loliData[randomFace],
-  }
-
-  // 身体定位
-  const loliBodyLeft = loli.lass.left + 'px'
-  const loliBodyTop = loli.lass.top + 'px'
-
-  // 眼睛定位
-  const loliEyeLeft = loli.eye.left + 'px'
-  const loliEyeTop = loli.eye.top + 'px'
-
-  // 眉毛定位
-  const loliBrowLeft = loli.brow.left + 'px'
-  const loliBrowTop = loli.brow.top + 'px'
-
-  // 嘴巴定位
-  const loliMouthLeft = loli.mouth.left + 'px'
-  const loliMouthTop = loli.mouth.top + 'px'
-
-  // 腮红定位
-  const loliFaceLeft = loli.face.left + 'px'
-  const loliFaceTop = loli.face.top + 'px'
-
-  // 身体的图片资源链接
-  const body = getAssetsFile(loli.lass.layer_id)
-
-  // 眼睛的图片资源链接
-  const eye = getAssetsFile(loli.eye.layer_id)
-
-  // 眉毛的图片资源链接
-  const brow = getAssetsFile(loli.brow.layer_id)
-
-  // 嘴巴的图片资源链接
-  const mouth = getAssetsFile(loli.mouth.layer_id)
-
-  // 腮红的图片资源链接
-  const face = getAssetsFile(loli.face.layer_id)
-
-  // 导出模块
-  return {
-    loliBodyLeft,
-    loliBodyTop,
-    loliEyeLeft,
-    loliEyeTop,
-    loliBrowLeft,
-    loliBrowTop,
-    loliMouthLeft,
-    loliMouthTop,
-    loliFaceLeft,
-    loliFaceTop,
-    body,
-    eye,
-    brow,
-    mouth,
-    face,
-  }
-}