Restyle and make game_code copy

assets/pkg/style.css

@@ -4,292 +4,157 @@ body {
   height: 100vh;
   margin: 0px;
   overflow: hidden;
+  background-color: #BBB;
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serifx;
 }
 
 * {
   box-sizing: border-box;
 }
 
-.main-menu {
-  display: flex;
-
-  height: 100%;
-  width: 100%;
-
-  padding: 24px;
-
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
+h1 {
+  font-size: 3rem;
+  font-weight: 400;
 }
 
-.join-screen {
-  display: flex;
-
-  height: 100%;
+.headroom {
+  height: 3rem;
   width: 100%;
-
-  padding: 24px;
-
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
 }
 
-.join-input {
-  display: flex;
-  flex-direction: row;
-  gap: 24px;
+.right-aligned {
+  text-align: right;
 }
 
-.join-input > p {
-  margin: 0px;
+.container {
+  padding: 2rem;
+  border-radius: 0.5rem;
 }
 
-
-.player-lobby-container {
-  display: flex;
-
+.full-height {
   height: 100%;
-  width: 100%;
-
-  padding: 24px;
-  gap: 24px;
-
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
 }
 
-.top-row {
-  display: flex;
-
+.full-width {
   width: 100%;
-
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-
-  font-size: 16px;
-}
-
-.player-lobby-container > img {
-  width: 50%;
-  max-width: 200px;
-  border-radius: 50%;
-  border: 8px solid black;
 }
 
-.name-change {
+.vertical-stack {
   display: flex;
-
-  width: 50%;
-  height: 1em;
-
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
-  gap: 24px;
+  gap: 1rem;
 }
 
-.button-tray {
+.horizontal-stack {
   display: flex;
-
-  width: 100%;
-  margin-top: auto;
-
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
 }
 
-.host-lobby-container {
-  display: flex;
-
-  height: 100%;
-  width: 100%;
-
-  padding: 24px;
-  gap: 24px;
-
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
+.title {
+  text-align: center;
+  margin: 0px;
 }
 
-.avatar-previews {
-  display: grid;
-  width: 100%;
-
-  grid-template-columns: repeat(5, 1fr);
-  gap: 100px;
+.full-screen {
+  width: 100vw;
+  height: 100vh;
 }
 
-.avatar-container {
+.splash-image {
   display: flex;
 
-  flex-direction: column;
-
-  border: solid black;
-  gap: 24px;
-
   justify-content: center;
-  padding: 24px;
   align-items: center;
-}
-
-.avatar-container > img {
-  width: 50%;
-  max-width: 200px;
-  border-radius: 50%;
-  border: 1px solid black;
-}
 
-.avatar-container > .name {
-  font-size: 48px;
-}
+  width: 60%;
+  max-height: 500px;
+  aspect-ratio: 1;
+  padding: 1rem 0;
+  background-color: #888;
+  border-radius: 0.5rem;
 
-.avatar-container > .status {
-  font-size: 24px;
+  margin-top: 1rem;
+  margin-bottom: 3rem;
 }
 
-.player-pregame-container {
+.button {
   display: flex;
-
-  height: 100%;
-  width: 100%;
-
-  padding: 24px;
-  gap: 24px;
-
-  flex-direction: column;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: center;
+  text-decoration: none;
+  color: black;
+  font-size: 1rem;
+  background-color: white;
+  border: none;
+  border-radius: 0.5rem;
+  height: 4rem;
+  width: 100%;
+  flex-grow: 1;
+  max-width: 400px;
+  min-width: 200px;
 }
 
-.creature-line {
-  display: flex;
-
-  flex-direction: row;
-  gap: 24px;
+.button:hover {
+  border: 2px solid black;
 }
 
-.creature-container {
+.input {
   display: flex;
-
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  border: 1px grey solid;
-  padding: 24px;
-
-  border-radius: 24px;
-
-  gap: 8px;
 }
 
-.creature-avatar {
-  display: block;
-
-  width: 100px;
-  height: 100px;
-
-  background-color: grey;
-  border-radius: 50%;
+.input > label {
+  padding-left: 0.5rem;
+  font-size: 1rem;
 }
 
-.betting-row {
-  display: flex;
-
+.input > input {
+  height: 4rem;
   width: 100%;
-
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.account-line {
+  flex-grow: 1;
+  max-width: 400px;
+  min-width: 200px;
+  border-radius: 0.5rem;
+  border: none;
+  box-shadow: none;
+  font-size: 2rem;
+  text-align: center;
+  background-color: #555;
+  text-transform: uppercase;
+}
+
+.avatar-grid {
   display: grid;
-
-  grid-template-rows: 1fr 1fr;
-  grid-auto-flow: column;
-
-  background-color: black;
-
-  gap: 1px;
+  grid-template-rows: repeat(2, 1fr);
+  grid-auto-flow: column dense;
+  gap: 1rem;
 }
 
-.account-line > div {
-  padding: 4px 8px;
-  background-color: white;
-}
-
-.card-line {
-  display: block;
-  transform: rotate(0deg);
+.avatar-grid > div:nth-child(2) {
+  grid-row: 1;
 }
 
-.card {
-  position: absolute;
-
-  top: 0px;
-  right: -75px;
-
-  width: 150px;
-  height: 250px;
-
-  border: 1px solid black;
-  border-radius: 24px;
-  background-color: white;
-
-  box-shadow: grey -2px 2px 4px;
-}
-
-.card-line > :nth-child(1) {
-  transform: rotate(-30deg);
-  transform-origin: 50% 120%;
-}
-
-.card-line > :nth-child(3) {
-  transform: rotate(30deg);
-  transform-origin: 50% 120%;
-}
-
-.host-pre-game-container {
+.avatar-img {
   display: flex;
-
-  width: 100vw;
-  width: 100vh;
-
-  flex-direction: column;
-}
-
-.monster-container {
-
-}
-
-.race-container {
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  height: 100vh;
-}
-
-.racecourse {
-
+  background-color: #888;
+  border-radius: 0.5rem;
+  height: 150px;
+  aspect-ratio: 1;
+  justify-content: center;
+  align-items: center;
 }
 
-body {
-  background: linear-gradient(135deg,
-          white 0%,
-          white 49%,
-          black 49%,
-          black 51%,
-          white 51%,
-          white 100%);
-  background-repeat: repeat;
-  background-size: 20px 20px;
+.bg-white {
+  background-color: white;
 }
 
-canvas {
-  background-color: white;
+.monster-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3em;
 }

core/src/events.rs

@@ -0,0 +1 @@
+

core/src/lib.rs

@@ -1 +1 @@
-
+mod events;

server/src/components/layouts/horizontal_stack.rs

@@ -0,0 +1,6 @@
+use leptos::*;
+
+#[component]
+pub fn horizontal_stack(children: Children) -> impl IntoView {
+    view! { <div class="horizontal-stack full-width">{children()}</div> }
+}

server/src/components/layouts/mod.rs

@@ -0,0 +1,4 @@
+mod horizontal_stack;
+pub use horizontal_stack::*;
+mod vertical_stack;
+pub use vertical_stack::*;