Fix movie spinner (#29)

Rabrennie · Mar 9, 2024 · bf630b1 · bf630b1
1 parent 52f5b89
commit bf630b1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/src/lib/components/Spinner/Spinner.stories.svelte b/src/lib/components/Spinner/Spinner.stories.svelte
@@ -21,6 +21,22 @@
             'https://i.scdn.co/image/ab67616d00001e021172e6fea73f73597a3e7fa6',
             'https://i.scdn.co/image/ab67616d00001e02863f4540e18c97fd196d1116'
         ],
-        target: 0
+        target: 0,
+        type: 'albums'
+    }}
+/>
+
+<Story
+    name="Movies"
+    args={{
+        items: [
+            'https://m.media-amazon.com/images/M/MV5BNDIzMTk4NDYtMjg5OS00ZGI0LWJhZDYtMzdmZGY1YWU5ZGNkXkEyXkFqcGdeQXVyMTI5NzUyMTIz._V1_SX300.jpg',
+            'https://m.media-amazon.com/images/M/MV5BOGZhM2FhNTItODAzNi00YjA0LWEyN2UtNjJlYWQzYzU1MDg5L2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg',
+            'https://m.media-amazon.com/images/M/MV5BOGZhM2FhNTItODAzNi00YjA0LWEyN2UtNjJlYWQzYzU1MDg5L2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg',
+            'https://m.media-amazon.com/images/M/MV5BOGZhM2FhNTItODAzNi00YjA0LWEyN2UtNjJlYWQzYzU1MDg5L2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg',
+            'https://m.media-amazon.com/images/M/MV5BOGZhM2FhNTItODAzNi00YjA0LWEyN2UtNjJlYWQzYzU1MDg5L2ltYWdlL2ltYWdlXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg'
+        ],
+        target: 1,
+        type: 'movies'
     }}
 />
diff --git a/src/lib/components/Spinner/Spinner.svelte b/src/lib/components/Spinner/Spinner.svelte
@@ -26,6 +26,7 @@
 
     export let items: string[] = [];
     export let target: number = 0;
+    export let type: 'albums' | 'movies' = 'albums';
 
     let myEl: HTMLDivElement;
 
@@ -63,7 +64,7 @@
                 <image
                     href={item}
                     height={500}
-                    width={500}
+                    width={type === 'albums' ? 500 : 750}
                     x={0}
                     y={0}
                     transform=""
@@ -73,10 +74,12 @@
                 />
                 <image
                     href={item}
-                    height={250}
-                    width={250}
-                    x={250}
-                    y={Math.min(250, (positions[i][0].y + positions[i][1].y) / 2 - 125)}
+                    height={type === 'albums' ? 250 : 400}
+                    width={type === 'albums' ? 250 : 400}
+                    x={type === 'albums' ? 250 : 175}
+                    y={type == 'albums'
+                        ? Math.min(250, (positions[i][0].y + positions[i][1].y) / 2 - 125)
+                        : Math.min(250, (positions[i][0].y + positions[i][1].y) / 2 - 200)}
                     transform=""
                     clip-path="url(#clip{i})"
                 />

diff --git a/src/routes/room/[room]/SpinnerModal.svelte b/src/routes/room/[room]/SpinnerModal.svelte
@@ -15,6 +15,7 @@
             items={choices.map((c) => c.choice.imageUrl)}
             target={choices.findIndex((c) => c.userId === eliminating.userId)}
             on:complete
+            type={$roomStore?.type}
         />
     </div>
 </Modal>