Moved createModifierSection to modifiers.tsx

src/data/common.tsx

@@ -5,7 +5,7 @@ import {
     GenericClickable
 } from "features/clickables/clickable";
 import { GenericConversion } from "features/conversion";
-import { CoercableComponent, OptionsFunc, jsx, Replace, setDefault } from "features/feature";
+import { CoercableComponent, jsx, OptionsFunc, Replace, setDefault } from "features/feature";
 import { displayResource } from "features/resources/resource";
 import {
     createTreeNode,

src/game/modifiers.tsx

@@ -113,3 +113,32 @@ export function createSequentialModifier(...modifiers: Modifier[]): Required<Mod
         ))
     };
 }
+
+export function createModifierSection(
+    title: string,
+    subtitle: string,
+    modifier: Required<Modifier>,
+    base = 1,
+    unit = ""
+) {
+    return (
+        <div>
+            <h3>
+                {title}
+                {subtitle ? <span class="subtitle"> ({subtitle})</span> : null}
+            </h3>
+            <br />
+            <div class="modifier-container">
+                <span class="modifier-amount">
+                    {base}
+                    {unit}
+                </span>
+                <span class="modifier-description">Base</span>
+            </div>
+            {renderJSX(unref(modifier.description))}
+            <hr />
+            Total: {format(modifier.apply(base))}
+            {unit}
+        </div>
+    );
+}