1 files changed, 21 insertions, 13 deletions
diff --git a/src/lib/List/MediaRoulette.svelte b/src/lib/List/MediaRoulette.svelte
index 3fbc89d6..dc9a2269 100644
--- a/src/lib/List/MediaRoulette.svelte
+++ b/src/lib/List/MediaRoulette.svelte
@@ -3,6 +3,7 @@ import type { Media } from "$lib/Data/AniList/media";
 import ParallaxImage from "$lib/Image/ParallaxImage.svelte";
 import { outboundLink } from "$lib/Media/links";
 import settings from "$stores/settings";
+import locale from "$stores/locale";
 import { mediaTitle } from "./mediaTitle";
 
 interface Props {
@@ -96,14 +97,16 @@ const handleOverlayClick = (e: MouseEvent) => {
   }}
 >
   <div class="roulette-container card {isClosing ? 'fade-out' : 'fade-in'}">
-    <button class="close-button" onclick={handleClose} aria-label="Close roulette">&times;</button>
+    <button class="close-button" onclick={handleClose} aria-label={$locale().lists.roulette?.closeAriaLabel}
+      >&times;</button
+    >
 
     <h3 class="roulette-title">
-      {type === 'anime' ? 'Watch' : 'Read'} Roulette
+      {type === 'anime' ? $locale().lists.roulette?.watchTitle : $locale().lists.roulette?.readTitle}
     </h3>
 
     {#if media.length === 0}
-      <p>No media available for roulette.</p>
+      <p>{$locale().lists.roulette?.noMedia}</p>
     {:else}
       <div class="roulette-display" class:spinning={isSpinning} class:result={showResult}>
         {#if currentMedia}
@@ -129,13 +132,18 @@ const handleOverlayClick = (e: MouseEvent) => {
                   target="_blank"
                   class="view-link"
                 >
-                  View on {$settings.displayOutboundLinksTo === 'anilist'
-                    ? 'AniList'
-                    : $settings.displayOutboundLinksTo === 'livechartme'
-                      ? 'LiveChart.me'
-                      : $settings.displayOutboundLinksTo === 'animeschedule'
-                        ? 'AnimeSchedule'
-                        : 'MyAnimeList'}
+                  {$locale({
+                    values: {
+                      site:
+                        $settings.displayOutboundLinksTo === 'anilist'
+                          ? 'AniList'
+                          : $settings.displayOutboundLinksTo === 'livechartme'
+                            ? 'LiveChart.me'
+                            : $settings.displayOutboundLinksTo === 'animeschedule'
+                              ? 'AnimeSchedule'
+                              : 'MyAnimeList'
+                    }
+                  }).lists.roulette?.viewOn}
                 </a>
               {/if}
             </div>
@@ -145,11 +153,11 @@ const handleOverlayClick = (e: MouseEvent) => {
 
       <div class="roulette-actions">
         {#if !isSpinning && !showResult}
-          <button onclick={startRoulette}>Spin!</button>
+          <button onclick={startRoulette}>{$locale().lists.roulette?.spin}</button>
         {:else if showResult}
-          <button onclick={startRoulette}>Spin Again</button>
+          <button onclick={startRoulette}>{$locale().lists.roulette?.spinAgain}</button>
         {:else}
-          <button disabled>Spinning ...</button>
+          <button disabled>{$locale().lists.roulette?.spinning}</button>
         {/if}
       </div>
     {/if}