From acc9622d4932b622e39f2f3bc835acf25a3166b7 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 13 Mar 2022 17:09:09 -0500
Subject: [PATCH] Fix features not handling refs passed to style props
 correctly

---
 src/features/achievements/achievement.tsx |  2 +-
 src/features/bars/bar.ts                  |  3 ++-
 src/features/boards/board.ts              |  2 +-
 src/features/buyable.tsx                  | 12 +++++++++++-
 src/features/challenges/challenge.tsx     |  2 +-
 src/features/clickables/clickable.ts      |  2 +-
 src/features/infoboxes/infobox.ts         |  4 ++--
 src/features/milestones/milestone.tsx     |  2 +-
 src/features/tabs/tabFamily.ts            |  2 +-
 src/features/upgrades/upgrade.ts          |  2 +-
 10 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/features/achievements/achievement.tsx b/src/features/achievements/achievement.tsx
index ee1ea1d..930850c 100644
--- a/src/features/achievements/achievement.tsx
+++ b/src/features/achievements/achievement.tsx
@@ -91,7 +91,7 @@ export function createAchievement<T extends AchievementOptions>(
 
         achievement[GatherProps] = function (this: GenericAchievement) {
             const { visibility, display, earned, image, style, classes, mark, id } = this;
-            return { visibility, display, earned, image, style, classes, mark, id };
+            return { visibility, display, earned, image, style: unref(style), classes, mark, id };
         };
 
         if (achievement.shouldEarn) {
diff --git a/src/features/bars/bar.ts b/src/features/bars/bar.ts
index 6bdb3e6..0b39233 100644
--- a/src/features/bars/bar.ts
+++ b/src/features/bars/bar.ts
@@ -18,6 +18,7 @@ import {
     ProcessedComputable
 } from "util/computed";
 import { createLazyProxy } from "util/proxies";
+import { unref } from "vue";
 
 export const BarType = Symbol("Bar");
 
@@ -124,7 +125,7 @@ export function createBar<T extends BarOptions>(optionsFunc: () => T & ThisType<
                 direction,
                 display,
                 visibility,
-                style,
+                style: unref(style),
                 classes,
                 borderStyle,
                 textStyle,
diff --git a/src/features/boards/board.ts b/src/features/boards/board.ts
index 8435b45..2d7eef6 100644
--- a/src/features/boards/board.ts
+++ b/src/features/boards/board.ts
@@ -316,7 +316,7 @@ export function createBoard<T extends BoardOptions>(
                 visibility,
                 width,
                 height,
-                style,
+                style: unref(style),
                 classes,
                 links,
                 selectedAction,
diff --git a/src/features/buyable.tsx b/src/features/buyable.tsx
index cf49443..ad684cb 100644
--- a/src/features/buyable.tsx
+++ b/src/features/buyable.tsx
@@ -226,7 +226,17 @@ export function createBuyable<T extends BuyableOptions>(
         buyable[GatherProps] = function (this: GenericBuyable) {
             const { display, visibility, style, classes, onClick, canClick, small, mark, id } =
                 this;
-            return { display, visibility, style, classes, onClick, canClick, small, mark, id };
+            return {
+                display,
+                visibility,
+                style: unref(style),
+                classes,
+                onClick,
+                canClick,
+                small,
+                mark,
+                id
+            };
         };
 
         return buyable as unknown as Buyable<T>;
diff --git a/src/features/challenges/challenge.tsx b/src/features/challenges/challenge.tsx
index 0f47abf..9ecf8a9 100644
--- a/src/features/challenges/challenge.tsx
+++ b/src/features/challenges/challenge.tsx
@@ -247,7 +247,7 @@ export function createChallenge<T extends ChallengeOptions>(
                 canComplete,
                 display,
                 visibility,
-                style,
+                style: unref(style),
                 classes,
                 completed,
                 canStart,
diff --git a/src/features/clickables/clickable.ts b/src/features/clickables/clickable.ts
index 3f1ba11..6fa83c4 100644
--- a/src/features/clickables/clickable.ts
+++ b/src/features/clickables/clickable.ts
@@ -119,7 +119,7 @@ export function createClickable<T extends ClickableOptions>(
             return {
                 display,
                 visibility,
-                style,
+                style: unref(style),
                 classes,
                 onClick,
                 onHold,
diff --git a/src/features/infoboxes/infobox.ts b/src/features/infoboxes/infobox.ts
index 2d6b97c..bc8081b 100644
--- a/src/features/infoboxes/infobox.ts
+++ b/src/features/infoboxes/infobox.ts
@@ -17,7 +17,7 @@ import {
     ProcessedComputable
 } from "util/computed";
 import { createLazyProxy } from "util/proxies";
-import { Ref } from "vue";
+import { Ref, unref } from "vue";
 import { Persistent, makePersistent, PersistentState } from "game/persistence";
 
 export const InfoboxType = Symbol("Infobox");
@@ -103,7 +103,7 @@ export function createInfobox<T extends InfoboxOptions>(
                 title,
                 color,
                 collapsed,
-                style,
+                style: unref(style),
                 titleStyle,
                 bodyStyle,
                 classes,
diff --git a/src/features/milestones/milestone.tsx b/src/features/milestones/milestone.tsx
index 9056ab2..d5bfcfd 100644
--- a/src/features/milestones/milestone.tsx
+++ b/src/features/milestones/milestone.tsx
@@ -134,7 +134,7 @@ export function createMilestone<T extends MilestoneOptions>(
 
         milestone[GatherProps] = function (this: GenericMilestone) {
             const { visibility, display, style, classes, earned, id } = this;
-            return { visibility, display, style, classes, earned, id };
+            return { visibility, display, style: unref(style), classes, earned, id };
         };
 
         if (milestone.shouldEarn) {
diff --git a/src/features/tabs/tabFamily.ts b/src/features/tabs/tabFamily.ts
index 321396c..bfcfdfb 100644
--- a/src/features/tabs/tabFamily.ts
+++ b/src/features/tabs/tabFamily.ts
@@ -145,7 +145,7 @@ export function createTabFamily<T extends TabFamilyOptions>(
 
         tabFamily[GatherProps] = function (this: GenericTabFamily) {
             const { visibility, activeTab, selected, tabs, style, classes } = this;
-            return { visibility, activeTab, selected, tabs, style, classes };
+            return { visibility, activeTab, selected, tabs, style: unref(style), classes };
         };
 
         // This is necessary because board.types is different from T and TabFamily
diff --git a/src/features/upgrades/upgrade.ts b/src/features/upgrades/upgrade.ts
index 096ca2c..aa05c9a 100644
--- a/src/features/upgrades/upgrade.ts
+++ b/src/features/upgrades/upgrade.ts
@@ -154,7 +154,7 @@ export function createUpgrade<T extends UpgradeOptions>(
             return {
                 display,
                 visibility,
-                style,
+                style: unref(style),
                 classes,
                 resource,
                 cost,