From c7936121b23a77a0b7269d2b319ec0b9f5560bb0 Mon Sep 17 00:00:00 2001
From: xangelo <me@xangelo.ca>
Date: Tue, 15 Aug 2023 14:31:53 -0400
Subject: [PATCH] feat: new UI

This is a huge overhaul of the existing UI away from the temp white
boxes setup to something that embodies the game a bit more. No
functionality has changed, but there's been a ton of CSS updates to
ensure that we keep load times short but still provide a good looking
experience to players.
---
 public/assets/css/game.css           | 203 ++++++++++++++++++++++-----
 public/assets/font/BreatheFire.woff  | Bin 0 -> 11156 bytes
 public/assets/font/BreatheFire.woff2 | Bin 0 -> 8560 bytes
 public/assets/font/demo.html         | 192 +++++++++++++++++++++++++
 public/assets/font/stylesheet.css    |   9 ++
 public/index.html                    |  11 +-
 src/server/api.ts                    |  33 +++--
 src/server/locations/healer/index.ts |  33 +++--
 src/server/map.ts                    |  52 ++++---
 src/server/monster.ts                |  11 ++
 src/server/views/fight.ts            |  60 ++++++--
 src/server/views/inventory.ts        |  10 +-
 src/server/views/map.ts              |   6 +-
 src/server/views/monster-selector.ts |  25 +++-
 src/server/views/player-bar.ts       |  27 ++--
 src/server/views/stores.ts           |  12 +-
 src/server/views/travel.ts           |   7 +-
 src/shared/map.ts                    |   7 +
 src/shared/travel.ts                 |   5 +
 19 files changed, 574 insertions(+), 129 deletions(-)
 create mode 100644 public/assets/font/BreatheFire.woff
 create mode 100644 public/assets/font/BreatheFire.woff2
 create mode 100644 public/assets/font/demo.html
 create mode 100644 public/assets/font/stylesheet.css

diff --git a/public/assets/css/game.css b/public/assets/css/game.css
index 8f546dc..b29a4ec 100644
--- a/public/assets/css/game.css
+++ b/public/assets/css/game.css
@@ -1,3 +1,12 @@
+@font-face {
+    font-family: 'Breathe Fire';
+    src: url('/assets/font/BreatheFire.woff2') format('woff2'),
+        url('/assets/font/BreatheFire.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
 body {
   margin: 1rem auto 2rem;
   background-color: #eee;
@@ -5,35 +14,48 @@ body {
   max-width: 724px;
   height: 100vh;
 }
-#time-of-day {
+.title-font {
+  font-family: 'Breathe Fire', monospace;
+}
+#title-bar {
   background-color: transparent;
-  color: invert;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
   border: 0;
-  margin-bottom: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+#title-bar a {
+  font-size: 3rem;
+  color: #8e4607;
+  text-decoration: none;
+  letter-spacing: 0.3rem;
+  mix-blend-mode: color-burn;
+  border-bottom: solid 4px;
+  line-height: 25px;
+}
+#time-of-day {
   text-align: right;
 }
 #time-of-day img {
   width: 32px;
   vertical-align: middle;
-}
-.night #time-of-day, .evening #time-of-day {
-  color: #fff;
+  mix-blend-mode: color-burn;
 }
 #view {
   font-size: 14px;
-  background-color: #fff;
   padding: 1rem;
   border: 1px solid #000;
-}
-:disabled {
-  background-color: #aaa;
-  cursor: not-allowed;
+  box-shadow: 2px 3px 20px black, 0 0 60px #8a4d0f inset;
+  background: #fffef0;
+  background-image: url(data:image/png;base64,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);
 }
 b {
   font-weight: bold;
 }
 a {
-  color: blue;
+  color: #a20b00;
 }
 select {
   padding: 0.3rem;
@@ -42,11 +64,37 @@ input {
   border: 1px solid #000;
 }
 button {
-  background-color: #fff;
-  border: 1px solid #000;
-  padding: 0.3rem;
   cursor: pointer;
-  color: #000;
+  color: #fff;
+  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==), linear-gradient(to bottom, #D4AF37 0%, #C5A028 100%);
+  box-shadow: inset 0px 0px 1px 2px rgba(255, 255, 255, 0.3);
+  padding: 0.5rem 1rem;
+  font-weight: bold;
+  text-shadow: -1px -1px 0px rgba(0, 0, 0, 0.3);
+  border: solid 1px #6d251c;
+}
+button.red {
+  background: #a20b00;
+}
+button.red:hover {
+  background: #b20b00;
+}
+button.green {
+  background: #0a0;
+}
+button.green:hover {
+  background: #0b0;
+}
+button:active {
+  position: relative;
+  top: 1px;
+}
+button:disabled, button:disabled:hover {
+  background: #aaa;
+  cursor: not-allowed;
+}
+button:focus {
+  outline: none;
 }
 .hidden {
   display: none !important;
@@ -58,11 +106,6 @@ p:last-child {
   margin-bottom: 0;
 }
 
-section {
-  border: 1px solid #000;
-  background-color: #fff;
-}
-
 #announcements, #signup-prompt {
   padding: 1rem;
   line-height: 1.2rem;
@@ -137,6 +180,7 @@ dialog .close-modal {
 }
 #avatar {
   width: 100%;
+  border: solid 1px #6d251c;
 }
 header {
   display: flex;
@@ -158,7 +202,7 @@ header {
 }
 #stat-bars, #defender-stat-bars {
   width: 100%;
-  margin: 5px 5px 0 5px;
+  margin: 0 5px;
 }
 #stat-bars .progress-bar, #defender-stat-bars .progress-bar {
   margin-bottom: 2px;
@@ -184,7 +228,7 @@ header {
 }
 
 .progress-bar {
-  border: solid 1px #000;
+  border: solid 1px #6d251c;
   width: 100%;
   font-size: 0.7rem;
   text-align: center;
@@ -215,16 +259,14 @@ nav a.active {
   text-decoration: underline;
 }
 nav.filter {
-  margin: 0.5rem 0;
+  margin: 0;
   text-align: right;
   border: 0;
   padding: 0;
   position: relative;
-  top: 1px;
+  bottom: 5px;
 }
 nav.filter a {
-  border: solid 1px #ddd;
-  background-color: #ddd;
   border-bottom-width: 0;
   z-index: 1;
   padding: 0.6rem;
@@ -232,13 +274,15 @@ nav.filter a {
 }
 nav.filter a.active {
   background-color: #fff;
-  border-color: #000;
+  border: solid #6d251c;
+  border-width: 1px 1px 0;
   z-index: 4;
 }
 .filter-container .listing {
-  border: solid 1px #000;
+  border: solid 1px #6d251c;
   z-index: 2;
   position: relative;
+  background-color: #fff;
 }
 nav.filter-result {
   display: none;
@@ -316,25 +360,59 @@ nav.filter-result.active {
 }
 #main-nav section {
   min-height: 344px;
-  border: 0;
+  padding: 1rem;
 }
 
 #stat-breakdown th {
   font-weight: bold;
   text-align: right;
-  background-color: #ddd;
+  background-color: #6d251c;
+  color: #fff;
+  background-image: url(data:image/png;base64,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);
 }
 #stat-breakdown th, #stat-breakdown td {
-  padding: 0.3rem 0.5rem;
+  padding: 0.5rem;
 }
 
 #explore {
   text-align: center;
   background-repeat: no-repeat;
-  background-position: bottom right;
   background-size: cover;
-  padding: 3rem 3rem 2rem;
+  padding: 2rem 0rem 2rem !important;
   line-height: 1.3rem;
+  border: solid 1px #6d251c;
+}
+
+.city-title-wrapper {
+  filter: drop-shadow(0 0 10px black);
+  position: relative;
+  z-index: 1;
+}
+.city-title:before {
+  position: absolute;
+  content: ' ';
+  z-index: 1;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  background: transparent;
+  border: solid 2px #ffa500;
+  clip-path: polygon(100% 0, 95% 50%, 100% 98%, 0% 100%, 5% 50%, 0 0);
+}
+.city-title {
+  font-family: 'Breathe Fire', monospace;
+  font-size: 1.5rem;
+  letter-spacing: 1rem;
+  display: inline-block;
+  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
+  color: #fff;
+  border: inset 3px rgba(88, 15, 15, 0.4);
+  text-shadow: 1px -1px 0px #522626;
+  background: #bc3915 url(data:image/png;base64,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);
+  position: relative;
+  clip-path: polygon(100% 0, 95% 50%, 100% 98%, 0% 100%, 5% 50%, 0 0);
+  box-shadow: 0 0 4px 4px black;
 }
 
 #fight-container {
