Skip to content

Commit

Permalink
support barebones dynamic interface
Browse files Browse the repository at this point in the history
  • Loading branch information
@effortlessmountain
effortlessmountain committed Nov 25, 2019
1 parent f8106c1 commit fa28138
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 139 deletions.
27 changes: 23 additions & 4 deletions app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,32 @@ body {

.container {
display : flex;
justify-content: center;
justify-content: space-around;
align-items : center;
flex-wrap : wrap;
height : 80vh;
/* wee bit hacky */
}


.assets {
display: flex;
}

.interface {
height : 100%;
display : flex;
align-items : center;
flex-direction : column;
justify-content: space-around;
}

.interface-input {
height: 90%;
width : 400px;

}

.asset {
border : 2px solid black;
font-size : 14.6px;
Expand Down Expand Up @@ -64,7 +83,7 @@ body {
}

.write-in::after {
content:":"
content: ":"
}

.write-in,
Expand Down Expand Up @@ -115,8 +134,8 @@ body {
display : flex;
justify-content: center;
align-items : center;
font-size: 16px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size : 16px;
font-family : Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.value::before {
Expand Down
36 changes: 33 additions & 3 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const createDescription = (description) => {
return description ? `<div class="description">${description}</div>` : ""
}

const createAbilitiesHtml = (abilities) => {
const createAbilitiesHtml = (abilities = []) => {
const createAbilityName = (name) => {
return name ? `<span class="ability-name">${name}</span>` : ""
}
Expand Down Expand Up @@ -114,7 +114,7 @@ const createTrackHtml = (track) => {
}
}

const createAssetHtml = (asset) => {
const createAssetHtml = (asset = {}) => {
return `<div class="asset">
<div class="main-matter">
<div class="top">
Expand All @@ -136,4 +136,34 @@ const createAssetHtml = (asset) => {
</div>`
}

document.querySelector(".container").innerHTML += [bonded, berserker, caveLion].map(createAssetHtml).join("")
const assetInput = document.querySelector('.interface-input')
const assetContainer = document.querySelector(".assets")
const updateButton = document.querySelector(".update")
const showSingleAssetButton = document.querySelector(".show-single")
const showMultipleAssetButton = document.querySelector(".show-multiple")

const showSingleAssetExample = () => {
assetInput.value = JSON.stringify(caveLion, null, 2)
assetContainer.innerHTML = createAssetHtml(caveLion)
}

const showMultipleAssetExample = () => {
assetInput.value = JSON.stringify([bonded, berserker, caveLion], null, 2)
assetContainer.innerHTML = [bonded, berserker, caveLion].map(createAssetHtml).join("")
}



updateButton.onclick = () => {
let data = JSON.parse(assetInput.value)
if (Array.isArray(data)) {
assetContainer.innerHTML = data.map(createAssetHtml).join('')
} else {
assetContainer.innerHTML = createAssetHtml(data)
}
}

showSingleAssetButton.onclick = showSingleAssetExample
showMultipleAssetButton.onclick = showMultipleAssetExample

showSingleAssetExample()
139 changes: 7 additions & 132 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,142 +8,17 @@
<h1>Ironsworn Asset Workbench</h1>

<div class="container">
<div class="assets">

<div class="asset">
<div class="main-matter">
<div class="top">
<div class="type">Path</div>
<div class="header-circle">
<i class="header-icon">◊</i>
</div>
<div class="asset-name">Bonded</div>
</div>
<div class="details">
<div class="abilities">
<div class="ability">
<i class="dot filled"></i>
When you make a move which gives
you an add for sharing a bond, add +1
more.
</div>
<div class="ability">
<i class="dot unfilled"></i>
When you completely fill a box on
your bonds progress track, envision
what your relationships have taught
you. Then, take +1 experience and +2
momentum.
</div>
<div class="ability">
<i class="dot unfilled"></i>
When you make a move in a crucial
moment and score a miss, you may
cling to thoughts of your bond-kin for
courage or encouragement. If you do,
reroll any dice. On another miss, in
addition to the outcome of the move,
you must mark shaken or corrupted. If
both debilities are already marked,
<em>Face Desolation</em>.
</div>
</div>
</div>
</div>
</div>

<div class="asset">
<div class="main-matter">
<div class="top">
<div class="type">Combat Talent</div>
<div class="header-circle">
<i class="header-icon">▿</i>
</div>
<div class="asset-name">Berserker</div>
</div>
<div class="details">
<div class="description">If you are clad only in animal pelts...</div>
<div class="abilities">
<div class="ability">
<i class="dot filled"></i>
When you <em>Secure an Advantage</em> or
<em>Compel</em> by embodying your wild nature,
add +1 and take +1 momentum on a hit.

</div>
<div class="ability">
<i class="dot unfilled"></i>
When you <em>Strike</em> and score a hit, you
may inflict +1 harm. If you do, choose
one.
<li>Push yourself: <em>Endure Harm</em> (1 harm).</li>
<li>Lose yourself: <em>Endure Stress</em> (1 stress).</li>
</div>
<div class="ability">
<i class="dot unfilled"></i>
When you <em>Endure Harm</em> in a fight,
you may let the pain inflame your
wildness (decide before rolling). The
value of your action die is then halved,
rounding up (1/2=1, 3/4=2, 5/6=3). If
you score a strong hit, and choose to
embrace the pain, take your modified
action die value as +momentum.
</div>
</div>
</div>
</div>
</div>

<div class="asset">
<div class="main-matter">
<div class="top">
<div class="type">companion</div>
<div class="header-circle">
<i class="header-icon">C</i>
</div>
<div class="asset-name">Cave Lion</div>
</div>
<div class="details">
<div class="write-in">Name</div>
<div class="description">Your cat takes down its prey.</div>
<div class="abilities">
<div class="ability">
<i class="dot filled"></i>
<span class="ability-name">Eager</span>
When your cat chases down big
game, you may <em>Resupply</em> with +edge
(instead of +wits). If you do, take +1
supply or +1 momentum on a strong hit.
</div>
<div class="ability">
<i class="dot unfilled"></i>
<span class="ability-name">Inescapable</span>
When you <em>Enter the Fray</em>
or <em>Strike</em> by sending your cat to
attack, roll +edge. On a hit, take +2
momentum.
</div>
<div class="ability">
<i class="dot unfilled"></i>
<span class="ability-name">Protective</span>
When you <em>Make Camp</em>,
your cat is alert to trouble. If you or an
ally choose to relax, take +1 spirit. If
you focus, take +1 momentum.
</div>
</div>
</div>
</div>
<div class="track">
<div class="value zero">0</div>
<div class="value">1</div>
<div class="value">2</div>
<div class="value">3</div>
<div class="value">4</div>
<div class="value empty"></div>
</div>
<div class="interface">
<button class="show-single">Show Single Example Asset</button>
<button class="show-multiple">Show Multiple Example Assets</button>
<textarea class="interface-input" spellcheck="false"></textarea>
<button class="update">update</button>
</div>
</div>

<script src="app.js"></script>
</body>

Expand Down

0 comments on commit fa28138

Please sign in to comment.