Merge remote-tracking branch 'template/main'

CHANGELOG.md

@@ -6,6 +6,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.4] - 2022-03-13
+### Added
+- You can now access this.on() from within a createLayer function (and other BaseLayer properties)
+- Support for passing non-persistent refs to createResource
+- dontMerge class to allow features to ignore mergeAdjacent
+### Fixed
+- Clickables would not merge adjacent
+- onClick and onHold functions would not be bound to their object when being called
+- Refs passed to a components style prop would be ignored
+- Fixed z-index issue when stopping hovering over features with .can class
+
 ## [0.1.3] - 2022-03-11
 ### Added
 - Milestone.complete

package.json

@@ -1,6 +1,6 @@
 {
   "name": "profectus",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "start": "vue-cli-service serve",
@@ -26,10 +26,10 @@
     "@rushstack/eslint-patch": "^1.1.0",
     "@types/lodash.clonedeep": "^4.5.6",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
+    "@vue/cli-plugin-babel": "^5.0.3",
-    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
+    "@vue/cli-plugin-eslint": "^5.0.3",
-    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
+    "@vue/cli-plugin-typescript": "^5.0.3",
-    "@vue/cli-service": "~5.0.0-rc.1",
+    "@vue/cli-service": "^5.0.3",
     "@vue/compiler-sfc": "^3.2.26",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",

src/components/common/features.css

@@ -7,6 +7,8 @@
     margin: var(--feature-margin);
     box-sizing: border-box;
     color: var(--feature-foreground);
+    z-index: 0;
+    transition: all 0.5s, z-index 0s 0.5s;
 }
 
 .can,
@@ -20,6 +22,7 @@
     transform: scale(1.15, 1.15);
     box-shadow: 0 0 20px var(--points);
     z-index: 1;
+    transition: all 0.5s, z-index 0s;
 }
 
 .locked,

src/components/common/table.css

@@ -34,57 +34,57 @@
 	margin: 10px 0;
 }
 
