fix linkable rules and support nesting

6 files changed, 46 insertions, 44 deletions

diff --git a/html/Makefile b/html/Makefile
index 40581aea..7657fb06 100644
--- a/html/Makefile
+++ b/html/Makefile
@@ -132,7 +132,7 @@ $(1)/%.html: %.md $(MAKEFILE_LIST) $(HTML_TEMPLATE) $(GENERATE_HOVER_LINKS)
 endef
 
 define generateRulesHtml
-$(1)/%.html: %.md $(MAKEFILE_LIST) $(HTML_TEMPLATE) $(GENERATE_HOVER_LINKS)
+$(1)/%.html: %.md $(MAKEFILE_LIST) $(HTML_TEMPLATE) $(GENERATE_HOVER_LINKS) $(PREPARE_RULES)
 	@echo "building		$$@"
 	@if test \( ! \( -d $$(@D) \) \); then mkdir -p $$(@D);fi
 	$(VERBOSE) if [[ $$$$(cat $$< | wc -l) -gt 80 ]]; \
diff --git a/html/js/linkableRules.js b/html/js/linkableRules.js
index 82261a1e..b590aabe 100644
--- a/html/js/linkableRules.js
+++ b/html/js/linkableRules.js
@@ -21,24 +21,32 @@ through which recipients can access the Corresponding Source.
 @licend  The above is the entire license notice
 for the JavaScript code in this page.
 */
+var highlightedRule;
 function prepareLinkableRules() {
   for (let e of document.querySelectorAll(".rule")) {
     // Add class via js to ensure there is no wrong
     // sense of functionality in browsers without js
     e.classList.add("linkable-rule");
-    // TODO: support nested lists
-    e.onclick = function() {
+    e.onclick = function(event) {
       if (e.matches(':hover') || e.matches(':active')) {
+        // Set background with JS for more control
+        if (highlightedRule) {
+          highlightedRule.classList.remove("highlighted");
+        }
+        highlightedRule = e;
+        e.classList.add("highlighted");
         const origin = window.location.origin;
         const path = window.location.pathname;
         const anchor = e.id;
         let url = origin + '/' + path + '#' + anchor;
         navigator.clipboard.writeText(url);
-        // document.getElementsByTagName("body")[0].focus();
+        // Stop the event handling for potential parent rules
+        event.stopPropagation();
       }
     }
   }
 }
 window.onload = function() {
   prepareLinkableRules();
+  console.log("loaded");
 }
diff --git a/html/template.html b/html/template.html
index 8ae9a6d9..4c9bf623 100644
--- a/html/template.html
+++ b/html/template.html
@@ -23,6 +23,7 @@ $if(document-css)$
   --fg: #1a1a1a;
   --link-color: #1a1a1a;
   --pre-bg: #fdfdfd;
+  --highlight-bg: #fcf3cf;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -34,6 +35,7 @@ $if(document-css)$
     --fg: #ebdbb2; /* dark fg */
     --link-color: #d79921; /* yellow */
     --pre-bg: #1d2021; /* dark bg0_h */
+    --highlight-bg: #504945; /* dark bg2 */
   }
 }
 
@@ -130,10 +132,10 @@ $endif$
   padding: 1em;
   overflow: auto;
 }
