settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: add states (selectable, selected) to SourceCard

Browse Source
This commit is contained in:
Settel 2022-08-29 23:29:46 +02:00
parent cc12d27c46
commit 1412310bc2
3 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/assets/css/colors.scss
View File

@ -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;

5
client/src/components/Playground.vue
View File

@ -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">

30
client/src/components/SourceCard.vue
View File

@ -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>