From cc781709dfe8ac0b4f984a94d25e7dfec234386e Mon Sep 17 00:00:00 2001
From: Hamcha <hamcha@crunchy.rocks>
Date: Sun, 15 Sep 2019 18:48:31 +0200
Subject: [PATCH] Add game zones

---
 src/views/Game.vue | 84 +++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 79 insertions(+), 5 deletions(-)

diff --git a/src/views/Game.vue b/src/views/Game.vue
index 9d49a13..5914eaa 100644
--- a/src/views/Game.vue
+++ b/src/views/Game.vue
@@ -1,7 +1,22 @@
 <template>
   <section class="game">
     <section class="topbar"></section>
-    <section class="board"></section>
+    <section class="board">
+      <section class="zone own-home"></section>
+      <section class="problems">
+        <section class="problem own-problem">
+          <section class="zone own-zone"></section>
+          <section class="problem-card"></section>
+          <section class="zone opp-zone"></section>
+        </section>
+        <section class="problem opp-problem">
+          <section class="zone own-zone"></section>
+          <section class="problem-card"></section>
+          <section class="zone opp-zone"></section>
+        </section>
+      </section>
+      <section class="zone opp-home"></section>
+    </section>
     <section class="hand">
       <article v-for="(card, i) in hand" :key="i + card.ID">
         <img :src="imageURL(card.ID)" />
@@ -13,6 +28,10 @@
 <style lang="scss" scoped>
 $zone-gap: 5px;
 $card-gap: 5px;
+$side-min-size: 250px;
+$top-bar-height: 50px;
+$hand-min-height: 100px;
+$hand-max-height: 150px;
 
 .game {
   background: url("../assets/images/backgrounds/boardbg.webp") center;
@@ -21,7 +40,12 @@ $card-gap: 5px;
   height: 100vh;
   display: grid;
   gap: $zone-gap;
-  grid: 50px 2fr minmax(100px, 150px) / 1fr 3fr 1fr;
+  grid:
+    $top-bar-height 2fr minmax($hand-min-height, $hand-max-height) / minmax(
+      $side-min-size,
+      1fr
+    )
+    5fr minmax($side-min-size, 1fr);
 }
 
 .topbar {
@@ -35,8 +59,46 @@ $card-gap: 5px;
 }
 
 .board {
-  grid-column: 1/4;
+  grid-column: 2/3;
   grid-row: 2;
+  display: grid;
+  grid: 1fr 2.5fr 1fr / 1fr;
+
+  .problems {
+    display: flex;
+    flex: 1;
+    flex-flow: row-reverse;
+
+    .problem {
+      display: grid;
+      grid: 1.5fr 0.5fr 1fr 0.5fr 1.5fr / 1fr 1.5fr 1fr;
+      flex: 1;
+
+      .own-zone {
+        grid-row: 4/6;
+        grid-column: 1/4;
+      }
+      .opp-zone {
+        grid-row: 1/3;
+        grid-column: 1/4;
+      }
+      .problem-card {
+        border: 2px solid rgba(255, 255, 255, 0.2);
+        grid-row: 2/5;
+        grid-column: 2;
+      }
+    }
+  }
+}
+
+.zone {
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  margin: 2px;
+  padding: 2px;
+  border-radius: 5px;
+  display: flex;
+  flex-flow: column;
+  flex: 1;
 }
 
 .hand {
@@ -47,19 +109,31 @@ $card-gap: 5px;
   justify-content: center;
   margin: 0;
   padding: 0;
+  padding-right: 100px;
   article {
     margin: $card-gap;
     margin-bottom: 0;
-    min-width: 150px;
     overflow-y: hidden;
     cursor: grab;
     transition: all 100ms;
+    min-width: 150px;
+    max-width: 200px;
     &:hover {
       margin-top: $card-gap - 30px;
     }
   }
   overflow: visible;
 }
+
+@media (max-width: 1200px) {
+  .game {
+    grid-template-columns: $side-min-size 5fr;
+  }
+  .hand {
+    grid-column: 1/3;
+    padding: 0 10px;
+  }
+}
 </style>
 
 <script lang="ts">
@@ -79,7 +153,7 @@ export default class GameView extends Vue {
   }
 
   private async mounted() {
-    this.hand = (await getCards({ Sets: ["FF"] })).slice(0, 6);
+    this.hand = (await getCards({ Sets: ["FF"] })).slice(0, 9);
   }
 
   private imageURL(id: string) {