Made layer style and classes

src/components/Game.vue

@@ -1,6 +1,13 @@
 <template>
     <div class="tabs-container" :class="{ useHeader }">
-        <div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
+        <div
+            v-for="(tab, index) in tabs"
+            :key="index"
+            class="tab"
+            :ref="`tab-${index}`"
+            :style="unref(layers[tab]?.style)"
+            :class="unref(layers[tab]?.classes)"
+        >
             <Nav v-if="index === 0 && !useHeader" />
             <div class="inner-tab">
                 <Layer
@@ -19,7 +26,7 @@
 import projInfo from "data/projInfo.json";
 import { GenericLayer, layers } from "game/layers";
 import player from "game/player";
-import { computed, toRef } from "vue";
+import { computed, toRef, unref } from "vue";
 import Layer from "./Layer.vue";
 import Nav from "./Nav.vue";
 
@@ -28,8 +35,8 @@ const layerKeys = computed(() => Object.keys(layers));
 const useHeader = projInfo.useHeader;
 
 function gatherLayerProps(layer: GenericLayer) {
-    const { display, minimized, minWidth, name, color, style, classes, minimizable, nodes } = layer;
-    return { display, minimized, minWidth, name, color, style, classes, minimizable, nodes };
+    const { display, minimized, minWidth, name, color, minimizable, nodes } = layer;
+    return { display, minimized, minWidth, name, color, minimizable, nodes };
 }
 </script>
 

src/components/Layer.vue

@@ -4,12 +4,7 @@
         <button class="layer-tab minimized" v-if="minimized.value" @click="minimized.value = false">
             <div>{{ unref(name) }}</div>
         </button>
-        <div
-            class="layer-tab"
-            :style="unref(style)"
-            :class="[{ showGoBack }, unref(classes)]"
-            v-else
-        >
+        <div class="layer-tab" :class="{ showGoBack }" v-else>
             <Context ref="contextRef">
                 <component :is="component" />
             </Context>
@@ -22,7 +17,7 @@
 
 <script lang="ts">
 import projInfo from "data/projInfo.json";
-import { CoercableComponent, StyleValue } from "features/feature";
+import { CoercableComponent } from "features/feature";
 import { FeatureNode } from "game/layers";
 import { Persistent } from "game/persistence";
 import player from "game/player";
@@ -58,8 +53,6 @@ export default defineComponent({
             required: true
         },
         color: processedPropType<string>(String),
-        style: processedPropType<StyleValue>(String, Object, Array),
-        classes: processedPropType<Record<string, boolean>>(Object),
         minimizable: processedPropType<boolean>(Boolean),
         nodes: {
             type: Object as PropType<Ref<Record<string, FeatureNode | undefined>>>,