fix: configure styling correctly

Author: Gugustinette

package-lock.json

@@ -46,6 +46,7 @@
     "eslint": "^9.7.0",
     "nx": "19.0.2",
     "rimraf": "^5.0.5",
+    "sass": "^1.77.8",
     "typedoc": "^0.26.5",
     "typedoc-plugin-markdown": "^4.2.2",
     "typescript": "^5.5.4",

package.json

@@ -30,7 +30,7 @@ export class FDebug {
     customElements.define('f-debug-panel', FDebugPanelElement)
     // Create and inject the custom element into the DOM
     const debugPanel = new FDebugPanelElement({
-      title: 'Debug Panel Prop Test',
+      title: 'Fibbo',
       scene: this.scene,
     })
     document.body.appendChild(debugPanel)

packages/devtools/src/FDebug.ts

@@ -0,0 +1,27 @@
+<template>
+  <div class="f-component f-component-2d">
+    <!-- @vue-skip -->
+    <h4 class="f-component-id">{{ component.constructor.name }} ({{ component.__ID__ }})</h4>
+    <div class="f-component-property">
+      <div class="f-component-property-group">
+        <p>Position</p>
+        <p>x : {{ component.position.x }}</p>
+        <p>y : {{ component.position.y }}</p>
+      </div>
+      <p>r : {{ component.rotation }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FComponent2d } from '@fibbojs/2d';
+
+defineProps({
+  component: {
+    type: Object as PropType<FComponent2d>,
+    required: true
+  }
+})
+</script>

packages/devtools/src/components/2d/FComponent2d.ce.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="f-components">
+    <FComponent2dDom
+      v-for="component in components"
+      :key="component.__ID__"
+      :component="component"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FComponent2d } from '@fibbojs/2d';
+import FComponent2dDom from './FComponent2d.ce.vue';
+
+defineProps({
+  components: {
+    type: Array as PropType<FComponent2d[]>,
+    default: () => []
+  }
+})
+</script>

packages/devtools/src/components/2d/FComponents2d.ce.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="f-component f-component-3d">
+    <!-- @vue-skip -->
+    <h4 class="f-component-id">{{ component.constructor.name }} ({{ component.__ID__ }})</h4>
+    <div class="f-component-property">
+      <div class="f-component-property-group">
+        <p>Position</p>
+        <p>x : {{ component.position.x }}</p>
+        <p>y : {{ component.position.y }}</p>
+        <p>z : {{ component.position.z }}</p>
+      </div>
+      <div class="f-component-property-group">
+        <p>Rotation</p>
+        <p>x : {{ component.rotation.x }}</p>
+        <p>y : {{ component.rotation.y }}</p>
+        <p>z : {{ component.rotation.z }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FComponent3d } from '@fibbojs/3d';
+
+defineProps({
+  component: {
+    type: Object as PropType<FComponent3d>,
+    required: true
+  }
+})
+</script>

packages/devtools/src/components/3d/FComponent3d.ce.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="f-components">
+    <FComponent3dDom
+      v-for="component in components"
+      :key="component.__ID__"
+      :component="component"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { defineProps } from 'vue'
+import type { FComponent3d } from '@fibbojs/3d';
+import FComponent3dDom from './FComponent3d.ce.vue';
+
+defineProps({
+  components: {
+    type: Array as PropType<FComponent3d[]>,
+    default: () => []
+  }
+})
+</script>