- started writing tests for jest
This commit is contained in:
parent
911effe72c
commit
c6d3bd5370
1
.gitignore
vendored
1
.gitignore
vendored
@ -7,3 +7,4 @@ dist/
|
||||
node_modules/
|
||||
hint-report/
|
||||
.csslintrc
|
||||
coverage/
|
||||
|
||||
10
TODO.md
10
TODO.md
@ -74,27 +74,29 @@
|
||||
- leider geht das nicht: addCombatant() fügt HTML dynamisch ins Dokument ein, und wenn in diesem HTML SVG enthalten ist, werden die <use>-Elemente darin nicht ausgewertet (also duch das referenzierte <symbol> ersetzt). Das SVG wird daher nicht angezeigt.
|
||||
- um das zu beheben. müsste ich die jQuery-Methode parseHTML() modifizieren und alle Aufrufe von createElement() durch createElementNS() ersetzen
|
||||
- aber am Ende bringt das gar nichts, weil der Browser bei jedem <use> den Inhalt des <symbol>s aufs Neue ins DOM kopiert. Die HTML-Platzersparnis wäre also gleich Null.
|
||||
- x kann die classes text-center, text-end etc aus den Tabellenzellen entfernen
|
||||
- x CSS: maroon durch b3005f ersetzen
|
||||
|
||||
|
||||
- Seite auch mal im Chrome checken
|
||||
- dafür sorgen, dass die Seite erst dann aufgebaut wird, wenn die CSS-Files geladen sind, damit man nicht den ungestylten Krams sieht
|
||||
- kann die classes text-center, text-end etc aus den Tabellenzellen entfernen
|
||||
- noch mehr Design
|
||||
- Seite für größere Screens anpassen
|
||||
- Schrift, Buttons, Icons skalieren
|
||||
- em und % statt px
|
||||
- Tabellenbreite begrenzen
|
||||
- Animationen? Transitions?
|
||||
- CSS aufräumen
|
||||
- maroon durch b3005f ersetzen
|
||||
- Variablen für Farben, Filter etc.
|
||||
- deployment: dist/* soll direkt auf hermes hochgeladen werden
|
||||
- warum sind im dist/-Folder immer zwei Versionen der gleichen Datei?
|
||||
- HTML soll nicht in eine Zeile umgedingst werden, das sieht doch nicht aus
|
||||
- bootstrap, jquery, font auch lokal vorhalten
|
||||
- Anzeige, wieviele Aktionen einer hat u.d wieviele davon schon verbraucht sind
|
||||
- nicetohave: Anzeige, wieviele Aktionen einer hat u.d wieviele davon schon verbraucht sind
|
||||
- docstrings
|
||||
- parcel soll aus dem HTML code nicht die Newlines rausnehmen -> macht er das überhaupt noch?
|
||||
- falls ja: .htmlnanorc anlegen, s. https://parceljs.org/languages/html/#minification und https://htmlnano.netlify.app/modules#collapsewhitespace
|
||||
- progressive web app draus machen? -> https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Introduction
|
||||
- auf bootstrap verzichten? brauch es schließlich kaum noch
|
||||
- könnte beim modal schwierig werden (weil auch js)
|
||||
- Wenn ich rea editiere, könnte sich die ini automatisch anpassen -> da müsste ich aber die Würfelergebnisse für speichern
|
||||
- nicetohave: Wenn ich rea editiere, könnte sich die ini automatisch anpassen -> da müsste ich aber die Würfelergebnisse für speichern
|
||||
|
||||
16
__tests__/sr2ini.test.js
Normal file
16
__tests__/sr2ini.test.js
Normal file
@ -0,0 +1,16 @@
|
||||
const s = require("../src/js/sr2ini.js");
|
||||
|
||||
describe ("test function rollForInitiative()", () => {
|
||||
test("function should accept numbes as integers as well as strings", () => {
|
||||
expect(typeof s.rollForInitiative("1", "5")).toBe("number");
|
||||
expect(typeof s.rollForInitiative(1, 5)).toBe("number");
|
||||
});
|
||||
|
||||
test("result should be greater than zero", () => {
|
||||
expect(s.rollForInitiative("1", "5")).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test("should return zero for bad parameters", () => {
|
||||
expect(s.rollForInitiative("a", 2)).toBe(0);
|
||||
});
|
||||
});
|
||||
14
package.json
14
package.json
@ -18,6 +18,9 @@
|
||||
"@parcel/transformer-webmanifest": "^2.8.3",
|
||||
"@parcel/transformer-xml": "^2.8.3",
|
||||
"hint": "^7.1.3",
|
||||
"jest": "^29.4.3",
|
||||
"jest-environment-jsdom": "^29.4.3",
|
||||
"jsdom": "^21.1.0",
|
||||
"parcel": "^2.8.3",
|
||||
"parcel-reporter-static-files-copy": "^1.5.0"
|
||||
},
|
||||
@ -28,7 +31,7 @@
|
||||
"start": "npx parcel serve src/index.html --public-url / --dist-dir dist",
|
||||
"prebuild": "rm -rf dist/",
|
||||
"build": "npx parcel build --public-url ./",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"test": "jest --coverage --env=jsdom",
|
||||
"webhint": "hint http://localhost:1234"
|
||||
},
|
||||
"repository": {
|
||||
@ -39,5 +42,12 @@
|
||||
"Shadowrun",
|
||||
"Initiative tracker",
|
||||
"sr2e"
|
||||
]
|
||||
],
|
||||
"jest": {
|
||||
"setupFiles": [
|
||||
"./tools/setup-jest.js"
|
||||
]
|
||||
},
|
||||
"type": "module"
|
||||
|
||||
}
|
||||
|
||||
@ -12,84 +12,77 @@ $bg-dark: darkcyan;
|
||||
}
|
||||
|
||||
@mixin aug() {
|
||||
--aug-tl: 5px;
|
||||
--aug-l: 5px;
|
||||
--aug-bl: 5px;
|
||||
--aug-tr: 5px;
|
||||
--aug-r: 5px;
|
||||
--aug-br: 5px;
|
||||
--aug-b: 5px;
|
||||
--aug-bl: 5px;
|
||||
--aug-br: 5px;
|
||||
--aug-l: 5px;
|
||||
--aug-r: 5px;
|
||||
--aug-tl: 5px;
|
||||
--aug-tr: 5px;
|
||||
}
|
||||
|
||||
@mixin border() {
|
||||
--aug-border-all: 2px;
|
||||
--aug-border-bg: cyan; // variables don't work in this specific instance
|
||||
--aug-border-opacity: .5;
|
||||
--aug-border-all: 2px;
|
||||
}
|
||||
|
||||
@mixin inlay() {
|
||||
--aug-inlay-y: 10%;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .5);
|
||||
--aug-inlay-y: 10%;
|
||||
}
|
||||
|
||||
@mixin button() {
|
||||
border-radius: 1px;
|
||||
padding-inline: 0px;
|
||||
|
||||
border: 1px solid $bg;
|
||||
background: transparent;
|
||||
border: 1px solid $bg;
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 0 2px $bg-bright, 0 0 4px $bg, 0 0 8px $bg-dark;
|
||||
|
||||
color: $fg;
|
||||
padding-inline: 0px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: $fg;
|
||||
width: 128;
|
||||
height: 128;
|
||||
}
|
||||
.icon { fill: $fg; }
|
||||
|
||||
.sr2-button:focus-visible {
|
||||
outline: none;
|
||||
border: 1px solid $bg !important;
|
||||
box-shadow: 0 0 4px $bg-bright, 0 0 8px $bg, 0 0 16px $bg-dark !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
html {
|
||||
font-family: 'Electrolize', sans-serif;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: darkslategray;
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/bg.jpg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-color: darkslategray;
|
||||
font-family: 'Electrolize', sans-serif !important;
|
||||
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
padding: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header.navbar {
|
||||
padding-right: .6rem;;
|
||||
@include border;
|
||||
@include inlay;
|
||||
--aug-br: 7px;
|
||||
--aug-tr: 7px;
|
||||
--aug-bl: 7px;
|
||||
--aug-tl: 7px;
|
||||
|
||||
--aug-b: 7px;
|
||||
--aug-bl: 7px;
|
||||
--aug-br: 7px;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .75);
|
||||
--aug-l: 7px;
|
||||
--aug-r: 7px;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .75);
|
||||
--aug-tl: 7px;
|
||||
--aug-tr: 7px;
|
||||
padding-right: .6rem;;
|
||||
|
||||
.navbar-brand {
|
||||
color: $bg;
|
||||
@ -98,10 +91,11 @@ header.navbar {
|
||||
|
||||
button {
|
||||
@include button;
|
||||
width: 38px;
|
||||
|
||||
height: 38px;
|
||||
margin-right: 3px;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
width: 38px;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
@ -121,8 +115,9 @@ header.navbar {
|
||||
@include aug;
|
||||
@include border;
|
||||
@include inlay;
|
||||
--aug-border-right: 0px;
|
||||
|
||||
--aug-border-bottom: 0px;
|
||||
--aug-border-right: 0px;
|
||||
}
|
||||
|
||||
.combatant-row {
|
||||
@ -143,8 +138,9 @@ header.navbar {
|
||||
@include aug;
|
||||
@include border;
|
||||
@include inlay;
|
||||
--aug-border-right: 0px;
|
||||
|
||||
--aug-border-bottom: 0px;
|
||||
--aug-border-right: 0px;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
@ -154,8 +150,8 @@ header.navbar {
|
||||
}
|
||||
|
||||
td {
|
||||
color: $fg;
|
||||
clip-path: none;
|
||||
color: $fg;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -166,8 +162,8 @@ header.navbar {
|
||||
|
||||
th:last-of-type,
|
||||
td:last-of-type {
|
||||
padding-right: .75rem;
|
||||
--aug-border-right: 2px;
|
||||
padding-right: .75rem;
|
||||
}
|
||||
|
||||
tr:last-of-type td,
|
||||
@ -182,18 +178,18 @@ header.navbar {
|
||||
|
||||
.sr2-button {
|
||||
@include button;
|
||||
width: 24px;
|
||||
|
||||
height: 24px;
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
|
||||
width: 24px;
|
||||
|
||||
img,
|
||||
.icon {
|
||||
position: relative;
|
||||
bottom: 3px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@ -206,8 +202,8 @@ header.navbar {
|
||||
}
|
||||
|
||||
.combatant-ini {
|
||||
text-align: center;
|
||||
padding-right: 1rem !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.combatant-dice-and-rea { text-align: center; }
|
||||
@ -223,26 +219,16 @@ header.navbar {
|
||||
|
||||
button {
|
||||
@include button;
|
||||
width: 24px;
|
||||
|
||||
height: 24px;
|
||||
margin: 4px;
|
||||
|
||||
/* img {
|
||||
position: relative;
|
||||
bottom: 3px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}*/
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.max-ini td {
|
||||
// font-weight: bold;
|
||||
// filter: brightness(1.1);
|
||||
text-shadow: 0 0 1px $fg, 0 0 2 $fg-bright;
|
||||
text-shadow: 0 0 .15em $fg;
|
||||
}
|
||||
|
||||
.zero-ini td {
|
||||
@ -261,15 +247,13 @@ header.navbar {
|
||||
|
||||
.badge.bg-warning {
|
||||
background: radial-gradient(circle at center, $bg, $bg-dark);
|
||||
|
||||
left: 12px;
|
||||
bottom: -4px;
|
||||
left: 12px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.badge.bg-danger {
|
||||
background: radial-gradient(circle at center, $fg, $fg-dark);
|
||||
|
||||
left: 12px;
|
||||
top: 12px;
|
||||
width: 20px;
|
||||
@ -280,51 +264,31 @@ header.navbar {
|
||||
|
||||
.damage-monitor,
|
||||
.actions-menu {
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
top: calc(100% - 2px);
|
||||
|
||||
@include aug;
|
||||
@include border;
|
||||
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .5);
|
||||
--aug-border-opacity: .75;
|
||||
|
||||
opacity: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
// right: calc(-100vw);
|
||||
// transition: transform .25s ease-in-out;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: calc(100% - 2px);
|
||||
transition: opacity .25s ease-in-out;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.seen {
|
||||
// transform: translateX(-100vw);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/*.actions-button, .damage-button {
|
||||
transition: all .25s ease-in-out;
|
||||
}
|
||||
|
||||
.actions-button:has(+ .seen),
|
||||
.damage-button:has(+ .seen) {
|
||||
outline: none;
|
||||
border: 1px solid $bg !important;
|
||||
box-shadow: 0 0 4px $bg-bright, 0 0 8px $bg, 0 0 16px $bg-dark !important;
|
||||
filter: brightness(1.5);
|
||||
} */
|
||||
.seen { opacity: 1; }
|
||||
|
||||
.damage-monitor {
|
||||
button {
|
||||
font-size: smaller;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
border: none;
|
||||
margin: 0px 2px;
|
||||
border-radius: 0;
|
||||
font-size: smaller;
|
||||
height: 24px;
|
||||
margin: 0px 2px;
|
||||
width: 24px;
|
||||
|
||||
&:focus-visible {
|
||||
filter: brightness(150%) !important;
|
||||
@ -344,8 +308,8 @@ header.navbar {
|
||||
}
|
||||
|
||||
.damage-physical {
|
||||
border-radius: 50%;;
|
||||
background: radial-gradient(circle at center, $fg, $fg-dark);
|
||||
border-radius: 50%;;
|
||||
box-shadow: none;
|
||||
transition: background .5s, box-shadow .5s;
|
||||
|
||||
@ -356,70 +320,61 @@ header.navbar {
|
||||
background: radial-gradient(circle at center, $fg-bright, $fg);
|
||||
box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark;
|
||||
}
|
||||
|
||||
/* &.d-none {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
&:not(.d-none) {
|
||||
transform: translateY(0);;
|
||||
transition: transform .4s;
|
||||
}
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
.footer-container {
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
position: fixed;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
footer {
|
||||
@include aug;
|
||||
@include inlay;
|
||||
--aug-tl: 10px;
|
||||
--aug-tr: 10px;
|
||||
|
||||
--aug-border-all: 2px !important;
|
||||
--aug-border-bg: cyan !important; // vars don't work here
|
||||
--aug-border-opacity: .5 !important;
|
||||
--aug-border-all: 2px !important;
|
||||
--aug-inlay-bg: rgba(0, 0, 0, .75) !important;
|
||||
--aug-tl: 10px;
|
||||
--aug-tr: 10px;
|
||||
height: 2.5em;
|
||||
|
||||
p {
|
||||
color: $bg;
|
||||
font-size: xx-small;
|
||||
margin: .25rem;
|
||||
color: $bg;
|
||||
user-select: auto;
|
||||
padding-top: .65em;
|
||||
text-align: center;
|
||||
user-select: auto;
|
||||
|
||||
a {
|
||||
color: hotpink;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.sr2-modal {
|
||||
@include border;
|
||||
@include aug;
|
||||
|
||||
color: $bg;
|
||||
pointer-events: auto;
|
||||
// width: 95vw; // 95 percent of viewport width
|
||||
|
||||
button { @include button; }
|
||||
|
||||
.modal-header {
|
||||
text-transform: uppercase;
|
||||
border-bottom: none;
|
||||
@include inlay;
|
||||
@include border;
|
||||
|
||||
--aug-inlay-bottom: 0;
|
||||
border-bottom: none;
|
||||
text-transform: uppercase;
|
||||
|
||||
button { width: 30px; }
|
||||
}
|
||||
@ -427,14 +382,16 @@ footer {
|
||||
.modal-body {
|
||||
@include inlay;
|
||||
@include border;
|
||||
|
||||
--aug-inlay-y: 0;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: none;
|
||||
@include inlay;
|
||||
@include border;
|
||||
|
||||
--aug-inlay-top: 0;
|
||||
border-top: none;
|
||||
|
||||
button { width: 4rem; }
|
||||
}
|
||||
@ -457,8 +414,8 @@ footer {
|
||||
user-select: text;
|
||||
|
||||
&::selection {
|
||||
color: black;
|
||||
background-color: $fg;
|
||||
color: black;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@ -472,14 +429,14 @@ footer {
|
||||
}
|
||||
|
||||
&:not([type=range]):valid {
|
||||
border: 1px solid $bg !important ;
|
||||
background-image: none !important;
|
||||
border: 1px solid $bg !important ;
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
background-image: none !important;
|
||||
border: 1px solid $fg;
|
||||
box-shadow: 0 0 3px $fg-bright, 0 0 6px $fg, 0 0 12px $fg-dark;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
&[type=number]::-webkit-inner-spin-button,
|
||||
@ -496,8 +453,8 @@ footer {
|
||||
|
||||
&[type=range] {
|
||||
// -webkit-appearance: none;
|
||||
width: 91%;
|
||||
margin-left: calc(4.5% - 2px);
|
||||
width: 91%;
|
||||
|
||||
+ datalist {
|
||||
display: block;
|
||||
@ -506,28 +463,28 @@ footer {
|
||||
option {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
width: 9%;
|
||||
text-align: center;
|
||||
width: 9%;
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
height: 2px;
|
||||
border: 1px;
|
||||
border-radius: 1px;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
color: $fg;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: $fg;
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -544,83 +501,4 @@ footer {
|
||||
#combatant-modal-physical {
|
||||
&::-moz-range-track { background-color: $fg-dark; }
|
||||
&::-moz-range-thumb { background-color: $fg; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
|
||||
th span{
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
th span:nth-child(1){
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg,transparent,$bg-dark);
|
||||
animation: animate1 1s linear infinite;
|
||||
}
|
||||
@keyframes animate1{
|
||||
0%{
|
||||
left: -100%;
|
||||
}
|
||||
50%,100%{
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
th span:nth-child(2){
|
||||
top: -100%;
|
||||
right: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg,transparent,$bg-dark);
|
||||
animation: animate2 1s linear infinite;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
@keyframes animate2{
|
||||
0%{
|
||||
top: -100%;
|
||||
}
|
||||
50%,100%{
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
th span:nth-child(3){
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(270deg,transparent,$bg-dark);
|
||||
animation: animate3 1s linear infinite;
|
||||
animation-delay: 0.50s;
|
||||
}
|
||||
@keyframes animate3{
|
||||
0%{
|
||||
right: -100%;
|
||||
}
|
||||
50%,100%{
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
th span:nth-child(4){
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(360deg,transparent,$bg-dark);
|
||||
animation: animate4 1s linear infinite;
|
||||
animation-delay: 0.75s;
|
||||
}
|
||||
@keyframes animate4{
|
||||
0%{
|
||||
bottom: -100%;
|
||||
}
|
||||
50%,100%{
|
||||
bottom: 100%;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
@ -473,4 +473,6 @@ $(document).ready(function () {
|
||||
}
|
||||
});
|
||||
addTestCombatant();
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = { rollForInitiative, validateCombatant };
|
||||
4
tools/jquery-latest.min.js
vendored
Normal file
4
tools/jquery-latest.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
tools/setup-jest.js
Normal file
1
tools/setup-jest.js
Normal file
@ -0,0 +1 @@
|
||||
global.jQuery = global.$ = require('./jquery-latest.min.js');
|
||||
Loading…
Reference in New Issue
Block a user