From 1412310bc261dadccbf2770a6e0f16be0b32727d Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Mon, 29 Aug 2022 23:29:46 +0200
Subject: [PATCH] feat: add states (selectable, selected) to SourceCard

---
 client/src/assets/css/colors.scss    | 12 +++++++++++
 client/src/components/Playground.vue |  5 ++++-
 client/src/components/SourceCard.vue | 30 +++++++++++++++++++++++++---
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/client/src/assets/css/colors.scss b/client/src/assets/css/colors.scss
index 286ed64..4d58a8a 100644
--- a/client/src/assets/css/colors.scss
+++ b/client/src/assets/css/colors.scss
@@ -67,6 +67,18 @@ $quote-button-hover-background-color: $button-hover-background-color;
 $quote-button-hover-text-color: $quote-button-text-color;
 $quote-button-hover-border: none;
 
+// Source Card
+$sourcecard-background-color: $background-primary-color;
+$sourcecard-text-color: $text-primary-color;
+$sourcecard-border: 3px solid #ffffff;
+$sourcecard-hover-background-color: #ffffff;
+$sourcecard-hover-text-color: $background-primary-color;
+$sourcecard-hover-border: 3px solid #ffffff;
+$sourcecard-selected-background-color: #ffffff;
+$sourcecard-selected-text-color: $background-primary-color;
+$sourcecard-selected-border: 3px solid #ffffff;
+$sourcecard-selected-box-shadow: 0 0 10px #ffffff;
+
 // Engine Debug
 $debug-background-color: lighten($background-primary-color, 10%);
 $debug-border: none;
diff --git a/client/src/components/Playground.vue b/client/src/components/Playground.vue
index db120fd..4aae135 100644
--- a/client/src/components/Playground.vue
+++ b/client/src/components/Playground.vue
@@ -2,7 +2,8 @@
   <div class="playground__container">
     <div class="playground__area">
       <div class="playground__sources">
-        <SourceCard v-for="source in round.sources" :key="source.id" :source="source" />
+        <SourceCard v-for="source in round.sources" :key="source.id" :source="source" :selectable="true"
+          :selected="selection == source.id" @click="selection=source.id"/>
       </div>
       <div class="playground__spacer" />
       <div class="playground__quote">
@@ -16,6 +17,7 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import { usePlayersStore } from '@/stores/PlayersStore'
 import { useRoundStore } from '@/stores/RoundStore'
 
@@ -24,6 +26,7 @@ const round = useRoundStore().round
 const quote = {
   quote: round.quote,
 }
+const selection = ref('')
 </script>
 
 <style lang="scss">
diff --git a/client/src/components/SourceCard.vue b/client/src/components/SourceCard.vue
index b839fb4..c98bd41 100644
--- a/client/src/components/SourceCard.vue
+++ b/client/src/components/SourceCard.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="source-card__container">
-    {{ source.name }}
+  <div class="source-card__container"
+    :class="{ 'source-card__container__selectable': selectable, 'source-card__container__selected': selected }">
+    {{  source.name  }}
   </div>
 </template>
 
@@ -10,19 +11,42 @@ defineProps<{
     id: string
     name: string
   },
+  selectable?: boolean,
+  selected?: boolean,
 }>()
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .source-card {
   &__container {
     display: flex;
     width: 180px;
     height: 40px;
-    border: 3px solid white;
+    border: $sourcecard-border;
     border-radius: 8px;
     justify-content: center;
     align-items: center;
+    background-color: $sourcecard-background-color;
+    color: $sourcecard-text-color;
+
+    &__selectable {
+      cursor: pointer;
+      &:hover {
+        background-color: $sourcecard-hover-background-color;
+        border: $sourcecard-hover-border;
+        color: $sourcecard-hover-text-color;
+      }
+      &.source-card__container__selected {
+        background-color: $sourcecard-selected-background-color;
+        border: $sourcecard-selected-border;
+        color: $sourcecard-selected-text-color;
+        box-shadow: $sourcecard-selected-box-shadow;
+        cursor: default;
+      }
+    }
+
   }
 }
 </style>
\ No newline at end of file