Skip to content
This repository was archived by the owner on Jun 18, 2025. It is now read-only.

Commit b8a7fd8

Browse files
RabrennieRabrennie
authored
Update the design of choices, fix layout issues and animations (#13)
1 parent b56ede4 commit b8a7fd8

File tree

3 files changed

+258
-162
lines changed

3 files changed

+258
-162
lines changed

‎src/lib/components/SelectedAlbum/SelectedAlbum.svelte

Lines changed: 80 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,102 @@
11
<script lang="ts">
2-
import { stringToHslColor } from '$lib/utils/stringToHslColor';
3-
import Confetti from '$lib/components/Confetti/Confetti.svelte';
42
import Intersect from '$lib/actions/Intersect';
53
64
export let name: string;
7-
export let albumLink: string = 'https://open.spotify.com/album/5Z9iiGl2FcIfa3BMiv6OIw';
8-
export let albumName: string = 'Not Selected';
9-
export let artistName: string = 'Not Selected';
10-
export let albumImageUrl: string | null = null;
5+
export let url = 'https://open.spotify.com/album/5Z9iiGl2FcIfa3BMiv6OIw';
6+
export let title = 'Not Selected';
7+
export let subtitle = 'Not Selected';
8+
export let image: string | null = null;
119
export let cssGradient: string;
12-
export let eliminated: boolean = false;
13-
export let confetti: boolean = false;
10+
export let avatar = '';
11+
export let small = false;
12+
export let winner = false;
1413
1514
let imageLoaded = false;
1615
17-
const emojis = ['❌', '👎', '🙅‍♀️', '⛔️', '🙅', '🙅‍♂️', '😭', '🚫', '💀'];
18-
const eliminatedEmoji = emojis[Math.floor(Math.random() * emojis.length)];
19-
2016
async function copy() {
21-
await navigator.clipboard.writeText(albumName);
17+
await navigator.clipboard.writeText(title);
2218
}
2319
2420
function loadImage() {
2521
const img = new Image();
26-
img.onload = () => imageLoaded = true;
27-
img.src = albumImageUrl ?? '';
22+
img.onload = () => (imageLoaded = true);
23+
img.src = image ?? '';
2824
}
25+
26+
$: height = small ? 'h-[4.5rem]' : 'h-auto sm:h-40';
27+
$: width = small ? 'w-[4.5rem]' : 'w-full sm:w-40';
2928
</script>
3029

31-
<div class="indicator" use:Intersect={{ options: { once: true }, onIntersect: loadImage }}>
32-
<div
33-
class="indicator-item indicator-top indicator-center badge text-primary-content"
34-
style="background-color: {stringToHslColor(name, 55, 60)}"
35-
>
36-
{name}
37-
</div>
38-
<div class="w-52 {eliminated ? 'opacity-50' : ''} group">
39-
{#if eliminated}
40-
<div class="absolute w-52 h-52 flex items-center justify-center">
41-
<div class="text-9xl select-none drop-shadow-[0_20px_20px_rgba(0,0,0,1)]">
42-
{eliminatedEmoji}
30+
<div
31+
class="{height} overflow-hidden flex rounded {small
32+
? 'items-center flex-row'
33+
: 'flex-col sm:flex-row'} shadow shadow-slate-900 relative group"
34+
use:Intersect={{ options: { once: true }, onIntersect: loadImage }}
35+
>
36+
{#if cssGradient}
37+
<div
38+
class="z-0 bg-slate-300 bg-cover w-full h-full album-image blur-xl scale-150 bg-no-repeat shrink-0 absolute top-0 left-0 opacity-30"
39+
style={`background-image: ${cssGradient}; background-position: 0 0 ,0 33.33333333333333%,0 66.66666666666666%,0 100%; background-size: 100% 25%;`}
40+
/>
41+
{/if}
42+
{#if cssGradient && !imageLoaded}
43+
<div
44+
class="z-10 bg-slate-900 bg-cover {width} {height} album-image blur-xl scale-125 bg-no-repeat shrink-0"
45+
style={`background-image: ${cssGradient}; background-position: 0 0 ,0 33.33333333333333%,0 66.66666666666666%,0 100%; background-size: 100% 25%;`}
46+
/>
47+
{/if}
48+
{#if imageLoaded}
49+
<a href={url} target="_blank" rel="noreferrer" class="z-10">
50+
<div
51+
class="z-10 bg-slate-300 bg-cover {height} {width} album-image bg-no-repeat shrink-0 aspect-square"
52+
style={`background-image: url(${image});`}
53+
/>
54+
</a>
55+
{/if}
56+
<div class="z-10 flex justify-between w-full items-center px-9">
57+
<div class="flex {small ? '' : 'py-6 flex-col h-full sm:gap-0 gap-4'} w-full justify-between">
58+
<div>
59+
<div class="flex gap-2">
60+
<a
61+
href={url}
62+
target="_blank"
63+
rel="noreferrer"
64+
class="text-white hover:underline">{title}</a
65+
>
66+
<button
67+
on:click={copy}
68+
class="opacity-0 group-hover:opacity-100 transition-opacity"
69+
><svg
70+
xmlns="http://www.w3.org/2000/svg"
71+
fill="none"
72+
viewBox="0 0 24 24"
73+
stroke-width="1.5"
74+
stroke="currentColor"
75+
class="w-3 h-3"
76+
>
77+
<path
78+
stroke-linecap="round"
79+
stroke-linejoin="round"
80+
d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
81+
/>
82+
</svg>
83+
</button>
4384
</div>
85+
<div class="text-sm">{subtitle}</div>
4486
</div>
45-
{/if}
46-
<a
47-
href={albumLink}
48-
class="w-52 h-52 overflow-hidden flex group-hover:scale-105 transition-transform"
49-
>
50-
<Confetti fireOnLoad={confetti}>
51-
{#if cssGradient && !imageLoaded}
52-
<div
53-
class="bg-slate-300 bg-cover w-52 h-52 shadow-lg shadow-slate-900 mb-4 album-image blur-xl scale-125 bg-no-repeat"
54-
style={`background-image: ${cssGradient}; background-position: 0 0 ,0 33.33333333333333%,0 66.66666666666666%,0 100%; background-size: 100% 25%;`}
55-
/>
56-
{/if}
57-
{#if imageLoaded}
58-
<div
59-
class="bg-slate-300 bg-cover w-52 h-52 shadow-lg shadow-slate-900 mb-4 album-image bg-no-repeat"
60-
style={`background-image: url(${albumImageUrl});`}
61-
/>
87+
<div class="text-white flex gap-4 items-center">
88+
<div class="avatar">
89+
<div class="w-9 rounded-full">
90+
<img src={avatar} alt={name} />
91+
</div>
92+
</div>
93+
{#if !small}
94+
<div class="text-sm">{name}</div>
6295
{/if}
63-
</Confetti>
64-
</a>
65-
66-
<div class="text-primary-content flex items-center gap-x-2">
67-
<div>{albumName}</div>
68-
<button on:click={copy} class="opacity-0 group-hover:opacity-100 transition-opacity"
69-
><svg
70-
xmlns="http://www.w3.org/2000/svg"
71-
fill="none"
72-
viewBox="0 0 24 24"
73-
stroke-width="1.5"
74-
stroke="currentColor"
75-
class="w-3 h-3"
76-
>
77-
<path
78-
stroke-linecap="round"
79-
stroke-linejoin="round"
80-
d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
81-
/>
82-
</svg>
83-
</button>
96+
</div>
8497
</div>
85-
<div class="text-base-content text-sm">{artistName}</div>
98+
{#if winner}
99+
<div class="text-3xl pl-4">🏆</div>
100+
{/if}
86101
</div>
87102
</div>

0 commit comments

Comments
 (0)