Character Sheet Updates

-Added hit stats to the player sheet
This commit is contained in:
Martin Jencka
2020-11-20 14:54:51 -07:00
parent 0ec9ef47a3
commit 9ce6e0adef
6 changed files with 182 additions and 74 deletions
+75 -17
View File
@@ -1,4 +1,45 @@
@import url("https://fonts.googleapis.com/css2?family=Martel:wght@400;800&family=Roboto:wght@300;400;500&display=swap");
@include-when-export url(https://fonts.loli.net/css?family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic-ext,cyrillic,latin-ext);
/* =========== */
/* pt-serif-regular - latin */
@font-face {
font-family: 'Futura PT Book';
font-style: normal;
font-weight: normal;
src: local('Futura PT Book');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* pt-serif-700 - latin */
@font-face {
font-family: 'Futura PT Bold';
font-style: normal;
font-weight: bold;
src: local('Futura PT Bold');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* pt-serif-700 - latin */
@font-face {
font-family: 'Futura PT Cond Medium';
font-style: normal;
font-weight: normal;
src: local('Futura PT Cond Medium');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* pt-serif-700 - latin */
@font-face {
font-family: 'Futura PT Cond Bold';
font-style: normal;
font-weight: bold;
src: local('Futura PT Cond Bold');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Global styles */
.window-app {
font-family: "Roboto", sans-serif;
@@ -51,7 +92,7 @@
}
.widegap {
gap: 20px;
gap: 30px;
padding: 6px;
}
@@ -414,10 +455,7 @@
}
.mothership .maxhealth-input {
margin: -0.15em;
margin-top: 8px;
margin-left: -5px;
margin: auto;
border: 0px solid #111;
font-size: 1.8rem;
font-weight: bold;
@@ -440,29 +478,42 @@
.mothership .minmaxwrapper{
grid-column: 1/-1;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-columns: 1fr 1px 1fr;
align-items: start;
max-height: 50px;
width: 145px;
height: 50px;
padding: 0;
border: 4px solid #111;
border-radius: 2.5em;
border-radius: 1.5em;
background: 0;
}
.mothership .valuewrapper{
grid-column: 1/-1;
display: grid;
width: 145px;
height: 50px;
padding: 0;
border: 4px solid #111;
border-radius: 1.5em;
background: 0;
margin-top: -15px;
}
.mothership .minmaxtopstat{
width: 9rem;
grid-template-columns: 1fr 2fr;
width: 8.5rem;
grid-template-columns: 1fr 1fr;
justify-self: center;
display: grid;
justify-items: center;
gap: 3px;
margin-bottom: 7px;
}
.mothership .minmaxtext{
text-align: left;
grid-column: 1/-1;
font-family: "Montserrat", "Arial Black", sans-serif;
/* font-family: "Montserrat", "Arial Black", sans-serif; */
font-size: 1.15rem;
font-weight: bold;
line-height: 1;
@@ -470,15 +521,20 @@
text-transform: uppercase;
}
.mothership .slant{
border-right: 2px solid #111;
height: 100%;
transform: skewX(-15deg);
}
.mothership .healthmaxtext{
text-align: left;
grid-column: span 1;
font-size: 0.8rem;
font-family: "Montserrat", "Arial Black", sans-serif;
/* font-family: "Montserrat", "Arial Black", sans-serif; */
font-weight: bold;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
.mothership .stresslabel {
@@ -571,12 +627,13 @@
}
.mothership .savebackground {
border-radius: 10em;
border-radius: 1em;
background: #111;
padding: 0 0.5rem;
padding-bottom: 1.3rem;
padding-top: 1.3rem;
width: 80px;
padding-bottom: 0.3rem;
padding-top: 0.5rem;
width: 80px;
margin-top: -1px;
}
.mothership .header {
@@ -738,6 +795,7 @@
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0.25rem;
padding: 1em;
margin-top: -11px;
}
.mothership .headernamegrid {
+1
View File
File diff suppressed because one or more lines are too long
+6 -1
View File
@@ -13,6 +13,10 @@
"max": 10,
"pool": 1,
"maxpools": 1
},
"hits": {
"value" : 2,
"max" : 2
}
}
},
@@ -75,7 +79,8 @@
},
"other": {
"stress": {
"value": 2
"value": 2,
"min": 0
},
"resolve": {
"value": 0
+69 -34
View File
@@ -62,63 +62,98 @@
</div>
</div>
<div class="health grid grid-1col">
<div class="resource healthspread minmaxtopstat">
<label for="data.health.value" class="resource-label minmaxtext">Health</label>
<div class="health grid grid-1col" style="margin-top: 0;">
<div class="grid">
<!-- Health -->
<div class="resource healthspread minmaxtopstat">
<label for="data.health.value" class="resource-label minmaxtext">Health</label>
<div class="minmaxwrapper">
<input class="sizelarge circle-input greyText" type="text" name="data.health.value"
value="{{data.health.value}}" data-dtype="Number" />
<input class="maxhealth-input darkGreyText" type="text" name="data.health.max" value="{{data.health.max}}"
data-dtype="Number" />
<div class="minmaxwrapper">
<input class="maxhealth-input darkGreyText" type="text" name="data.health.value" value="{{data.health.value}}"
data-dtype="Number" />
<div class="slant"></div>
<input class="maxhealth-input darkGreyText" type="text" name="data.health.max"
value="{{data.health.max}}" data-dtype="Number" />
</div>
<div class="healthmaxtext">Current</div>
<div class="healthmaxtext">Maximum</div>
</div>
<div class="healthmaxtext">MAX</div>
<div class="healthmaxtext">CURRENT</div>
<!-- Hits -->
<div class="resource healthspread minmaxtopstat">
<label for="data.hits.value" class="resource-label minmaxtext">Hits</label>
<div class="minmaxwrapper">
<input class="maxhealth-input darkGreyText" type="text" name="data.hits.value" value="{{data.hits.value}}"
data-dtype="Number" />
<div class="slant"></div>
<input class="maxhealth-input darkGreyText" type="text" name="data.hits.max"
value="{{data.hits.max}}" data-dtype="Number" />
</div>
<div class="healthmaxtext">Current</div>
<div class="healthmaxtext">Maximum</div>
</div>
<!-- Stress -->
<div class="resource healthspread minmaxtopstat">
<label for="data.other.stress.value" class="resource-label minmaxtext">Stress</label>
<div class="minmaxwrapper">
<input class="maxhealth-input darkGreyText" type="text" name="data.other.stress.value" value="{{data.other.stress.value}}"
data-dtype="Number" />
<div class="slant" style="transform: skewX(0deg);"></div>
<input class="maxhealth-input darkGreyText" type="text" name="data.other.stress.min"
value="{{data.other.stress.min}}" data-dtype="Number" />
</div>
<div class="healthmaxtext">Current</div>
<div class="healthmaxtext">Minimum</div>
</div>
<!-- Resolve -->
<div class="resource healthspread minmaxtopstat">
<label for="data.other.stress.value" class="resource-label minmaxtext">Resolve</label>
<div class="valuewrapper">
<input class="maxhealth-input darkGreyText" type="text" name="data.other.resolve.value" value="{{data.other.resolve.value}}"
data-dtype="Number" />
</div>
</div>
</div>
<!-- Patch -->
<div class="">
<div class="resource-label">PATCH</div>
<div class="headerinputfield charname"><input name="data.patch.value" class="noborder" type="text"
value="{{data.patch.value}}" placeholder="" /></div>
</div>
<br />
<!-- Trinket -->
<div class="">
<div class="resource-label">TRINKET</div>
<div class="headerinputfield charname"><input name="data.trinket.value" class="noborder" type="text"
value="{{data.trinket.value}}" placeholder="" /></div>
</div>
<br />
<!-- CLASS -->
<div class="">
<div class="" style="margin-left: 17px; margin-right: 13px;">
<div class="resource-label">STRESS & PANIC</div>
<textarea name="data.stressdesc.value" rows="3" class="textarea-input" type="text"
<textarea name="data.stressdesc.value" rows="2" class="textarea-input" type="text"
data-target="data.stressdesc.value" placeholder="">{{data.stressdesc.value}}</textarea>
</div>
</div>
<div class="abilities">
<div class="grid grid-2col">
<!-- <div class="grid grid-2col"> -->
<!-- STRESS -->
<div class="resource mainstat">
<!-- <div class="resource mainstat">
<div class="stresslabel">
<div class="ability-mod stresstext">STRESS</div>
</div>
<input class="smallcircle-input" type="text" name="data.other.stress.value"
value="{{data.other.stress.value}}" data-dtype="Number" />
</div>
</div> -->
<!-- RESOLVE -->
<div class="resource mainstat">
<!-- <div class="resource mainstat">
<div class="stresslabel">
<div class="ability-mod stresstext">RESOLVE</div>
</div>
<input class="smallcircle-input" type="text" name="data.other.resolve.value"
value="{{data.other.resolve.value}}" data-dtype="Number" />
</div>
</div>
</div> -->
<!-- </div> -->
<div class="grid grid-1col widegap">
<!-- Strength -->
@@ -257,7 +292,7 @@
{{#each actor.armors as |armor id|}}
<li class="item flexrow" data-item-id="{{armor._id}}">
<div class="item-image"><img src="{{armor.img}}" title="{{armor.name}}" width="24" height="24" /></div>
<h4 class="skill-stat list-roll description-roll">{{armor.name}}</h4>
<h4 class="skill-name list-roll description-roll">{{armor.name}}</h4>
<div class="skill-stat">{{armor.data.bonus}}</div>
<div class="skill-stat">{{armor.data.features}}</div>
<div class="skill-stat item-equip"><input type="checkbox" name="armor.data.equipped" data-dtype="Boolean"
@@ -284,7 +319,7 @@
{{#each actor.gear as |item id|}}
<li class="item flexrow" data-item-id="{{item._id}}">
<div class="item-image"><img src="{{item.img}}" title="{{item.name}}" width="24" height="24" /></div>
<h4 class="skill-stat list-roll description-roll">{{item.name}}</h4>
<h4 class="skill-name list-roll description-roll">{{item.name}}</h4>
<div class="skill-stat list-roll item-quantity">{{item.data.quantity}}</div>
<div class="skill-stat">{{item.data.weight}}</div>
<div class="item-controls">
+5 -4
View File
@@ -73,7 +73,7 @@
<div class="creature-ability-container creature-ability-title">Special Abilities</div>
<div class="whiteline"></div>
{{#each actor.abilities as |ability id|}}
<div class="creature-ability-container item" data-item-id="{{ability._id}}">
<div class="creature-ability-container item" data-item-id="{{ability._id}}">
<div class="creature-ability-title list-roll description-roll">{{ability.name}}</div>
<div class="creature-ability-text itemtext">{{{ability.data.description}}}</div>
<div class="item-controls" style="margin-left: 3px; font-size: 0.7rem;">
@@ -81,9 +81,10 @@
<a class="item-control item-delete darkgrey" title="Delete Ability"><i class="fas fa-trash"></i></a>
</div>
</div>
{{/each}}
<a class="item-control weapon-create darkgrey " style="margin-left: 5px;" title="Create Ability" data-type="ability"><i class="fas fa-plus"></i>
<a class="item-control weapon-create darkgrey " style="margin-left: 5px;" title="Create Ability"
data-type="ability"><i class="fas fa-plus"></i>
Add</a>
</div>
</div>
@@ -134,7 +135,7 @@
</div>
</li>
{{/each}}
</ol>
</div>
</section>
+26 -18
View File
@@ -6,7 +6,7 @@
<img class="mothershiplogo" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="150"
width="150" />
<div class="headergrid" style="grid-template-columns: 1fr 1fr 1fr; padding: 1em; margin-top: -11px;">
<div class="headergrid" style="grid-template-columns: 1fr 1fr 1fr; padding: 1em;">
<!-- <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="150" width="150"/> -->
<!-- PLAYER NAME -->
@@ -112,43 +112,50 @@
<div style="display: grid;">
<br />
<!-- Hull -->
<div class="resource healthspread minmaxtopstat flex-center">
<label for="data.supplies.hull.value" class="resource-label minmaxtext">Hull</label>
<div class="minmaxwrapper">
<input class="sizelarge circle-input greyText" type="text" name="data.supplies.hull.value"
<input class="maxhealth-input darkGreyText" type="text" name="data.supplies.hull.value"
value="{{data.supplies.hull.value}}" data-dtype="Number" />
<div class="slant"></div>
<input class="maxhealth-input darkGreyText" type="text" name="data.supplies.hull.max"
value="{{data.supplies.hull.max}}" data-dtype="Number" />
</div>
<div class="healthmaxtext">MAX</div>
<div class="healthmaxtext">CURRENT</div>
<div class="healthmaxtext">Current</div>
<div class="healthmaxtext">Maximum</div>
</div>
<br />
<div class="resource healthspread minmaxtopstat">
<!-- Fuel -->
<div class="resource healthspread minmaxtopstat flex-center">
<label for="data.supplies.fuel.value" class="resource-label minmaxtext">Fuel</label>
<div class="minmaxwrapper">
<input class="sizelarge circle-input greyText" type="text" name="data.supplies.fuel.value"
<input class="maxhealth-input darkGreyText" type="text" name="data.supplies.fuel.value"
value="{{data.supplies.fuel.value}}" data-dtype="Number" />
<div class="slant"></div>
<input class="maxhealth-input darkGreyText" type="text" name="data.supplies.fuel.max"
value="{{data.supplies.fuel.max}}" data-dtype="Number" />
</div>
<div class="healthmaxtext">MAX</div>
<div class="healthmaxtext">CURRENT</div>
<div class="healthmaxtext">Current</div>
<div class="healthmaxtext">Maximum</div>
</div>
<br />
<div class="resource healthspread minmaxtopstat">
<div class="resource healthspread minmaxtopstat flex-center">
<label for="data.supplies.stock.value" class="resource-label minmaxtext">Stock</label>
<div class="minmaxwrapper">
<input class="sizelarge circle-input greyText" type="text" name="data.supplies.stock.value"
<input class="maxhealth-input darkGreyText" type="text" name="data.supplies.stock.value"
value="{{data.supplies.stock.value}}" data-dtype="Number" />
<div class="slant"></div>
<input class="maxhealth-input darkGreyText" type="text" name="data.supplies.stock.max"
value="{{data.supplies.stock.max}}" data-dtype="Number" />
</div>
<div class="healthmaxtext">MAX</div>
<div class="healthmaxtext">CURRENT</div>
<div class="healthmaxtext">Current</div>
<div class="healthmaxtext">Maximum</div>
</div>
<br />
</div>
<div class="creature-abilities" style="height: 300px;">
@@ -247,7 +254,7 @@
<li class="item flexrow" data-item-id="{{module._id}}">
<div class="item-image"><img src="{{module.img}}" title="{{module.name}}" width="24" height="24" />
</div>
<h4 class="skill-stat list-roll description-roll">{{module.name}}</h4>
<h4 class="skill-name list-roll description-roll">{{module.name}}</h4>
<div class="skill-stat list-roll item-quantity">{{module.data.quantity}}</div>
<div class="skill-stat">{{module.data.hull}}</div>
<div class="skill-stat">{{module.data.feature}}</div>
@@ -269,14 +276,15 @@
<div class="skill-stat">Quantity</div>
<div class="skill-stat">Weight</div>
<div class="item-controls">
<a class="item-control item-create" title="Create Item" data-type="item"><i class="fas fa-plus"></i> Add</a>
<a class="item-control item-create" title="Create Item" data-type="item"><i
class="fas fa-plus"></i> Add</a>
</div>
</li>
{{#each actor.cargo as |item id|}}
<li class="item flexrow" data-item-id="{{item._id}}">
<div class="item-image"><img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
</div>
<h4 class="skill-stat list-roll description-roll">{{item.name}}</h4>
<h4 class="skill-name list-roll description-roll">{{item.name}}</h4>
<div class="skill-stat list-roll item-quantity">{{item.data.quantity}}</div>
<div class="skill-stat">{{item.data.weight}}</div>
<div class="item-controls">