add scaling of the asset to predefined sizes

effortlessmountain · Nov 27, 2019 · 960e4fb · 960e4fb
1 parent 3a21f0a
commit 960e4fb
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 37 deletions.
diff --git a/app.css b/app.css
@@ -1,6 +1,9 @@
 :root {
-    --darkest: #221a0f;
-    --gray   : #414042;
+    --darkest        : #221a0f;
+    --gray           : #414042;
+    --asset-width    : 750px;
+    --asset-height   : 1050px;
+    --asset-font-size: 2.2em;
 }
 
 body {
@@ -19,21 +22,21 @@ body {
 .container {
     display        : flex;
     justify-content: space-around;
-    align-items    : center;
+    align-items    : flex-start;
     flex-wrap      : wrap;
 }
 
 .interface {
-    color          : var(--darkest);
-    height         : 80vh;
-    display        : flex;
-    align-items    : center;
-    flex-direction : column;
-    justify-content: space-around;
+    color             : var(--darkest);
+    /* height         : 80vh; */
+    display           : flex;
+    align-items       : center;
+    flex-direction    : column;
+    justify-content   : space-around;
 }
 
 button {
-    width: 190px;
+    width         : 190px;
     font-size     : 100%;
     font-family   : inherit;
     border        : 0;
@@ -46,15 +49,37 @@ button {
     text-transform: uppercase;
 }
 
-button:hover {
+button:hover,
+button.selected {
     color           : white;
     background-color: var(--gray);
 }
 
 .interface-input {
-    height: 90%;
-    width : 400px;
+    height    : 90%;
+    width     : 100%;
+    min-height: 500px;
+    min-width : 400px;
+}
 
+.editor {
+    display       : flex;
+    flex-direction: column;
+    border        : 5px solid var(--gray);
+    padding       : 20px;
+}
+
+.scale-controls {
+    /* border     : 3px solid var(--gray); */
+    padding       : 5px;
+    display       : flex;
+    flex-direction: column;
+    align-items   : center;
+}
+
+.scale-buttons {
+    display  : flex;
+    flex-wrap: wrap;
 }
 
 .credits {
@@ -66,20 +91,19 @@ button:hover {
 .assets {
     display        : flex;
     max-width      : 2250px;
-    max-height     : 80vh;
     flex-wrap      : wrap;
     align-items    : center;
     justify-content: center;
 }
 
 .asset {
-    font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
+    font-family    : Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
     border         : 0.13em solid var(--gray);
     color          : var(--darkest);
     box-sizing     : border-box;
-    font-size      : 2.2em;
-    height         : 1050px;
-    width          : 750px;
+    font-size      : var(--asset-font-size);
+    height         : var(--asset-height);
+    width          : var(--asset-width);
     line-height    : 1.3em;
     display        : flex;
     flex-direction : column;
@@ -202,10 +226,40 @@ button:hover {
     content: "";
 }
 
-
-.value.empty {
+.asset.full .value.empty {
     background     : url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke' style='stroke:rgb(65,64,66);stroke-width:4' /></svg>");
     background-size: 100% 100%, auto;
 }
 
-.download {}
+.asset.two-thirds {
+    height   : calc(var(--asset-height)*(2/3));
+    width    : calc(var(--asset-width)*(2/3));
+    font-size: calc(var(--asset-font-size)*(2/3));
+}
+
+.asset.two-thirds .value.empty {
+    background     : url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke' style='stroke:rgb(65,64,66);stroke-width:3' /></svg>");
+    background-size: 100% 100%, auto;
+}
+
+.asset.one-half {
+    height   : calc(var(--asset-height)/2);
+    width    : calc(var(--asset-width)/2);
+    font-size: calc(var(--asset-font-size)/2);
+}
+
+.asset.one-half .value.empty {
+    background     : url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke' style='stroke:rgb(65,64,66);stroke-width:2' /></svg>");
+    background-size: 100% 100%, auto;
+}
+
+.asset.one-third {
+    height   : calc(var(--asset-height)/3);
+    width    : calc(var(--asset-width)/3);
+    font-size: calc(var(--asset-font-size)/3);
+}
+
+.asset.one-third .value.empty {
+    background     : url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke' style='stroke:rgb(65,64,66);stroke-width:1' /></svg>");
+    background-size: 100% 100%, auto;
+}
diff --git a/app.js b/app.js
@@ -70,6 +70,15 @@
         ]
     }
 
+    const calculateScale = () => {
+        if (window.innerHeight > 1100) {
+            return "full"
+        } else if (window.innerHeight > 750) {
+            return "two-thirds"
+        } else {
+            return "one-half"
+        }
+    }
 
     const createWriteIn = (writeIn) => {
         return writeIn ? `<div class="write-in">${writeIn}</div>` : ""
@@ -117,8 +126,8 @@
         }
     }
 
-    const createAssetHtml = (asset = {}) => {
-        return `<div class="asset">
+    const createAssetHtml = (asset = {}, scale = "full") => {
+        return `<div class="asset ${scale}">
                 <div class="main-matter">
                     <div class="top">
                         <div class="type">${asset.type}</div>
@@ -139,6 +148,7 @@
             </div>`
     }
 
+
     const assetInput = document.querySelector('.interface-input')
     const assetContainer = document.querySelector(".assets")
     const updateButton = document.querySelector(".update")
@@ -151,7 +161,7 @@
 
     const showSingleAssetExample = (asset) => {
         assetInput.value = JSON.stringify(asset, null, 2)
-        assetContainer.innerHTML = createAssetHtml(asset)
+        assetContainer.innerHTML = createAssetHtml(asset, window.IAW_scale)
     }
 
     const showScreen = (screen) => {
@@ -162,11 +172,30 @@
         }
     }
 
+    const saveImage = (uri, filename) => {
+        const link = document.createElement('a')
+        link.href = uri
+        link.download = filename
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+    }
+
     const screenshot = () => {
-        html2canvas(document.querySelector('.asset')).then(canvas => {
-            downloadContainer.appendChild(canvas)
-            showScreen('download')
-        })
+        const asset = document.querySelector('.asset')
+        // asset.setAttribute("style", "width:375px;height:525px;font-size:1.1em")
+        html2canvas(asset,
+            {
+                // width: "750",
+                // height: "1050",
+                // scale: 2
+                // windowHeight: "1080px",
+                // windowWidth: "1920px"
+            }).then(canvas => {
+                downloadContainer.appendChild(canvas)
+                // saveImage(canvas.toDataURL(), 'asset.png') //TODO name after asset's name
+                showScreen('download')
+            })
     }
 
     const closeDownload = () => {
@@ -179,7 +208,7 @@
         if (Array.isArray(data)) {
             assetContainer.innerHTML = data.map(createAssetHtml).join('')
         } else {
-            assetContainer.innerHTML = createAssetHtml(data)
+            assetContainer.innerHTML = createAssetHtml(data, window.IAW_scale)
         }
     }
 
@@ -190,7 +219,35 @@
     downloadButton.onclick = screenshot
     closeDownloadbutton.onclick = closeDownload
 
-    showSingleAssetExample(caveLion)
 
 
+    const scaleOneThirdButton = document.querySelector("#scale-one-third")
+    const scaleOneHalfButton = document.querySelector("#scale-one-half")
+    const scaleTwoThirdsButton = document.querySelector("#scale-two-thirds")
+    const scaleFullButton = document.querySelector("#scale-full")
+
+    const selectScaleButton = (size) => {
+        document.querySelector(`#scale-${size}`).classList = "scale-button selected"
+    }
+
+    const changeSize = (size) => {
+        document.querySelector(".asset").classList = `asset ${size}`
+        const buttons = document.querySelectorAll(".scale-button")
+        for (let i = 0; i < buttons.length; i++) {
+            buttons[i].classList = "scale-button"
+        }
+        selectScaleButton(size)
+        window.IAW_scale = size
+    }
+
+    scaleOneThirdButton.onclick = () => changeSize("one-third")
+    scaleOneHalfButton.onclick = () => changeSize("one-half")
+    scaleTwoThirdsButton.onclick = () => changeSize("two-thirds")
+    scaleFullButton.onclick = () => changeSize("full")
+
+    // initialize
+    window.IAW_scale = calculateScale()
+    selectScaleButton(window.IAW_scale)
+    showSingleAssetExample(caveLion)
+
 })()
diff --git a/changelog.md b/changelog.md
@@ -1,3 +1,5 @@
+v0.3
+* adds Scale selections and chooses one automatically on page load
 
 v0.2
 * Standardized on 1050px height by 750px width size.

diff --git a/index.html b/index.html
@@ -15,13 +15,29 @@
     <div class="container">
         <div class="assets"></div>
         <div class="interface">
-            <h3>Ironsworn Asset Workbench v0.2</h3>
-            <button class="show-example" id="bonded-example">Load Bonded Example Asset</button>
-            <button class="show-example" id="berserker-example">Load Berserker Example Asset</button>
-            <button class="show-example" id="cave-lion-example">Load Cave Lion Example Asset</button>
-            <textarea class="interface-input" spellcheck="false"></textarea>
-            <button class="update">update</button>
-            <button id="download">download</button>
+            <h2>Ironsworn Asset Workbench v0.3</h2>
+            <div class="scale-controls">
+                <span>Scale (also affects Download size)</span>
+                <div class="scale-buttons">
+                    <button class="scale-button" id="scale-one-third">250px by 350px</button>
+                    <button class="scale-button" id="scale-one-half">375px by 525px</button>
+                    <button class="scale-button" id="scale-two-thirds">500px by 700px</button>
+                    <button class="scale-button" id="scale-full">750px by 1050px</button>
+                </div>
+            </div>
+            <div class="example-controls">
+                <button class="show-example" id="bonded-example">Load Bonded Example Asset</button>
+                <button class="show-example" id="berserker-example">Load Berserker Example Asset</button>
+                <button class="show-example" id="cave-lion-example">Load Cave Lion Example Asset</button>
+            </div>
+
+            <div class="editor">
+                <textarea class="interface-input" spellcheck="false"></textarea>
+                <button class="update">update</button>
+            </div>
+            <div class="export">
+                <button id="download">download</button>
+            </div>
             <p class="credits">
                 Ironsworn and the official Ironsworn assets Copyright ©2019 Shawn Tomkin and used under
                 the Creative Commons Attribution-NonCommercial-