13 files changed, 208 insertions, 0 deletions
diff --git a/client/public/assets/coffee_left.png b/client/public/assets/coffee_left.png
new file mode 100644
index 0000000..1c58591
--- /dev/null
+++ b/client/public/assets/coffee_left.png
diff --git a/client/public/assets/coffee_right.png b/client/public/assets/coffee_right.png
new file mode 100644
index 0000000..fc7f00d
--- /dev/null
+++ b/client/public/assets/coffee_right.png
diff --git a/client/public/assets/floor_tile_120.png b/client/public/assets/floor_tile_120.png
new file mode 100644
index 0000000..3658e2e
--- /dev/null
+++ b/client/public/assets/floor_tile_120.png
diff --git a/client/public/assets/floor_tile_160.png b/client/public/assets/floor_tile_160.png
new file mode 100644
index 0000000..b094150
--- /dev/null
+++ b/client/public/assets/floor_tile_160.png
diff --git a/client/public/assets/floor_tile_40.png b/client/public/assets/floor_tile_40.png
new file mode 100644
index 0000000..3d15fec
--- /dev/null
+++ b/client/public/assets/floor_tile_40.png
diff --git a/client/public/assets/floor_tile_80.png b/client/public/assets/floor_tile_80.png
new file mode 100644
index 0000000..52b36a2
--- /dev/null
+++ b/client/public/assets/floor_tile_80.png
diff --git a/client/public/css/colors.css b/client/public/css/colors.css
new file mode 100644
index 0000000..067ddcd
--- /dev/null
+++ b/client/public/css/colors.css
@@ -0,0 +1,45 @@
+:root {
+  --bg: #fbf1c7;
+  --text: #3c3836;
+  --red: #9d0006;
+  --green: #6d790e;
+  --yellow: #b57614;
+  --blue: #075678;
+  --aqua: #57ab7e;
+  --purple: #b16286;
+  --orange: #af3a03;
+}
+
+[data-theme="dark"] {
+  --bg: #282828;
+  --text: #f9f5d7;
+  --red: #fb4934;
+  --green: #b8bb26;
+  --yellow: #fabd2f;
+  --blue: #83a598;
+  --aqua: #8ec07c;
+  --purple: #d3869b;
+  --orange: #d65d0e;
+}
+
+.red {
+  color: var(--red);
+}
+.green {
+  color: var(--green);
+}
+.yellow {
+  color: var(--yellow);
+}
+.blue {
+  color: var(--blue);
+}
+.aqua {
+  color: var(--aqua);
+}
+.purple {
+  color: var(--purple);
+}
+.orange {
+  color: var(--orange);
+}
diff --git a/client/public/css/style.css b/client/public/css/style.css
new file mode 100644
index 0000000..cdfef76
--- /dev/null
+++ b/client/public/css/style.css
@@ -0,0 +1,95 @@
+@import url("./theme.css");
+@import url("./tf.css");
+
+@font-face {
+  font-family: "scientifica";
+  src: url("/fonts/scientifica.ttf");
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  font-family: "scientifica", monospace;
+  transition: background 0.2s ease-in-out;
+  font-smooth: never;
+}
+
+html,
+body {
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  background-color: var(--bg);
+  color: var(--text);
+}
+
+a {
+  color: var(--blue);
+}
+a:visited {
+  color: var(--blue);
+}
+
+.main {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-width: 600px;
+  width: 45%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-around;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.content {
+  border-top: 1px solid var(--yellow);
+  border-bottom: 1px solid var(--yellow);
+  max-height: 90vh;
+}
+
+.footer {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.nav {
+  display: flex;
+}
+
+.title {
+  text-decoration: none;
+}
+.title:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.centered-game {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 1rem;
+  height: 100%;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.centered-game canvas {
+  display: block;
+  max-height: 90%;
+  width: auto;
+  max-width: 100%;
+  border: 1px solid var(--yellow);
+  border-radius: 0.5rem;
+  margin: 0;
+}
diff --git a/client/public/css/tf.css b/client/public/css/tf.css
new file mode 100644
index 0000000..c1acd72
--- /dev/null
+++ b/client/public/css/tf.css
@@ -0,0 +1,33 @@
+.tf {
+  position: relative;
+  z-index: 1;
+
+  transition: color 0.3s ease-out;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.tf:before {
+  background: rgb(162, 254, 254);
+  background: linear-gradient(
+    90deg,
+    rgba(162, 254, 254, 1) 0%,
+    rgba(249, 187, 250, 1) 25%,
+    rgba(250, 250, 250, 1) 50%,
+    rgba(249, 187, 250, 1) 75%,
+    rgba(162, 254, 254, 1) 100%
+  );
+
+  content: "";
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+  transition: all 0.5s;
+}
+
+.tf:hover:before {
+  opacity: 1;
+}
diff --git a/client/public/css/theme.css b/client/public/css/theme.css
new file mode 100644
index 0000000..c65b2a8
--- /dev/null
+++ b/client/public/css/theme.css
@@ -0,0 +1,17 @@
+@import url("./colors.css");
+
+.primary {
+  color: var(--aqua);
+}
+.secondary {
+  color: var(--blue);
+}
+.tertiary {
+  color: var(--purple);
+}
+.warning {
+  color: var(--yellow);
+}
+.error {
+  color: var(--red);
+}
diff --git a/client/public/fonts/CozetteVector.ttf b/client/public/fonts/CozetteVector.ttf
new file mode 100644
index 0000000..8dde356
--- /dev/null
+++ b/client/public/fonts/CozetteVector.ttf
diff --git a/client/public/fonts/scientifica.ttf b/client/public/fonts/scientifica.ttf
new file mode 100644
index 0000000..1753d31
--- /dev/null
+++ b/client/public/fonts/scientifica.ttf
diff --git a/client/public/img/kangaroo.svg b/client/public/img/kangaroo.svg
new file mode 100644
index 0000000..f23ddec
--- /dev/null
+++ b/client/public/img/kangaroo.svg
@@ -0,0 +1,18 @@
+<svg id="emoji" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
+  <g id="color">
+    <path fill="#6a462f" d="M15.0063,35.5407l-.64,1.78v.01l-1.03,2.84.02-.09-2.1-.09.26-6.04,1.6-3.64a26.7307,26.7307,0,0,0,1.61,4.61v.01C14.8163,35.1307,14.9064,35.3407,15.0063,35.5407Z"/>
+    <path fill="#6a462f" d="M32.3664,57.0307a2.5121,2.5121,0,0,1-2.33,1.57h-3.12a1.9779,1.9779,0,0,0,1.53-1.18l.15-.37a2.0617,2.0617,0,0,0,.15-1.15l-.67-4.43a2.1283,2.1283,0,0,1,1.17-2.22,8.5517,8.5517,0,0,0,2.6-2.18.99.99,0,0,1-.11.23c-.07.09-.14.18-.22.27a2.9535,2.9535,0,0,1-.3.31c-.05.05-.11.1-.16.15-.47.47.59,3.74.7,4.42l.76,3.43A2.0617,2.0617,0,0,1,32.3664,57.0307Z"/>
+    <path fill="#a57939" d="M64.6786,57.1107l-20.7161.21c-9.2877.0047-11.414-7.36-11.5239-7.68a10.6424,10.6424,0,0,1-.8278-2.179c-.02.02.1576-.181.1276-.161-.07.09-.14.18-.22.27a2.9145,2.9145,0,0,1-.3.31c-.05.05-.11.1-.16.15a3.58,3.58,0,0,1-.49.4,3.409,3.409,0,0,1-.33.24,9.6919,9.6919,0,0,1-.99.58,2.1283,2.1283,0,0,0-1.17,2.22l.67,4.43a2.0609,2.0609,0,0,1-.15,1.15l-.15.37a1.9782,1.9782,0,0,1-1.53,1.18,2.6453,2.6453,0,0,1-.29.02h-13.06a.9034.9034,0,0,1-.68-1.5,1.8072,1.8072,0,0,1,1.2-.6l5.6-.46,3.26-.26a1.57,1.57,0,0,0,1.21-.73,1.4836,1.4836,0,0,0,.27-.94l-.04-.94-.27-6.46a9.1724,9.1724,0,0,1-.6-1,9.0318,9.0318,0,0,1-1.02-4.18v-.05q-.51-.3-.99-.63a20.9138,20.9138,0,0,1-3.85-3.36l-.13.19-1.67,2.47-.52,4.73h-2v-4.73l.02-.09,1.37-5.15v-.01l-.32-2.15a.8939.8939,0,0,1,.05.08.5246.5246,0,0,0-.06-.15,20.2076,20.2076,0,0,1-1.93-6.48c-.06-.4-.1-.8-.13-1.21a1.1019,1.1019,0,0,1-.02-.18,3.3887,3.3887,0,0,1-.02-.45c-.02-.28-.02-.57-.02-.86l-3.5-1.3c-.56-.17-1.49-.5623-1.63-1.3422a1.4662,1.4662,0,0,1,.49-1.33l1.58-.9777v-.7a1.0654,1.0654,0,0,1,.38-.82l.66-.56-1.88-2.5a.3811.3811,0,0,1,.43-.59l2.25.76,2.31,1.46,2.5-1.31a3.7236,3.7236,0,0,1,1.76-.43h.66a.48.48,0,0,1,.28.87l-2.91,2.14a1.781,1.781,0,0,0-.68,1.91c.08.29.16.58.26.86a8.01,8.01,0,0,0,6.1,5.14,20.78,20.78,0,0,1,6.01,2.18,21.034,21.034,0,0,1,6.7,5.81v.01c.1.12.19.27.29.41,0,.01.01.01.01.02a11.3217,11.3217,0,0,1,1.13,2.22,12.2135,12.2135,0,0,1,.75,4.8c-.01.14-.01.27-.01.39a20.3172,20.3172,0,0,0,.3,3.52,19.4651,19.4651,0,0,0,1.03,3.81,3.3983,3.3983,0,0,0,.13.34c.06.19.15.37.23.56l.01.02a5.546,5.546,0,0,0,1.04,1.87,5.3627,5.3627,0,0,0,2.65,1.76,36.5639,36.5639,0,0,0,4.51.81l18.51,2.78C64.9186,56.1607,64.9684,57.1107,64.6786,57.1107Z"/>
+  </g>
+  <g id="line">
+    <line x1="34.0489" x2="34.0489" y1="32.7943" y2="32.8034" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"/>
+    <line x1="14.725" x2="14.3664" y1="35.105" y2="37.3322" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <path fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M22.4963,41.5007c-.34-.2-.68-.41-1-.62a18.3131,18.3131,0,0,1-3.97-3.18"/>
+    <path fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M12.2763,23.5207c0,.29,0,.58.02.86,0,.38.03.75.06,1.12.02.24.04.48.07.72a26.0614,26.0614,0,0,0,.69,4.09,26.7476,26.7476,0,0,0,1.61,4.61v.01c.09.2.18.41.28.61"/>
+    <polyline fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="18.836 30.821 19.426 34.881 17.656 37.511 17.526 37.701 15.856 40.171 15.336 44.901 13.336 44.901 13.336 40.171 14.366 37.331 14.366 37.321 15.006 35.541 15.756 33.491 16.036 30.731"/>
+    <polyline fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" points="13.359 40.081 11.259 39.991 11.519 33.951 13.119 30.311"/>
+    <path fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M26.6563,33.9107a9.0823,9.0823,0,0,0-4.16,7.59v.05a9.0307,9.0307,0,0,0,1.02,4.18,9.1243,9.1243,0,0,0,.6,1l.27,6.46.04.94a1.483,1.483,0,0,1-.27.94,1.57,1.57,0,0,1-1.21.73l-3.26.26-5.6.46a1.8069,1.8069,0,0,0-1.2.6.9034.9034,0,0,0,.68,1.5h13.06a2.6417,2.6417,0,0,0,.29-.02,1.9781,1.9781,0,0,0,1.53-1.18l.15-.37a2.0609,2.0609,0,0,0,.15-1.15l-.67-4.43a2.1282,2.1282,0,0,1,1.17-2.22,8.5511,8.5511,0,0,0,2.6-2.18c.01-.02.02-.03.03-.05a3.2588,3.2588,0,0,0,.72-2.07"/>
+    <path fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.2281,22.2784a1.5987,1.5987,0,0,1-1.08-1.4,1.4665,1.4665,0,0,1,.49-1.33l1.58-.9777v-.7a1.0654,1.0654,0,0,1,.38-.82l.66-.56-1.88-2.5a.3811.3811,0,0,1,.43-.59l2.25.76,2.31,1.46,2.5-1.31a3.7236,3.7236,0,0,1,1.76-.43h.66a.48.48,0,0,1,.28.87l-2.91,2.14a1.7813,1.7813,0,0,0-.68,1.91c.08.29.16.58.26.86a8.01,8.01,0,0,0,6.1,5.14,20.78,20.78,0,0,1,6.01,2.18,21.034,21.034,0,0,1,6.7,5.81v.01c.1.12.19.27.29.41,0,.01.01.01.01.02a11.3212,11.3212,0,0,1,1.13,2.22,12.21,12.21,0,0,1,.75,4.8c-.01.14-.01.27-.01.39a20.3073,20.3073,0,0,0,.3,3.52,19.4649,19.4649,0,0,0,1.03,3.81,3.4226,3.4226,0,0,0,.13.34,4.4066,4.4066,0,0,0,.23.56l.01.02a5.546,5.546,0,0,0,1.04,1.87,5.3634,5.3634,0,0,0,2.65,1.76,36.5639,36.5639,0,0,0,4.51.81l18.51,2.78"/>
+    <path fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M31.0585,48.0307c-.47.47.59,3.74.7,4.42l.76,3.43a2.0609,2.0609,0,0,1-.15,1.15l-.15.37a1.977,1.977,0,0,1-1.82,1.2h-3.48"/>
+  </g>
+</svg>