Sources layout

client/src/components/Play.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="play">
-    <div class="play__quote-container">
+    <Quote :text="quote" />
-      <Quote :text="quote" />
+    <Sources :sources="sources" />
-    </div>
   </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>

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;

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>

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">
+    <div class="page-play__gamecontrols">
-      waiting for gamemaster to start game ...
+      <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;