pederbs
/
RPGs3_card_insanity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

asd

This commit is contained in:
Peder Bergebakken Sundt 2019-09-11 05:09:42 +02:00
parent da1e53b190
commit ced3388b60
6 changed files with 99 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
Makefile
View File

@ -1,5 +1,5 @@
all: build/card.html all: build/card.html build/card_rendered.html
.PHONY: dev .PHONY: dev
dev: dev:
@ -15,6 +15,26 @@ build/card.html: build/card.xml build/style.xsl
build/style.xsl \ build/style.xsl \
build/card.xml build/card.xml
define PYTHON_MAKE_RENDERED_CARD
from jinja2 import Environment, FileSystemLoader
from markdown import markdown
import yaml
with open("card.yaml") as f: data = f.read()
with open("build/card_rendered.html", "w") as f:
e = Environment(trim_blocks=True, lstrip_blocks=True, loader=FileSystemLoader(''))
e.filters.update({
"markdown":markdown,
"any":any,
"all":all,
"cull_whitespace":(lambda x: " ".join(x.split())) })
f.write(e.get_template('style.html.j2').render(card=yaml.load(data)))
endef
export PYTHON_MAKE_RENDERED_CARD
build/card_rendered.html: card.yaml style.html.j2
python3 -c "$$PYTHON_MAKE_RENDERED_CARD"
define PYTHON_MAKE_CARD_XML define PYTHON_MAKE_CARD_XML
from jinja2 import Environment, FileSystemLoader from jinja2 import Environment, FileSystemLoader
with open("card.yaml") as f: data = f.read() with open("card.yaml") as f: data = f.read()
@ -24,7 +44,6 @@ with open("build/card.xml", "w") as f:
.get_template('card.xml.j2') .get_template('card.xml.j2')
.render(data=data)) .render(data=data))
endef endef
export PYTHON_MAKE_CARD_XML export PYTHON_MAKE_CARD_XML
build/card.xml: card.yaml templates/card.xml.j2 build/card.xml: card.yaml templates/card.xml.j2
python3 -c "$$PYTHON_MAKE_CARD_XML" python3 -c "$$PYTHON_MAKE_CARD_XML"
@ -43,7 +62,6 @@ with open("build/style.xsl", "w") as f:
.get_template('style.xsl.j2') .get_template('style.xsl.j2')
.render( css_data=css_data, jinja_data=jinja_data, js_data=js_data)) .render( css_data=css_data, jinja_data=jinja_data, js_data=js_data))
endef endef
export PYTHON_MAKE_STYLE_XSL export PYTHON_MAKE_STYLE_XSL
build/style.xsl: build/style.css templates/style.xsl.j2 style.html.j2 style.js build/style.xsl: build/style.css templates/style.xsl.j2 style.html.j2 style.js
python3 -c "$$PYTHON_MAKE_STYLE_XSL" python3 -c "$$PYTHON_MAKE_STYLE_XSL"
@ -55,7 +73,6 @@ with open("style.scss") as f:
with open("build/style.css", "w") as of: with open("build/style.css", "w") as of:
of.write(sass.compile(string=f.read(), output_style="expanded")) of.write(sass.compile(string=f.read(), output_style="expanded"))
endef endef
export PYTHON_MAKE_SASS export PYTHON_MAKE_SASS
build/style.css: style.scss build/style.css: style.scss
python3 -c "$$PYTHON_MAKE_SASS" python3 -c "$$PYTHON_MAKE_SASS"

8
card.yaml
View File

@ -11,12 +11,14 @@ flavor: Enemies sure are squishy
description: Perform an attack description: Perform an attack
steps: steps:
- Do A - Do A
- Do A
- Do A
- Then B - Then B
notes: '' notes: ''
figures: figures:
- name: users - name: batman
type: fa type: svg
color: "#ff0000" color: false
scale: 0.8 scale: 0.8
flip_x: false flip_x: false
flip_y: false flip_y: false

100
style.html.j2
View File

