From b0f076b44f4714bd7ab27b576c8c026c5c5a6dbd Mon Sep 17 00:00:00 2001
From: Seth Posner <smartseth@hotmail.com>
Date: Tue, 13 Dec 2022 10:58:32 -0800
Subject: [PATCH] Added passthrough style for MainDisplay

---
 src/data/layers/coal.tsx               | 3 ++-
 src/data/layers/oil.tsx                | 1 +
 src/features/resources/MainDisplay.vue | 5 +++--
 src/features/resources/Resource.vue    | 5 +++--
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/data/layers/coal.tsx b/src/data/layers/coal.tsx
index 15b5e76..5632b1a 100644
--- a/src/data/layers/coal.tsx
+++ b/src/data/layers/coal.tsx
@@ -885,7 +885,8 @@ const layer = createLayer(id, function (this: BaseLayer) {
                 <MainDisplay
                     resource={coal}
                     color={colorCoal}
-                    style="margin-bottom: 0"
+                    style={{marginBottom: 0}}
+                    resourceStyle={{textShadow: 'grey 0px 0px 10px'}}
                     effectDisplay={
                         Decimal.gt(computedCoalGain.value, 0)
                             ? `+${format(computedCoalGain.value)}/s`
diff --git a/src/data/layers/oil.tsx b/src/data/layers/oil.tsx
index ef5ea76..2866b02 100644
--- a/src/data/layers/oil.tsx
+++ b/src/data/layers/oil.tsx
@@ -960,6 +960,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
                     <MainDisplay
                         resource={oil}
                         color={color}
+                        resourceStyle={{textShadow: 'grey 0px 0px 10px'}}
                         sticky={true}
                         productionDisplay={jsx(() => (
                             <>
diff --git a/src/features/resources/MainDisplay.vue b/src/features/resources/MainDisplay.vue
index 111c6b6..4f19007 100644
--- a/src/features/resources/MainDisplay.vue
+++ b/src/features/resources/MainDisplay.vue
@@ -7,7 +7,7 @@
         >
             <div class="main-display">
                 <span v-if="showPrefix">You have </span>
-                <ResourceVue :resource="resource" :color="color || 'white'" />
+                <ResourceVue :resource="resource" :color="color || 'white'" :style="resourceStyle" />
                 {{ resource.displayName
                 }}<!-- remove whitespace -->
                 <span v-if="effectComponent"
@@ -27,7 +27,7 @@
     >
         <div class="main-display">
             <span v-if="showPrefix">You have </span>
-            <ResourceVue :resource="resource" :color="color || 'white'" />
+            <ResourceVue :resource="resource" :color="color || 'white'" :style="resourceStyle" />
             {{ resource.displayName
             }}<!-- remove whitespace -->
             <span v-if="effectComponent"
@@ -56,6 +56,7 @@ const _props = withDefaults(defineProps<{
     color?: string;
     classes?: Record<string, boolean>;
     style?: StyleValue;
+    resourceStyle?: StyleValue;
     effectDisplay?: CoercableComponent;
     productionDisplay?: CoercableComponent;
     sticky?: boolean
diff --git a/src/features/resources/Resource.vue b/src/features/resources/Resource.vue
index 928f2da..cc8976c 100644
--- a/src/features/resources/Resource.vue
+++ b/src/features/resources/Resource.vue
@@ -1,5 +1,5 @@
 <template>
-    <h2 :style="{ color, 'text-shadow': '0px 0px 10px ' + color }">
+    <h2 :style="[{ color, 'text-shadow': '0px 0px 10px ' + color }, style ?? {}]">
         {{ amount }}
     </h2>
 </template>
@@ -7,11 +7,12 @@
 <script setup lang="ts">
 import type { Resource } from "features/resources/resource";
 import { displayResource } from "features/resources/resource";
-import { computed } from "vue";
+import { computed, StyleValue } from "vue";
 
 const props = defineProps<{
     resource: Resource;
     color: string;
+    style?: StyleValue;
 }>();
 
 const amount = computed(() => displayResource(props.resource));