area connections and town maps

2 files changed, 52 insertions, 8 deletions

diff --git a/resources/css/menu.css b/resources/css/menu.css
index 84c6c77..8b0cb0b 100644
--- a/resources/css/menu.css
+++ b/resources/css/menu.css
@@ -97,23 +97,39 @@
   color: #fff;
   background-color: #000;
   padding: 0.5rem;
+  font-size: 1.25rem;
+}
+
+#status > div + div {
+  margin-top: 0.25rem;
+}
 
+.status__area > span {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-
-  font-size: 1.25rem;
+}
+.status__area > span > span {
+  margin: 0 0.5rem;
 }
 
-#status > span {
+.status__numbers {
+  display: flex;
+  justify-content: space-between;
+}
+.status__numbers > span {
   display: flex;
   align-items: center;
 }
-#status > span > span {
+.status__numbers > span > span {
   margin-left: 0.5rem;
 }
 
-#status .menu-button:hover {
+.status__actions {
+  display: flex;
+  justify-content: space-between;
+}
+.status__actions .menu-button:hover {
   background-color: rgba(255, 255, 255, 0.5);
 }
 
@@ -200,6 +216,26 @@
 
 
 
+.area-selection {
+  padding: 1rem;
+}
+
+.area-selection__item {
+  display: grid;
+  grid-template-columns: 2.5rem 1fr;
+}
+
+.area-selection__item + .area-selection__item {
+  margin-top: 1rem;
+}
+
+.area-selection__item > span {
+  text-align: center;
+}
+
+
+
+
 .inventory__popup {
   align-items: start;
 }
diff --git a/resources/css/town.css b/resources/css/town.css
index 4dd8195..b8be144 100644
--- a/resources/css/town.css
+++ b/resources/css/town.css
@@ -1,3 +1,11 @@
-#scene__town {
-  background-color: #fff;
+#scene__town {}
+
+#scene__town svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+svg [data-location] {
+  cursor: pointer;
 }