diff --git a/README.md b/README.md index 82fb7b1..0e23081 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,6 @@ _(The pull is destructive.)_ ### How do I build a style? - make render-style-48-file + make render-style-49-file Where `49` is the style ID. diff --git a/templates/49/main.nim b/templates/49/main.nim index 8def725..37ed28e 100644 --- a/templates/49/main.nim +++ b/templates/49/main.nim @@ -4,10 +4,12 @@ import nimja/parser import sequtils import strutils import strformat +import math import tables -import sugar +import sugar # lambda syntax #import jscore + # XPATH JSON stuff type Entry = object @@ -25,11 +27,7 @@ proc get(key: string): Entry = for entry in entries: if entry.xpath == fmt"/ability_card/{key}": return entry - assert false - -#proc get_first(path: str): Entry = -# for entry in entries: -# if entry + nil type Component = object key : string # db_entry @@ -54,16 +52,15 @@ for entry in entries: # YAML stuff +# Nimja Stuff -proc renderIndex( - title : string, - entries : seq[Entry], - get : (string) -> Entry, - ): string = - compileTemplateFile(getScriptDir() / "main.nimja", ) +proc is_numeric*(s: string): bool = + try: + discard s.parseFloat() + result = true + except: + discard -document.write renderIndex( - "index", - entries, - get, -) +proc renderIndex(): string = + compileTemplateFile(getScriptDir() / "main.nimja") +document.write renderIndex() diff --git a/templates/49/main.nimja b/templates/49/main.nimja index 66c216e..621562c 100644 --- a/templates/49/main.nimja +++ b/templates/49/main.nimja @@ -1,4 +1,163 @@ -{##} +{% 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 = %} +
+ {% for parts in playcost.split(",").map (x) => x.strip().split(" ") %} + {% if parts[0].is_numeric() %} +
+ {{ parts[0] }}
+ {{ parts[1..^1].join(" ") }} +
+ {% elif parts.len() == 1 %} +
+ {{ 1 }}
+ {{ playcost }} +
+ {% endif %} + {% endfor %} +
+{% endmacro %} +{% proc mk_effect_bar(): string = %} +
+
+ {{ power }}
+ power +
+ {## } + {% if duration != "" %} +
+ {{ duration }}
+ Duration +
+ {% endif %} + {##} +
+{% endmacro %} +{% proc mk_figure(): string = %} +
+ +
+{% endmacro %} +{% proc mk_desc(): string = %} +
+
{# start top-justified #} + +
{{ description }}
+ +
+
+ {# column one #} + + {% for proc_line in procs.splitlines() %} + {% let p = proc_line.split() %} + + {# number of dies #} + {% endfor %} +
{{ p[0] }} + {# procs #}{{ p[1] }} + {# arrow #}{{ p[2] }} + {# effect #}{{ p[3..^1].join("\n") }} +
+
+
+ {# column two #} +
+
+ +
{# end top-justified #} +
{# start bottom-justified #} + +
+ ❏ ❏ ❏ ❏ ❏ + ❏ ❏ ❏ ❏ ❏ +
+ +
{# end bottom-justified #} +
+{% endmacro %} +{% proc mk_sidebar(): string = %} +
+ {% for _ in 0..<2 %} +
+ {% for x in 1..7 %}{% for y in 1..7 %} +
+ {% endfor %}{% endfor %} +
AoE
+ + {% for x in 1..7 %}{% for y in 1..7 %} + {% if (x-4)^2 + (y-4)^2 <= 3^2 %} +
+ {% endif %} + {% endfor %}{% endfor %} + + {% for (x, y) in [ + (3, 3), + (3, 4), + (3, 5), + ] %} +
+ {% endfor %} + {# +
+ #} +
+ {% endfor %} +
+{% endproc %} + +
+
+ symbol + {{ name }} +
+ {{ mk_cost_bar() }} +
+
+
+ {{ mk_figure() }} +
+
+ {{ mk_sidebar() }} +
+ {{ mk_effect_bar() }} + {{ mk_desc() }} +
+ {##} + {% if duration != "" %} +
Duration: {{ duration }}
+ {% endif %} + {##} + {## } +
+ ❏ ❏ ❏ ❏ ❏ + ❏ ❏ ❏ ❏ ❏ +
+ {##} +
{{ cp }} CP
+
+
+ + + + + + + + +
range {{ range }}
aoe {{ aoe }}
duration{{ duration }}
power {{ power }}
playcost{{ playcost }}
+ + +{## } {##} -
-
{{ get("name").content }}
-
- - - +{## } +{##} diff --git a/templates/49/style.scss b/templates/49/style.scss index 8072ea3..df15881 100644 --- a/templates/49/style.scss +++ b/templates/49/style.scss @@ -1,5 +1,192 @@ -.a { - .b { - color: red; - } +// @mixin flex { +// property: value; +// } + +// TODO: convert to SASS +// https://sass-lang.com/guide + + +@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 + } }