${asset.type}
@@ -139,6 +148,7 @@
`
}
+
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)
+
})()
\ No newline at end of file
diff --git a/changelog.md b/changelog.md
index 08a7d40..4724e74 100644
--- 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
index bc5286b..663e276 100644
--- a/index.html
+++ b/index.html
@@ -15,13 +15,29 @@
-
Ironsworn Asset Workbench v0.2
-
-
-
-
-
-
+
Ironsworn Asset Workbench v0.3
+
+
Scale (also affects Download size)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Ironsworn and the official Ironsworn assets Copyright ©2019 Shawn Tomkin and used under
the Creative Commons Attribution-NonCommercial-