@@ -361,10 +439,25 @@ nav.filter-result.active {
   background: linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(255, 255, 255, 0.5) 30%);
 }
 .city-details {
+  position: relative;
+  padding: 1rem 1px 2rem;
+  margin: 0 auto;
+  width: 80%;
+  background-image: url(data:image/png;base64,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);
+  background-color: #f7f4dd;
+  box-shadow: 0 0 10px black;
+  position: relative;
+  top: -13px;
+  border: solid 1px #6d251c;
+}
+.flex {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   flex-wrap: wrap;
 }
+.city-details.flex > div {
+  margin: 1rem;
+}
 h1 {
   font-size: 1.5rem;
   font-weight: bold;
@@ -381,6 +474,9 @@ h3 {
   font-size: 1rem;
 }
 
+#travelling {
+  padding-top: 2rem;
+}
 #travelling-actions {
   display: flex;
   justify-content: center;
@@ -389,6 +485,28 @@ h3 {
 }
 
 
+#explore .shop-inventory-listing  {
+  margin: 2rem auto 1rem;
+  width: 90%;
+}
+.location-name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.location-name span {
+  color: #846945;
+  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);
+  margin: 0 1rem;
+}
+.location-name:before, .location-name:after {
+  background-color: #846945;
+  height: 2px;
+  flex: 1;
+  content: ' ';
+  width: 4rem;
+  drop-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);
+}
 .shop-inventory-listing .listing {
   background-color: #fff;
 }
@@ -425,6 +543,7 @@ h3 {
 }
 .store-actions button {
   width: 75px;
+  padding: 0.3rem 0.5rem;
 }
 
 #inventory-page {
@@ -445,7 +564,7 @@ h3 {
   max-height: 64px;
   width: 64px;
   height: 64px;
-  border: solid 1px #000;
+  border: solid 1px #6d251c;
   padding: 0;
   text-align: center;
   vertical-align: bottom;
@@ -505,13 +624,16 @@ h3 {
 }
 
 
+#chat {
+  border: solid 1px #6d251c;
+}
 .chat-message {
   line-height: 1.2rem;
   margin-bottom: 0.3rem;
   padding: 0.3rem;
 }
 .chat-message:nth-child(even) {
-  background-color: #eee;
+  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0, rgba(196, 177, 149, 0.8) 100%);
 }
 
 .chat-message .from {
@@ -527,8 +649,8 @@ h3 {
   flex-grow: 8;
   padding: 0.3rem;
   outline: none;
-  border-left-width: 0px;
-  border-bottom-width: 0px;
+  border-width: 1px 0 0;
+  background: transparent;
 }
 #chat-form input:focus {
   outline: none;
@@ -538,6 +660,9 @@ h3 {
   border-bottom-width: 0px;
   font-weight: bold;
 }
+#chat-form button:active {
+  top: 0;
+}
 
 #game-footer {
   display: flex;
diff --git a/public/assets/font/BreatheFire.woff b/public/assets/font/BreatheFire.woff
new file mode 100644
index 0000000000000000000000000000000000000000..cf58d3ecdc8c88e6dd0166730a31f0807c66f801
GIT binary patch
literal 11156
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
MHG}>Cwwq=D54Ma%od5s;

literal 0
HcmV?d00001

diff --git a/public/assets/font/BreatheFire.woff2 b/public/assets/font/BreatheFire.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..c05796908c2fcba537b2c4e7ca9bd922c52271ff
GIT binary patch
literal 8560
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

literal 0
HcmV?d00001