-.row.mergeAdjacent > .feature,
+.row.mergeAdjacent > .feature:not(.dontMerge),
-.row.mergeAdjacent > .tooltip-container > .feature {
+.row.mergeAdjacent > .tooltip-container > .feature:not(.dontMerge) {
     margin-left: 0;
     margin-right: 0;
     border-radius: 0;
 }
 
-.row.mergeAdjacent > .feature:first-child,
+.row.mergeAdjacent > .feature:not(.dontMerge):first-child,
-.row.mergeAdjacent > .tooltip-container:first-child > .feature {
+.row.mergeAdjacent > .tooltip-container:first-child > .feature:not(.dontMerge) {
     border-radius: var(--border-radius) 0 0 var(--border-radius);
 }
 
-.row.mergeAdjacent > .feature:last-child,
+.row.mergeAdjacent > .feature:not(.dontMerge):last-child,
-.row.mergeAdjacent > .tooltip-container:last-child > .feature {
+.row.mergeAdjacent > .tooltip-container:last-child > .feature:not(.dontMerge) {
     border-radius: 0 var(--border-radius) var(--border-radius) 0;
 }
 
-.row.mergeAdjacent > .feature:first-child:last-child,
+.row.mergeAdjacent > .feature:not(.dontMerge):first-child:last-child,
-.row.mergeAdjacent > .tooltip-container:first-child:last-child > .feature {
+.row.mergeAdjacent > .tooltip-container:first-child:last-child > .feature:not(.dontMerge) {
     border-radius: var(--border-radius);
 }
 
 /*
 TODO how to implement mergeAdjacent for grids?
-.row.mergeAdjacent + .row.mergeAdjacent > .feature {
+.row.mergeAdjacent + .row.mergeAdjacent > .feature:not(.dontMerge) {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
 }
 */
 
-.col.mergeAdjacent .feature {
+.col.mergeAdjacent .feature:not(.dontMerge) {
     margin-top: 0;
     margin-bottom: 0;
     border-radius: 0;
 }
 
-.col.mergeAdjacent .feature:first-child {
+.col.mergeAdjacent .feature:not(.dontMerge):first-child {
     border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
 
-.col.mergeAdjacent .feature:last-child {
+.col.mergeAdjacent .feature:not(.dontMerge):last-child {
     border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 
-.col.mergeAdjacent .feature:first-child:last-child {
+.col.mergeAdjacent .feature:not(.dontMerge):first-child:last-child {
     border-radius: var(--border-radius);
 }
 
 /*
 TODO how to implement mergeAdjacent for grids?
-.col.mergeAdjacent + .col.mergeAdjacent > .feature {
+.col.mergeAdjacent + .col.mergeAdjacent > .feature:not(.dontMerge) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }

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) {

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,

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,

src/features/buyable.tsx

@@ -162,12 +162,11 @@ export function createBuyable<T extends BuyableOptions>(
         buyable.display = jsx(() => {
             // TODO once processComputable types correctly, remove this "as X"
             const currDisplay = unref(display) as BuyableDisplay;
-            if (
+            if (isCoercableComponent(currDisplay)) {
-                currDisplay != null &&
+                const CurrDisplay = coerceComponent(currDisplay);
-                !isCoercableComponent(currDisplay) &&
+                return <CurrDisplay />;
-                buyable.cost != null &&
+            }
-                buyable.resource != null
+            if (currDisplay != null && buyable.cost != null && buyable.resource != null) {
-            ) {
                 const genericBuyable = buyable as GenericBuyable;
                 const Title = coerceComponent(currDisplay.title || "", "h3");
                 const Description = coerceComponent(currDisplay.description);
@@ -226,7 +225,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>;

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,

src/features/clickables/Clickable.vue

@@ -1,10 +1,10 @@
 <template>
-    <div
-        v-if="unref(visibility) !== Visibility.None"
-        :style="{ visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined }"
-    >
     <button
-            :style="unref(style)"
+        v-if="unref(visibility) !== Visibility.None"
+        :style="[
+            { visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined },
+            unref(style) ?? []
+        ]"
         @click="onClick"
         @mousedown="start"
         @mouseleave="stop"
@@ -25,7 +25,6 @@
         <MarkNode :mark="unref(mark)" />
         <LinkNode :id="id" />
     </button>
-    </div>
 </template>
 
 <script lang="tsx">

src/features/clickables/clickable.ts

@@ -87,7 +87,7 @@ export function createClickable<T extends ClickableOptions>(
         processComputable(clickable as T, "display");
 
         if (clickable.onClick) {
-            const onClick = clickable.onClick;
+            const onClick = clickable.onClick.bind(clickable);
             clickable.onClick = function () {
                 if (unref(clickable.canClick)) {
                     onClick();
@@ -95,7 +95,7 @@ export function createClickable<T extends ClickableOptions>(
             };
         }
         if (clickable.onHold) {
-            const onHold = clickable.onHold;
+            const onHold = clickable.onHold.bind(clickable);
             clickable.onHold = function () {
                 if (unref(clickable.canClick)) {
                     onHold();
@@ -119,7 +119,7 @@ export function createClickable<T extends ClickableOptions>(
             return {
                 display,
                 visibility,
-                style,
+                style: unref(style),
                 classes,
                 onClick,
                 onHold,

src/features/grids/grid.ts

@@ -279,7 +279,7 @@ export function createGrid<T extends GridOptions>(
         processComputable(grid as T, "getDisplay");
 
         if (grid.onClick) {
-            const onClick = grid.onClick;
+            const onClick = grid.onClick.bind(grid);
             grid.onClick = function (id, state) {
                 if (unref((grid as GenericGrid).cells[id].canClick)) {
                     onClick(id, state);
@@ -287,7 +287,7 @@ export function createGrid<T extends GridOptions>(
             };
         }
         if (grid.onHold) {
-            const onHold = grid.onHold;
+            const onHold = grid.onHold.bind(grid);
             grid.onHold = function (id, state) {
                 if (unref((grid as GenericGrid).cells[id].canClick)) {
                     onHold(id, state);

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,

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) {

src/features/resources/resource.ts

@@ -1,5 +1,5 @@
 import Decimal, { DecimalSource, format, formatWhole } from "util/bignum";
-import { computed, ComputedRef, ref, Ref, watch } from "vue";
+import { computed, ComputedRef, isRef, ref, Ref, watch } from "vue";
 import { globalBus } from "game/events";
 import { State, persistent } from "game/persistence";
 
@@ -15,7 +15,9 @@ export function createResource<T extends State>(
     precision = 0,
     small = undefined
 ): Resource<T> {
-    const resource: Partial<Resource<T>> = persistent(defaultValue);
+    const resource: Partial<Resource<T>> = isRef(defaultValue)
+        ? defaultValue
+        : persistent(defaultValue);
     resource.displayName = displayName;
     resource.precision = precision;
     resource.small = small;

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

src/features/trees/tree.ts

@@ -101,7 +101,7 @@ export function createTreeNode<T extends TreeNodeOptions>(
         processComputable(treeNode as T, "mark");
 
         if (treeNode.onClick) {
-            const onClick = treeNode.onClick;
+            const onClick = treeNode.onClick.bind(treeNode);
             treeNode.onClick = function () {
                 if (unref(treeNode.canClick)) {
                     onClick();
@@ -109,7 +109,7 @@ export function createTreeNode<T extends TreeNodeOptions>(
             };
         }
         if (treeNode.onHold) {
-            const onHold = treeNode.onHold;
+            const onHold = treeNode.onHold.bind(treeNode);
             treeNode.onHold = function () {
                 if (unref(treeNode.canClick)) {
                     onHold();

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,

src/game/layers.tsx

@@ -89,15 +89,19 @@ export type GenericLayer = Replace<
     }
 >;
 
-export function createLayer<T extends LayerOptions>(optionsFunc: () => T): Layer<T> {
+export function createLayer<T extends LayerOptions>(
+    optionsFunc: (() => T) & ThisType<BaseLayer>
+): Layer<T> {
     return createLazyProxy(() => {
-        const layer = optionsFunc() as T & Partial<BaseLayer>;
+        const layer = {} as T & Partial<BaseLayer>;
         const emitter = (layer.emitter = createNanoEvents<LayerEvents>());
         layer.on = emitter.on.bind(emitter);
         layer.emit = emitter.emit.bind(emitter);
 
         layer.minimized = persistent(false);
 
+        Object.assign(layer, optionsFunc.call(layer));
+
         processComputable(layer as T, "color");
         processComputable(layer as T, "display");
         processComputable(layer as T, "name");