add character section in lobby page

References #22
osu-cascades · Nov 4, 2021 · 2ba00f0 · 2ba00f0
1 parent c53e777
commit 2ba00f0
Show file tree

Hide file tree

Showing 13 changed files with 57 additions and 6 deletions.
diff --git a/assets/css/phoenix.css b/assets/css/phoenix.css
@@ -123,12 +123,6 @@ body {
   padding: 0 2em;
 }
 
-/* .button button {
-  background-color: #B6CBF4;
-  width: 100%;
-  display: block;
-} */
-
 input[type=button], input[type=submit], input[type=reset] {
   color: #1E3A8A;
   background-color: rgba(129, 140, 248);
@@ -218,7 +212,21 @@ select {
   text-align: center;
   font-weight: 800;
 }
+/* lobby */
+.character {
+  margin: auto;
+  padding: 10px;
+  width: 200px;
+  height: 225px;
+  border: solid #2b327b 2px;
+}
+
+.character > p {
+  text-align: center;
+  color: #2b327b;
+}
 
+/* cards */
 .card {
   position: relative;
   margin: auto;

diff --git a/assets/static/images/BrokenTopWhychusMilkyWay.jpg b/assets/static/images/BrokenTopWhychusMilkyWay.jpg
diff --git a/assets/static/images/UseCaseDiagram.jpg b/assets/static/images/UseCaseDiagram.jpg
diff --git a/assets/images/characters/artist.png → assets/static/images/characters/artist.png b/assets/images/characters/artist.png → assets/static/images/characters/artist.png
diff --git a/assets/images/characters/dreamer.png → assets/static/images/characters/dreamer.png b/assets/images/characters/dreamer.png → assets/static/images/characters/dreamer.png
diff --git a/assets/images/characters/listener.png → assets/static/images/characters/listener.png b/assets/images/characters/listener.png → assets/static/images/characters/listener.png
diff --git a/assets/images/characters/maker.png → assets/static/images/characters/maker.png b/assets/images/characters/maker.png → assets/static/images/characters/maker.png
diff --git a/assets/images/characters/planner.png → assets/static/images/characters/planner.png b/assets/images/characters/planner.png → assets/static/images/characters/planner.png
diff --git a/assets/images/characters/rebel.png → assets/static/images/characters/rebel.png b/assets/images/characters/rebel.png → assets/static/images/characters/rebel.png
diff --git a/assets/images/characters/storyteller.png → .../static/images/characters/storyteller.png b/assets/images/characters/storyteller.png → .../static/images/characters/storyteller.png
diff --git a/assets/images/characters/thinker.png → assets/static/images/characters/thinker.png b/assets/images/characters/thinker.png → assets/static/images/characters/thinker.png
diff --git a/assets/images/characters/writer.png → assets/static/images/characters/writer.png b/assets/images/characters/writer.png → assets/static/images/characters/writer.png
diff --git a/lib/dream_up_web/live/lobby_live.html.leex b/lib/dream_up_web/live/lobby_live.html.leex
@@ -81,4 +81,47 @@
         <button class="defaultButton mt-12 text-blue-900 border-2 px-8 text-center" phx-click="begin-setup">Start Game</button>
     </div>
     <% end %>
+    <%# character image grid %>
+    <div class="grid grid-cols-3 gap-4">
+        <div class="character">
+            <img src="/images/characters/maker.png">
+            <p>The Maker</p>
+        </div>
+        <div class="character">
+            <img src="/images/characters/rebel.png">
+            <p>The Rebel</p>
+        </div>
+        <div class="character">
+            <img src="/images/characters/dreamer.png">
+            <p>The Dreamer</p>
+        </div>
+        <div class="character">
+            <img src="/images/characters/writer.png">
+            <p>The Writer</p>
+        </div>
+        <div class="character">
+            <img src="/images/characters/planner.png">
+            <p>The Planner</p>
+        </div>
+        <div class="character">
+            <img src="/images/characters/listener.png">
+            <p>The Listener</p>
+        </div>
+        <div class="character">
+            <img src="/images/characters/artist.png">
+            <p>The Artist</p>
+        </div>
+        <div class="character">
+            <img src="/images/characters/thinker.png">
+            <p>The Thinker</p>
+        </div>
+        <div class="character">
+            <img src="/images/characters/storyteller.png">
+            <p>The Storyteller</p>
+        </div>
+    </div>
+
+    <div>
+
+    </div>
 </div>