Shitty game board rendering

mitsuhiko · Mar 28, 2020 · 9cae3f0 · 9cae3f0
1 parent a64c753
commit 9cae3f0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 9 deletions.
diff --git a/webgame_client/src/views/game.rs b/webgame_client/src/views/game.rs
@@ -127,7 +127,15 @@ impl Component for GamePage {
                 <h1>{format!("Game ({})", &self.game_info.join_code)}</h1>
                 <PlayerList players=self.players.clone()/>
                 <ChatBox log=self.chat_log.clone()/>
-                <pre>{format!("{:#?}", &self.tiles)}</pre>
+                <div class="box tiles">
+                {
+                    self.tiles.iter().map(|tile| html! {
+                        <div class="tile">
+                            <span class="word">{&tile.codeword}</span>
+                        </div>
+                    }).collect::<Html>()
+                }
+                </div>
                 <div class="toolbar">
                     <span>{format!("{}: ", &self.player_info.nickname)}</span>
                     <input value=&self.chat_line

diff --git a/webgame_client/static/webgame.css b/webgame_client/static/webgame.css
@@ -10,9 +10,11 @@ body {
   font-size: 18px;
   margin: 0;
   background: rgb(233, 233, 233);
-  background: linear-gradient(0deg,
-      rgba(233, 233, 233, 1) 0%,
-      rgba(189, 179, 169, 1) 100%);
+  background: linear-gradient(
+    0deg,
+    rgba(233, 233, 233, 1) 0%,
+    rgba(189, 179, 169, 1) 100%
+  );
 }
 
 input,
@@ -37,9 +39,11 @@ input {
   font-family: "Courier Prime", monospace;
   font-weight: 400;
   background: rgb(244, 244, 244);
-  background: linear-gradient(0deg,
-      rgba(244, 244, 244, 1) 0%,
-      rgba(242, 238, 233, 1) 100%);
+  background: linear-gradient(
+    0deg,
+    rgba(244, 244, 244, 1) 0%,
+    rgba(242, 238, 233, 1) 100%
+  );
   padding-top: 4px;
   line-height: 36px !important;
 }
@@ -118,7 +122,7 @@ div.toolbar * {
   border-bottom-right-radius: 0 !important;
 }
 
-div.toolbar *+* {
+div.toolbar * + * {
   border-left: none !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
@@ -143,4 +147,23 @@ div.chat {
   font-family: "Courier Prime", monospace;
   margin-top: 0;
   margin-right: 330px;
-}
+}
+
+div.tiles {
+  margin: 18px 0;
+  background: #555;
+  text-align: center;
+}
+
+div.tiles div.tile {
+  margin: 10px;
+  padding: 30px 0;
+  display: inline-block;
+  width: 18%;
+  border: 2px solid black;
+  border-radius: 4px;
+  text-align: center;
+  background: #eee;
+  font-size: 120%;
+  font-weight: 700;
+}