From 66546310e557dd10e7c2a682ec5947eca9b836a6 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Tue, 25 Apr 2023 13:27:39 +0200
Subject: Add dice.

---
 play.css           | 30 ++++++++++++++++++++++++++++++
 play.html          | 10 ++++++++++
 tools/gencolors.js |  3 +++
 3 files changed, 43 insertions(+)

diff --git a/play.css b/play.css
index 969d92c..b2f7a25 100644
--- a/play.css
+++ b/play.css
@@ -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; }
diff --git a/play.html b/play.html
index fabd597..a6969d8 100644
--- a/play.html
+++ b/play.html
@@ -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")
+
-- 
cgit v1.2.3