Start working on game layout

1 files changed, 41 insertions, 5 deletions

diff --git a/webapp/src/default.css b/webapp/src/default.css
index bfc6872..2bfc862 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -4,10 +4,48 @@ body {
     background-color: #eeb;
 }
 
+*{
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+.app {
+    display: grid;
+    grid-template-areas: ".    north  ."
+                         "west center east"
+                         ".    south  .";
+    grid-template-rows: 80px 1fr 80px;
+    grid-template-columns: 80px 1fr 80px;
+    width: 100%;
+    height: 100%;
+}
+
+.west {
+    grid-area: west;
+    transform: rotate(90deg);
+}
+.north {
+    grid-area: north;
+    transform: rotate(180deg);
+}
+.east {
+    grid-area: east;
+    transform: rotate(270deg);
+}
+.south {
+    grid-area: south;
+}
+.center {
+    grid-area: center;
+    display: grid;
+    justify-content: center;
+}
+
 .hand {
-    display: flex;
-    flex-direction: row;
-    /* transform: rotate(90deg); */
+    display: grid;
+    justify-content: center;
+    grid-auto-flow: column;
 }
 
 .hand .card {
@@ -33,8 +71,6 @@ body {
 }
 
 .card div {
-    display: flex;
-    flex-direction: column;
     text-align: center;
 }