feat: add character creation colors

aresrpg · Dec 25, 2024 · df0d286 · df0d286
1 parent cd0d538
commit df0d286
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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")