-pre  > code {
+pre > code {
   white-space: pre;
 }
-pre  code {
+pre code {
   display: inline-block;
 }
 hr {
@@ -257,11 +259,16 @@ $if(toc)$
 }
 $endif$
 
-li.linkable-rule:active, li.linkable-rule:hover {
-  background-color: #d79921;
+li.linkable-rule.highlighted {
+  background-color: var(--highlight-bg);
   list-style-image: url(link.svg);
 }
 
+li.linkable-rule.highlighted ol {
+  background-color: $if(backgroundcolor)$$backgroundcolor$$else$var(--bg)$endif$;
+  list-style-image: none;
+}
+
 .draft-rate {
   padding-left: 1em;
 }
diff --git a/rules/de/rules.md b/rules/de/rules.md
index fce3f43b..d87ec7fe 100644
--- a/rules/de/rules.md
+++ b/rules/de/rules.md
@@ -1,7 +1,7 @@
 ---
 title: Muhq's Spiel Regeln
 lang: de
-header-includes: '<script src="../js/linkableRules.js"></script>'
+header-includes: '<script src="../../js/linkableRules.js"></script>'
 ---
 
 # Grundideen {.unnumbered}
@@ -65,12 +65,13 @@ packgröße = number
 1. Der Kartenvorrat muss genug Karten enthalten um die benötigte Anzahl an Packs zu bilden.
     1. Sollten nicht genügend Karten im Vorrat vorhanden sein, füge zu jeder Karte eine Kopie hinzu und wiederhole gegebenenfalls diesen Vorgang.
 2. Beginne jeden Draft mit dem Erstellen von ${Personen \cdot Runden}$ zufälliger Packs aus dem Kartenvorrat
-3. ```
-Für jede Runde
-	Jede Lerson wählt ein Pack
-	Für jeden Pick
-		Wähle eine Karge aus dem Pack und gibt das Pack an die nächste Person weiter
-```
+3. Vorgehen:  
+   ```
+   Für jede Runde
+   	Jede Person wählt ein Pack
+   	Für jeden Pick
+   		Wähle eine Karte aus dem Pack und gibt das Pack an die nächste Person weiter
+   ```
 
 # Zug Struktur
 
diff --git a/rules/en/rules.md b/rules/en/rules.md
index 302a96f2..ad90e1a0 100644
--- a/rules/en/rules.md
+++ b/rules/en/rules.md
@@ -1,6 +1,6 @@
 ---
 title: Muhq's Game Rules
-header-includes: '<script src="../js/linkableRules.js"></script>'
+header-includes: '<script src="../../js/linkableRules.js"></script>'
 ---
 
 # Ideas {.unnumbered}
@@ -64,12 +64,13 @@ packsize = number
 1. The pool of cards must have enough cards to be able to separate them in the required amount of packs
     1. If there are not enough cards in the pool add a copy of each card and repeat if necessary
 2. Start each draft by creating ${Players \cdot rounds}$ randomly distributed packs from the pool
-3. ```
-For each round
-	Each player picks a pack
-	For each pick
-		Pick a card from the pack and pass the pack to the next player
-```
+3. Process:  
+   ```
+   For each round
+   	Each player picks a pack
+   	For each pick
+   		Pick a card from the pack and pass the pack to the next player
+   ```
 
 # Player Turns
 
diff --git a/scripts/prepare_html_rules.py b/scripts/prepare_html_rules.py
index aca29932..d2131b2a 100755
--- a/scripts/prepare_html_rules.py
+++ b/scripts/prepare_html_rules.py
@@ -1,6 +1,5 @@
 #!/usr/bin/env python3
 """Add ids to all rules based on their headline"""
-# TODO: support nested lists
 
 import sys
 import re
@@ -9,21 +8,6 @@ HEADER_RE = re.compile(r'<h\d')
 DATA_NUMBER_RE = re.compile(r'data\-number="([^"]*)"')
 
 
-def add_ids(ol):
-    """add ids to all li"""
-    _id = ""
-    for s in ol.previous_siblings:
-        if not s.name:
-            continue
-        if s.name.startswith("h"):
-            _id = s.attrs["data-number"]
-            break
-
-    for i, li in enumerate(ol.find_all("li")):
-        li["id"] = f"{_id}-{i+1}"
-        li["class"] = "rule"
-
-
 def extract_headline_nr(line: str) -> str:
     """Extract the headline's number from it's data-number attribute"""
     m = DATA_NUMBER_RE.search(line)
@@ -36,19 +20,20 @@ def extract_headline_nr(line: str) -> str:
 def main():
     """Add ids to all ordered lists in the input"""
     headline = ""
-    i = 0
+    items = []
     for line in sys.stdin.readlines():
         if HEADER_RE.match(line):
             headline = extract_headline_nr(line)
             h_idx = line.find('<h') + 3
             line = line[:h_idx] + ' class="rule"' + line[h_idx:]
         if '<ol' in line and headline:
-            i = 1
-        if '<li' in line and i:
-            line = line.replace('<li', f'<li id="{headline}-{i}" class="rule"')
-            i = i + 1
+            items.append(1)
+        if '<li' in line and items:
+            p = ".".join([str(i) for i in items])
+            line = line.replace('<li', f'<li id="{headline}.{p}" class="rule"')
+            items[-1] += 1
         if '</ol' in line:
-            i = 0
+            items.pop(-1)
         print(line, end="")