From 9d15daf22762377cc343fc438b2961e14f224d34 Mon Sep 17 00:00:00 2001 From: Peder Bergebakken Sundt Date: Fri, 14 Oct 2022 00:50:52 +0200 Subject: [PATCH] Backport s3 style --- .envrc | 1 + Makefile | 32 ++++ pull.sh | 2 +- shell.nix | 1 + templates/6/example.sh | 7 + templates/6/render.sh | 9 + templates/6/style.html.j2 | 203 ++++++++++++++++++++++ templates/6/style.js | 74 ++++++++ templates/6/style.scss | 197 +++++++++++++++++++++ templates/6/templates/all.html.j2 | 49 ++++++ templates/6/templates/card_header.html.j2 | 15 ++ templates/6/templates/style.xsl.j2 | 111 ++++++++++++ templates/6/test_card.xml | 63 +++++++ 13 files changed, 763 insertions(+), 1 deletion(-) create mode 100644 Makefile create mode 100755 templates/6/example.sh create mode 100755 templates/6/render.sh create mode 100644 templates/6/style.html.j2 create mode 100644 templates/6/style.js create mode 100644 templates/6/style.scss create mode 100644 templates/6/templates/all.html.j2 create mode 100644 templates/6/templates/card_header.html.j2 create mode 100644 templates/6/templates/style.xsl.j2 create mode 100644 templates/6/test_card.xml diff --git a/.envrc b/.envrc index 8eec315..e0a23b6 100644 --- a/.envrc +++ b/.envrc @@ -1,3 +1,4 @@ #!/usr/bin/env bash +# this file is to be loaded with 'direnv' use nix export CARDS_ACCESS_TOKEN="hunter2" diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..62fc43e --- /dev/null +++ b/Makefile @@ -0,0 +1,32 @@ +STYLES := $(patsubst templates/%/render.sh,%,$(wildcard templates/*/render.sh)) + +help: + @printf "make %s\n" \ + render-styles \ + $(patsubst %,render-style-%-stdout,$(STYLES)) \ + $(patsubst %,render-example-card-%-stdout,$(STYLES)) \ + $(patsubst %,render-style-%-live,$(STYLES)) \ + $(patsubst %,render-example-card-%-live,$(STYLES)) \ + $(patsubst %,render-style-%,$(STYLES)) \ + $(patsubst %,render-example-card-%,$(STYLES)) + +render-styles: $(patsubst %,render-style-%,$(STYLES)) + +render-style-%-stdout: templates/%/render.sh + ./"$<" | bat --language html --plain --paging never + +render-example-card-%-stdout: templates/%/example.sh + ./"$<" | bat --language html --plain --paging never + +render-style-%-live: + fd --type f . templates/$* | entr make render-style-$*-stdout + +render-example-card-%-live: + fd --type f . templates/$* | entr make render-example-card-$*-stdout + +render-style-%: + make --quiet render-style-$*-stdout > pvv/styles/$*.html + +render-example-card-%: + ./"$<" + diff --git a/pull.sh b/pull.sh index 06a4e5e..1879491 100755 --- a/pull.sh +++ b/pull.sh @@ -10,7 +10,7 @@ mkdir -p pvv/{cards,styles} ./api.py get-styles | hjson -c | jq '.[].id' --raw-output | while read style_id; do (set -x - ./api.py get-style $style_id > pvv/styles/$style_id.xml + ./api.py get-style $style_id > pvv/styles/$style_id.html ) & done diff --git a/shell.nix b/shell.nix index 508e29a..c52cf4e 100644 --- a/shell.nix +++ b/shell.nix @@ -5,6 +5,7 @@ pkgs.mkShell { hjson # to deal with broken json j2cli sass + libxslt python3Packages.rich python3Packages.httpx python3Packages.typer diff --git a/templates/6/example.sh b/templates/6/example.sh new file mode 100755 index 0000000..b39f760 --- /dev/null +++ b/templates/6/example.sh @@ -0,0 +1,7 @@ +#!/usr/bin/env bash + +cd "$(cd "$(dirname "${BASH_SOURCE[0]}")" &> /dev/null && pwd)" + +xsltproc \ +<(./render.sh) \ +test_card.xml diff --git a/templates/6/render.sh b/templates/6/render.sh new file mode 100755 index 0000000..e59c9f4 --- /dev/null +++ b/templates/6/render.sh @@ -0,0 +1,9 @@ +#!/usr/bin/env bash + +cd "$(cd "$(dirname "${BASH_SOURCE[0]}")" &> /dev/null && pwd)" + +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 diff --git a/templates/6/style.html.j2 b/templates/6/style.html.j2 new file mode 100644 index 0000000..661ae65 --- /dev/null +++ b/templates/6/style.html.j2 @@ -0,0 +1,203 @@ +{% set xml_image_not_done = [1] %}{# why must nunjucks suck so much? #} + +{% macro figure_layer(figure) %} + {% set figure_style %}{% filter cull_whitespace %} + {% if figure.opacity!=1 %} + opacity: {{ figure.opacity }}; + {% endif %} + {% if figure.color!=1 %} + color: {{ figure.color }}; + {% endif %} + + transform: + {% if figure.offset and figure.offset|any %} + translate({{ figure.offset[0]*100 }}%, {{ figure.offset[1]*100 }}%) + {% endif %} + {% if figure.rotation %} + rotate({{ figure.rotation }}deg) + {% endif %} + {% if figure.flip_x %} + scaleX(-1) + {% endif %} + {% if figure.flip_y %} + scaleY(-1) + {% endif %} + {% if figure.scale and figure.scale!=1 %} + scale({{figure.scale | string | replace("[", "") | replace("]", "") }}) + {% endif %} + ; + {% endfilter %}{% endset %} + + {% if figure.source == "xml" %} + {% set figure_name = xml.image if xml.image | startswith("http") else xml.image | split(":") | tail | join(":") %} + {% set figure_source = "url" if xml.image | startswith("http") else xml.image | split(":") | first %} + {% if xml_image_not_done.pop() %}{% endif %} + {% else %} + {% set figure_name = figure.name %} + {% set figure_source = figure.source %} + {% endif %} + +
+ {% if figure_source == "material-icons" %} + {# https://material.io/icons/ #} + {{ figure_name }} + {% elif figure_source == "mdi" %} + {# https://materialdesignicons.com/ #} + + {% elif figure_source == "fa" %} + {# http://fontawesome.io/icons/ #} + + {% elif figure_source == "lnr" %} + {# https://linearicons.com/free #} + + {% elif figure_source == "oi" %} + {# https://useiconic.com/open #} + + {% elif figure_source == "svg" %} + {# pvv.ntnu.no/~pederbs/cards/svg #} + {% if figure.color == true %} + + {% elif figure.color %} + + {% else %} + + {% endif %} + {% elif figure_source in ["img", "emoji"] %} + {# pvv.ntnu.no/~pederbs/cards/img #} + {# /cards/emoji #} + {% if figure.color == true %} + + {% elif figure.color %} + + {% else %} + + {% endif %} + {% elif figure_source == "url" %} + {% if figure.color == true %} + + {% elif figure.color %} + + {% else %} + + {% endif %} + {% endif %} +
+{% endmacro %} + + +
+
+ {{ yaml.name or xml.name }} +
+ {% if xml.symbol %} +
+ {{ xml.symbol }} +
+ {% endif %} +
+ {% for figure in yaml.figures or [] %} + {{ figure_layer(figure) }} + {% endfor %} + {% if xml.image and xml_image_not_done | length %} + {{ figure_layer({ + 'name': xml.image if xml.image | startswith("http") else xml.image | split(":") | tail | join(":"), + 'source': "url" if xml.image | startswith("http") else xml.image | split(":") | first + }) }} + {% endif %} +
+
+ {% for playcosts in [xml.playcost, yaml.playcost] %} + {% if playcosts %} + {% for playcost in (playcosts.split(",") if playcosts | is_string else playcosts ) %} + {% if playcost | trim | split(" ") | first | is_number %} +
+ {{ playcost | trim | split(" ") | first }}
+ {{ playcost | trim | split(" ") | tail | join(" ") }} +
+ {% elif playcost | trim | split(" ") | length == 1 %} +
+ {{ 1 }}
+ {{ playcost }} +
+ {% endif %} + {% endfor %} + {% endif %} + {% endfor %} + {% for label, data in [ + ["Artistic Value", xml.artistic_value], + ["Difficulty", xml.difficulty or yaml.difficulty], + ["Power", xml.power or yaml.power], + ["Range", xml.range or yaml.range], + ["Duration", xml.duration or yaml.duration], + ["CP", xml.cp or yaml.cp] + ] %} + {% if data %} +
+ + {% for part in data | split("+") %} + {% if "death" not in part %} + {{"+" if not loop.first }} + {{ part }} + {% endif %} + {% endfor %} +
+ {# {{ data }}
#} + {{ label }} +
+ {% endif %} + {% endfor %} +
+
+
    + {% for playcosts in [xml.playcost, yaml.playcost] %} + {% if playcosts %} + {% for playcost in (playcosts.split(",") if playcosts | is_string else playcosts ) %} + {% if playcost | trim | split(" ") | first | is_number %} + {% elif playcost | trim | split(" ") | length == 1 %} + {% else %} +
  • {{ playcost }}
    • + {% endif %} + {% endfor %} + {% endif %} + {% endfor %} +
+ + {% if yaml.flavor %} +
"{{ yaml.flavor }}"
+ {% endif %} + + {% if yaml.description %} +
{{ yaml.description | markdown | safe }}
+ {% endif %} + {% if xml.description %} +
{{ xml.description | markdown | safe }}
+ {% endif %} + + {% if yaml.steps %} +
    + {% for step in yaml.steps %} +
  • {{ step }}
    • + {% endfor %} +
+ {% endif %} + +
+ {% for component in xml.components %} + {% if component["@db_entry"] | endswith("Mastery") %} + ❏ ❏ ❏ ❏ ❏ + ❏ ❏ ❏ ❏ ❏
+ {% endif %} + {% endfor %} +
+
+
+ +{# + +{% for item in xml.components %} +{{item["@x"]}}, +{{item["@y"]}}, +{{item["@db_entry"]}}
+{% endfor %} + +#} diff --git a/templates/6/style.js b/templates/6/style.js new file mode 100644 index 0000000..3f5b67f --- /dev/null +++ b/templates/6/style.js @@ -0,0 +1,74 @@ +var md = window.markdownit(); +var context = { + 'xml' : {}, + 'yaml' : jsyaml.load(document.getElementById("yaml_data").innerHTML), + 'alert' : alert, +}; + +// read xml data +var xml_data_items = document.getElementsByClassName("xml_data") +for (var i=0; i < xml_data_items.length; i++) { + var key = xml_data_items[i].id.substr(9); + var val = xml_data_items[i].innerHTML; + context.xml[key] = val; +} + +var xml_component_items = document.getElementsByClassName("xml_component") +context.xml["components"] = []; +for (var i=0; i < xml_component_items.length/3; i++) { + context.xml["components"].push({ + '@x' : document.getElementById("xml_component_" + (i+1) + "_x").innerHTML, + '@y' : document.getElementById("xml_component_" + (i+1) + "_y").innerHTML, + '@db_entry': document.getElementById("xml_component_" + (i+1) + "_db_entry").innerHTML, + }); +} + +var env = new nunjucks.Environment([], { + autoescape: true, + trimBlocks: true, + lstripBlocks: true, +}); +env.addFilter('markdown', function(str) { + return md.render(str); +}); +env.addFilter('cull_whitespace', function(str) { + return str.split(/\s+/).join(' ').trim(); +}); +env.addFilter('any', function(iterable) { + for (var index = 0; index < iterable.length; index++) { + if (iterable[index]) return true; + } + return false; +}); +env.addFilter('all', function(iterable) { + for (var index = 0; index < iterable.length; index++) { + if (!iterable[index]) return false; + } + return true; +}); +env.addFilter('startswith', function(string, match) { + return string.slice(0, match.length) === match; +}); +env.addFilter('endswith', function(string, match) { + return string.endsWith(match); +}); +env.addFilter('tail', function(sequence) { + return sequence.slice(1); +}); +env.addFilter('split', function(string, delimiter) { + return string.split(delimiter); +}); +env.addFilter('is_number', function(string) { + return !isNaN(string); +}); +env.addFilter('is_string', function(string) { + return String(string) === string; +}); + +try { + rendered = env.renderString(jinja_template, context); +} catch(err) { + rendered = "
" + err + "
"; +} +//console.log(rendered); +document.write(rendered); diff --git a/templates/6/style.scss b/templates/6/style.scss new file mode 100644 index 0000000..d2beeb9 --- /dev/null +++ b/templates/6/style.scss @@ -0,0 +1,197 @@ +.fjomp_card { + --figure-size: 0.9in; + --figure-size: 1.35in; + --figure-size: 1.5in; + --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; + + width: 2.5in; + height: 3.5in; + box-sizing: border-box; + border-radius: 0mm; + border-width: 0.3mm; + border-color: var(--color-border); + + border-style: solid; + background-color: var(--color-bg); + overflow: hidden; + + font-size: 2.5mm; + font-family: sans-serif; + + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: 1.9em var(--figure-size) 2.3em auto; + grid-template-areas: + "symbol title" + "figure figure" + "costbar costbar" + "description description"; + + header { + font-family: montserrat, sans-serif; + font-style: normal; + font-weight: 200; + + grid-area: title; + 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); + border-radius: 0; + color: var(--color-text-title); + } + .symbol { + grid-area: symbol; + text-align: center; + background-color: var(--color-bg-frame); + color: var(--color-text-title); + padding-top: 0.6mm; + padding-left: 0.8mm; + white-space: nowrap; + } + figure { + grid-area: figure; + background-color: var(--color-bg-figure); + overflow: hidden; + position: relative; + border-radius: 0; + 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); + } + } + } + .playcosts { + grid-area: playcosts; + border-left: solid 0.3mm #ccc; + background-color: var(--color-bg-frame); + color: #444 ; + padding: 0.5mm; + ul { + margin:0; + list-style-type: none; + padding: 0; + + li { + + } + } + } + .costbar { + grid-area: costbar; + border-radius: 0; + 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{ + font-size: 0.8em; + margin-left: 0.8mm; + margin-right: 0.8mm; + line-height: 0.9em; + } + } + .description { + grid-area: description; + margin: 1mm; + border-radius: 1mm; + background-color: var(--color-bg-body); + color: var(--color-text-body); + font-size: 0.9em; + position: relative; + + .markdown { + text-align: center; + + table { + margin-top:-0.3em; + margin-left:auto; + margin-right:auto; + th, td { + font-size: 2.5mm; /* user agent style override */ + } + } + p + table { + margin-top:-1em; + } + li { + text-align: left; + } + } + + ul, ol { + padding-left: 1.5em; + li { + + } + } + .bottom { + position: absolute; + bottom:0; + left:0; + right:0; + } + } +} + + +.fjomp_card.item, +.fjomp_card.figure, +.fjomp_card.repertoire { + --figure-size: 2.4in; +} diff --git a/templates/6/templates/all.html.j2 b/templates/6/templates/all.html.j2 new file mode 100644 index 0000000..4a2a76f --- /dev/null +++ b/templates/6/templates/all.html.j2 @@ -0,0 +1,49 @@ + + +
+{% for cardname in cards %} +
+ +
+
+{% endfor %} +
diff --git a/templates/6/templates/card_header.html.j2 b/templates/6/templates/card_header.html.j2 new file mode 100644 index 0000000..44bee24 --- /dev/null +++ b/templates/6/templates/card_header.html.j2 @@ -0,0 +1,15 @@ +{% set async = "media=\"none\" onload=\"if(media!='all')media='all'\"" -%} + + + + + + + + + + + + + + diff --git a/templates/6/templates/style.xsl.j2 b/templates/6/templates/style.xsl.j2 new file mode 100644 index 0000000..3dcf55d --- /dev/null +++ b/templates/6/templates/style.xsl.j2 @@ -0,0 +1,111 @@ + + + +{% set newline = "\n" %} +{% set gt = ">" %} +{% set lt = "<" %} +{% set amp = "&" %} + + +{% filter replace(">", ">foobarhuehuehue") + | replace("<", lt) + | replace(">foobarhuehuehue", gt) + | replace("\n", newline) + | replace("", "") %} + + + +{{ card_header }} + +Status Card + + +{% endfilter %} + + + + + +{{ newline*2 }} + + + +{{ newline*2 }} + +{# just name all the xml fields of interest here #} +{% for value in [ + "name", + "description", + "image", + "cp", + "range", + "power", + "symbol", + "difficulty", + "duration", + "artistic_value", + "playcost"] %} +{{lt}}script type="text/html" class="xml_data" id="xml_data_{{ value }}"{{gt}}{{lt}}/script{{gt}} +{{ newline }} +{% endfor %} + +{{ newline }} + + + +{{lt}}script type="text/html" class="xml_component" id="xml_component{# +#}__{# +#}x"{{gt}} + +{{lt}}/script{{gt}} +{{ newline }} + +{{lt}}script type="text/html" class="xml_component" id="xml_component{# +#}__{# +#}y"{{gt}} + +{{lt}}/script{{gt}} +{{ newline }} + +{{lt}}script type="text/html" class="xml_component" id="xml_component{# +#}__{# +#}db_entry"{{gt}} + +{{lt}}/script{{gt}} +{{ newline }} + + + + + + +{{ newline*2 }} + + + +{{ newline*2 }} + + + +{{ newline*2 }} + + +{{ newline }} + + + + diff --git a/templates/6/test_card.xml b/templates/6/test_card.xml new file mode 100644 index 0000000..3259d8d --- /dev/null +++ b/templates/6/test_card.xml @@ -0,0 +1,63 @@ + + +name: Hit enemy +#style: item +tags: +- combat +playcost: +- 'Element: fire' +- 'BODY+5 POWER' +#flavor: Enemies sure are squishy +#description: Perform an attack +#steps: +#- Do A +#- Do A +#- Do A +#- Then B +figures: +- name: piuy/chicken + source: img + scale: 2 +notes: '' + + + +Mega Fireball + +| | | +| ----:|----| +| asd | asd | +| asd | asd | + +# asd + +Attack an enemy in range 5. + +Roll MAG hit dice. Deal that amount of FIRE damage to the target. +https://freepngimg.com/download/fireball/27487-2-fireball-clipart.png +18 +4 +MAG + (0 to 2) +🔮🔥⚔️ +1 + +2 ACT, +Not Silenced, +3 MP, +Equipment has Catalyst property +-1 + + + + + + + + + + + + + + +