@ -1,5 +1,5 @@
{% macro figure_layer(figure) -%} {% macro figure_layer(figure) %}
{%- set figure_style %}{% filter cull_whitespace %} {% set figure_style %}{% filter cull_whitespace %}
{% if figure.opacity!=1 %}opacity: {{ figure.opacity }};{% endif %} {% if figure.opacity!=1 %}opacity: {{ figure.opacity }};{% endif %}
{% if figure.color!=1 %}color: {{ figure.color }};{% endif %} {% if figure.color!=1 %}color: {{ figure.color }};{% endif %}
transform: transform:
@ -9,68 +9,82 @@
{% if figure.flip_y %}scaleY(-1){% endif %} {% if figure.flip_y %}scaleY(-1){% endif %}
{% if figure.scale!=1 %}scale({{ figure.scale }}){% endif %} {% if figure.scale!=1 %}scale({{ figure.scale }}){% endif %}
; ;
{% endfilter %}{% endset -%} {% endfilter %}{% endset %}
<div style="{{ figure_style }}"> <div style="{{ figure_style }}">
{%- if figure.type == "material-icons" -%} {% if figure.type == "material-icons" %}
{#- https://material.io/icons/ -#} {# https://material.io/icons/ #}
<i class="material-icons figure">{{ figure.name }}</i> <i class="material-icons figure">{{ figure.name }}</i>
{%- elif figure.type == "mdi" -%} {% elif figure.type == "mdi" %}
{#- https://materialdesignicons.com/ -#} {# https://materialdesignicons.com/ #}
<i class="mdi mdi-{{ figure.name }}"></i> <i class="mdi mdi-{{ figure.name }}"></i>
{%- elif figure.type == "fa" -%} {% elif figure.type == "fa" %}
{#- http://fontawesome.io/icons/ -#} {# http://fontawesome.io/icons/ #}
<i class="fa fa-{{ figure.name }}"></i> <i class="fa fa-{{ figure.name }}"></i>
{%- elif figure.type == "lnr" -%} {% elif figure.type == "lnr" %}
{#- https://linearicons.com/free -#} {# https://linearicons.com/free #}
<span class="lnr lnr-{{ figure.name }}"></span> <span class="lnr lnr-{{ figure.name }}"></span>
{%- elif figure.type == "svg" -%} {% elif figure.type == "oi" %}
{#- /cards/svg -#} {# https://useiconic.com/open #}
<img src="/svg/{{ figure.name }}"> <span class="oi" data-glyph="{{ figure.name }}"></span>
{%- elif figure.type == "img" -%} {% elif figure.type == "svg" %}
{#- /cards/img -#} {# /cards/svg #}
<img src="/img/{{ figure.name }}"> {% if figure.color != false %}
{%- endif -%} {% if figure.color %}
<img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}" class="colored" style="--figure-color:{{ figure.color }}">
{% else %}
<img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}" class="colored">
{% endif %}
{% else %}
<img src="https://pvv.ntnu.no/~pederbs/cards/svg/data/{{ figure.name }}">
{% endif %}
{% elif figure.type == "img" %}
{# /cards/img #}
{% if figure.color %}
<img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}" class="colored" style="--figure-color:{{ figure.color }}">
{% else %}
<img src="https://pvv.ntnu.no/~pederbs/cards/img/data/{{ figure.name }}">
{% endif %}
{% endif %}
</div> </div>
{%- endmacro -%} {% endmacro %}
<div class="fjomp_card"> <div class="fjomp_card">
<header>{{ card.title }}</header> <header>{{ card.title }}</header>
<figure> <figure>
{% for figure in card.figures -%} {% for figure in card.figures %}
{{ figure_layer(figure) }} {{ figure_layer(figure) }}
{% endfor %} {% endfor %}
</figure> </figure>
<aside><ul> <aside><ul>
{% for property in card.properties -%} {% for property in card.properties %}
<li>{{ property }}</li> <li>{{ property }}</li>
{% endfor %} {% endfor %}
</ul></aside> </ul></aside>
<summary> <summary>
{%- for cost in card.costs %} {% for cost in card.costs %}
<section> <section>
{%- if cost.split() | length == 2 and cost.split()[0].isnumeric() %} {% if cost.split() | length == 2 and cost.split()[0].isnumeric() %}
<big>{{ cost.split()[0] }}</big><br> <big>{{ cost.split()[0] }}</big><br>
<small>{{ cost.split()[1] }}</small> <small>{{ cost.split()[1] }}</small>
{% else %} {% else %}
{{ cost }} {{ cost }}
{% endif %} {% endif %}
</section> </section>
{%- endfor %} {% endfor %}
</summary> </summary>
<article> <article>
<center><i>"{{ card.flavor }}"</i></center> <center><i>"{{ card.flavor }}"</i></center>
<center>{{ card.description | markdown | safe }}</center> <center>{{ card.description | markdown | safe }}</center>
{% if card.steps %}
{%- if card.steps %}
<ul> <ul>
{% for step in card.steps -%} {% for step in card.steps %}
<li>{{ step }}</li> <li>{{ step }}</li>
{% endfor %} {% endfor %}
</ul> </ul>
{%- endif %} {% endif %}
</article> </article>
</div> </div>
{#- <br><pre>{{ card }}</pre> -#} {# <br><pre>{{ card }}</pre> #}

4
style.js
View File

@ -5,7 +5,9 @@ var context = {
}; };
var env = new nunjucks.Environment({ var env = new nunjucks.Environment({
autoescape: true autoescape: true,
trimBlocks: true,
lstripBlocks: true,
}); });
env.addFilter('markdown', function(str) { env.addFilter('markdown', function(str) {
return md.render(str); return md.render(str);

14
style.scss
View File

@ -41,7 +41,8 @@
margin: 0; margin: 0;
div { div {
color: #bbb; --figure-color: #bbb;
color: var(--figure-color);
position: absolute; position: absolute;
top:0;right:0;left:0;bottom:0; top:0;right:0;left:0;bottom:0;
height: var(--figure-size); height: var(--figure-size);
@ -52,8 +53,17 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
img {
max-width: calc(var(--figure-size) * 0.9);
max-height: calc(var(--figure-size) * 0.9);
}
img.colored {
transform: translateY(-10000px);
filter: drop-shadow(0px 10000px var(--figure-color));
}
.mdi, .mdi,
.fa, .fa,
.oi,
.material-icons.figure { .material-icons.figure {
font-size: calc(var(--figure-size) * 0.9); font-size: calc(var(--figure-size) * 0.9);
line-height: var(--figure-size); line-height: var(--figure-size);
@ -125,7 +135,7 @@
figure { figure {
background-color: #fff; background-color: #fff;
div { div {
color: #555; // default color --figure-color: #555;
} }
} }
aside { aside {

1
templates/style.xsl.j2
View File

@ -17,6 +17,7 @@
<script type="text/javascript" src="https://mozilla.github.io/nunjucks/files/nunjucks.min.js"></script> <script type="text/javascript" src="https://mozilla.github.io/nunjucks/files/nunjucks.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/9.1.0/markdown-it.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/9.1.0/markdown-it.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css" {{async}}/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" {{async}}/> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" {{async}}/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" {{async}}/> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" {{async}}/>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" {{async}}/> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" {{async}}/>