css: adapt Playground to smartphone

client/src/assets/css/media.scss

@@ -1,3 +1,4 @@
 $phone-width: 560px;
 $phone-max-width: 767px;
 $tablet-width: 768px;
+$desktop-min-width: 880px;

client/src/components/Playground.vue

@@ -51,7 +51,7 @@ const showQuote = ref(false)
 window.setTimeout(() => { showQuote.value = true }, 100)
 const showSkipButton = computed(() => game.phase === 'select-quote')
 const badgeMap = computed(() => {
-  const badgeMap = {} as { [key: string]: number}
+  const badgeMap = {} as { [key: string]: number }
   if (game.phase === 'reveal-show-count') {
     for (const id in round.revelation.votes) {
       badgeMap[id] = round.revelation.votes[id].length
@@ -61,7 +61,7 @@ const badgeMap = computed(() => {
 })
 
 const disabledMap = computed(() => {
-  const disabledMap = {} as { [key: string]: boolean}
+  const disabledMap = {} as { [key: string]: boolean }
   if (game.phase === 'reveal-source') {
     for (const id in round.revelation.sources) {
       disabledMap[id] = !round.revelation.sources[id]
@@ -71,7 +71,7 @@ const disabledMap = computed(() => {
   return disabledMap
 })
 
-const showMap = ref({} as { [key: string]: boolean})
+const showMap = ref({} as { [key: string]: boolean })
 sources.forEach((source, index) => {
   window.setTimeout(() => {
     showMap.value[source.id] = true
@@ -80,6 +80,8 @@ sources.forEach((source, index) => {
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .playground {
   &__container {
     display: flex;
@@ -92,6 +94,10 @@ sources.forEach((source, index) => {
     flex-direction: column;
     flex-grow: 1;
     margin: 40px;
+
+    @media (max-width: $phone-max-width) {
+      margin: 0;
+    }
   }
 
   &__sources {
@@ -99,10 +105,18 @@ sources.forEach((source, index) => {
     flex-wrap: wrap;
     justify-content: space-around;
     gap: 24px 36px;
+
+    @media (max-width: $phone-max-width) {
+      order: 2;
+    }
   }
 
   &__spacer {
     flex-grow: 3;
+
+    @media (max-width: $phone-max-width) {
+      flex-grow: 1;
+    }
   }
 
   &__quote {
@@ -111,10 +125,14 @@ sources.forEach((source, index) => {
     flex-grow: 4;
     opacity: 0;
     transition: opacity 1s linear;
-    
+
     &__show {
       opacity: 100%;
     }
+
+    @media (max-width: $phone-max-width) {
+      flex-grow: 1;
+    }
   }
 
   &__skip {
@@ -127,11 +145,24 @@ sources.forEach((source, index) => {
       animation: quote-show 0.5s linear 5s;
       animation-fill-mode: forwards;
     }
+
+    @media (max-width: $phone-max-width) {
+      order: 3;
+      margin: 64px 32px;
+    }
   }
 
   &__players-list {
     width: 200px;
     margin: 16px 16px 0 64px;
+
+    @media (max-width: $phone-max-width) {
+      display: none;
+    }
+
+    @media (max-width: calc($desktop-min-width - 1px)) {
+      margin-left: 16px;
+    }
   }
 }
 
@@ -139,6 +170,7 @@ sources.forEach((source, index) => {
   from {
     opacity: 0%;
   }
+
   to {
     opacity: 100%;
   }