Initialization
This commit is contained in:
commit
3458f39973
GPG key ID:
6379E413924A4E77
28 changed files with 6780 additions and 0 deletions
261
output/main.css
Normal file
261
output/main.css
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
input.sheet-tabstoggle[value="main"] ~ .main-tab {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.healthWrapper {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.healthWrapper > .healthContainer {
|
||||
grid-template-columns: repeat(3, auto);
|
||||
justify-content: start;
|
||||
justify-items: center;
|
||||
gap: 0;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.healthWrapper > .healthContainer > * {
|
||||
margin: -1px;
|
||||
}
|
||||
|
||||
.healthWrapper > .healthContainer > label.healthTrackerBox {
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
background-color: red;
|
||||
border: 2px solid #500;
|
||||
border-radius: 3px;
|
||||
order: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.healthWrapper > .healthContainer > label.healthTrackerBox.reset {
|
||||
background-color: brown;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.healthWrapper > .healthContainer > label.healthTrackerBox:after {
|
||||
content: "-1";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
.healthWrapper > .healthContainer > label.healthTrackerBox:checked {
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.healthWrapper > .healthContainer > label.healthTrackerBox:checked ~ .healthTrackerBox {
|
||||
background-color: #444;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.healthWrapper > .healthContainer > label.healthTrackerBox:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.abilityBox {
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(6, auto);
|
||||
grid-auto-flow: row;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
gap: .7em 4px;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.abilityBox > * {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
.abilityBox > span {
|
||||
color: #aae;
|
||||
margin-right: 20px;
|
||||
font-size: 13pt;
|
||||
}
|
||||
|
||||
.abilityBox > p {
|
||||
color: #aae;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.abilityBox > p.abilityLabel {
|
||||
margin-bottom: -.5em;
|
||||
}
|
||||
|
||||
.sheetform {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background-color: #0b0b0b !important;
|
||||
}
|
||||
|
||||
.sheetform .charactersheet {
|
||||
border: 4px double #500 !important;
|
||||
padding: 4px !important;
|
||||
}
|
||||
|
||||
.sheetform .charactersheet .img-wrapper {
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.sheetform .charactersheet .img-wrapper img {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.sheetform .charactersheet button {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: #500;
|
||||
border: 0;
|
||||
border-radius: 1em;
|
||||
margin: 0 2px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sheetform .charactersheet input {
|
||||
color: #aae;
|
||||
background-color: #444;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.sheetform .charactersheet input[type="text"], .sheetform .charactersheet input[type="number"] {
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.sheetform .charactersheet input[disabled] {
|
||||
background-color: #111;
|
||||
border: 3px solid #444;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.sheetform .charactersheet input[type="number"]::-webkit-inner-spin-button, .sheetform .charactersheet input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tabflex {
|
||||
width: 100%;
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tabflex > button {
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sheet-tabstoggle[value="main"] ~ button.tabbtn[name="act_main"], .sheet-tabstoggle[value="skills"] ~ button.tabbtn[name="act_skills"], .sheet-tabstoggle[value="magic"] ~ button.tabbtn[name="act_magic"], .sheet-tabstoggle[value="enhancements"] ~ button.tabbtn[name="act_enhancements"], .sheet-tabstoggle[value="matrix"] ~ button.tabbtn[name="act_matrix"], .sheet-tabstoggle[value="vehicles"] ~ button.tabbtn[name="act_vehicles"], .sheet-tabstoggle[value="equipment"] ~ button.tabbtn[name="act_equipment"], .sheet-tabstoggle[value="character"] ~ button.tabbtn[name="act_character"] {
|
||||
color: #aae;
|
||||
}
|
||||
|
||||
.newSrCheckbox {
|
||||
visibility: hidden;
|
||||
border-radius: 100%;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
width: 1.3em !important;
|
||||
}
|
||||
|
||||
.newSrCheckbox:after {
|
||||
visibility: visible;
|
||||
content: "";
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background-color: #500;
|
||||
border-radius: 6px;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
overflow: hidden;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.newSrCheckbox:checked:after {
|
||||
content: "X";
|
||||
}
|
||||
|
||||
.gmroll {
|
||||
width: 12em;
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 16em;
|
||||
left: calc(100% - 16em);
|
||||
}
|
||||
|
||||
.gmroll button {
|
||||
color: #0b0b0b;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gmroll .toggmroll[value="/w gm "] ~ button.togbtn[name="act_toggmroll"], .gmroll .togedge[value="!/"] ~ button.togbtn[name="act_togedge"] {
|
||||
color: #aae;
|
||||
}
|
||||
|
||||
.generic-grid {
|
||||
width: auto;
|
||||
min-height: 100%;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-rows: auto;
|
||||
justify-content: space-around;
|
||||
padding: 2em;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.tab {
|
||||
outline-offset: 4px;
|
||||
width: 100%;
|
||||
height: 40em;
|
||||
outline: 4px double #500;
|
||||
margin-top: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #aae;
|
||||
margin-bottom: .7em;
|
||||
font-size: 22pt;
|
||||
}
|
||||
|
||||
.hidden.op {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hidden.vis {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.hidden.disp {
|
||||
display: none;
|
||||
}
|
||||
|
||||
161
output/main.html
Normal file
161
output/main.html
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
|
||||
<div class="charsheet-wrapper">
|
||||
<input class="sheet-tabstoggle" type="hidden" name="attr_sheetTab" value="main">
|
||||
<div class="tabflex">
|
||||
<!-- ANCHOR: Tab Buttons-->
|
||||
<input class="sheet-tabstoggle" type="hidden" name="attr_sheetTab" value="main">
|
||||
<button class="tabbtn" type="action" name="act_main">Main</button>
|
||||
<button class="tabbtn" type="action" name="act_skills">Skills</button>
|
||||
<button class="tabbtn" type="action" name="act_magic">Magic</button>
|
||||
<button class="tabbtn" type="action" name="act_enhancements">Enhancements</button>
|
||||
<button class="tabbtn" type="action" name="act_matrix">Matrix</button>
|
||||
<button class="tabbtn" type="action" name="act_vehicles">Vehicles</button>
|
||||
<button class="tabbtn" type="action" name="act_equipment">Equipment</button>
|
||||
<button class="tabbtn" type="action" name="act_character">Character</button>
|
||||
</div>
|
||||
<div class="img-wrapper"><img src="https://talasu.files.wordpress.com/2019/05/sr6_title.png" alt="SR6 Logo"></div>
|
||||
<div class="gmroll">
|
||||
<!-- ANCHOR: Toggle Buttons-->
|
||||
<input class="toggmroll" type="hidden" name="attr_gmroll">
|
||||
<input class="togedge" type="hidden" name="attr_edgeroll">
|
||||
<button class="togbtn" type="action" name="act_toggmroll">GM </button>
|
||||
<button class="togbtn" type="action" name="act_togedge">Edge</button>
|
||||
</div>
|
||||
<div class="tab main-tab">
|
||||
<div class="generic-grid">
|
||||
<div class="ability-box">
|
||||
<h2>Abilities</h2>
|
||||
<div class="abilityBox">
|
||||
<p class="abilityLabel"></p>
|
||||
<p class="abilityLabel">Rating</p>
|
||||
<p class="abilityLabel"></p>
|
||||
<p class="abilityLabel">Mod</p>
|
||||
<p class="abilityLabel"></p>
|
||||
<p class="abilityLabel">Pool</p>
|
||||
<input type="hidden" name="attr_abilityname_Bod" value="Body"><span name="attr_abilityname_bod"></span>
|
||||
<input type="number" name="attr_abilityrtg_bod" value="1">
|
||||
<p>+</p>
|
||||
<input type="number" name="attr_abilitymod_bod" value="0">
|
||||
<p>=</p>
|
||||
<input type="number" name="attr_abilitypool_bod" value="@{abilityrtg_bod}+@{abilitymod_bod}" disabled="true">
|
||||
<input type="hidden" name="attr_abilityname_Agi" value="Agility"><span name="attr_abilityname_agi"></span>
|
||||
<input type="number" name="attr_abilityrtg_agi" value="1">
|
||||
<p>+</p>
|
||||
<input type="number" name="attr_abilitymod_agi" value="0">
|
||||
<p>=</p>
|
||||
<input type="number" name="attr_abilitypool_agi" value="@{abilityrtg_agi}+@{abilitymod_agi}" disabled="true">
|
||||
<input type="hidden" name="attr_abilityname_Rea" value="Reaction"><span name="attr_abilityname_rea"></span>
|
||||
<input type="number" name="attr_abilityrtg_rea" value="1">
|
||||
<p>+</p>
|
||||
<input type="number" name="attr_abilitymod_rea" value="0">
|
||||
<p>=</p>
|
||||
<input type="number" name="attr_abilitypool_rea" value="@{abilityrtg_rea}+@{abilitymod_rea}" disabled="true">
|
||||
<input type="hidden" name="attr_abilityname_Str" value="Strength"><span name="attr_abilityname_str"></span>
|
||||
<input type="number" name="attr_abilityrtg_str" value="1">
|
||||
<p>+</p>
|
||||
<input type="number" name="attr_abilitymod_str" value="0">
|
||||
<p>=</p>
|
||||
<input type="number" name="attr_abilitypool_str" value="@{abilityrtg_str}+@{abilitymod_str}" disabled="true">
|
||||
<input type="hidden" name="attr_abilityname_Log" value="Logic"><span name="attr_abilityname_log"></span>
|
||||
<input type="number" name="attr_abilityrtg_log" value="1">
|
||||
<p>+</p>
|
||||
<input type="number" name="attr_abilitymod_log" value="0">
|
||||
<p>=</p>
|
||||
<input type="number" name="attr_abilitypool_log" value="@{abilityrtg_log}+@{abilitymod_log}" disabled="true">
|
||||
<input type="hidden" name="attr_abilityname_Int" value="Intuition"><span name="attr_abilityname_int"></span>
|
||||
<input type="number" name="attr_abilityrtg_int" value="1">
|
||||
<p>+</p>
|
||||
<input type="number" name="attr_abilitymod_int" value="0">
|
||||
<p>=</p>
|
||||
<input type="number" name="attr_abilitypool_int" value="@{abilityrtg_int}+@{abilitymod_int}" disabled="true">
|
||||
<input type="hidden" name="attr_abilityname_Cha" value="Charisma"><span name="attr_abilityname_cha"></span>
|
||||
<input type="number" name="attr_abilityrtg_cha" value="1">
|
||||
<p>+</p>
|
||||
<input type="number" name="attr_abilitymod_cha" value="0">
|
||||
<p>=</p>
|
||||
<input type="number" name="attr_abilitypool_cha" value="@{abilityrtg_cha}+@{abilitymod_cha}" disabled="true">
|
||||
<input type="hidden" name="attr_abilityname_Mag" value="Magic"><span name="attr_abilityname_mag"></span>
|
||||
<input type="number" name="attr_abilityrtg_mag" value="1">
|
||||
<p>+</p>
|
||||
<input type="number" name="attr_abilitymod_mag" value="0">
|
||||
<p>=</p>
|
||||
<input type="number" name="attr_abilitypool_mag" value="@{abilityrtg_mag}+@{abilitymod_mag}" disabled="true">
|
||||
<input type="hidden" name="attr_abilityname_Edg" value="Edge"><span name="attr_abilityname_edg"></span>
|
||||
<input type="number" name="attr_abilityrtg_edg" value="1">
|
||||
<p>+</p>
|
||||
<input type="number" name="attr_abilitymod_edg" value="0">
|
||||
<p>=</p>
|
||||
<input type="number" name="attr_abilitypool_edg" value="@{abilityrtg_edg}+@{abilitymod_edg}" disabled="true">
|
||||
</div>
|
||||
</div>
|
||||
<div class="healthBox">
|
||||
<h2>Health</h2>
|
||||
<div class="healthWrapper">
|
||||
<div class="healthContainer">
|
||||
<label class="healthTrackerBox reset">
|
||||
<input class="hidden vis" type="radio" name="attr_physicalHealth" value="0" checked="checked">
|
||||
</label>
|
||||
<label class="healthTrackerBox">
|
||||
<input class="hidden vis" type="radio" name="attr_physicalHealth" value="1">
|
||||
</label>
|
||||
<label class="healthTrackerBox">
|
||||
<input class="hidden vis" type="radio" name="attr_physicalHealth" value="2">
|
||||
</label>
|
||||
<label class="healthTrackerBox">
|
||||
<input class="hidden vis" type="radio" name="attr_physicalHealth" value="3">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/worker">var srTabs = [
|
||||
"main",
|
||||
"skills",
|
||||
"magic",
|
||||
"enhancements",
|
||||
"matrix",
|
||||
"vehicles",
|
||||
"equipment",
|
||||
"character"
|
||||
];
|
||||
srTabs.forEach(function(tab) {
|
||||
on("clicked:".concat(tab), function() {
|
||||
setAttrs({
|
||||
"sheetTab": tab
|
||||
});
|
||||
});
|
||||
});
|
||||
on("clicked:togedge", function() {
|
||||
getAttrs([
|
||||
"edgeroll",
|
||||
"gmroll"
|
||||
], function(values) {
|
||||
var _edgeroll;
|
||||
var currentVal = (_edgeroll = values.edgeroll) !== null && _edgeroll !== void 0 ? _edgeroll : "";
|
||||
var newVal = "";
|
||||
if (currentVal === "") newVal = "!/";
|
||||
console.log("Setting Edge Value to: " + newVal);
|
||||
setAttrs({
|
||||
"edgeroll": newVal
|
||||
});
|
||||
});
|
||||
});
|
||||
on("clicked:toggmroll", function() {
|
||||
getAttrs([
|
||||
"gmroll",
|
||||
"edgeroll"
|
||||
], function(values) {
|
||||
var _gmroll;
|
||||
var currentVal = (_gmroll = values.gmroll) !== null && _gmroll !== void 0 ? _gmroll : "";
|
||||
var newVal = "";
|
||||
if (currentVal === "") newVal = "/w gm ";
|
||||
console.log("Setting GM roll Value to: " + newVal);
|
||||
setAttrs({
|
||||
"gmroll": newVal
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue