simplify shell

.gitignore

@@ -0,0 +1,3 @@
+__pycache__/
+.sass-cache/
+/pvv

README.md

@@ -0,0 +1,32 @@
+### How do I load the dev environment?
+
+Pick your poison:
+
+    nix-shell
+    direnv allow
+
+Both require `nix` configured with a `nixpkgs` channel.
+
+### How to I get my user token?
+
+Log in using a browser, then grab it from the local browser DB.
+
+### How to I set my user token?
+
+Set it as the `CARDS_ACCESS_TOKEN` environment variable, somehow. ( Have a look at `.envrc` ;) )
+
+### How do I list my style ID's?
+
+    ./api.py get-styles | jq .[].id
+
+### How do I pull all my styles and cards?
+
+    ./pull.sh && find pvv/
+
+_(The pull is destructive.)_
+
+### How do I build a style?
+
+    make render-style-49-file
+
+Where `49` is the style ID.

environ.py

@@ -0,0 +1,17 @@
+# https://github.com/kolypto/j2cli#customization
+
+# http://jinja.pocoo.org/docs/2.10/api/#jinja2.Environment
+def j2_environment_params(): return dict(
+    autoescape            = True,
+    trim_blocks           = True,
+    lstrip_blocks         = True,
+    keep_trailing_newline = True,
+    extensions = (
+        "jinja2.ext.do",
+        "jinja2.ext.loopcontrols"
+    ),
+)
+
+def j2_environment(env): return (env.globals.update(
+    my_function = lambda v: 'my function says "{}"'.format(v),
+), env)[1]

filters.py

@@ -0,0 +1,6 @@
+#from jinja2 import Markup
+import json
+
+def to_json(obj):
+    #return Markup(json.dumps(obj))
+    return json.dumps(obj)

