diff options
| author | Tor Andersson <tor@ccxvii.net> | 2023-04-25 13:27:39 +0200 |
|---|---|---|
| committer | Tor Andersson <tor@ccxvii.net> | 2023-07-07 18:39:23 +0200 |
| commit | 66546310e557dd10e7c2a682ec5947eca9b836a6 (patch) | |
| tree | b50da5a7db6dd6ca7a749f742a3a04b7167b3bd4 | |
| parent | 3ed92f49441e3a38440b36d0f86621b0571ef25c (diff) | |
| download | time-of-crisis-66546310e557dd10e7c2a682ec5947eca9b836a6.tar.gz | |
Add dice.
| -rw-r--r-- | play.css | 30 | ||||
| -rw-r--r-- | play.html | 10 | ||||
| -rw-r--r-- | tools/gencolors.js | 3 |
3 files changed, 43 insertions, 0 deletions
@@ -53,6 +53,36 @@ header.your_turn { background-color: orange; } border-radius: 0; } +.dice { + width: 36px; + height: 36px; + border-radius: 6px; + border-width: 2px; + border-style: solid; + background-size: 600% 100%; + background-repeat: no-repeat; +} + +.dice.d1 { background-position: 0% 0; } +.dice.d2 { background-position: 20% 0; } +.dice.d3 { background-position: 40% 0; } +.dice.d4 { background-position: 60% 0; } +.dice.d5 { background-position: 80% 0; } +.dice.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; } + /* COUNTERS */ .amphitheater, .basilica, .limes { background-color: #efebea; } @@ -137,11 +137,21 @@ <div class="legion" id="legion_31"></div> <div class="legion" id="legion_32"></div> <div class="legion reduced" id="legion_33"></div> +<div class="dice white d1"></div> +<div class="dice white d2"></div> +<div class="dice white d3"></div> +<div class="dice white d4"></div> +<div class="dice white d5"></div> +<div class="dice white d6"></div> +<div class="dice black"></div> </div> <div id="pieces"> +<div id="crisis_die_2" class="dice black d1" style="right:230px;top:525px"></div> +<div id="crisis_die_1" class="dice white d6" style="right:182px;top:525px"></div> + <div id="red_emperor_turns" class="red emperor_turns" style="top:10px;left:47px;"></div> <div id="blue_emperor_turns" class="blue emperor_turns" style="top:30px;left:41px;"></div> <div id="green_emperor_turns" class="green emperor_turns" style="top:50px;left:38px;"></div> diff --git a/tools/gencolors.js b/tools/gencolors.js index fbcb36c..53c0612 100644 --- a/tools/gencolors.js +++ b/tools/gencolors.js @@ -83,3 +83,6 @@ gencss("#f0f0f0", ".militia") gencss("#f0f0f0", ".legion") gencss("#6e6e6e", ".no_place_governor") +gencss("#444444", ".dice.black") +gencss("#eeeeee", ".dice.white") + |