add support for custom fonts

effortlessmountain · Feb 19, 2020 · 8673097 · 8673097
1 parent 9c212af
commit 8673097
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -15,6 +15,8 @@
     </div>
     <div class="help">
         <h1>Help</h1>
+        <h3>What fonts can I use?</h3>
+        <p>The fonts from <a href="https://fonts.google.com/">Google Fonts</a> are supported. Put in the name of the font into the corresponding property and you're all set!</p>
         <h3>How do I add an icon to my asset?</h3>
         <p>If you want a unicode character, just set the value of the 'icon' attribute to that character in quotes:</p>
         <pre>"icon": "▿"</pre>
@@ -45,7 +47,7 @@ <h3>How do I add an icon to my asset?</h3>
     <div class="container">
         <div class="assets"></div>
         <div class="interface">
-            <h2>Ironsworn Asset Workbench v0.4.1</h2>
+            <h2>Ironsworn Asset Workbench v0.5.0</h2>
             <div class="top-row-controls">
                 <div>
                     <label>Scale (also affects Download size)</label>

diff --git a/src/asset.js b/src/asset.js
@@ -71,19 +71,51 @@ const populateIfExists = (text, value) => {
     return value ? text.replace("REPLACE", value) : ""
 }
 
+const createGoogleFontString = (...fonts) => {
+    let urlifiedFonts = Array.from(new Set(fonts))
+        .filter(font => font)
+        .map(font => font.replace(/ /g, "+"))
+        .join("|")
+    return urlifiedFonts ? `https://fonts.googleapis.com/css?family=${urlifiedFonts}&display=swap` : ""
+}
+
+const defaultFontConfig = {
+    assetTypeFontSize: "1.03em",
+    assetTypeFont: "Simonetta",
+    assetNameFontSize: "1.26em",
+    assetNameFont: "Simonetta",
+    detailsFontSize: "0.97em",
+    detailsFont: "PT Serif",
+    trackFontSize: "1.42em",
+    trackFont: "Simonetta"
+}
+
+const makeMergedConfig = (config) => {
+  return Object.assign({}, defaultFontConfig, config)
+}
+
 const createStyles = (fonts = {}) => {
-    return `<style>
+    let googleFonts = createGoogleFontString(fonts.assetTypeFont, fonts.assetNameFont, fonts.detailsFont, fonts.trackFont)
+
+    let fontConfig = makeMergedConfig(fonts)
+
+    return `<link rel="stylesheet" href=${googleFonts}>
+            <style>
                 .type {
-                    ${populateIfExists("font-size: REPLACE;", fonts.assetTypeFontSize)};
+                    font-size: ${fontConfig.assetTypeFontSize};
+                    font-family: "${fontConfig.assetTypeFont}";
                 }
                 .asset-name {
-                    ${populateIfExists("font-size: REPLACE;", fonts.assetNameFontSize)};
+                    font-size: ${fontConfig.assetNameFontSize};
+                    font-family: "${fontConfig.assetNameFont}";
                 }
                 .details {
-                    ${populateIfExists("font-size: REPLACE;", fonts.detailsFontSize)};
+                    font-size: ${fontConfig.detailsFontSize};
+                    font-family: "${fontConfig.detailsFont}";
                 }
                 .value, .value.text, .value.number {
-                    ${populateIfExists("font-size: REPLACE;", fonts.trackFontSize)};
+                    font-size: ${fontConfig.trackFontSize};
+                    font-family: "${fontConfig.trackFont}";
                 }
             </style>`
 }

diff --git a/src/exampleAssetLoader.js b/src/exampleAssetLoader.js
@@ -8,7 +8,7 @@ const showSingleAssetExample = (asset) => {
     showAsset(asset, assetScale)
 }
 
-export const loadDefaultExampleAsset = () => showSingleAssetExample(ironclad)
+export const loadDefaultExampleAsset = () => showSingleAssetExample(caveLion)
 
 const showLightbearerAssetButton = document.querySelector("#lightbearer-example")
 showLightbearerAssetButton.onclick = () => showSingleAssetExample(lightbearer)

diff --git a/src/exampleAssets.js b/src/exampleAssets.js
@@ -1,15 +1,19 @@
 export const ironclad = {
     fonts: {
         assetTypeFontSize: "1.03em",
-        assetNameFontSize: "1.26em",
+        assetTypeFont: "Noto Sans JP",
+        assetNameFontSize: "1.76em",
+        assetNameFont: "Russo One",
         detailsFontSize: "0.97em",
-        trackFontSize: "1.42em"
+        detailsFont: "Quicksand",
+        trackFontSize: "1.12em",
+        trackFont: "Krona One"
     },
     type: "combat talent",
     name: "Ironclad",
     writeIn: "",
     track: ["LIGHTLY ARMORED", "GEARED FOR WAR"],
-    description: "If you wear armor...",
+    description: "If you wear high-tech armor...",
     abilities: [
         {
             filled: true,
@@ -28,11 +32,17 @@ export const ironclad = {
         type: "svg",
         author: "Delapouite",
         name: "Light Helm icon",
-        svg: '<svg class="Icon" style="height: 512px; width: 512px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g class="" style="touch-action: none;" transform="translate(0,0)"><path d="M233 25v158h46V25h-46zm-18 21.74c-25.1 7.53-44.9 22.05-60 40.88-20.7 25.88-32 60.28-33.7 95.38H215V46.74zm82 0V183h93.7c-1.7-35.1-13-69.5-33.7-95.38-15.1-18.83-34.9-33.35-60-40.88zM105 201v30h302v-30H105zm16.8 48c4 23.2 23.2 41.6 48.4 55.1 18.6 9.8 40 16.6 58.8 20.1v-15.3c-13.7-3.7-28.4-9.7-42.2-17-11.8-6.3-22.8-13.6-31.1-22.1-6.1-6.1-11-13.1-13.3-20.8h-20.6zm125.2 0v78h18v-78h-18zm122.6 0c-2.3 7.7-7.2 14.7-13.3 20.8-8.3 8.5-19.3 15.8-31.1 22.1-13.8 7.3-28.5 13.3-42.2 17v15.3c18.8-3.5 40.2-10.3 58.8-20.1 25.2-13.5 44.4-31.9 48.4-55.1h-20.6zm-252.8 33.3c-5.7 54.2-16.7 105.9-27.63 150.1.19.2 1.82 5.3 6.06 11 4.51 6.1 11.17 13.2 18.67 19.8 11.7 10.2 25.9 18.8 37.1 22.2V313.6c-13.5-8.5-25.6-18.9-34.2-31.3zm278.4 0c-8.6 12.4-20.7 22.8-34.2 31.3v171.8c11.2-3.4 25.4-12 37.1-22.2 7.5-6.6 14.2-13.7 18.7-19.8 4.2-5.7 5.8-10.8 6-11-11-44.2-21.9-95.9-27.6-150.1zM256 379c-20.3 0-40.6 1-58.1 3.1-10.9 1.3-20.7 2.8-28.9 5.1v18.9c7.1-2.4 18.2-4.6 31.1-6.2 16.5-1.9 36.2-2.9 55.9-2.9 19.7 0 39.4 1 55.9 2.9 12.9 1.6 24 3.8 31.1 6.2v-18.9c-8.2-2.3-18-3.8-28.9-5.1-17.5-2.1-37.8-3.1-58.1-3.1z" fill="#fff" fill-opacity="1"></path></g></svg>'
+        svg: '<svg style=\"height: 512px; width: 512px;\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><g class=\"\" style=\"touch-action: none;\" transform=\"translate(0,0)\"><path d=\"M246.488 29.5l-13.244 39.725 14.381 86.275h16.75l14.38-86.275L265.515 29.5h-19.026zM195 61.5l-40 30h63.709l-3.953-23.725 2.092-6.275H195zm100.152 0l2.092 6.275-3.953 23.725H357l-40-30h-21.848zM69.42 90.727L41.639 257.41 71 286.773V162.375l20.863-41.725L69.42 90.727zm373.16 0l-22.443 29.923L441 162.375v124.398l29.361-29.363-27.78-166.683zM117.563 109.5L89 166.625V400l110 82.5v-87.906l-80-32V211.576l35.393-72.076h72.316l-5-30H117.562zm172.728 0l-5 30h72.272L393 210.375v152.219l-80 32V482.5L423 400V166.625L394.437 109.5H290.291zm-124.684 48L137 215.758v3.742h238v-4.875L346.437 157.5h-64.146l-2.666 16h-47.25l-2.666-16h-64.102zM137 237.5v46h30v-46h-30zm96 0v46h46v-46h-46zm112 0v46h30v-46h-30zm-208 64v48.906l46.678 18.67 27.029-67.576H137zm93.092 0l-29.705 74.262L217 382.406v51.067l39 9.75 39-9.75v-51.067l16.613-6.644-29.705-74.262h-51.816zm71.201 0l27.03 67.576L375 350.406V301.5h-73.707z\" fill=\"#fff\" fill-opacity=\"1\"></path></g></svg>'
     }
 }
 
 export const lightbearer = {
+    fonts: {
+        assetTypeFontSize: "1.03em",
+        assetNameFontSize: "1.26em",
+        detailsFontSize: "0.97em",
+        trackFontSize: "1.42em",
+    },
     type: "ritual",
     name: "Lightbearer",
     track: 6,