From b298a9946e133da036a43406f7c16a227ce62091 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Sun, 15 Aug 2021 22:04:24 +0200
Subject: [PATCH] Sources layout

---
 client/src/components/Play.vue    | 19 +++-------
 client/src/components/Quote.vue   | 13 ++++++-
 client/src/components/Sources.vue | 62 +++++++++++++++++++++++++++++++
 client/src/pages/play.vue         | 25 ++++++++++---
 4 files changed, 100 insertions(+), 19 deletions(-)
 create mode 100644 client/src/components/Sources.vue

diff --git a/client/src/components/Play.vue b/client/src/components/Play.vue
index 34de5c4..901eb44 100644
--- a/client/src/components/Play.vue
+++ b/client/src/components/Play.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="play">
-    <div class="play__quote-container">
-      <Quote :text="quote" />
-    </div>
+    <Quote :text="quote" />
+    <Sources :sources="sources" />
   </div>
 </template>
 
@@ -15,6 +14,9 @@ export default {
     quote() {
       return this.$store.state.round.quote
     },
+    sources() {
+      return this.$store.state.round.sources
+    },
   },
 }
 </script>
@@ -31,16 +33,7 @@ body,
 
 .play {
   position: relative;
+  width: 100%;
   height: 100%;
-
-  &__quote-container {
-    display: flex;
-    position: absolute;
-    left: 35%;
-    top: 35%;
-    width: 30%;
-    height: 30%;
-    align-items: center;
-  }
 }
 </style>
diff --git a/client/src/components/Quote.vue b/client/src/components/Quote.vue
index 4482894..89c6d5b 100644
--- a/client/src/components/Quote.vue
+++ b/client/src/components/Quote.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="quote">
-    <div class="quote__quote">{{ text }}</div>
+    <div class="quote__container">
+      <div class="quote__quote">{{ text }}</div>
+    </div>
   </div>
 </template>
 
@@ -12,6 +14,15 @@ export default {
 
 <style lang="scss">
 .quote {
+  &__container {
+    display: flex;
+    position: absolute;
+    left: 35%;
+    top: 35%;
+    width: 30%;
+    height: 30%;
+    align-items: center;
+  }
   &__quote {
     text-align: justify;
     font-family: Dosis;
diff --git a/client/src/components/Sources.vue b/client/src/components/Sources.vue
new file mode 100644
index 0000000..1508ffc
--- /dev/null
+++ b/client/src/components/Sources.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="sources">
+    <div :class="['sources__container', 'sources__container-' + sources.length]">
+      <div class="sources__container-ring">
+        <div
+          v-for="(source, idx) in sources"
+          :class="['sources__source', 'sources__source-' + idx]"
+          :key="source.id"
+        >
+          {{ source }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['sources'],
+}
+</script>
+
+<style lang="scss">
+.sources {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  &__container {
+    position: absolute;
+    left: 10%;
+    top: 10%;
+    width: 80%;
+    height: 80%;
+  }
+
+  &__container-ring {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__source {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    margin: -5px 0 0 -5px;
+    background-color: #ffffff;
+  }
+
+  &__container-4,
+  &__container-5,
+  &__container-6 {
+    .sources__source-0 { top: 20%; left: 100%; }
+    .sources__source-1 { top: 80%; left: 100%; }
+    .sources__source-2 { top: 80%; left: 0; }
+    .sources__source-3 { top: 20%; left: 0; }
+    .sources__source-4 { top: 0; left: 50%; }
+    .sources__source-5 { top: 100%; left: 50%; }
+  }
+}
+</style>
diff --git a/client/src/pages/play.vue b/client/src/pages/play.vue
index ffb5457..2df25c6 100644
--- a/client/src/pages/play.vue
+++ b/client/src/pages/play.vue
@@ -1,12 +1,16 @@
 <template>
   <div class="page-play">
-    <GameControls />
     <EngineDebug />
-    <div v-if="gameState === 'idle'" class="page-play__waiting">
-      waiting for gamemaster to start game ...
+    <div class="page-play__gamecontrols">
+      <GameControls />
+    </div>
+    <div class="page-play__area">
+      <div v-if="gameState === 'idle'" class="page-play__waiting">
+        waiting for gamemaster to start game ...
+      </div>
+      <ReadySet v-if="gameState === 'ready-set'" :text="gamePhase" />
+      <Play v-if="gameState === 'play'" />
     </div>
-    <ReadySet v-if="gameState === 'ready-set'" :text="gamePhase" />
-    <Play v-if="gameState === 'play'" />
   </div>
 </template>
 
@@ -31,6 +35,17 @@ export default {
 
 <style lang="scss">
 .page-play {
+  display: flex;
+  flex-direction: column;
+
+  &__controls {
+    flex: 0 1 auto;
+  }
+
+  &__area {
+    flex: 1 1 auto;
+  }
+
   &__waiting {
     margin-top: 60px;
     text-align: center;