Add roll difficulty selector

This commit is contained in:
Jacek Janiszewski
2021-12-29 02:06:47 +01:00
parent 3e849b768f
commit 678570bb6e
2 changed files with 111 additions and 8 deletions
+74 -5
View File
@@ -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 ***********************/
/******************************************************************/
+37 -3
View File
@@ -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>