diff options
| -rw-r--r-- | images/die_black_pips.svg | 37 | ||||
| -rw-r--r-- | images/die_white_pips.svg | 37 | ||||
| -rw-r--r-- | play.html | 31 | ||||
| -rw-r--r-- | play.js | 23 |
4 files changed, 128 insertions, 0 deletions
diff --git a/images/die_black_pips.svg b/images/die_black_pips.svg new file mode 100644 index 0000000..d641f28 --- /dev/null +++ b/images/die_black_pips.svg @@ -0,0 +1,37 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="336" height="56"> +<g fill="black"> +<g transform="translate(0 0)"> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(56 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="44" cy="44"/> +</g> +<g transform="translate(112 0)"> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(168 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="44"/> +</g> +<g transform="translate(224 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="44"/> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(280 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="28"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="28"/> +<circle r="6" cx="44" cy="44"/> +</g> +</g> +</svg> diff --git a/images/die_white_pips.svg b/images/die_white_pips.svg new file mode 100644 index 0000000..efc864b --- /dev/null +++ b/images/die_white_pips.svg @@ -0,0 +1,37 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="336" height="56"> +<g fill="white"> +<g transform="translate(0 0)"> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(56 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="44" cy="44"/> +</g> +<g transform="translate(112 0)"> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(168 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="44"/> +</g> +<g transform="translate(224 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="44"/> +<circle r="6" cx="28" cy="28"/> +</g> +<g transform="translate(280 0)"> +<circle r="6" cx="12" cy="12"/> +<circle r="6" cx="12" cy="28"/> +<circle r="6" cx="12" cy="44"/> +<circle r="6" cx="44" cy="12"/> +<circle r="6" cx="44" cy="28"/> +<circle r="6" cx="44" cy="44"/> +</g> +</g> +</svg> @@ -197,6 +197,37 @@ main { background-color: dimgray } .counter.fln_front{background-position:33.33333333333333% 55.55555555555556%} /* .counter.neut{background-position:44.44444444444444% 55.55555555555556%} */ +.dice { + width: 36px; + height: 36px; + border-radius: 6px; + border-width: 2px; + border-style: solid; + background-size: 600% 100%; + background-repeat: no-repeat; +} + +.d0 { background-position: -100% 0 } +.d1 { background-position: 0% 0; } +.d2 { background-position: 20% 0; } +.d3 { background-position: 40% 0; } +.d4 { background-position: 60% 0; } +.d5 { background-position: 80% 0; } +.d6 { background-position: 100% 0; } + +.dice.black { + background-image: url(images/die_white_pips.svg); + background-color: #444; +} + +.dice.white { + background-image: url(images/die_black_pips.svg); + background-color: #eee; +} + +.dice.black { border-color: #595959 #303030 #303030 #595959; box-shadow: 0 0 0 1px #0c0c0c, 1px 2px 4px #0008; } +.dice.white { border-color: #ffffff #b1b1b1 #b1b1b1 #ffffff; box-shadow: 0 0 0 1px #424242, 1px 2px 4px #0008; } + .panel { max-width: 900px; margin: 36px auto; @@ -603,6 +603,27 @@ function on_update() { // eslint-disable-line no-unused-vars action_button("reset", "Reset") } +const ICONS = { + B0: '<span class="black d0"></span>', + B1: '<span class="black d1"></span>', + B2: '<span class="black d2"></span>', + B3: '<span class="black d3"></span>', + B4: '<span class="black d4"></span>', + B5: '<span class="black d5"></span>', + B6: '<span class="black d6"></span>', + W0: '<span class="white d0"></span>', + W1: '<span class="white d1"></span>', + W2: '<span class="white d2"></span>', + W3: '<span class="white d3"></span>', + W4: '<span class="white d4"></span>', + W5: '<span class="white d5"></span>', + W6: '<span class="white d6"></span>', +} + +function sub_icon(match) { + return ICONS[match] +} + function on_focus_area_tip(x) { // eslint-disable-line no-unused-vars ui.areas[x].classList.add("tip") } @@ -653,6 +674,8 @@ function on_log(text) { // eslint-disable-line no-unused-vars text = text.replace(/U(\d+)/g, sub_unit_name) text = text.replace(/A(\d+)/g, sub_area_name) + text = text.replace(/\b[BW]\d\b/g, sub_icon) + if (text.match(/^\.h1/)) { text = text.substring(4) p.className = 'h1' |
