From df0d28610a60a666257eb9135922686bfaf49ff0 Mon Sep 17 00:00:00 2001
From: Sceat <fetch@sceat.xyz>
Date: Thu, 26 Dec 2024 02:45:59 +0900
Subject: [PATCH] feat: add character creation colors

---
 package-lock.json                             | 12 +++++++
 .../game-ui/character-canvas-display.vue      | 34 +++++++++++++------
 src/components/game-ui/character-create.vue   |  8 +++--
 3 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eac85a57..cd97fad7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3119,6 +3119,18 @@
         "url": "https://github.com/sponsors/kazupon"
       }
     },
+    "node_modules/@intlify/vue-i18n-extensions/node_modules/@intlify/shared": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-10.0.5.tgz",
+      "integrity": "sha512-bmsP4L2HqBF6i6uaMqJMcFBONVjKt+siGluRq4Ca4C0q7W2eMaVZr8iCgF9dKbcVXutftkC7D6z2SaSMmLiDyA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@intlify/vue-i18n-extensions/node_modules/vue-i18n": {
       "version": "10.0.5",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-10.0.5.tgz",
diff --git a/src/components/game-ui/character-canvas-display.vue b/src/components/game-ui/character-canvas-display.vue
index 13de2378..607ccb45 100644
--- a/src/components/game-ui/character-canvas-display.vue
+++ b/src/components/game-ui/character-canvas-display.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, ref, watch, watchEffect } from 'vue';
+import { inject, onMounted, onUnmounted, ref, watch, watchEffect } from 'vue';
 import {
   Scene,
   PerspectiveCamera,
@@ -20,7 +20,11 @@ const canvas = ref(null);
 
 const running = ref(false);
 
-const props = defineProps(['type', 'color1', 'color2', 'color3']);
+const props = defineProps(['type']);
+
+const color1 = inject('create_character_color1');
+const color2 = inject('create_character_color2');
+const color3 = inject('create_character_color3');
 
 let senshi = null;
 let yajin = null;
@@ -98,17 +102,25 @@ async function display_classe(type) {
 }
 
 watchEffect(() => {
-  if (props.color1) {
-    senshi?.custom_colors.set_color(props.color1);
-    yajin?.custom_colors.set_color(props.color1);
+  if (color1.value) {
+    const color = new Color(color1.value);
+    senshi?.custom_colors.set_color1(color);
+    yajin?.custom_colors.set_color1(color);
+  }
+  if (color2.value) {
+    const color = new Color(color2.value);
+    senshi?.custom_colors.set_color2(color);
+    yajin?.custom_colors.set_color2(color);
   }
-  if (props.color2) {
-    senshi?.custom_colors.set_color2(props.color2);
-    yajin?.custom_colors.set_color2(props.color2);
+  if (color3.value) {
+    const color = new Color(color3.value);
+    senshi?.custom_colors.set_color3(color);
+    yajin?.custom_colors.set_color3(color);
   }
-  if (props.color3) {
-    senshi?.custom_colors.set_color3(props.color3);
-    yajin?.custom_colors.set_color3(props.color3);
+
+  if (renderer) {
+    senshi?.custom_colors.texture.update(renderer);
+    yajin?.custom_colors.texture.update(renderer);
   }
 });
 
diff --git a/src/components/game-ui/character-create.vue b/src/components/game-ui/character-create.vue
index 3b349562..f9d113da 100644
--- a/src/components/game-ui/character-create.vue
+++ b/src/components/game-ui/character-create.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { inject, ref, watch, computed } from 'vue';
+import { inject, ref, watch, computed, provide } from 'vue';
 import Spells from '@aresrpg/aresrpg-sdk/spells';
 import { useI18n } from 'vue-i18n';
 
@@ -27,6 +27,10 @@ const color1 = ref('#FFFFFF');
 const color2 = ref('#FF9999');
 const color3 = ref('#111FFF');
 
+provide('create_character_color1', color1);
+provide('create_character_color2', color2);
+provide('create_character_color3', color3);
+
 const characters = [
   {
     type: 'SENSHI_MALE',
@@ -205,7 +209,7 @@ vs-dialog(v-model="new_character_dialog" full-screen)
       )
     .desc {{ selected_class_data.desc }}
     .perso
-      characterCanvasDisplay(:type="selected_class_type" :color1="color1" :color2="color2" :color3="color3")
+      characterCanvasDisplay(:type="selected_class_type")
     .right
       .spells
         SpellDisplay(:spells="selected_class_data.spells")