Add roll difficulty selector
This commit is contained in:
@@ -120,11 +120,38 @@ table.padded td {
|
||||
|
||||
/******************************************************************/
|
||||
/******************* FANCY HEADINGS WITH LINES ********************/
|
||||
.charsheet h1 {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
margin-left:20px;
|
||||
margin-right:20px;
|
||||
}
|
||||
|
||||
.charsheet h1:before,
|
||||
.charsheet h1:after {
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 3px;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 50%;
|
||||
}
|
||||
.charsheet h1:before {
|
||||
right: 0.5em;
|
||||
margin-left: -50%;
|
||||
}
|
||||
.charsheet h1:after {
|
||||
left: 0.5em;
|
||||
margin-right: -50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.charsheet h3 {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.charsheet h3:before,
|
||||
.charsheet h3:after {
|
||||
background-color: #000;
|
||||
@@ -135,12 +162,10 @@ table.padded td {
|
||||
vertical-align: middle;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.charsheet h3:before {
|
||||
right: 0.5em;
|
||||
margin-left: -50%;
|
||||
}
|
||||
|
||||
.charsheet h3:after {
|
||||
left: 0.5em;
|
||||
margin-right: -50%;
|
||||
@@ -416,14 +441,17 @@ table.wspolczynniki input[type=number].wsp-star-display {
|
||||
/**************************** ABILITIES ***************************/
|
||||
.charsheet table.umj-table {
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: rgba(0,0,0,0.8);
|
||||
border-spacing: 4px;
|
||||
color: black;
|
||||
border-spacing: 5px;
|
||||
border-collapse: separate;
|
||||
width:100%;
|
||||
}
|
||||
.charsheet td.umj-stat-cell {
|
||||
border-right:3px solid rgba(0,0,0,0.7);
|
||||
width:30px;
|
||||
}
|
||||
.charsheet td.umj-group-cell {
|
||||
width:160px;
|
||||
}
|
||||
.charsheet td.umj-skill-cell {
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
@@ -433,6 +461,7 @@ table.wspolczynniki input[type=number].wsp-star-display {
|
||||
height: 100% !important;
|
||||
width:26px !important;
|
||||
background-color: transparent;
|
||||
border: 0px none transparent;
|
||||
color: rgba(255,255,255,1);
|
||||
font-family: 'Special Elite', cursive;
|
||||
font-size:14px;
|
||||
@@ -443,4 +472,44 @@ table.wspolczynniki input[type=number].wsp-star-display {
|
||||
font-size:22px;
|
||||
}
|
||||
/**************************** ABILITIES ***************************/
|
||||
/******************************************************************/
|
||||
/******************************************************************/
|
||||
/************************** ROLL PARAMETERS ***********************/
|
||||
/* Configure a container for the radio buttons. */
|
||||
.charsheet .sheet-radios {
|
||||
width:250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Configure the button styling. This example makes it look like a radio. */
|
||||
.charsheet button.sheet-radio {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: transparent;
|
||||
border: 0px none transparent;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
color: rgba(0,0,0,0.8);
|
||||
font-size: 22px;
|
||||
}
|
||||
.charsheet button.sheet-radio > span.sheet-checked {
|
||||
color:red;
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
/* Hide the "checked" section of the radio if the attribute value does not match the radio */
|
||||
.charsheet input.sheet-radio:not([value="1"]) ~ button.sheet-radio-1 > span.sheet-checked,
|
||||
.charsheet input.sheet-radio:not([value="2"]) ~ button.sheet-radio-2 > span.sheet-checked,
|
||||
.charsheet input.sheet-radio:not([value="3"]) ~ button.sheet-radio-3 > span.sheet-checked,
|
||||
.charsheet input.sheet-radio:not([value="4"]) ~ button.sheet-radio-4 > span.sheet-checked,
|
||||
.charsheet input.sheet-radio:not([value="5"]) ~ button.sheet-radio-5 > span.sheet-checked,
|
||||
.charsheet input.sheet-radio:not([value="6"]) ~ button.sheet-radio-6 > span.sheet-checked {
|
||||
color:black;
|
||||
text-decoration:unset;
|
||||
}
|
||||
|
||||
|
||||
/************************** ROLL PARAMETERS ***********************/
|
||||
/******************************************************************/
|
||||
@@ -519,7 +519,30 @@
|
||||
|
||||
</div>
|
||||
<div class="page-umiejetnosci">
|
||||
|
||||
<h1>Ustawienia rzutu</h1>
|
||||
<div class="sheet-radios">
|
||||
<input type="hidden" class="sheet-radio" name="attr_level" value="1" />
|
||||
<button type="action" name="act_level_1" class="sheet-radio sheet-radio-1">
|
||||
<span class="sheet-checked">Łatwy</span>
|
||||
</button>
|
||||
<button type="action" name="act_level_2" class="sheet-radio sheet-radio-2">
|
||||
<span class="sheet-checked">Przeciętny</span>
|
||||
</button>
|
||||
<button type="action" name="act_level_3" class="sheet-radio sheet-radio-3">
|
||||
<span class="sheet-checked">Problematyczny</span>
|
||||
</button>
|
||||
<button type="action" name="act_level_4" class="sheet-radio sheet-radio-4">
|
||||
<span class="sheet-checked">Trudny</span>
|
||||
</button>
|
||||
<button type="action" name="act_level_5" class="sheet-radio sheet-radio-5">
|
||||
<span class="sheet-checked">Cholernie Trudny</span>
|
||||
</button>
|
||||
<button type="action" name="act_level_6" class="sheet-radio sheet-radio-6">
|
||||
<span class="sheet-checked">Fart</span>
|
||||
</button>
|
||||
</div>
|
||||
<h1>Umiejętności</h1>
|
||||
|
||||
<table class="umj-table"><tbody>
|
||||
<tr>
|
||||
<td rowspan=6 class="umj-stat-cell">
|
||||
@@ -729,7 +752,7 @@
|
||||
|
||||
|
||||
|
||||
<h1>UMIEJETNOSCI</h1>
|
||||
|
||||
<hr>
|
||||
<h3>Inicjatywa</h3>
|
||||
<button type='roll'
|
||||
@@ -1981,6 +2004,17 @@ on("change:zrecznosc_base change:mod_zrecznosc change:percepcja_base change:mod_
|
||||
});
|
||||
/******************* BASE STATS / WSPÓŁCZYNNIKI *******************/
|
||||
/******************************************************************/
|
||||
|
||||
/******************************************************************/
|
||||
/************************** ROLL PARAMETERS ***********************/
|
||||
const levelRadioValues = ["1","2","3","4","5","6"];
|
||||
levelRadioValues.forEach(function(value) {
|
||||
on(`clicked:level_${value}`, function() {
|
||||
setAttrs({
|
||||
["level"]: value
|
||||
});
|
||||
});
|
||||
});
|
||||
/************************** ROLL PARAMETERS ***********************/
|
||||
/******************************************************************/
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user