- started writing tests for jest

.gitignore

@@ -7,3 +7,4 @@ dist/
 node_modules/
 hint-report/
 .csslintrc
+coverage/

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

__tests__/sr2ini.test.js

@@ -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);
+	});
+});

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"
+
 }

src/css/sr2ini.scss

@@ -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 {
+.icon { fill: $fg; }
-	fill: $fg; 
-	width: 128;
-	height: 128;
-}
 
 .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, 
+html {
-body {
-	margin: 0;
-	height: 100%;
-	user-select: none;
 	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;
+	background-size: cover;
-	font-family: 'Electrolize', sans-serif !important;
-
 }
 
 .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;
-
+			width: 24px;
-/*			img {
-				position: relative;
-				bottom: 3px;
-				width: 16px;
-				height: 16px;
-			}*/
 		}
 	}
-
-
 }
 
 .max-ini td {
-//	font-weight: bold;
+	text-shadow: 0 0 .15em $fg;
-//	filter: brightness(1.1);
-	text-shadow: 0 0 1px $fg, 0 0 2 $fg-bright;
 }
 
 .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;
-
+	position: absolute;
-//	right: calc(-100vw);
-//	transition: transform .25s ease-in-out;
-	opacity: 0;
 	right: 10px;
+	top: calc(100% - 2px);
 	transition: opacity .25s ease-in-out;
+	z-index: 200;
 }
 
-.seen {
+.seen { opacity: 1; }
-//	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);
-} */
 
 .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 {
@@ -545,82 +502,3 @@ footer {
 	&::-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%;
-    }
-}*/

src/js/sr2ini.js

@@ -474,3 +474,5 @@ $(document).ready(function () {
 	});
 	addTestCombatant();
 });
+
+module.exports = { rollForInitiative, validateCombatant };

tools/setup-jest.js

@@ -0,0 +1 @@
+global.jQuery = global.$ = require('./jquery-latest.min.js');