diff --git a/public/assets/font/demo.html b/public/assets/font/demo.html
new file mode 100644
index 0000000..118cce6
--- /dev/null
+++ b/public/assets/font/demo.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex, noarchive">
+    <meta name="format-detection" content="telephone=no">
+    <title>Transfonter demo</title>
+    <link href="stylesheet.css" rel="stylesheet">
+    <style>
+        /*
+        http://meyerweb.com/eric/tools/css/reset/
+        v2.0 | 20110126
+        License: none (public domain)
+        */
+        html, body, div, span, applet, object, iframe,
+        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+        a, abbr, acronym, address, big, cite, code,
+        del, dfn, em, img, ins, kbd, q, s, samp,
+        small, strike, strong, sub, sup, tt, var,
+        b, u, i, center,
+        dl, dt, dd, ol, ul, li,
+        fieldset, form, label, legend,
+        table, caption, tbody, tfoot, thead, tr, th, td,
+        article, aside, canvas, details, embed,
+        figure, figcaption, footer, header, hgroup,
+        menu, nav, output, ruby, section, summary,
+        time, mark, audio, video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+        /* HTML5 display-role reset for older browsers */
+        article, aside, details, figcaption, figure,
+        footer, header, hgroup, menu, nav, section {
+            display: block;
+        }
+        body {
+            line-height: 1;
+        }
+        ol, ul {
+            list-style: none;
+        }
+        blockquote, q {
+            quotes: none;
+        }
+        blockquote:before, blockquote:after,
+        q:before, q:after {
+            content: '';
+            content: none;
+        }
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        /* demo styles */
+        body {
+            background: #f0f0f0;
+            color: #000;
+        }
+        .page {
+            background: #fff;
+            width: 920px;
+            margin: 0 auto;
+            padding: 20px 20px 0 20px;
+            overflow: hidden;
+        }
+        .font-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            margin-bottom: 40px;
+            line-height: 1.3;
+            white-space: nowrap;
+            padding-bottom: 5px;
+        }
+        h1 {
+            position: relative;
+            background: #444;
+            font-size: 32px;
+            color: #fff;
+            padding: 10px 20px;
+            margin: 0 -20px 12px -20px;
+        }
+        .letters {
+            font-size: 25px;
+            margin-bottom: 20px;
+        }
+        .s10:before {
+            content: '10px';
+        }
+        .s11:before {
+            content: '11px';
+        }
+        .s12:before {
+            content: '12px';
+        }
+        .s14:before {
+            content: '14px';
+        }
+        .s18:before {
+            content: '18px';
+        }
+        .s24:before {
+            content: '24px';
+        }
+        .s30:before {
+            content: '30px';
+        }
+        .s36:before {
+            content: '36px';
+        }
+        .s48:before {
+            content: '48px';
+        }
+        .s60:before {
+            content: '60px';
+        }
+        .s72:before {
+            content: '72px';
+        }
+        .s10:before, .s11:before, .s12:before, .s14:before,
+        .s18:before, .s24:before, .s30:before, .s36:before,
+        .s48:before, .s60:before, .s72:before {
+            font-family: Arial, sans-serif;
+            font-size: 10px;
+            font-weight: normal;
+            font-style: normal;
+            color: #999;
+            padding-right: 6px;
+        }
+        pre {
+            display: block;
+            padding: 9px;
+            margin: 0 0 12px;
+            font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
+            font-size: 13px;
+            line-height: 1.428571429;
+            color: #333;
+            font-weight: normal;
+            font-style: normal;
+            background-color: #f5f5f5;
+            border: 1px solid #ccc;
+            overflow-x: auto;
+            border-radius: 4px;
+        }
+        /* responsive */
+        @media (max-width: 959px) {
+            .page {
+                width: auto;
+                margin: 0;
+            }
+        }
+    </style>
+</head>
+<body>
+<div class="page">
+    <div class="demo">
+        <h1 style="font-family: 'Breathe Fire'; font-weight: normal; font-style: normal;">Breathe Fire</h1>
+        <pre title="Usage">.your-style {
+    font-family: 'Breathe Fire';
+    font-weight: normal;
+    font-style: normal;
+}</pre>
+        <pre title="Preload (optional)">
+&lt;link rel=&quot;preload&quot; href=&quot;BreatheFire.woff2&quot; as=&quot;font&quot; type=&quot;font/woff2&quot; crossorigin&gt;</pre>
+        <div class="font-container" style="font-family: 'Breathe Fire'; font-weight: normal; font-style: normal;">
+            <p class="letters">
+                abcdefghijklmnopqrstuvwxyz<br>
+ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
+                0123456789.:,;()*!?'@#&lt;&gt;$%&^+-=~
+            </p>
+            <p class="s10" style="font-size: 10px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s11" style="font-size: 11px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s12" style="font-size: 12px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s14" style="font-size: 14px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s18" style="font-size: 18px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s24" style="font-size: 24px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s30" style="font-size: 30px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s36" style="font-size: 36px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s48" style="font-size: 48px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s60" style="font-size: 60px;">The quick brown fox jumps over the lazy dog.</p>
+            <p class="s72" style="font-size: 72px;">The quick brown fox jumps over the lazy dog.</p>
+        </div>
+    </div>
+
+</div>
+</body>
+</html>
diff --git a/public/assets/font/stylesheet.css b/public/assets/font/stylesheet.css
new file mode 100644
index 0000000..b4c1247
--- /dev/null
+++ b/public/assets/font/stylesheet.css
@@ -0,0 +1,9 @@
+@font-face {
+    font-family: 'Breathe Fire';
+    src: url('BreatheFire.woff2') format('woff2'),
+        url('BreatheFire.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
diff --git a/public/index.html b/public/index.html
index 5657a72..e2efaa0 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,8 +4,8 @@
     <title>Rising Legends</title>
     <meta charset="utf-8">
     <!--
-    <a href="https://www.flaticon.com/free-icons/dawn" title="dawn icons">Dawn icons created by Smashicons - Flaticon</a>
-    -->
+<a href="https://www.flaticon.com/free-icons/dawn" title="dawn icons">Dawn icons created by Smashicons - Flaticon</a>
+-->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="/assets/css/reset.css">
     <link rel="stylesheet" href="/assets/css/game.css">
@@ -14,8 +14,12 @@
     <script src="/socket.io/socket.io.js"></script>
   </head>
   <body>
-    <section id="time-of-day"></section>
     <div id="view">
+      <section id="title-bar">
+        <a href="/" class="title-font">Rising Legends</a>
+        <div id="time-of-day"></div>
+      </section>
+
       <header>
         <div class="avatar-container">
           <img id="avatar" src="/assets/img/profile-pics/warrior-1.jpg">
@@ -76,7 +80,6 @@
         </div>
         <div id="server-stats">...Loading</div>
       </section>
-
       <footer>Another project by <a href="https://xangelo.ca/gardens/rising-legends/">xangelo.ca</a>. <span id="version"></span></footer>
     </div>
   </body>
diff --git a/src/server/api.ts b/src/server/api.ts
index f93fc3f..35ba7e3 100644
--- a/src/server/api.ts
+++ b/src/server/api.ts
@@ -12,7 +12,7 @@ import { loadPlayer, createPlayer, updatePlayer, movePlayer } from './player';
 import { random, sample } from 'lodash';
 import {broadcastMessage, Message} from '../shared/message';
 import {expToLevel, maxHp, Player} from '../shared/player';
-import {clearFight, createFight, getMonsterList, getRandomMonster, loadMonster, loadMonsterFromFight, loadMonsterWithFaction, saveFightState} from './monster';
+import {clearFight, createFight, getMonsterList, getMonsterLocation, getRandomMonster, loadMonster, loadMonsterFromFight, loadMonsterWithFaction, saveFightState} from './monster';
 import {FightRound} from '../shared/fight';
 import {addInventoryItem, deleteInventoryItem, getEquippedItems, getInventory, getInventoryItem, updateAp} from './inventory';
 import { getItemFromPlayer, getItemFromShop, getPlayersItems, getShopItems, givePlayerItem, updateItemCount } from './items';
@@ -35,8 +35,8 @@ import { renderMap } from './views/map';
 import { renderProfilePage } from './views/profile';
 import { renderSkills } from './views/skills';
 import { renderInventoryPage } from './views/inventory';
-import { renderMonsterSelector } from './views/monster-selector';
-import { renderFight, renderRoundDetails } from './views/fight';
+import { renderMonsterSelector, renderOnlyMonsterSelector } from './views/monster-selector';
+import { renderFight, renderFightPreRound, renderRoundDetails } from './views/fight';
 import { renderTravel, travelButton } from './views/travel';
 import { renderChatMessage } from './views/chat';
 
@@ -547,8 +547,9 @@ app.get('/player/explore', authEndpoint, async (req: AuthRequest, res: Response)
       level: fight.level,
       fight_trigger: fight.fight_trigger
     };
+    const location = await getMonsterLocation(fight.ref_id);
 
-    res.send(renderPlayerBar(req.player, equippedItems) + renderFight(data));
+    res.send(renderPlayerBar(req.player, equippedItems) + renderFightPreRound(data, true, location));
   }
   else {
     const travelPlan = await getTravelPlan(req.player.id);
@@ -572,7 +573,8 @@ app.get('/player/explore', authEndpoint, async (req: AuthRequest, res: Response)
         things,
         nextAction,
         closestTown: closest,
-        walkingText: ''
+        walkingText: '',
+        travelPlan
       }));
     }
     else {
@@ -691,7 +693,7 @@ app.get('/location/:location_id/items/:item_id/overview', authEndpoint, async (r
     </div>
   </div>
   <div class="actions">
-    <button hx-put="/location/${item.location_id}/items/${item.id}" formmethod="dialog" value="cancel">Buy</button>
+    <button hx-put="/location/${item.location_id}/items/${item.id}" formmethod="dialog" value="cancel" class="red">Buy</button>
     <button class="close-modal" formmethod="dialog" value="cancel">Cancel</button>
   </div>
 </dialog>
@@ -764,7 +766,7 @@ app.get('/modal/items/:item_id', authEndpoint, async (req: AuthRequest, res: Res
     </div>
   </div>
   <div class="actions">
-    <button hx-put="/item/${item.item_id}" formmethod="dialog" value="cancel" hx-target="#inventory">Use</button>
+    <button hx-put="/item/${item.item_id}" formmethod="dialog" value="cancel" hx-target="#inventory" class="red">Use</button>
     <button class="close-modal" formmethod="dialog" value="cancel">Cancel</button>
   </div>
 </dialog>
@@ -782,10 +784,10 @@ app.get('/city/stores/city:stores/:location_id', authEndpoint, async (req: AuthR
   }
   const [shopEquipment, shopItems] = await Promise.all([
     listShopItems({location_id: location.id}),
-    getShopItems(location.id)
+    getShopItems(location.id),
   ]);
 
-  const html = await renderStore(shopEquipment, shopItems, req.player);
+  const html = await renderStore(shopEquipment, shopItems, req.player, location);
 
   res.send(html);
 });
@@ -799,7 +801,7 @@ app.get('/city/explore/city:explore/:location_id', authEndpoint, async (req: Aut
   }
 
   const monsters: Monster[] = await getMonsterList(location.id);
-  res.send(renderMonsterSelector(monsters));
+  res.send(renderOnlyMonsterSelector(monsters, 0, location));
 });
 
 app.post('/travel', authEndpoint, async (req: AuthRequest, res: Response) => {
@@ -879,6 +881,7 @@ app.post('/fight', authEndpoint, async (req: AuthRequest, res: Response) => {
   }
 
   const fight = await createFight(req.player.id, monster, fightTrigger);
+  const location = await getService(monster.location_id);
 
 
   const data: MonsterForFight = {
@@ -890,7 +893,7 @@ app.post('/fight', authEndpoint, async (req: AuthRequest, res: Response) => {
     fight_trigger: fight.fight_trigger
   };
 
-  res.send(renderFight(data));
+  res.send(renderFightPreRound(data, true, location));
 });
 
 app.post('/travel/step', authEndpoint, async (req: AuthRequest, res: Response) => {
@@ -953,7 +956,8 @@ app.post('/travel/step', authEndpoint, async (req: AuthRequest, res: Response) =
       things,
       nextAction,
       closestTown: closest,
-      walkingText: sample(walkingText)
+      walkingText: sample(walkingText),
+      travelPlan
     }));
 
   }
@@ -973,13 +977,14 @@ app.post('/travel/:destination_id', authEndpoint, async (req: AuthRequest, res:
     return;
   }
 
-  await travel(req.player, destination.id);
+  const travelPlan = await travel(req.player, destination.id);
 
   res.send(renderTravel({
     things: [],
     nextAction: 0,
     walkingText: '',
-    closestTown: req.player.city_id
+    closestTown: req.player.city_id,
+    travelPlan
   }));
 });
 
diff --git a/src/server/locations/healer/index.ts b/src/server/locations/healer/index.ts
index 46877b2..3504d2a 100644
--- a/src/server/locations/healer/index.ts
+++ b/src/server/locations/healer/index.ts
@@ -8,6 +8,7 @@ import { sample } from 'lodash';
 import { City, Location } from "../../../shared/map";
 import { renderPlayerBar } from "../../views/player-bar";
 import { getEquippedItems } from "../../inventory";
+import { EquippedItemDetails } from "../../../shared/equipped";
 
 export const router = Router();
 
@@ -102,10 +103,8 @@ router.get('/city/services/city:services:healer/:location_id', authEndpoint, asy
 
   const text: string[] = [];
 
-  text.push(`<p><b>${service.name}</b></p>`);
   text.push(`<p>"${getText('intro', service, city)}"</p>`);
 
-
   if(req.player.hp === maxHp(req.player.constitution, req.player.level)) {
     text.push(`<p>You're already at full health?</p>`);
   }
@@ -120,7 +119,17 @@ router.get('/city/services/city:services:healer/:location_id', authEndpoint, asy
 
   }
 
-  res.send(`<div>${text.join("\n")}</div>`);
+  res.send(`
+<div class="city-title-wrapper"><div class="city-title">${service.city_name}</div></div>
+<div class="city-details">
+<h3 class="location-name"><span>${service.name}</span></h3>
+<div class="service-in-town">
+${text.join("\n")}
+</div>
+</div>
+  `);
+
+  //res.send(`<div class="service-in-town">${text.join("\n")}</div>`);
 });
 
 
@@ -135,23 +144,31 @@ router.post('/city/services/city:services:healer:heal/:location_id', authEndpoin
   }
 
   const text: string[] = [];
-  text.push(`<p><b>${service.name}</b></p>`);
-
   const cost = req.player.gold <= (healCost * 2) ? 0 : healCost;
+  let inventory: EquippedItemDetails[];
 
   if(req.player.gold < cost) {
     text.push(`<p>${getText('insufficient_money', service, city)}</p>`)
-    res.send(`<div>${text.join("\n")}</div>`);
   }
   else {
     req.player.hp = maxHp(req.player.constitution, req.player.level);
     req.player.gold -= cost;
 
     await updatePlayer(req.player);
-    const inventory = await getEquippedItems(req.player.id);
+    inventory = await getEquippedItems(req.player.id);
 
     text.push(`<p>${getText('heal_successful', service, city)}</p>`);
     text.push('<p><button hx-get="/player/explore" hx-target="#explore">Back to Town</button></p>');
-    res.send(`<div>${text.join("\n")}</div>` + renderPlayerBar(req.player, inventory));
   }
+
+  res.send(`
+<div class="city-title-wrapper"><div class="city-title">${service.city_name}</div></div>
+<div class="city-details">
+<h3 class="location-name"><span>${service.name}</span></h3>
+<div class="service-in-town">
+${text.join("\n")}
+</div>
+</div>
+${inventory ? renderPlayerBar(req.player, inventory) : ''}
+`);
 });
diff --git a/src/server/map.ts b/src/server/map.ts
index 54f0de8..df70a38 100644
--- a/src/server/map.ts
+++ b/src/server/map.ts
@@ -1,6 +1,6 @@
-import { City, Location, Path } from "../shared/map";
+import { City, Location, LocationWithCity, Path } from "../shared/map";
 import type { Player } from '../shared/player';
-import type { Travel } from '../shared/travel';
+import type { Travel, TravelWithNames } from '../shared/travel';
 import { db } from './lib/db';
 import { random } from 'lodash';
 
@@ -12,10 +12,11 @@ export async function getAllServices(city_id: number): Promise<Location[]> {
             .orderBy('display_order');
 }
 
-export async function getService(location_id: number): Promise<Location> {
-  return db.select('*').first().from<Location>('locations').where({
-    id: location_id
-  });
+export async function getService(location_id: number): Promise<LocationWithCity> {
+  return db.select(['locations.*', 'cities.name as city_name']).
+          from<Location>('locations').join('cities', 'locations.city_id', '=', 'cities.id').where({
+    'locations.id': location_id
+  }).first();
 }
 
 export async function getAllPaths(city_id: number): Promise<Path[]> {
@@ -42,7 +43,7 @@ export async function getCityDetails(city_id: number): Promise<City> {
   return db.first().select('*').from<City>('cities').where({id: city_id});
 }
 
-export async function travel(player: Player, dest_id: number): Promise<Travel> {
+export async function travel(player: Player, dest_id: number): Promise<TravelWithNames> {
   const city = await getCityDetails(dest_id);
   const path = await db.first().select('*').from('paths').where({
     starting_city: player.city_id,
@@ -63,25 +64,15 @@ export async function travel(player: Player, dest_id: number): Promise<Travel> {
     source_id: player.city_id,
     destination_id: dest_id,
     total_distance: steps
-  }).returning('*');
-
-  if(rows.length !== 1) {
-    console.log(rows);
-    throw new Error('Unexpected response when creating travel');
-  }
-
-  return rows[0] as Travel;
+  });
+  
+  return getTravelPlan(player.id);
 }
 
-export async function stepForward(player_id: string): Promise<Travel> {
-  const rows = await db('travel').increment('current_position').returning('*');
+export async function stepForward(player_id: string): Promise<TravelWithNames> {
+  await db('travel').increment('current_position');
 
-  if(rows.length !== 1) {
-    console.log(rows);
-    throw new Error('Unexpected response when moving');
-  }
-
-  return rows[0] as Travel;
+  return getTravelPlan(player_id);
 }
 
 export async function clearTravelPlan(player_id: string): Promise<Travel> {
@@ -98,8 +89,15 @@ export async function completeTravel(player_id: string): Promise<Travel> {
   return rows[0] as Travel;
 }
 
-export async function getTravelPlan(player_id: string): Promise<Travel> {
-  return db.select('*').first().from<Travel>('travel').where({
-    player_id
-  });
+export async function getTravelPlan(player_id: string): Promise<TravelWithNames> {
+  return db.select([
+    'travel.*',
+    'source.name as source_city_name',
+    'destination.name as destination_city_name'
+  ]).from<Travel>('travel')
+    .join('cities as source', 'travel.source_id', '=', 'source.id')
+    .join('cities as destination', 'travel.destination_id', '=', 'destination.id')
+    .where({
+      'travel.player_id': player_id
+  }).first();
 }
diff --git a/src/server/monster.ts b/src/server/monster.ts
index 7565146..e58c814 100644
--- a/src/server/monster.ts
+++ b/src/server/monster.ts
@@ -1,6 +1,7 @@
 import { db } from './lib/db';
 import { Fight, Monster, MonsterWithFaction, MonsterForList, FightTrigger } from '../shared/monsters';
 import { TimePeriod, TimeManager } from '../shared/time';
+import { LocationWithCity } from 'shared/map';
 
 const time = new TimeManager();
 
@@ -84,6 +85,16 @@ export async function createFight(playerId: string, monster: Monster, fightTrigg
   return res.pop();
 }
 
+export async function getMonsterLocation(monsterId: number): Promise<LocationWithCity> {
+return db.select(['locations.*', 'cities.name as city_name'])
+          .from<Monster>('monsters')
+          .join('locations', 'monsters.location_id', '=', 'locations.id')
+          .join('cities', 'cities.id', '=', 'locations.city_id')
+          .where({
+            'monsters.id': monsterId
+          }).first();
+}
+
 /**
  * Given a list of cities, it will return a monster that 
  * exists in any of the exploration zones with every monster 
diff --git a/src/server/views/fight.ts b/src/server/views/fight.ts
index b6ed6dc..1995d9a 100644
--- a/src/server/views/fight.ts
+++ b/src/server/views/fight.ts
@@ -1,4 +1,5 @@
 import { FightRound } from "shared/fight";
+import { LocationWithCity } from "shared/map";
 import { MonsterForFight } from "../../shared/monsters";
 
 export function renderRoundDetails(roundData: FightRound): string {
@@ -8,13 +9,13 @@ export function renderRoundDetails(roundData: FightRound): string {
     case 'player':
       html.push(`<div>You defeated the ${roundData.monster.name}!</div>`);
       if(roundData.rewards.gold) {
-        html.push(`<div>You gained ${roundData.rewards.gold} gold`);
+        html.push(`<div>You gained ${roundData.rewards.gold} gold</div>`);
       }
       if(roundData.rewards.exp) {
-        html.push(`<div>You gained ${roundData.rewards.exp} exp`);
+        html.push(`<div>You gained ${roundData.rewards.exp} exp</div>`);
       }
       if(roundData.rewards.levelIncrease) {
-        html.push(`<div>You gained a level! ${roundData.player.level}`);
+        html.push(`<div>You gained a level! ${roundData.player.level}</div>`);
       }
     break;
     case 'monster':
@@ -34,7 +35,8 @@ export function renderRoundDetails(roundData: FightRound): string {
 export function renderFight(monster: MonsterForFight, results: string = '', displayFightActions: boolean = true) {
   const hpPercent = Math.floor((monster.hp / monster.maxHp) * 100);
 
-  let html = `<div id="fight-container">
+  let html = `
+  <div id="fight-container">
     <div id="defender-info">
       <div class="avatar-container">
         <img id="avatar" src="https://via.placeholder.com/64x64">
@@ -53,15 +55,57 @@ export function renderFight(monster: MonsterForFight, results: string = '', disp
           <option value="arms">Arms</option>
           <option value="legs">Legs</option>
         </select>
-        <button type="submit" class="fight-action" name="action" value="attack">Attack</button>
-        <button type="submit" class="fight-action" name="action" value="cast">Cast</button>
+        <button type="submit" class="fight-action red" name="action" value="attack">Attack</button>
+        <button type="submit" class="fight-action red" name="action" value="cast">Cast</button>
         <button type="submit" class="fight-action" name="action" value="flee">Flee</button>
       </form>
       `: ''}
       </div>
-  </form>
     <div id="fight-results">${results}</div>
-  </div>`;
+  </div>
+</div>`;
+
+  return html;
+}
+
+export function renderFightPreRound(monster: MonsterForFight,  displayFightActions: boolean = true, location: LocationWithCity) {
+  const hpPercent = Math.floor((monster.hp / monster.maxHp) * 100);
+
+  let html = `
+  <div class="city-title-wrapper">
+    <div class="city-title">${location.city_name}</div>
+  </div>
+  <div class="city-details">
+    <h3 class="location-name"><span>${location.name}</span></h3>
+
+  <div id="fight-container">
+    <div id="defender-info">
+      <div class="avatar-container">
+        <img id="avatar" src="https://via.placeholder.com/64x64">
+      </div>
+      <div id="defender-stat-bars">
+        <div id="defender-name">${monster.name}</div>
+        <div class="progress-bar" id="defender-hp-bar" style="background: linear-gradient(to right, red, red ${hpPercent}%, transparent ${hpPercent}%, transparent)" title="${hpPercent}% - ${monster.hp}/${monster.maxHp}">${hpPercent}% - ${monster.hp} / ${monster.maxHp}</div>
+      </div>
+    </div>
+    <div id="fight-actions">
+      ${displayFightActions ? `
+      <form hx-post="/fight/turn" hx-target="#fight-container">
+        <select id="fight-target" name="fightTarget">
+          <option value="head">Head</option>
+          <option value="body">Body</option>
+          <option value="arms">Arms</option>
+          <option value="legs">Legs</option>
+        </select>
+        <button type="submit" class="fight-action red" name="action" value="attack">Attack</button>
+        <button type="submit" class="fight-action red" name="action" value="cast">Cast</button>
+        <button type="submit" class="fight-action" name="action" value="flee">Flee</button>
+      </form>
+      `: ''}
+      </div>
+    <div id="fight-results"></div>
+  </div>
+</div>`;
 
   return html;
 }
diff --git a/src/server/views/inventory.ts b/src/server/views/inventory.ts
index 3ad3e02..c027dd0 100644
--- a/src/server/views/inventory.ts
+++ b/src/server/views/inventory.ts
@@ -1,16 +1,16 @@
-import { EquipmentSlot, InventoryType } from "shared/inventory";
+import { EquipmentSlot } from "shared/inventory";
 import { EquippedItemDetails } from "../../shared/equipped";
 import { PlayerItem } from "../../shared/items";
 import { capitalize } from "lodash";
 
 function icon(icon_name?: string): string {
-  const icon = icon_name ? `/assets/img/icons/equipment/${icon_name}` : 'https://via.placeholder.com/64x64';
+  const placeholder = 'https://placehold.co/64x64/af936c/6d5f4d';
+  const icon = icon_name ? `/assets/img/icons/equipment/${icon_name}` : placeholder;
 
   return icon;
 }
 
 function renderEquipmentPlacementGrid(items: EquippedItemDetails[]) {
-  const placeholder = 'https://via.placeholder.com/64x64';
   // @ts-ignore
   const map: Record<EquipmentSlot, EquippedItemDetails> = items.filter(item => item.is_equipped).reduce((acc, item) => {
     acc[item.equipment_slot] = item;
@@ -94,7 +94,7 @@ function generateProgressBar(current: number, max: number, color: string, displa
 function renderInventoryItem(item: EquippedItemDetails , action: (item: EquippedItemDetails) => string): string {
   return `<div class="store-list">
     <div>
-      <img src="${item.icon ? `/assets/img/icons/equipment/${item.icon}` : 'https://via.placeholder.com/64x64'}">
+      <img src="${icon(item.icon)}">
     </div>
     <div class="details">
       <div class="name">${item.name}</div>
@@ -127,7 +127,7 @@ function renderInventorySection(inventory: EquippedItemDetails[]): string {
   return inventory.map(item => {
     return renderInventoryItem(item, item => {
       if(item.is_equipped) {
-        return `<button type="button" class="unequip-item error" hx-post="/player/unequip/${item.item_id}">Unequip</button>`;
+        return `<button type="button" class="unequip-item red" hx-post="/player/unequip/${item.item_id}">Unequip</button>`;
       }
       else {
         if(item.equipment_slot === 'ANY_HAND') {
diff --git a/src/server/views/map.ts b/src/server/views/map.ts
index 6f53fea..76a546b 100644
--- a/src/server/views/map.ts
+++ b/src/server/views/map.ts
@@ -17,9 +17,9 @@ export async function renderMap(data: { city: City, locations: Location[], paths
   });
 
   let html = `
-<section id="explore" class="tab active" style="background-image: linear-gradient(to left top, rgba(255,255,255,0) 0%,rgb(255,255,255) 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%), url('/assets/img/map/${closestTown}.jpeg')" hx-swap-oob="true">
-<h1>${data.city.name}</h1>
-  <div class="city-details">`;
+<section id="explore" class="tab active" style="background-image: url('/assets/img/map/${closestTown}.jpeg')" hx-swap-oob="true">
+<div class="city-title-wrapper"><div class="city-title">${data.city.name}</div></div>
+  <div class="city-details flex">`;
 
   if(servicesParsed.SERVICES.length) {
     html += `<div><h3>Services</h3>${servicesParsed.SERVICES.join("<br>")}</div>`
diff --git a/src/server/views/monster-selector.ts b/src/server/views/monster-selector.ts
index 8acb82f..24140c6 100644
--- a/src/server/views/monster-selector.ts
+++ b/src/server/views/monster-selector.ts
@@ -1,13 +1,30 @@
+import { LocationWithCity } from "../../shared/map";
 import { Monster, MonsterForFight } from "../../shared/monsters";
 
-export function renderMonsterSelector(monsters: Monster[] | MonsterForFight[], activeMonsterId: number = 0): string {
-  let html = `<form id="fight-selector" hx-post="/fight" hx-target="#explore">
+export function renderOnlyMonsterSelector(monsters: Monster[] | MonsterForFight[], activeMonsterId: number = 0, location?: LocationWithCity): string {
+  let html = `
+<div class="city-title-wrapper">
+  <div class="city-title">${location?.city_name}</div>
+</div>
+<div class="city-details">
+  <h3 class="location-name"><span>${location?.name}</span></h3>
+  ${renderMonsterSelector(monsters, activeMonsterId, location)}
+</div>
+`;
+
+  return html;
+}
+
+export function renderMonsterSelector(monsters: Monster[] | MonsterForFight[], activeMonsterId: number = 0, location?: LocationWithCity): string {
+  let html = `
+<div class="service-in-town"><form id="fight-selector" hx-post="/fight" hx-target="#explore">
   <input type="hidden" name="fightTrigger" value="explore">
   <select id="monsterId" name="monsterId">
-  ${monsters.map((monster) => {
+  ${monsters.map((monster: (Monster | MonsterForFight)) => {
       return `<option value="${monster.id}" ${monster.id === activeMonsterId ? 'selected': ''}>${monster.name}</option>`;
   }).join("\n")}
-  </select> <button type="submit">Fight</button></form>`;
+  </select> <button type="submit" class="red">Fight</button></form></div>
+`;
 
   return html;
 }
diff --git a/src/server/views/player-bar.ts b/src/server/views/player-bar.ts
index 9ca454b..3b57789 100644
--- a/src/server/views/player-bar.ts
+++ b/src/server/views/player-bar.ts
@@ -23,13 +23,13 @@ function displayLoginSignupForm(): string {
 
 }
 
-function generateProgressBar(current: number, max: number, color: string, displayPercent: boolean = true): string {
+function generateProgressBar(current: number, max: number, opts: ProgressBarOptions): string {
   let percent = 0;
   if(max > 0) {
     percent = Math.floor((current / max) * 100);
   }
-  const display = `${displayPercent? `${percent}% - `: ''}`;
-  return `<div class="progress-bar" style="background: linear-gradient(to right, ${color}, ${color} ${percent}%, transparent ${percent}%, transparent)" title="${display}${current}/${max}">${display}${current}/${max}</div>`;
+  const display = `${percent}% - `;
+  return `<div class="progress-bar" style="background: linear-gradient(to right, ${opts.startingColor}, ${opts.endingColor} ${percent}%, transparent ${percent}%, transparent)" title="${display}${current}/${max}">${display}${current}/${max}</div>`;
 }
 
 function calcAp(inventoryItem: EquippedItemDetails[]): string {
@@ -46,30 +46,35 @@ function calcAp(inventoryItem: EquippedItemDetails[]): string {
   return `
   <div>
     <img src="/assets/img/helm.png" class="icon">
-    ${generateProgressBar(ap.HEAD?.currentAp || 0, ap.HEAD?.maxAp || 0, '#7be67b')}
+    ${generateProgressBar(ap.HEAD?.currentAp || 0, ap.HEAD?.maxAp || 0, { startingColor: '#5ebb5e', endingColor: '#7be67b'})}
   </div>
   <div>
     <img src="/assets/img/arms.png" class="icon">
-    ${generateProgressBar(ap.ARMS?.currentAp || 0, ap.ARMS?.maxAp || 0, '#7be67b')}
+    ${generateProgressBar(ap.ARMS?.currentAp || 0, ap.ARMS?.maxAp || 0, { startingColor: '#5ebb5e', endingColor: '#7be67b'})}
   </div>
   <div>
     <img src="/assets/img/chest.png" class="icon">
-    ${generateProgressBar(ap.CHEST?.currentAp || 0, ap.CHEST?.maxAp || 0, '#7be67b')}
+    ${generateProgressBar(ap.CHEST?.currentAp || 0, ap.CHEST?.maxAp || 0, { startingColor: '#5ebb5e', endingColor: '#7be67b'})}
   </div>
   <div>
     <img src="/assets/img/legs.png" class="icon">
-    ${generateProgressBar(ap.LEGS?.currentAp || 0, ap.LEGS?.maxAp || 0, '#7be67b')}
+    ${generateProgressBar(ap.LEGS?.currentAp || 0, ap.LEGS?.maxAp || 0, { startingColor: '#5ebb5e', endingColor: '#7be67b'})}
   </div>
 `;
 }
 
-function progressBar(current: number, max: number, id: string, color: string) {
+interface ProgressBarOptions {
+  startingColor: string;
+  endingColor: string;
+}
+
+function progressBar(current: number, max: number, id: string, opts: ProgressBarOptions) {
   let percent = 0;
   if(max > 0) {
     percent = Math.floor((current / max) * 100);
   }
 
-  return `<div class="progress-bar" id="${id}" style="background: linear-gradient(to right, ${color}, ${color} ${percent}%, transparent ${percent}%, transparent)"
+  return `<div class="progress-bar" id="${id}" style="background: linear-gradient(to right, ${opts.startingColor}, ${opts.endingColor} ${percent}%, transparent ${percent}%, transparent)"
 title="${percent}% - ${current}/${max}">${current}/${max} - ${percent}</div>`;
 }
 
@@ -81,8 +86,8 @@ export function renderPlayerBar(player: Player, inventory: EquippedItemDetails[]
         <div class="gold">${player.gold.toLocaleString()}</div>
       </div>
       <div id="ap-bar">${calcAp(inventory)}</div>
-      ${progressBar(player.hp, maxHp(player.constitution, player.level), 'hp-bar', '#ff7070')}
-      ${progressBar(player.exp, expToLevel(player.level + 1), 'exp-bar', '#5997f9')}
+      ${progressBar(player.hp, maxHp(player.constitution, player.level), 'hp-bar', { endingColor: '#ff7070', startingColor: '#d62f2f' })}
+      ${progressBar(player.exp, expToLevel(player.level + 1), 'exp-bar', { endingColor: '#5997f9', startingColor: '#1d64d4'})}
     </div>
     ${player.account_type === 'session' ? displayLoginSignupForm() : ''}
   `;
diff --git a/src/server/views/stores.ts b/src/server/views/stores.ts
index 6a24e89..08745f7 100644
--- a/src/server/views/stores.ts
+++ b/src/server/views/stores.ts
@@ -2,6 +2,7 @@ import { ShopEquipment } from "../../shared/inventory";
 import { ShopItem, Item } from "../../shared/items";
 import { capitalize } from "lodash";
 import { Player } from "../../shared/player";
+import { LocationWithCity } from "shared/map";
 
 function renderStatBoost(name: string, val: number | string): string {
   let valSign: string = '';
@@ -78,7 +79,7 @@ function renderShopEquipment(item: ShopEquipment, action: (item: ShopEquipment)
 
 
 
-export async function renderStore(equipment: ShopEquipment[], items: (ShopItem & Item)[], player: Player): Promise<string> {
+export async function renderStore(equipment: ShopEquipment[], items: (ShopItem & Item)[], player: Player, location: LocationWithCity): Promise<string> {
   const listing: Record<string, string> = {};
   const listingTypes = new Set<string>();
 
@@ -117,11 +118,16 @@ export async function renderStore(equipment: ShopEquipment[], items: (ShopItem &
     finalListing.push(`<div class="filter-result ${activeTab === type ? 'active': 'hidden'}" data-filter="${type}" id="filter_${type}">${listing[type]}</div>`);
   });
 
-  let html = `<div class="shop-inventory-listing filter-container">
+  let html = `
+<div class="city-title-wrapper"><div class="city-title">${location.city_name}</div></div>
+<div class="city-details">
+<h3 class="location-name"><span>${location.name}</span></h3>
+<div class="shop-inventory-listing filter-container">
     <nav class="filter" id="shop-inventory-listing">${nav.join("")}</nav><div class="inventory-listing listing">
       ${finalListing.join("\n")}
     </div>
-  </div>`;
+  </div>
+</div>`;
 
   return html;
 }
diff --git a/src/server/views/travel.ts b/src/server/views/travel.ts
index fc70860..cf2d7db 100644
--- a/src/server/views/travel.ts
+++ b/src/server/views/travel.ts
@@ -15,8 +15,9 @@ export function renderTravel(data: TravelDTO): string {
   }
   */
 
-  let html = `<section id="explore" class="tab active" hx-swap-oob="true" style="background-image: linear-gradient(to left top, rgba(255,255,255,0) 0%,rgb(255,255,255) 100%), linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%), url('/assets/img/map/${data.closestTown}.jpeg')">
-<div id="travelling">`;
+  let html = `<section id="explore" class="tab active" hx-swap-oob="true" style="background-image: url('/assets/img/map/${data.closestTown}.jpeg')">
+
+<div id="travelling" class="city-details">`;
   html += '<div id="travelling-actions">';
   html += travelButton(blockTime);
   if(data.things.length) {
@@ -25,7 +26,7 @@ export function renderTravel(data: TravelDTO): string {
     promptText = `You see a ${data.things[0].name}`;
     html += `<form hx-post="/fight" hx-target="#explore">
 <input type="hidden" name="monsterId" value="${data.things[0].id}">
-<button type="submit">Fight</button>
+<button type="submit" class="red">Fight</button>
 </form>`;
   }
 
diff --git a/src/shared/map.ts b/src/shared/map.ts
index 5fe8b40..c05ae8f 100644
--- a/src/shared/map.ts
+++ b/src/shared/map.ts
@@ -1,3 +1,5 @@
+import { TravelWithNames } from "./travel";
+
 export type City = {
   id: number;
   name: string;
@@ -14,6 +16,10 @@ export type Location = {
   event_name: string;
 }
 
+export type LocationWithCity  = Location & {
+  city_name: string;
+}
+
 export type Path = {
   starting_city: number;
   ending_city: number;
@@ -27,6 +33,7 @@ export type TravelDTO = {
   nextAction: number,
   walkingText: string,
   closestTown: number;
+  travelPlan: TravelWithNames
 }
 
 export const STEP_DELAY = 3000;
diff --git a/src/shared/travel.ts b/src/shared/travel.ts
index 2c5911f..babafa0 100644
--- a/src/shared/travel.ts
+++ b/src/shared/travel.ts
@@ -5,3 +5,8 @@ export type Travel = {
   total_distance: number;
   current_position: number;
 }
+
+export type TravelWithNames = Travel & {
+  destination_city_name: string;
+  source_city_name: string;
+}
-- 
2.25.1