push.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+
+function verbose {
+    echo + "$@"
+    "$@"
+}
+
+for style in pvv/styles/*.xml; do
+    verbose ./api.py set-style $(basename "$style" | cut -d. -f1) "$style"
+done
+
+exit
+
+for card in pvv/cards/*.xml; do
+    verbose ./api.py set-card $(basename "$card" | cut -d. -f1) "$card"
+done

shell.nix

@@ -9,12 +9,13 @@ pkgs.mkShell {
     sass
     libxslt
     nim
-  ] ++ (with python3Packages; [
+    (python3.withPackages (ps: with ps; [
       libxml2
       rich
       httpx
       typer
       # dev-only
       python-lsp-server
-  ]);
+    ]))
+  ];
 }

templates/48/card.html.j2

@@ -0,0 +1,43 @@
+<h1>{{ name }}</h1>
+
+<img src="{{ image }}"/>
+
+<p>
+{{ description }}
+</p>
+
+{% if procs %}
+<b>procs:</b><br>
+{% for proc in procs.splitlines() %}
+{{ proc.split("➡", 1)[0].strip() }}
+➡
+{{ proc.split("➡", 1)[1].strip() }}
+<br>
+{% endfor %}
+{% endif %}
+
+{% if cp %}
+<b>cp:</b> {{ cp }}<br>
+{% endif %}
+
+{% if range %}
+<b>range:</b> {{ range|int }}<br>
+{% endif %}
+
+{% if power %}
+<b>power:</b> {{ power }}<br>
+{% endif %}
+
+{% if playcost %}
+<b>playcost:</b><br>
+<ul>
+{% for cost in playcost.splitlines() %}
+<li>{{ cost.rstrip(",") }}
+{% endfor %}
+</ul>
+{% endif %}
+
+{% if duration %}
+<b>duration:</b>
+{{ duration }}<br>
+{% endif %}

templates/48/card.scss

@@ -0,0 +1,5 @@
+.a {
+    .b {
+        color: red;
+    }
+}

templates/48/example.json

@@ -0,0 +1,569 @@
+[
+  {
+    "node": null,
+    "xpath": "/",
+    "data": null,
+    "content": "\n\n\tSome Attack!\n\tSpis meg\n\thttp://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png\n\t1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage\n\t10\n\t1\n\t\n\t\n\tATT\n\t2 ACT,\nBare hands or melee weapon equipped\n\t\n\t\n\t\n\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\n",
+    "attributes": {}
+  },
+  {
+    "node": "ability_card",
+    "xpath": "/ability_card",
+    "data": "\n\n\tSome Attack!\n\tSpis meg\n\thttp://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png\n\t1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage\n\t10\n\t1\n\t\n\t\n\tATT\n\t2 ACT,\nBare hands or melee weapon equipped\n\t\n\t\n\t\n\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\n",
+    "content": "Some Attack!\n\n\t\nSpis meg\n\n\t\nhttp://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png\n\n\t\n1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage\n\n\t\n10\n\n\t\n1\n\n\t\n\n\n\t\n\n\n\t\nATT\n\n\t\n2 ACT,\nBare hands or melee weapon equipped\n\n\t\n\n\n\t\n\n\n\t\n\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[1]",
+    "data": "\n\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "name",
+    "xpath": "/ability_card/name",templates/48/example.json
+    "data": "Some Attack!",
+    "content": "Some Attack!",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/name/text()",
+    "data": "Some Attack!",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[2]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "description",
+    "xpath": "/ability_card/description",
+    "data": "Spis meg",
+    "content": "Spis meg",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/description/text()",
+    "data": "Spis meg",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[3]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "image",
+    "xpath": "/ability_card/image",
+    "data": "http://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png",
+    "content": "http://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/image/text()",
+    "data": "http://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[4]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "procs",
+    "xpath": "/ability_card/procs",
+    "data": "1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage",
+    "content": "1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/procs/text()",
+    "data": "1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[5]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "cp",
+    "xpath": "/ability_card/cp",
+    "data": "10",
+    "content": "10",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/cp/text()",
+    "data": "10",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[6]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "range",
+    "xpath": "/ability_card/range",
+    "data": "1",
+    "content": "1",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/range/text()",
+    "data": "1",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[7]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "aoe",
+    "xpath": "/ability_card/aoe",
+    "data": "",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[8]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "duration",
+    "xpath": "/ability_card/duration",
+    "data": "",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[9]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "power",
+    "xpath": "/ability_card/power",
+    "data": "ATT",
+    "content": "ATT",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/power/text()",
+    "data": "ATT",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[10]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "playcost",
+    "xpath": "/ability_card/playcost",
+    "data": "2 ACT,\nBare hands or melee weapon equipped",
+    "content": "2 ACT,\nBare hands or melee weapon equipped",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/playcost/text()",
+    "data": "2 ACT,\nBare hands or melee weapon equipped",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[11]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "companionstats",
+    "xpath": "/ability_card/companionstats",
+    "data": "",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[12]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "companionequip",
+    "xpath": "/ability_card/companionequip",
+    "data": "",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[13]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "companiondefences",
+    "xpath": "/ability_card/companiondefences",
+    "data": "",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[14]",
+    "data": "\n\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[1]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "1",
+      "db_entry": "🧩 Set Ability Name"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[15]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[2]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "1",
+      "y": "2",
+      "db_entry": "🧩 Set Description"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[16]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[3]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "1",
+      "y": "1",
+      "db_entry": "🧩 Set Image"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[17]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[4]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "4",
+      "y": "7",
+      "db_entry": "🧩 Set Stat",
+      "stat": "KUK",
+      "value": "5"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[18]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[5]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "5",
+      "db_entry": "🧩 CP Cost"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[19]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[6]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "7",
+      "db_entry": "🧩 Range"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[20]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[7]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "8",
+      "db_entry": "🧩 AoE"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[21]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[8]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "6",
+      "db_entry": "🧩 Duration"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[22]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[9]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "4",
+      "y": "8",
+      "db_entry": "🧩 Power"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[23]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[10]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "1",
+      "y": "5",
+      "db_entry": "🧩 Play Cost"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[24]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[11]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "1",
+      "y": "7",
+      "db_entry": "🧩 Companion Stats"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[25]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[12]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "1",
+      "y": "9",
+      "db_entry": "🧩 Companion Equipment"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[26]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[13]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "9",
+      "db_entry": "🧩 Companion Defences"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[27]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[14]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "5",
+      "y": "1",
+      "db_entry": "⚔️ Learn Ability"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[28]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[15]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "6",
+      "y": "1",
+      "db_entry": "⚔️ Melee Attack"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[29]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[16]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "7",
+      "y": "1",
+      "db_entry": "⚔️ Attack"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[30]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[17]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "8",
+      "y": "1",
+      "db_entry": "⚔️ White Hit Dice"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[31]",
+    "data": "\n\n",
+    "content": "",
+    "attributes": {}
+  }
+]

templates/48/example.sh

@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+cd "$(cd "$(dirname "${BASH_SOURCE[0]}")" &> /dev/null && pwd)"
+python pyscript.py

templates/48/js.py

@@ -0,0 +1,10 @@
+# this file is a hack to allow loading exampledata when running locally
+import json
+from pathlib import Path
+HERE = Path(__file__).parent
+
+with (HERE / "example.json").open() as f:
+    CARD_XPATHS_ENTRIES = json.load(f)
+
+with (HERE / "card.html.j2").open() as f:
+    CARD_TEMPLATE = f.read()

templates/48/pyscript.py

@@ -0,0 +1,67 @@
+from dataclasses import dataclass
+from jinja2 import Environment, BaseLoader, Template, StrictUndefined
+from js import CARD_XPATHS_ENTRIES, CARD_TEMPLATE
+from typing import Optional
+import jinja2
+
+@dataclass
+class Entry:
+    node       : Optional[str]
+    xpath      : str
+    content    : Optional[str]
+    attributes : dict
+
+# breaks because firefox and chrome normalizes html tags inside py-script
+CARD_XPATHS_ENTRIES_JSON = r"""
+##JSON:://*##
+"""
+#import json
+#CARD_XPATHS_ENTRIES = json.loads(CARD_XPATHS_ENTRIES_JSON)
+
+# time to abuse the JsProxy objects!
+XPATH_MAP = {}
+for entry in CARD_XPATHS_ENTRIES:
+    node       = entry.node       if hasattr(entry, "node")       else entry["node"]
+    xpath      = entry.xpath      if hasattr(entry, "xpath")      else entry["xpath"]
+    content    = entry.content    if hasattr(entry, "content")    else entry["content"]
+    attributes = entry.attributes if hasattr(entry, "attributes") else entry["attributes"]
+
+    if node is None and not content:
+        assert "text()" in xpath
+        continue
+
+    XPATH_MAP[xpath] = Entry(node, xpath, content, attributes)
+
+def get_all(xpath) -> Entry:
+    xpath = f"/ability_card/{xpath}"
+    for key, entry in XPATH_MAP.items():
+        if key.startswith(xpath):
+            yield entry
+
+def get(xpath) -> Entry:
+    xpath = f"/ability_card/{xpath}"
+    if xpath in XPATH_MAP:
+        return XPATH_MAP[xpath]
+    assert len(list(get_all(xpath))) == 0
+
+#print(*sorted( f"{k} - {v.node} - {len(v.content)}" for k, v in XPATH_MAP.items() ), sep="\n")
+
+print(
+    Environment(
+    	trim_blocks   = True,
+    	lstrip_blocks = True,
+        loader        = BaseLoader,
+        autoescape    = True,
+        undefined     = StrictUndefined,
+    )
+    .from_string(CARD_TEMPLATE)
+    .render(
+        get = get,
+        get_all = get_all,
+        **{
+            v.node: v.content
+            for k, v in XPATH_MAP.items()
+            if v.node is not None and k == f"/ability_card/{v.node}"
+        }
+    )
+)

templates/48/render.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+
+cd "$(cd "$(dirname "${BASH_SOURCE[0]}")" &> /dev/null && pwd)"
+
+card_pyscript="$(cat pyscript.py)" \
+card_css_style="$(sass --style expanded card.scss)" \
+card_jinja2_template="$(cat card.html.j2)" \
+j2 style.html.j2  --filters ../../filters.py --customize ../../environ.py

templates/48/style.html.j2

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8" />
+<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
+<script defer src="https://pyscript.net/latest/pyscript.js"></script>
+
+<py-config>
+#packages = [ "jinja2" ]
+packages = [
+    "https://cdn.jsdelivr.net/pyodide/v0.21.2/full/Jinja2-3.1.2-py3-none-any.whl",
+    "https://cdn.jsdelivr.net/pyodide/v0.21.2/full/MarkupSafe-2.1.1-cp310-cp310-emscripten_3_1_14_wasm32.whl",
+    "pyyaml"
+]
+
+autoclose_loader = true
+[[runtime]]
+name = "pyodide-0.21.2"
+lang = "python"
+src  = "https://cdn.jsdelivr.net/pyodide/v0.21.2/full/pyodide.js"
+</py-config>
+
+<style>
+{{ card_css_style }}
+</style>
+
+<script>
+CARD_XPATHS_ENTRIES = ##JSON:://.##;
+CARD_TEMPLATE
+  = {{ card_jinja2_template | to_json | replace("\\n", '\\n"\n  + "') | safe }};
+</script>
+
+<py-script>
+{##}
+{{ card_pyscript | safe }}
+{##}
+</py-script>

templates/49/.gitignore

@@ -0,0 +1,2 @@
+main-*.js
+live.html

templates/49/example.json

@@ -0,0 +1,569 @@
+[
+  {
+    "node": null,
+    "xpath": "/",
+    "data": null,
+    "content": "\n\n\tSome Attack!\n\tSpis meg\n\thttp://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png\n\t1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage\n\t10\n\t1\n\t\n\t\n\tATT\n\t2 ACT,\nBare hands or melee weapon equipped\n\t\n\t\n\t\n\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\n",
+    "attributes": {}
+  },
+  {
+    "node": "ability_card",
+    "xpath": "/ability_card",
+    "data": "\n\n\tSome Attack!\n\tSpis meg\n\thttp://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png\n\t1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage\n\t10\n\t1\n\t\n\t\n\tATT\n\t2 ACT,\nBare hands or melee weapon equipped\n\t\n\t\n\t\n\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\n",
+    "content":    "Some Attack!\n\n\t\nSpis meg\n\n\t\nhttp://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png\n\n\t\n1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage\n\n\t\n10\n\n\t\n1\n\n\t\n\n\n\t\n\n\n\t\nATT\n\n\t\n2 ACT,\nBare hands or melee weapon equipped\n\n\t\n\n\n\t\n\n\n\t\n\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n\n\n\t\n",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[1]",
+    "data": "\n\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "name",
+    "xpath": "/ability_card/name",
+    "data": "Some Attack!",
+    "content": "Some Attack!",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/name/text()",
+    "data": "Some Attack!",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[2]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "description",
+    "xpath": "/ability_card/description",
+    "data": "Spis meg",
+    "content": "Spis meg",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/description/text()",
+    "data": "Spis meg",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[3]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "image",
+    "xpath": "/ability_card/image",
+    "data": "http://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png",
+    "content": "http://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/image/text()",
+    "data": "http://www.pvv.ntnu.no/~pederbs/cards/img/data/piuy/awe.png",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[4]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "procs",
+    "xpath": "/ability_card/procs",
+    "data": "1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage",
+    "content": "1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/procs/text()",
+    "data": "1 🗡️🗡️🗡️ ➡ 3 Damage\n1 🗡️🗡️🗡️🗡️ ➡ 5 Damage",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[5]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "cp",
+    "xpath": "/ability_card/cp",
+    "data": "10",
+    "content": "10",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/cp/text()",
+    "data": "10",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[6]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "range",
+    "xpath": "/ability_card/range",
+    "data": "1",
+    "content": "1",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/range/text()",
+    "data": "1",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[7]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "aoe",
+    "xpath": "/ability_card/aoe",
+    "data": "",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[8]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "duration",
+    "xpath": "/ability_card/duration",
+    "data": "",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[9]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "power",
+    "xpath": "/ability_card/power",
+    "data": "ATT",
+    "content": "ATT",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/power/text()",
+    "data": "ATT",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[10]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "playcost",
+    "xpath": "/ability_card/playcost",
+    "data": "2 ACT,\nBare hands or melee weapon equipped",
+    "content": "2 ACT,\nBare hands or melee weapon equipped",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/playcost/text()",
+    "data": "2 ACT,\nBare hands or melee weapon equipped",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[11]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "companionstats",
+    "xpath": "/ability_card/companionstats",
+    "data": "",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[12]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "companionequip",
+    "xpath": "/ability_card/companionequip",
+    "data": "",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[13]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "companiondefences",
+    "xpath": "/ability_card/companiondefences",
+    "data": "",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[14]",
+    "data": "\n\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[1]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "1",
+      "db_entry": "🧩 Set Ability Name"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[15]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[2]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "1",
+      "y": "2",
+      "db_entry": "🧩 Set Description"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[16]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[3]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "1",
+      "y": "1",
+      "db_entry": "🧩 Set Image"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[17]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[4]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "4",
+      "y": "7",
+      "db_entry": "🧩 Set Stat",
+      "stat": "KUK",
+      "value": "5"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[18]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[5]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "5",
+      "db_entry": "🧩 CP Cost"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[19]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[6]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "7",
+      "db_entry": "🧩 Range"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[20]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[7]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "8",
+      "db_entry": "🧩 AoE"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[21]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[8]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "6",
+      "db_entry": "🧩 Duration"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[22]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[9]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "4",
+      "y": "8",
+      "db_entry": "🧩 Power"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[23]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[10]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "1",
+      "y": "5",
+      "db_entry": "🧩 Play Cost"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[24]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[11]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "1",
+      "y": "7",
+      "db_entry": "🧩 Companion Stats"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[25]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[12]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "1",
+      "y": "9",
+      "db_entry": "🧩 Companion Equipment"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[26]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[13]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "3",
+      "y": "9",
+      "db_entry": "🧩 Companion Defences"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[27]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[14]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "5",
+      "y": "1",
+      "db_entry": "⚔️ Learn Ability"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[28]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[15]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "6",
+      "y": "1",
+      "db_entry": "⚔️ Melee Attack"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[29]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[16]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "7",
+      "y": "1",
+      "db_entry": "⚔️ Attack"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[30]",
+    "data": "\n\t",
+    "content": "",
+    "attributes": {}
+  },
+  {
+    "node": "component",
+    "xpath": "/ability_card/component[17]",
+    "data": "",
+    "content": "",
+    "attributes": {
+      "x": "8",
+      "y": "1",
+      "db_entry": "⚔️ White Hit Dice"
+    }
+  },
+  {
+    "node": null,
+    "xpath": "/ability_card/text()[31]",
+    "data": "\n\n",
+    "content": "",
+    "attributes": {}
+  }
+]

templates/49/example.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+cd "$(cd "$(dirname "${BASH_SOURCE[0]}")" &> /dev/null && pwd)"
+
+set -eo pipefail
+
+./render.sh development | sd --string-mode "##JSON:://.##" "$(cat example.json)"

templates/49/live.sh

@@ -0,0 +1,6 @@
+#!/usr/bin/env bash
+
+cd "$(cd "$(dirname "${BASH_SOURCE[0]}")" &> /dev/null && pwd)"
+set -eo pipefail
+
+git ls-files | entr bash -c "./example.sh > live.html"

templates/49/main.nim

@@ -0,0 +1,66 @@
+import dom
+import json
+import nimja/parser
+import sequtils
+import strutils
+import strformat
+import math
+import tables
+import sugar # lambda syntax
+#import jscore
+
+
+# XPATH JSON stuff
+
+type Entry = object
+  node       : string
+  xpath      : string
+  content    : string
+  attributes : Table[string, string]
+
+let entries = parseJson($document.getElementById("json_data").innerText).to(seq[Entry])
+  #.map do (entry: Entry ) -> Entry: entry. TODO: strip content
+  .filter do (entry: Entry) -> bool:
+    not entry.xpath.contains("text()") or entry.content.strip() != ""
+
+proc get(key: string): Entry =
+  for entry in entries:
+    if entry.xpath == fmt"/ability_card/{key}":
+      return entry
+  nil
+
+type Component = object
+  key : string # db_entry
+  x   : int
+  y   : int
+  attrs : Table[string, string]
+
+var components: seq[Component] = @[]
+for entry in entries:
+  if entry.node == "component" and entry.xpath.startswith("/ability_card/component["):
+    var attrs = entry.attributes
+    attrs.del("x")
+    attrs.del("y")
+    attrs.del("db_entry")
+    components.add Component(
+        x     : entry.attributes["x"].parseInt(),
+        y     : entry.attributes["y"].parseInt(),
+        key   : entry.attributes["db_entry"],
+        attrs : attrs,
+    )
+
+# YAML stuff
+
+
+# Nimja Stuff
+
+proc is_numeric*(s: string): bool =
+  try:
+    discard s.parseFloat()
+    result = true
+  except:
+    discard
+
+proc renderIndex(): string =
+  compileTemplateFile(getScriptDir() / "main.nimja")
+document.write renderIndex()

templates/49/main.nimble

@@ -0,0 +1,12 @@
+# Package
+version       = "0.1.0"
+author        = "Peder Bergebakken Sundt"
+description   = "A new awesome nimble package"
+license       = "BSD-3-Clause"
+srcDir        = "."
+bin           = @["main"]
+
+# Dependencies
+requires "nim >= 1.6.6"
+requires "nimja"
+requires "yaml"

templates/49/main.nimja

@@ -0,0 +1,180 @@
+{% let name        = get("name")       .content %}
+{% let description = get("description").content %}
+{% let image       = get("image")      .content %}
+{% let procs       = get("procs")      .content %}
+{% let cp          = get("cp")         .content %}
+{% let range       = get("range")      .content %}
+{% let aoe         = get("aoe")        .content %}
+{% let duration    = get("duration")   .content %}
+{% let power       = get("power")      .content %}
+{% let playcost    = get("playcost")   .content %}
+
+
+{% proc mk_cost_bar(): string = %}
+  <div class="bar">
+    {% for parts in playcost.split(",").map (x) => x.strip().split(" ") %}
+      {% if parts[0].is_numeric() %}
+        <section>
+          <big>{{ parts[0] }}</big><br>
+          <small>{{ parts[1..^1].join(" ") }}</small>
+        </section>
+      {% elif parts.len() == 1 %}
+        <section>
+          <big>{{ 1 }}</big><br>
+          <small>{{ playcost }}</small>
+        </section>
+      {% endif %}
+    {% endfor %}
+  </div>
+{% endmacro %}
+{% proc mk_effect_bar(): string = %}
+  <div class="bar">
+    <section>
+      <big>{{ power }}</big><br>
+      <small>power</small>
+    </section>
+    {## }
+    {% if duration != "" %}
+      <section>
+        <big>{{ duration }}</big><br>
+        <small>Duration</small>
+      </section>
+    {% endif %}
+    {##}
+  </div>
+{% endmacro %}
+{% proc mk_figure(): string = %}
+  <div class="layer">
+    <img src="{{ image }}">
+  </div>
+{% endmacro %}
+{% proc mk_desc(): string = %}
+  <div class="description vbox">
+    <div class="grow">{# start top-justified #}
+
+      <center><i>{{ description }}</i></center>
+
+      <div class="hbox">
+        <div class="grow">
+          {# column one #}
+          <table>
+          {% for proc_line in procs.splitlines() %}
+            {% let p = proc_line.split() %}
+            <tr>
+              {# number of dies #}<td>{{ p[0] }}
+              {# procs          #}<td>{{ p[1] }}
+              {# arrow          #}<td>{{ p[2] }}
+              {# effect         #}<td>{{ p[3..^1].join("\n") }}
+            </tr>
+          {% endfor %}
+          </table>
+        </div>
+        <div>
+          {# column two #}
+        </div>
+      </div>
+
+    </div>{# end top-justified #}
+    <div>{# start bottom-justified #}
+
+      <center>
+        &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
+        &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
+      </center>
+
+    </div>{# end bottom-justified #}
+  </div>
+{% endmacro %}
+{% proc mk_sidebar(): string = %}
+  <div>
+  {% for _ in 0..<2 %}
+    <div class="range-grid">
+      {% for x in 1..7 %}{% for y in 1..7 %}
+      <div style="grid-row: {{ x }}; grid-column: {{ y }}; background: LightSkyBlue"></div>
+      {% endfor %}{% endfor %}
+      <div class="label">AoE</div>
+
+      {% for x in 1..7 %}{% for y in 1..7 %}
+      {% if (x-4)^2 + (y-4)^2 <= 3^2 %}
+      <div style="grid-row: {{ x }}; grid-column: {{ y }}; background: green"></div>
+      {% endif %}
+      {% endfor %}{% endfor %}
+
+      {% for (x, y) in [
+        (3, 3),
+        (3, 4),
+        (3, 5),
+      ] %}
+        <div style="grid-row: {{ x }}; grid-column: {{ y }}; background: var(--color-bg-costbar)"></div>
+      {% endfor %}
+      {#
+      <div style="grid-row: 2; grid-column: 5; background: var(--color-bg-costbar)"></div>
+      #}
+    </div>
+  {% endfor %}
+  </div>
+{% endproc %}
+
+<div class="fjomp_card">
+  <header class="hbox">
+    <span class="    ">symbol</span>
+    <span class="grow">{{ name }}</span>
+  </header>
+  {{ mk_cost_bar() }}
+  <div class="hbox">
+    <div class="vbox grow">
+      <figure class="grow">
+        {{ mk_figure() }}
+      </figure>
+    </div>
+    {{ mk_sidebar() }}
+  </div>
+  {{ mk_effect_bar() }}
+  {{ mk_desc() }}
+  <div class="bar vbox">
+    {##}
+    {% if duration != "" %}
+    <div> Duration: {{ duration }} </div>
+    {% endif %}
+    {##}
+    {## }
+    <div>
+      &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
+      &#x274F; &#x274F; &#x274F; &#x274F; &#x274F;
+    </div>
+    {##}
+    <div class="rjust grow"> {{ cp }} CP </div>
+  </div>
+</div>
+
+
+<table>
+  <tr><th>range   </th><td>{{ range    }}</td></tr>
+  <tr><th>aoe     </th><td>{{ aoe      }}</td></tr>
+  <tr><th>duration</th><td>{{ duration }}</td></tr>
+  <tr><th>power   </th><td>{{ power    }}</td></tr>
+  <tr><th>playcost</th><td>{{ playcost }}</td></tr>
+</table>
+
+
+{## }
+<ul>
+{% for entry in entries %}
+  <li>
+    {{ ($entry).replace("\\", "\\\\") }}
+{% endfor %}
+</ul>
+{##}
+
+
+{## }
+<ul>
+{% for (idx, component) in components.pairs %}
+  <li>
+    {{ component.x }}
+    {{ component.y }}
+    {{ component.key }}
+    {{ component.attrs }}
+{% endfor %}
+</ul>
+{##}

templates/49/render.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+
+cd "$(cd "$(dirname "${BASH_SOURCE[0]}")" &> /dev/null && pwd)"
+set -eo pipefail
+
+VERSION="${1-release}"
+
+if test "main-$VERSION.js" -ot "main.nim" \
+|| test "main-$VERSION.js" -ot "main.nimle" \
+|| test "main-$VERSION.js" -ot "main.nimja"
+then
+    >&2 nimble js main -o:main-"$VERSION".js -d:"$VERSION"
+fi
+
+j2 -f json style.html.j2 <({
+        echo "card_js = $(cat main-"$VERSION".js | jq -s --raw-input);"
+        echo "card_css_style = $(sass --style expanded style.scss | jq -s --raw-input);"
+    } | gron -u) --filters ../../filters.py --customize ../../environ.py

templates/49/style.html.j2

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8" />
+
+<style>
+{{ card_css_style }}
+</style>
+
+<script type="text/json" id="json_data">
+##JSON:://.##
+</script>
+
+<script>
+{{ card_js | safe }}
+</script>

templates/49/style.scss

@@ -0,0 +1,196 @@
+// @mixin flex {
+//   property: value;
+// }
+
+// TODO: convert to SASS
+// https://sass-lang.com/guide
+
+body {
+  margin:0px;
+}
+
+
+@mixin flex {
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  //gap: 0.5mm;
+}
+.vbox  { @include flex; flex-flow: column nowrap; }
+.hbox  { @include flex; flex-flow: row nowrap; }
+.rjust { text-align: right; }
+.grow  { flex: 1 1 auto; }
+
+
+.fjomp_card {
+  --color-border:         MidnightBlue;
+  --color-bg-figure:      white;
+
+  --color-bg:             PaleTurquoise; // PaleTurquoise;
+  --color-bg-body:        LightCyan;     // PaleTurquoise;
+  --color-bg-frame:       PaleTurquoise; // LightSkyBlue;
+  --color-bg-costbar:     SandyBrown;    // DarkOrange;
+
+  --color-text-title:     MidnightBlue;
+  --color-text-body:      black;
+  --color-text-costbar:   white;
+  --color-shadow-costbar:
+    +0.08em       0 0.05em Maroon,
+    -0.08em       0 0.05em Maroon,
+    0        0.08em 0.05em Maroon,
+    0       -0.08em 0.05em Maroon;
+  --figure-color:         #555;
+
+  --figure-size: 0.9in;
+  --figure-size: 1.35in;
+  --figure-size: 1.5in;
+
+  @include flex;
+  flex-flow: column nowrap;
+
+  width: 2.5in;
+  height: 3.5in;
+
+  box-sizing: border-box;
+  border-style: solid;
+  border-radius: 0mm;
+  border-width: 0.3mm;
+  border-color: var(--color-border);
+
+  background-color: var(--color-bg);
+  overflow: hidden;
+
+  font-size: 2.5mm;
+  font-family: sans-serif;
+
+  header {
+    font-family: montserrat, sans-serif;
+    font-style: normal;
+    font-weight: 200;
+
+    font-size: 1.8em;
+    line-height: 1em;
+    //margin-left: -1em;
+    border-radius: 1mm 1mm 0 0;
+    text-align: center;
+    background-color: var(--color-bg-frame);
+    color: var(--color-text-title);
+  }
+  .bar {
+    background-color: var(--color-bg-costbar);
+    color: var(--color-text-costbar);
+    text-shadow: var(--color-shadow-costbar);
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    font-size: 1.1em;
+
+    section {
+        margin-top: 1mm;
+        font-size: 0.8em;
+        margin-left: 0.8mm;
+        margin-right: 0.8mm;
+        line-height: 0.9em;
+    }
+  }
+  figure {
+    background-color: var(--color-bg-figure);
+    overflow: hidden;
+    position: relative;
+    min-height: var(--figure-size);
+    min-width:  var(--figure-size);
+    margin: 0;
+
+    .layer {
+      color: var(--figure-color);
+      position: absolute;
+      top: 0; right: 0; left: 0; bottom: 0;
+      height: var(--figure-size);
+      width:  var(--figure-size);
+      margin: auto;
+      text-align: center;
+      >* {
+        width: 100%;
+        height: 100%;
+      }
+      img {
+        width: calc(var(--figure-size));
+        height: calc(var(--figure-size));
+        object-fit: contain;
+      }
+      img.colored {
+        transform: translateY(-10000px);
+        filter: drop-shadow(0px 10000px var(--figure-color));
+      }
+      .mdi,
+      .fa,
+      .oi,
+      .material-icons.figure {
+        font-size: calc(var(--figure-size) * 0.9);
+        line-height: var(--figure-size);
+      }
+      .lnr {
+        font-size: calc(var(--figure-size) * 0.8);
+        line-height: calc(var(--figure-size) * 0.95);
+      }
+    }
+  }
+  .description {
+      flex: 1 1 auto; // grow shrink basis
+
+      margin: 1mm;
+      border-radius: 1mm;
+
+      background-color: var(--color-bg-body);
+      color: var(--color-text-body);
+
+      font-size: 0.9em;
+      //position: relative;
+  }
+  .range-grid {
+    width:  0.75in;
+    height: 0.75in;
+
+    box-sizing: border-box;
+    border-style: solid;
+    border-radius: 0.5mm;
+    border-width: 0.3mm;
+    border-color: var(--color-border);
+
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows:    1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-gap: .3mm;
+    padding: .3mm;
+
+    .label {
+      z-index: 100;
+      display: block;
+      grid-row-start: 1;
+      grid-row-end: 3;
+      grid-column-start: 1;
+      grid-column-end: 8;
+      text-align: center;
+
+      text-shadow:
+        +0.5mm       0 0.5mm white,
+        -0.5mm       0 0.5mm white,
+        0        0.5mm 0.5mm white,
+        0       -0.5mm 0.5mm white;
+    }
+    >* {
+      overflow: hidden;
+    }
+
+    margin-right: -0.3mm; // card border
+  }
+  .range-grid + .range-grid {
+    margin-top: -0.3mm; // border width
+  }
+}

templates/6/example.sh

@@ -2,6 +2,5 @@
 
 cd "$(cd "$(dirname "${BASH_SOURCE[0]}")" &> /dev/null && pwd)"
 
-xsltproc  \
+#xsltproc <(./render.sh) test_card.xml
-<(./render.sh) \
+echo TODO
-test_card.xml

templates/6/render.sh

@@ -6,4 +6,5 @@ css_data="$(sass --style expanded style.scss)" \
 jinja_data="$(cat style.html.j2)" \
 js_data="$(cat style.js)" \
 card_header="$(j2 templates/card_header.html.j2)" \
-j2 templates/style.xsl.j2
+j2 templates/style.html.j2
+#j2 templates/style.xsl.j2

templates/6/templates/style.html.j2

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+{{ card_header }}
+<title>Status Card</title>
+<style type="text/css">
+{{ css_data.strip() }}
+</style>
+
+<body style="margin:0px;">
+
+<script type="text/html" id="yaml_data">
+##DATA::/ability_card/yaml_data##
+</script>
+
+{# just name all the xml fields of interest here #}
+{% for value in [
+	"name",
+	"description",
+	"image",
+	"cp",
+	"range",
+	"power",
+	"symbol",
+	"difficulty",
+	"duration",
+	"artistic_value",
+	"playcost",
+] %}
+<script type="text/html" class="xml_data" id="xml_data_{{ value }}">##DATA::/ability_card/{{ value }}##</script>
+{% endfor %}
+
+{# 2hacky4me #}
+<script type="text/javascript">
+const component_data = ##JSON::/ability_card/component##;
+var i = 1;
+for (const component of component_data) {
+	document.write('<script type="text/html" class="xml_component" id="xml_component_' + i + '_x">'        + component.attributes.x        + '</script' + '>');
+	document.write('<script type="text/html" class="xml_component" id="xml_component_' + i + '_y">'        + component.attributes.y        + '</script' + '>');
+	document.write('<script type="text/html" class="xml_component" id="xml_component_' + i + '_db_entry">' + component.attributes.db_entry + '</script' + '>');
+	i += 1;
+}
+</script>
+
+
+<script type="text/javascript">
+var jinja_template =
+{{ jinja_data.strip() | tojson | replace("\\n", "\\n\" +\n\"") }};
+</script>
+
+<script type="text/javascript">
+{{ js_data }}
+</script>