1 files changed, 411 insertions, 0 deletions
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
new file mode 100644
index 0000000..a973630
--- /dev/null
+++ b/public/assets/css/style.css
@@ -0,0 +1,411 @@
+body {
+  margin: 0;
+  display: flex;
+  overflow: hidden;
+}
+
+#map-container {
+  flex-basis: 100%;
+  position: relative;
+  height: 100vh;
+}
+
+svg, object {
+  background-color: darkgray;
+  width: 100%;
+  height: 100%;
+}
+
+object {
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
+svg image {
+  image-rendering: pixelated;
+}
+
+svg image.map-scans {
+  image-rendering: auto;
+}
+
+svg text {
+  user-select: none;
+}
+
+div#status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  margin: 3px;
+  display: none;
+  user-select: none;
+}
+
+#hex-counter {
+  padding: 2px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 2px;
+}
+
+#hex-count {
+  font-family: monospace;
+}
+
+div#content {
+  display: flex;
+  border-left: 1px solid gray;
+  flex-basis: 0;
+  /* overflow: scroll; */
+  max-height: 100vh;
+  flex-direction: column;
+  /* padding: 2px; */
+  position: relative;
+}
+
+#content > div:first-of-type {
+  padding: 2px;
+  border-bottom: 1px solid gray;
+}
+
+#content #buttons {
+  line-height: 1.5em;
+}
+
+#content input[type="checkbox"].visible {
+  position: absolute;
+  right: 0;
+}
+
+#record-sheet {
+  /* max-height: 100%; */
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  /* display: none; */
+  background-color: gray;
+}
+
+#record-sheet .name {
+  text-transform: capitalize;
+}
+
+#record-sheet > div {
+  /* padding: 0 2px; */
+  overflow-y: auto;
+  /* border: 1px solid black; */
+}
+
+#record-sheet > div > p {
+  margin: 0;
+  margin-top: 0px;
+  margin-bottom: 1px;
+  padding: 6px 2px;
+  background-color: lightgray;
+}
+
+#record-sheet > div > div {
+  /* border: 1px solid black; */
+  margin-bottom: 1px;
+  padding: 6px 4px;
+  /* border-radius: 4px; */
+}
+
+#record-sheet > div:last-of-type {
+  margin-top: 2px;
+}
+
+#record-sheet > div > div:last-of-type {
+  margin-bottom: 0;
+}
+
+svg > defs > #point {
+  fill: inherit;
+  fill-opacity: inherit;
+  stroke: inherit;
+  stroke-width: inherit;
+  stroke-opacity: inherit;
+}
+
+use[href="#point"] {
+  opacity: 0;
+  fill: teal;
+  fill-opacity: 0.2;
+  stroke: black;
+  stroke-width: 0.5px;
+}
+
+use[href="#point"]:hover, use[href="#point"].hover {
+  opacity: 1;
+  fill: orange;
+}
+
+use[href="#point"].active {
+  opacity: 0.2;
+}
+
+polyline.move-trace {
+  stroke: gray;
+  stroke-dasharray: 2;
+  fill: none;
+}
+
+g#grid {
+  transform: translate(19px, 31px) scale(4);
+}
+
+#background {
+  fill: #bacae3;
+}
+
+#map2 {
+  transform-origin: 0px 0px;
+  transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);
+}
+
+#map3 {
+  transform-origin: 0px 0px;
+  /* transform: translateY(1518px); */
+  transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002);
+}
+
+#panel {
+  display: none;
+  position: absolute;
+  right: 0;
+  background-color: white;
+  border: 1px solid black;
+  padding: 2px;
+}
+
+#panel fieldset label {
+  display: block;
+  text-align: right;
+}
+
+#toggle-firing-arc-vis {
+  position: absolute;
+  right: 0;
+  padding-top: 20px;
+}
+
+#toggle-firing-arc-vis div {
+  margin-top: 10px;
+  writing-mode: vertical-lr;
+  transform: rotate(180deg);
+}
+
+#counter-base {
+  r: inherit;
+}
+
+g.troop-counter-template, g.troop-counter-template use {
+  r: inherit;
+}
+
+g.troop-counter, g.troop-counter use {
+  r: inherit;
+}
+
+g.troop-counter-template text {
+  fill: white;
+  font-size: 12px;
+  font-weight: bold;
+  font-family: monospace;
+  cursor: default;
+  text-anchor: middle;
+  pointer-events: none;
+  user-select: none;
+  transform: translateY(4px);
+  stroke: none;
+}
+
+g.troop-counter [href="#counter-prone"] {
+  transform: translate(-5px, 6px);
+}
+
+g#points g use.counter {
+  r: 5px;
+}
+
+g#points g.hover use[href="#point"] {
+  opacity: 1;
+  fill: orange;
+}
+
+g#points g.hover use.counter {
+  r: 7px;
+}
+
+g#points use.clone {
+  stroke: white;
+  stroke-width: 0.5px;
+  stroke-dasharray: 1;
+}
+
+g#points use[data-allegiance="defender"].clone {
+  fill: rgb(255, 126, 126);
+}
+
+g#points use[data-allegiance="attacker"].clone {
+  fill: rgb(130, 190, 130);
+}
+
+text.counter, #troop-counter text {
+  font-size: 12px;
+  font-weight: bold;
+  /* stroke: black; */
+  fill: white;
+  /* stroke-width: 0.5px; */
+  font-family: sans-serif;
+  cursor: default;
+  text-anchor: middle;
+  /* transform: translateY(25%); */
+  transform: translateY(4px);
+  pointer-events: none;
+  user-select: none;
+}
+
+polygon.firing-arc[data-allegiance="defender"] {
+  fill: red;
+}
+
+polygon.firing-arc[data-allegiance="attacker"] {
+  fill: green;
+}
+
+#shapes {
+  opacity: 0.1;
+}
+
+#shapes polygon {
+  stroke: none;
+}
+
+#lines polygon {
+  fill: none;
+  stroke: black;
+}
+
+button.set-firing-arc img {
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+.sight-line {
+  stroke: orangered;
+  stroke-width: 0.5px;
+  pointer-events: none;
+}
+
+.soldier-record {
+  display: inline-block;
+  position: relative;
+  white-space: nowrap;
+  background-color: white;
+}
+
+.soldier-record[data-allegiance="attacker"] [slot="troop-number"] svg {
+  fill: green;
+}
+
+.soldier-record[data-allegiance="defender"] [slot="troop-number"] svg {
+  fill: red;
+}
+
+.soldier-record [slot="troop-number"] svg {
+  width: 20px;
+  height: 20px;
+  background-color: initial;
+  vertical-align: middle;
+}
+
+.soldier-record [slot="troop-number"] svg text {
+  fill: white;
+  text-anchor: middle;
+  font-size: 10px;
+  font-weight: bold;
+  transform: translateY(3.5px);
+  font-family: monospace;
+}
+
+.soldier-record[data-allegiance="defender"] [slot="troop-number"] img {
+  fill: red;
+}
+
+.soldier-record[data-allegiance="attacker"] [slot="troop-number"] img {
+  fill: green;
+}
+
+.soldier-record.selected {
+  background-color: khaki;
+}
+
+.soldier-record.movement-ended {
+  background-color: none;
+  opacity: 0.5;
+}
+
+.wall {
+  fill: none;
+  stroke: red;
+  stroke-width: 7px;
+  opacity: 0.7;
+}
+
+#asterisk {
+  font-size: 30;
+}
+
+img.logo {
+  width: 100px;
+  margin: 0 auto;
+  display: block;
+}
+
+#turn-count[data-update="0"] span.inning-bottom {
+  display: none;
+}
+
+#turn-count[data-update="1"] span.inning-top {
+  display: none;
+}
+
+#map-dialog {
+  border: 1px solid black;
+}
+
+.map-placeholder {
+  position: absolute;
+}
+
+@media (width >= 1800px) {
+  #record-sheet {
+    flex-direction: row;
+    /* gap: 2px; */
+  }
+
+  #record-sheet > div > p {
+    margin-top: 0;
+  }
+
+  #record-sheet > div {
+    /* max-height: unset; */
+    overflow-y: unset;
+    height: min-content;
+  }
+
+  #record-sheet div:last-of-type {
+    margin-top: 0;
+  }
+
+  #record-sheet > div:first-of-type > div {
+    /* margin-left: 1px; */
+    margin-right: 1px;
+  }
+
+  #record-sheet > div:last-of-type > div {
+    margin-left: 1px;
+    /* margin-right: 1px; */
+  }
+}