Initialization
This commit is contained in:
commit
3458f39973
GPG key ID:
6379E413924A4E77
28 changed files with 6780 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.parcel-cache
|
||||
node_modules
|
||||
9
.parcelrc
Normal file
9
.parcelrc
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"extends": "@parcel/config-default",
|
||||
"resolvers": ["parcel-resolver-ignore", "..."],
|
||||
"transformers": {
|
||||
"main.worker": [
|
||||
"@parcel/transformer-js"
|
||||
]
|
||||
}
|
||||
}
|
||||
9
.postcssrc
Normal file
9
.postcssrc
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"plugins": {
|
||||
"postcss-import-ext-glob": {
|
||||
"sort": "desc"
|
||||
},
|
||||
"postcss-import": {},
|
||||
"postcss-nested": {}
|
||||
}
|
||||
}
|
||||
3
.pugrc
Normal file
3
.pugrc
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
pretty: true
|
||||
}
|
||||
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"task.allowAutomaticTasks": "on"
|
||||
}
|
||||
36
components/_abilityBox.css
Normal file
36
components/_abilityBox.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
.abilityBox {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, auto);
|
||||
grid-auto-flow: row;
|
||||
justify-content: start;
|
||||
gap: 0.7em 4px;
|
||||
align-items: center;
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
|
||||
> {
|
||||
* {
|
||||
grid-column: span 1;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #aaaaee;
|
||||
font-size: 13pt;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #aaaaee;
|
||||
font-size: 10pt;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 0px;
|
||||
|
||||
&.abilityLabel {
|
||||
margin-bottom: -0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
6
components/_abilityBox.pug
Normal file
6
components/_abilityBox.pug
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.abilityBox
|
||||
include ./_abilityBoxLabels.pug
|
||||
include ./_abilityBoxRows.pug
|
||||
each val in abilities
|
||||
+abilityRow(val)
|
||||
|
||||
6
components/_abilityBoxLabels.pug
Normal file
6
components/_abilityBoxLabels.pug
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
p.abilityLabel
|
||||
p.abilityLabel Rating
|
||||
p.abilityLabel
|
||||
p.abilityLabel Mod
|
||||
p.abilityLabel
|
||||
p.abilityLabel Pool
|
||||
9
components/_abilityBoxRows.pug
Normal file
9
components/_abilityBoxRows.pug
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
mixin abilityRow(name)
|
||||
input(type="hidden" name=`attr_abilityname_${name.substring(0,3)}` value=`${name}`)
|
||||
- name = name.toLowerCase()
|
||||
span(name=`attr_abilityname_${name.substring(0,3)}`)
|
||||
input(type="number" name=`attr_abilityrtg_${name.substring(0,3)}` value="1")
|
||||
p +
|
||||
input(type="number" name=`attr_abilitymod_${name.substring(0,3)}` value="0")
|
||||
p =
|
||||
input(type="number" name=`attr_abilitypool_${name.substring(0,3)}` value=`@{abilityrtg_${name.substring(0,3)}}+@{abilitymod_${name.substring(0,3)}}` disabled="true")
|
||||
62
components/_healthBox.css
Normal file
62
components/_healthBox.css
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
.healthWrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
> {
|
||||
.healthContainer {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
justify-items: center;
|
||||
gap: 0px;
|
||||
justify-content: start;
|
||||
> {
|
||||
* {
|
||||
margin: -1px;
|
||||
}
|
||||
/* TODO: Refactor to use Labels !!!! */
|
||||
label {
|
||||
&.healthTrackerBox {
|
||||
cursor: pointer;
|
||||
order: 1;
|
||||
background-color: red;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
border: 2px solid #550000;
|
||||
border-radius: 0px;
|
||||
appearance: none;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border-radius: 3px;
|
||||
|
||||
&.reset {
|
||||
order: 2;
|
||||
background-color: brown;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: "-1";
|
||||
top: 2px;
|
||||
right: 4px;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:checked ~ .healthTrackerBox {
|
||||
order: 3;
|
||||
background-color: #444444;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
0
components/_skillRow.css
Normal file
0
components/_skillRow.css
Normal file
28
components/_skillRow.pug
Normal file
28
components/_skillRow.pug
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.skillcontainerrow
|
||||
input.newSrCheckbox(type="checkbox" name=`attr_hideskill${index + 1}` title="Hide Skill", value="true")
|
||||
input(type='text' name=`attr_skillname${index + 1}` title='Skill Name' disabled='true' value=val.name)
|
||||
select.min-width(type='text' name='attr_skillattr1' title='Attribute')
|
||||
option(value='@{bod' selected= (val.attribute == SRAttributes.body)) BOD
|
||||
option(value='@{agi' selected= (val.attribute == SRAttributes.agility)) AGI
|
||||
option(value='@{rea' selected= (val.attribute == SRAttributes.reaction)) REA
|
||||
option(value='@{str' selected= (val.attribute == SRAttributes.strength)) STR
|
||||
option(value='@{wil' selected= (val.attribute == SRAttributes.willpower)) WIL
|
||||
option(value='@{log' selected= (val.attribute == SRAttributes.logic)) LOG
|
||||
option(value='@{int' selected= (val.attribute == SRAttributes.intuition)) INT
|
||||
option(value='@{cha' selected= (val.attribute == SRAttributes.charisma)) CHA
|
||||
option(value='@{mag' selected= (val.attribute == SRAttributes.magic)) MAG
|
||||
option(value='@{res' selected= (val.attribute == SRAttributes.resonance)) RES
|
||||
option(value='@{ess' selected= (val.attribute == SRAttributes.essence)) ESS
|
||||
input(type='hidden' name=`attr_skillattr${index + 1}_name` value='@{bod_name}')
|
||||
input(type='hidden' name=`attr_skillattr${index + 1}_value` value='@{bod_total}')
|
||||
input(type='number' name=`attr_skillrating${index + 1}` value='-1' title='Skill-Rating without Attribute')
|
||||
input(type='number' name=`attr_skillbonus${index + 1}` value='0' title='Bonuses from Magic or Gear')
|
||||
input(type='text' name=`attr_skillspec${index + 1}` placeholder='Specialization ...')
|
||||
input(type='text' name=`attr_skillexp${index + 1}` placeholder='Expertise ...')
|
||||
input.newSrCheckbox(type='checkbox' name=`attr_skilltognotes${index + 1}` title='Show Notes' value="false")
|
||||
input(type='number' name=`attr_skilldicepool${index + 1}` value=`@{skillattr${index + 1}_value}+@{skillrating${index + 1}}+@{skillbonus${index + 1}}` title='Base Dicepool' disabled='true')
|
||||
button.rollbuttonspec(type='roll' name='roll_skillrollspec' title='Click to Roll' value=`@{gmroll}&{template:shadowrun}{{name=@{character_name}}}{{roll_name=@{skillname${index + 1}}}}{{val1=@{skillattr${index + 1}_name}}}{{val1_num=[[@{skillattr${index + 1}_value}]]}}{{val2=@{skillname${index + 1}}}}{{val2_num=[[@{skillrating${index + 1}}+@{skillbonus${index + 1}}]]}}{{val3=@{skillspec${index + 1}}}}{{val3_num=[[(?{Specialization|None,0|@{skillspec${index + 1}} +2,2|@{skillexp${index + 1}} +3,3})]]}}{{mod_num=[[?{Situational Modifiers|0}]]}}{{edge=@{edgeroll}}}{{edge_num=[[@{edg_total}]]}}{{wounds_num=[[@{wound_total}]]}}{{result=[[(@{skilldicepool${index + 1}}+(?{Specialization})-[[@{wound_total}]]+?{Situational Modifiers|0}+[[@{edgn}*@{edg_total}]])@{standardroll}@{edgeroll}]]}}{{description=@{skillnotes${index + 1}}}}`).
|
||||
button.rollbuttonnospec(type='roll' name='roll_skillroll' title='Click to Roll' value=`@{gmroll}&{template:shadowrun}{{name=@{character_name}}}{{roll_name=@{skillname${index + 1}}}}{{val1=@{skillattr${index + 1}_name}}}{{val1_num=[[@{skillattr${index + 1}_value}]]}}{{val2=@{skillname${index + 1}}}}{{val2_num=[[@{skillrating${index + 1}}+@{skillbonus${index + 1}}]]}}{{mod_num=[[?{Situational Modifiers|0}]]}}{{edge=@{edgeroll}}}{{edge_num=[[@{edg_total}]]}}{{wounds_num=[[@{wound_total}]]}}{{result=[[(@{skilldicepool${index + 1}}-[[@{wound_total}]]+?{Situational Modifiers|0}+[[@{edgn}*@{edg_total}]])@{standardroll}@{edgeroll}]]}}{{description=@{skillnotes${index + 1}}}}`).
|
||||
input(type="hidden" name=`attr_skillnotes${index + 1}` value='')
|
||||
textarea(type='text' name=`attr_skillnotes${index + 1}` placeholder="Short Description ..." title='Description...')
|
||||
|
||||
2
components/_skillRowButtons.pug
Normal file
2
components/_skillRowButtons.pug
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
.skillcontainerrow
|
||||
button
|
||||
11
components/_skillRowLabels.pug
Normal file
11
components/_skillRowLabels.pug
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.skillcontainerrow
|
||||
p.skillLabel Hide
|
||||
p.skillLabel Skill Name
|
||||
p.skillLabel Attribute
|
||||
p.skillLabel Rating
|
||||
p.skillLabel Bonus
|
||||
p.skillLabel Specialization
|
||||
p.skillLabel Expertise
|
||||
p.skillLabel Notes
|
||||
p.skillLabel Dice
|
||||
p.skillLabel Roll
|
||||
175
main.css
Normal file
175
main.css
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
@import-glob "views/*.css";
|
||||
|
||||
@import-glob "components/*.css";
|
||||
|
||||
.sheetform {
|
||||
padding: 0;
|
||||
background-color: #0b0b0b !important;
|
||||
height: 100%;
|
||||
|
||||
.charactersheet {
|
||||
padding: 4px !important;
|
||||
border: #550000 4px double !important;
|
||||
|
||||
.img-wrapper {
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
img {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #550000;
|
||||
border-radius: 1em;
|
||||
border: 0;
|
||||
margin: 0px 2px;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #444444;
|
||||
border: none;
|
||||
color:#aaaaee;
|
||||
|
||||
&[type=text],
|
||||
&[type=number] {
|
||||
padding: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background-color: #111111;
|
||||
border: 3px solid #444444;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
&[type="number"]::-webkit-inner-spin-button,
|
||||
&[type="number"]::-webkit-outer-spin-button {
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tabflex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
justify-content: center;
|
||||
flex: 1 1 0;
|
||||
gap: 2px;
|
||||
|
||||
> button {
|
||||
width: 100%;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-tabstoggle {
|
||||
&[value="main"]~button.tabbtn[name="act_main"],
|
||||
&[value="skills"]~button.tabbtn[name="act_skills"],
|
||||
&[value="magic"]~button.tabbtn[name="act_magic"],
|
||||
&[value="enhancements"]~button.tabbtn[name="act_enhancements"],
|
||||
&[value="matrix"]~button.tabbtn[name="act_matrix"],
|
||||
&[value="vehicles"]~button.tabbtn[name="act_vehicles"],
|
||||
&[value="equipment"]~button.tabbtn[name="act_equipment"],
|
||||
&[value="character"]~button.tabbtn[name="act_character"] {
|
||||
color: #aaaaee;
|
||||
}
|
||||
}
|
||||
|
||||
.newSrCheckbox {
|
||||
position: relative;
|
||||
width: 1.3em !important;
|
||||
margin: auto;
|
||||
border-radius: 100%;
|
||||
visibility: hidden;
|
||||
|
||||
&::after {
|
||||
visibility: visible;
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 1.3em;
|
||||
height: 1.3em;
|
||||
margin: auto;
|
||||
border-radius: 6px;
|
||||
background-color: #550000;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
content: "X";
|
||||
}
|
||||
}
|
||||
|
||||
.gmroll {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: calc(100% - 16em);
|
||||
top: 16em;
|
||||
width: 12em;
|
||||
|
||||
button {
|
||||
color:#0b0b0b;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toggmroll[value="/w gm "]~button.togbtn[name="act_toggmroll"],
|
||||
.togedge[value="!/"]~button.togbtn[name="act_togedge"] {
|
||||
color: #aaaaee;
|
||||
}
|
||||
}
|
||||
|
||||
.generic-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-auto-rows: auto;
|
||||
justify-content: space-around;
|
||||
padding: 2em;
|
||||
width: auto;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.tab {
|
||||
margin-top: 10px;
|
||||
outline: 4px;
|
||||
outline-offset: 4px;
|
||||
outline-style: double;
|
||||
outline-color: #550000;
|
||||
width: 100%;
|
||||
height: 40em;
|
||||
display: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #aaaaee;
|
||||
font-size: 22pt;
|
||||
margin-bottom: 0.7em;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
&.op {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.vis {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.disp {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
36
main.pug
Normal file
36
main.pug
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
.charsheet-wrapper
|
||||
input.sheet-tabstoggle(type='hidden' name='attr_sheetTab' value='main')
|
||||
.tabflex
|
||||
// ANCHOR: Tab Buttons
|
||||
input.sheet-tabstoggle(type='hidden' name='attr_sheetTab' value='main')
|
||||
button.tabbtn(type='action' name='act_main') Main
|
||||
button.tabbtn(type='action' name='act_skills') Skills
|
||||
button.tabbtn(type='action' name='act_magic') Magic
|
||||
button.tabbtn(type='action' name='act_enhancements') Enhancements
|
||||
button.tabbtn(type='action' name='act_matrix') Matrix
|
||||
button.tabbtn(type='action' name='act_vehicles') Vehicles
|
||||
button.tabbtn(type='action' name='act_equipment') Equipment
|
||||
button.tabbtn(type='action' name='act_character') Character
|
||||
|
||||
.img-wrapper
|
||||
img(src="https://talasu.files.wordpress.com/2019/05/sr6_title.png", alt="SR6 Logo")
|
||||
|
||||
.gmroll
|
||||
// ANCHOR: Toggle Buttons
|
||||
input.toggmroll(type='hidden' name='attr_gmroll')
|
||||
input.togedge(type='hidden' name='attr_edgeroll')
|
||||
|
||||
button.togbtn(type='action' name='act_toggmroll') GM
|
||||
button.togbtn(type='action' name='act_togedge') Edge
|
||||
|
||||
-
|
||||
var abilities = ["Body", "Agility", "Reaction", "Strength", "Logic", "Intuition", "Charisma", "Magic", "Edge"]
|
||||
|
||||
include ./views/_main-sheet.pug
|
||||
|
||||
script(type="text/worker")
|
||||
include ./workers/_worker-bundle.pug
|
||||
|
||||
include ./parser/_parser-bundle.pug
|
||||
|
||||
include ./roll-templates/_rt-bundle.pug
|
||||
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>
|
||||
5866
package-lock.json
generated
Normal file
5866
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
36
package.json
Normal file
36
package.json
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"name": "sr6",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"compile": "parcel build --target default --no-content-hash",
|
||||
"watch": "parcel watch --target default --no-hmr --no-content-hash"
|
||||
},
|
||||
"targets": {
|
||||
"default": {
|
||||
"source": [
|
||||
"./main.css",
|
||||
"./main.pug"
|
||||
],
|
||||
"distDir": "./output",
|
||||
"sourceMap": false,
|
||||
"optimize": true
|
||||
}
|
||||
},
|
||||
"parcelIgnore": [
|
||||
"jquery.min.js",
|
||||
"img/*.*",
|
||||
"fonts/*.*"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@parcel/config-default": "^2.7.0",
|
||||
"@parcel/core": "^2.7.0",
|
||||
"@parcel/transformer-pug": "^2.7.0",
|
||||
"parcel": "^2.7.0",
|
||||
"parcel-resolver-ignore": "^2.1.3",
|
||||
"postcss": "^8.4.16",
|
||||
"postcss-import": "^15.0.0",
|
||||
"postcss-import-ext-glob": "^2.0.1",
|
||||
"postcss-nested": "^5.0.6"
|
||||
},
|
||||
"browserslist": "> 0.2%, last 2 versions, not dead"
|
||||
}
|
||||
0
parser/_parser-bundle.pug
Normal file
0
parser/_parser-bundle.pug
Normal file
0
roll-templates/_rt-bundle.pug
Normal file
0
roll-templates/_rt-bundle.pug
Normal file
0
roll-templates/_rt-bundle.scss
Normal file
0
roll-templates/_rt-bundle.scss
Normal file
3
views/_main-sheet.css
Normal file
3
views/_main-sheet.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
input.sheet-tabstoggle[value="main"]~.main-tab {
|
||||
display: block;
|
||||
}
|
||||
18
views/_main-sheet.pug
Normal file
18
views/_main-sheet.pug
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
.tab.main-tab
|
||||
.generic-grid
|
||||
.ability-box
|
||||
h2 Abilities
|
||||
include .././components/_abilityBox
|
||||
.healthBox
|
||||
h2 Health
|
||||
.healthWrapper
|
||||
.healthContainer
|
||||
label.healthTrackerBox.reset
|
||||
input.hidden.vis(type="radio" name="attr_physicalHealth" value="0" checked="checked")
|
||||
label.healthTrackerBox
|
||||
input.hidden.vis(type="radio" name="attr_physicalHealth" value="1")
|
||||
label.healthTrackerBox
|
||||
input.hidden.vis(type="radio" name="attr_physicalHealth" value="2")
|
||||
label.healthTrackerBox
|
||||
input.hidden.vis(type="radio" name="attr_physicalHealth" value="3")
|
||||
|
||||
2
workers/_worker-bundle.pug
Normal file
2
workers/_worker-bundle.pug
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
include ./tabToggler.js
|
||||
include ./extraTogglers.js
|
||||
27
workers/extraTogglers.js
Normal file
27
workers/extraTogglers.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
on("clicked:togedge", function() {
|
||||
getAttrs(["edgeroll","gmroll"], function(values) {
|
||||
let currentVal = values.edgeroll ?? "";
|
||||
let newVal = "";
|
||||
if (currentVal === "") {
|
||||
newVal = "!/";
|
||||
}
|
||||
console.log("Setting Edge Value to: " + newVal);
|
||||
setAttrs({
|
||||
"edgeroll": newVal
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
on("clicked:toggmroll", function() {
|
||||
getAttrs(["gmroll","edgeroll"], function(values) {
|
||||
let currentVal = values.gmroll ?? "";
|
||||
let newVal = "";
|
||||
if (currentVal === "") {
|
||||
newVal = "/w gm ";
|
||||
}
|
||||
console.log("Setting GM roll Value to: " + newVal);
|
||||
setAttrs({
|
||||
"gmroll": newVal
|
||||
});
|
||||
});
|
||||
});
|
||||
9
workers/tabToggler.js
Normal file
9
workers/tabToggler.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
const srTabs = ['main', 'skills', 'magic', 'enhancements', 'matrix', 'vehicles', 'equipment', 'character']
|
||||
|
||||
srTabs.forEach(tab => {
|
||||
on(`clicked:${tab}`, () => {
|
||||
setAttrs({
|
||||
'sheetTab': tab
|
||||
})
|
||||
})
|
||||
})
|
||||
Loading…
Add table
Add a link
Reference in a new issue