i18n: automatyczny język + ręczny przełącznik

src/components/CustomGameModal.vue

@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
+import { useI18n } from '@/composables/useI18n';
 
 const emit = defineEmits(['close']);
 const store = usePuzzleStore();
+const { t } = useI18n();
 
 const customSize = ref(10);
 const errorMsg = ref('');
@@ -11,7 +13,7 @@ const errorMsg = ref('');
 const confirm = () => {
   const size = parseInt(customSize.value);
   if (isNaN(size) || size < 5 || size > 100) {
-    errorMsg.value = 'Rozmiar musi być między 5 a 100!';
+    errorMsg.value = t('custom.sizeError');
     return;
   }
   
@@ -23,8 +25,8 @@ const confirm = () => {
 <template>
   <div class="modal-overlay" @click.self="emit('close')">
     <div class="modal glass-panel">
-      <h2>GRA WŁASNA</h2>
-      <p>Wprowadź rozmiar siatki (5 - 100):</p>
+      <h2>{{ t('custom.title') }}</h2>
+      <p>{{ t('custom.prompt') }}</p>
       
       <div class="input-group">
         <input 
@@ -39,8 +41,8 @@ const confirm = () => {
       <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
 
       <div class="actions">
-        <button class="btn-neon secondary" @click="emit('close')">Anuluj</button>
-        <button class="btn-neon" @click="confirm">Start</button>
+        <button class="btn-neon secondary" @click="emit('close')">{{ t('custom.cancel') }}</button>
+        <button class="btn-neon" @click="confirm">{{ t('custom.start') }}</button>
       </div>
     </div>
   </div>

src/components/FixedBar.vue

@@ -2,9 +2,11 @@
 import { computed, ref } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useTimer } from '@/composables/useTimer';
+import { useI18n } from '@/composables/useI18n';
 
 const store = usePuzzleStore();
 const { formatTime } = useTimer();
+const { t } = useI18n();
 
 const isVisible = ref(false);
 const isProgressVisible = ref(true); // Toggle for progress percentage
@@ -33,14 +35,14 @@ const toggleVisibility = () => {
   <div id="fixed-bar" :class="{ visible: isVisible }">
     <div class="fixed-content">
       <div class="fixed-stat">
-        <span>Czas:</span>
+        <span>{{ t('fixed.time') }}</span>
         <span>{{ formattedTime }}</span>
       </div>
       
       <div class="fixed-stat">
-        <span>Postęp:</span>
+        <span>{{ t('fixed.progress') }}</span>
         <span style="min-width: 60px; text-align: right;">{{ progressText }}</span>
-        <button class="btn-eye" @click="toggleVisibility" :title="isProgressVisible ? 'Ukryj' : 'Pokaż'">
+        <button class="btn-eye" @click="toggleVisibility" :title="isProgressVisible ? t('fixed.hide') : t('fixed.show')">
            <span v-if="isProgressVisible">👁️</span>
            <span v-else>🔒</span>
         </button>

src/components/GameActions.vue

@@ -1,7 +1,9 @@
 <script setup>
 import { usePuzzleStore } from '@/stores/puzzle';
+import { useI18n } from '@/composables/useI18n';
 
 const store = usePuzzleStore();
+const { t } = useI18n();
 
 function handleNewRandom() {
     // If currently custom, regenerate custom.
@@ -16,9 +18,9 @@ function handleNewRandom() {
 
 <template>
   <div class="game-actions">
-    <button class="btn-neon secondary" @click="store.resetGame">RESET</button>
-    <button class="btn-neon secondary" @click="handleNewRandom">NOWA LOSOWA</button>
-    <button class="btn-neon secondary" @click="store.undo">COFNIJ</button>
+    <button class="btn-neon secondary" @click="store.resetGame">{{ t('actions.reset') }}</button>
+    <button class="btn-neon secondary" @click="handleNewRandom">{{ t('actions.random') }}</button>
+    <button class="btn-neon secondary" @click="store.undo">{{ t('actions.undo') }}</button>
   </div>
 </template>
 

src/components/GuidePanel.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { useSolver } from '@/composables/useSolver';
+import { useI18n } from '@/composables/useI18n';
 
 const { 
     isPlaying, 
@@ -9,6 +10,7 @@ const {
     togglePlay, 
     changeSpeed 
 } = useSolver();
+const { t } = useI18n();
 </script>
 
 <template>
@@ -17,15 +19,15 @@ const {
     
     <div class="guide-controls">
       <button class="btn-neon small" @click="togglePlay" :class="{ active: isPlaying }">
-        {{ isPlaying ? 'PAUSE' : 'PLAY' }}
+        {{ isPlaying ? t('guide.pause') : t('guide.play') }}
       </button>
       
       <button class="btn-neon small" @click="step" :disabled="isPlaying">
-        STEP
+        {{ t('guide.step') }}
       </button>
       
       <button class="btn-neon small" @click="changeSpeed">
-        SPEED: {{ speedLabel }}
+        {{ t('guide.speed') }}: {{ speedLabel }}
       </button>
     </div>
   </div>

src/components/LevelSelector.vue

@@ -1,13 +1,16 @@
 <script setup>
+import { computed } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
+import { useI18n } from '@/composables/useI18n';
 
 const store = usePuzzleStore();
+const { t } = useI18n();
 
-const levels = [
-  { id: 'easy', label: 'ŁATWY 5X5' },
-  { id: 'medium', label: 'ŚREDNI 10X10' },
-  { id: 'hard', label: 'TRUDNY 15X15' }
-];
+const levels = computed(() => [
+  { id: 'easy', label: t('level.easy') },
+  { id: 'medium', label: t('level.medium') },
+  { id: 'hard', label: t('level.hard') }
+]);
 
 const emit = defineEmits(['open-custom', 'toggle-guide']);
 </script>
@@ -29,14 +32,14 @@ const emit = defineEmits(['open-custom', 'toggle-guide']);
         :class="{ active: store.currentLevelId === 'custom' }"
         @click="emit('open-custom')"
     >
-        WŁASNY
+        {{ t('level.custom') }}
     </button>
 
     <button 
         class="btn-neon guide-btn"
         @click="emit('toggle-guide')"
     >
-        GUIDE ❓
+        {{ t('level.guide') }}
     </button>
   </div>
 </template>
@@ -61,4 +64,4 @@ const emit = defineEmits(['open-custom', 'toggle-guide']);
 .guide-btn {
   /* Specific styling for guide if needed */
 }
-</style>
+</style>

src/components/StatusPanel.vue

@@ -2,9 +2,11 @@
 import { computed } from 'vue';
 import { usePuzzleStore } from '@/stores/puzzle';
 import { useTimer } from '@/composables/useTimer';
+import { useI18n } from '@/composables/useI18n';
 
 const store = usePuzzleStore();
 const { formatTime } = useTimer();
+const { t } = useI18n();
 
 const formattedTime = computed(() => formatTime(store.elapsedTime));
 const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
@@ -13,17 +15,17 @@ const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
 <template>
   <div class="status-panel glass-panel">
     <div class="stat-item">
-      <span class="label">CZAS</span>
+      <span class="label">{{ t('status.time') }}</span>
       <span class="value">{{ formattedTime }}</span>
     </div>
     
     <div class="stat-item">
-      <span class="label">RUCHY</span>
+      <span class="label">{{ t('status.moves') }}</span>
       <span class="value">{{ store.moves }}</span>
     </div>
     
     <div class="stat-item">
-      <span class="label">POSTĘP</span>
+      <span class="label">{{ t('status.progress') }}</span>
       <div class="progress-wrapper">
          <span class="value small">{{ progressText }}</span>
          <span class="eye-icon">👁️</span>
@@ -83,4 +85,4 @@ const progressText = computed(() => `${store.progressPercentage.toFixed(3)}%`);
   opacity: 0.7;
   cursor: pointer;
 }
-</style>
+</style>

src/components/WinModal.vue

@@ -2,8 +2,10 @@
 import { onMounted, onUnmounted, ref } from 'vue';
 import { Fireworks } from 'fireworks-js';
 import { usePuzzleStore } from '@/stores/puzzle';
+import { useI18n } from '@/composables/useI18n';
 
 const store = usePuzzleStore();
+const { t } = useI18n();
 const fireworksRef = ref(null);
 let fireworksInstance = null;
 let audioContext = null;
@@ -110,18 +112,18 @@ onUnmounted(() => {
   <div class="modal-overlay" @click.self="handleClose">
     <div ref="fireworksRef" class="fireworks-layer"></div>
     <div class="modal glass-panel">
-      <h2>GRATULACJE!</h2>
-      <p>Rozwiązałeś zagadkę!</p>
+      <h2>{{ t('win.title') }}</h2>
+      <p>{{ t('win.message') }}</p>
       
       <div class="stats">
         <div class="stat">
-          <span>Czas:</span>
+          <span>{{ t('win.time') }}</span>
           <strong>{{ store.elapsedTime }}s</strong>
         </div>
       </div>
 
       <div class="actions">
-        <button class="btn-neon" @click="store.resetGame">Zagraj Ponownie</button>
+        <button class="btn-neon" @click="store.resetGame">{{ t('win.playAgain') }}</button>
       </div>
     </div>
   </div>