ithinkimdoneeee

src/components/shared/Settings/SettingsPane.tsx

@@ -1,7 +1,14 @@
 import {Fragment} from "react"
-import {SettingsPropriety, SettingUpdate, SettingUpdateKey, SettingVolumeUpdate} from "$types/SettingsPropriety"
+import {
+    SettingsCategory,
+    SettingsPropriety,
+    SettingUpdate,
+    SettingUpdateKey,
+    SettingVolumeUpdate
+} from "$types/SettingsPropriety"
 import SettingsRow from "./SettingsRow"
 import s from './Settings.module.css'
+import {useTranslation} from "react-i18next";
 
 interface SettingsPaneProps {
     settings: {
@@ -12,14 +19,14 @@ interface SettingsPaneProps {
 }
 
 interface Group {
-    category: string,
+    category: SettingsCategory,
     settings: {
         [key: string]: SettingsPropriety
     }
 }
 
 export function SettingsPane({settings, changeVolume, onUpdate}: SettingsPaneProps) {
-
+    const {t} = useTranslation(['settings'])
     //group the settings by the category propriety
     const map = new Map<String, Group>();
     Object.entries(settings).forEach(([key, setting]) => {
@@ -37,7 +44,7 @@ export function SettingsPane({settings, changeVolume, onUpdate}: SettingsPanePro
             <Fragment key={group.category}>
                 <div className="column">
                     <h1 className={s['settings-group-title']}>
-                        {group.category}
+                        {t(`category.${group.category}`)}
                     </h1>
                     {Object.entries(group.settings).map(([key, setting]) =>
                         <SettingsRow

src/components/shared/Settings/SettingsRow.tsx

@@ -8,6 +8,7 @@ import {useTheme} from '$lib/Hooks/useTheme'
 import {SettingsPropriety, SettingUpdate, SettingUpdateKey, SettingVolumeUpdate} from '$types/SettingsPropriety'
 import {hasTooltip, Tooltip} from '$cmp/shared/Utility/Tooltip'
 import s from './Settings.module.css'
+import {useTranslation} from "react-i18next";
 
 interface SettingsRowProps {
     data: SettingsPropriety,
@@ -17,6 +18,7 @@ interface SettingsRowProps {
 }
 
 function SettingsRow({data, update, objKey, changeVolume}: SettingsRowProps) {
+    const {t} = useTranslation(['settings'])
     const [currentValue, setValue] = useState(data.value)
     const [volume, setVolume] = useState(data.type === 'instrument' ? data.volume : 0)
     const [theme] = useTheme()
@@ -40,10 +42,10 @@ function SettingsRow({data, update, objKey, changeVolume}: SettingsRowProps) {
     >
 
         <div className={hasTooltip(data.tooltip)} style={{flex: '1'}}>
-            {data.name}
+             {t(`props.${data.name}`)}
             {data.tooltip &&
                 <Tooltip style={{width: '12rem'}}>
-                    {data.tooltip}
+                    {t(`props.${data.tooltip}`)}
                 </Tooltip>
             }
         </div>

src/i18n/translations/en/index.ts

@@ -162,8 +162,118 @@ export const i18n_en = {
                             data
                             when cache is automatically cleared. To get persistent storage, add the app to the home
                             screen.
-                            If that still doesn't work, make sure you do a backup often`
+                            If that still doesn't work, make sure you do a backup often`,
+        props: {
+            composer_bpm: "Bpm",
+            composer_bpm_description: "Beats per minute, the speed of the song. Usually the BPM inside the app should be 4 times the BPM of the song you are trying to compose",
+            composer_base_pitch: "Base pitch",
+            composer_base_pitch_description: "The main pitch of the song",
+            composer_beat_marks: "Beat marks",
+            composer_beat_marks_description: "The number of beats per measure, 3/4 is 3 beats per measure, 4/4 is 4 beats per measure",
+            composer_note_name_type: "Note name type",
+            composer_note_name_type_description: "The type of text which will be written on the note",
+            composer_columns_per_canvas: "Number of visible columns",
+            composer_columns_per_canvas_description: "How many columns are visible at a time, more columns might cause lag",
+            composer_reverb: "Base reverb (cave mode)",
+            composer_reverb_description: "Makes it sound like you are in a cave, this is the default value applied to every instrument",
+            composer_autosave: "Autosave changes",
+            composer_autosave_description: "Autosaves the changes to a song every 5 edits, and when you change page/change song",
+            composer_use_keyboard_side_buttons: "Put next/previous column buttons around keyboard",
+            composer_use_keyboard_side_buttons_description: "Puts the buttons to select the next/previous column on the left/right of the keyboard",
+            composer_sync_tabs: "Autoplay in all tabs (pc only)",
+            composer_sync_tabs_description: "Advanced feature, it syncs other browser tabs to all play at the same time",
+            composer_lookahead_time: "Lookahead time",
+            composer_lookahead_time_description: "How many milliseconds ahead the composer will look for notes to play, a higher value improves playback accuracy but feels less responsive",
+
+            player_instrument: "Instrument",
+            player_instrument_description: "The main (first) instrument of the player, will also be saved in the song you record",
+            player_pitch: "Pitch",
+            player_pitch_description: "The pitch of the player, will also be saved in the song you record",
+            player_bpm: "Bpm",
+            player_bpm_description: "Beats per minute, used by the metronome and will be used when converting the song with the composer",
+            player_sync_song_data: "Auto sync the song's instruments and pitch",
+            player_sync_song_data_description: "Whenever you load a song, the instruments and pitch of that song will be loaded too",
+            player_metronome_beats: "Metronome beats",
+            player_metronome_beats_description: "After how many times a stronger beat is played",
+            player_metronome_volume: "Metronome volume",
+            player_metronome_volume_description: "The volume of the metronome",
+            player_reverb: "Reverb (cave mode)",
+            player_reverb_description: "Makes it sound like you are in a cave",
+            player_note_name_type: "Note name type",
+            player_note_name_type_description: "The type of text which will be written on the note",
+            player_keyboard_size: "Keyboard size",
+            player_keyboard_size_description: "Scales the keyboard size",
+            player_keyboard_y_position: "Keyboard vertical position",
+            player_keyboard_y_position_description: "The vertical position of the keyboard",
+            player_approach_speed: "Approach Rate (AR)",
+            player_approach_speed_description: "The time between when the notes appear and when they reach the end (in ms)",
+            player_note_animation: "Note animation",
+            player_note_animation_description: "Toggle the animation of the notes (will reduce performance)",
+            player_show_visual_sheet: "Show visual sheet",
+            player_show_visual_sheet_description: "Show the sheet above the keyboard (might reduce performance)",
+
+            vsrg_composer_keys: "Keys",
+            vsrg_composer_keys_description: "How many keys the song has",
+            vsrg_composer_bpm: "Bpm",
+            vsrg_composer_bpm_description: "Beats per minute, the speed of the song",
+            vsrg_composer_pitch: "Base pitch",
+            vsrg_composer_pitch_description: "The main pitch of the song",
+            vsrg_composer_is_vertical: "Vertical editor",
+            vsrg_composer_is_vertical_description: "If the editor is set horizontally or vertically",
+            vsrg_composer_max_fps: "Max FPS (high values could lag)",
+            vsrg_composer_max_fps_description: "The FPS limiter of the editor, higher values could more lag",
+            vsrg_scroll_snap: "Snap scroll to snap point",
+            vsrg_scroll_snap_description: "When scrolling, snap the timestamp to the closest snap point",
+            vsrg_composer_autosave: "Autosave changes",
+            vsrg_composer_autosave_description: "Autosaves the changes to a song every 5 edits, and when you change page/change song",
+            vsrg_composer_difficulty: "Difficulty",
+            vsrg_composer_difficulty_description: "Higher values means the notes need to be pressed more accurately",
+
+            vsrg_player_approach_time: "Approaching time",
+            vsrg_player_approach_time_description: "The time between when the notes appear and when they reach the end (in ms)",
+            vsrg_player_max_fps: "Max FPS",
+            vsrg_player_max_fps_description: "The FPS limiter of the player, too high values could cause lag or stutters",
+            vsrg_player_keyboard_layout: "Keyboard layout",
+            vsrg_player_keyboard_layout_description: "The keyboard layout of the player",
+            vsrg_player_offset: "Audio Offset",
+            vsrg_player_offset_description: "An offset to the audio if it plays too early/late (in ms)",
+            vsrg_player_vertical_offset: "Vertical position",
+            vsrg_player_vertical_offset_description: "The Vertical offset for the line layout",
+            vsrg_player_horizontal_offset: "Horizontal position",
+            vsrg_player_horizontal_offset_description: "The Horizontal offset for the line layout",
+
+            zen_instrument: "Instrument",
+            zen_instrument_description: "The main instrument of the keyboard",
+            zen_pitch: "Pitch",
+            zen_pitch_description: "The pitch of the keyboard",
+            zen_metronome_beats: "Metronome beats",
+            zen_metronome_beats_description: "After how many times a stronger beat is played",
+            zen_metronome_volume: "Metronome volume",
+            zen_metronome_volume_description: "The volume of the metronome",
+            zen_metronome_bpm: "Metronome bpm",
+            zen_metronome_bpm_description: "The bpm of the metronome",
+            zen_reverb: "Reverb (cave mode)",
+            zen_reverb_description: "Makes it sound like you are in a cave",
+            zen_note_name_type: "Note name type",
+            zen_note_name_type_description: "The type of text which will be written on the note",
+            zen_keyboard_size: "Keyboard size",
+            zen_keyboard_size_description: "Scales the keyboard size",
+            zen_keyboard_y_position: "Vertical position",
+            zen_keyboard_y_position_description: "The vertical position of the keyboard",
+            zen_keyboard_spacing: "Keyboard spacing",
+            zen_keyboard_spacing_description: "The spacing between the notes",
+        },
+        category: {
+            'keyboard': "Keyboard",
+            'metronome': "Metronome",
+            'layout_settings': "Layout settings",
+            "player_settings": "Player settings",
+            "song_settings": "Song settings",
+            "composer_settings": "Composer settings",
+            "editor_settings": "Editor settings",
+        }
     },
+
     zen_keyboard: {
         loading_instrument: "Loading instrument: {{instrument}}..."
     },
@@ -438,7 +548,4 @@ export const i18n_en = {
         move_down: "Move down",
         move_up: "Move up",
     }
-} as const
-
-
-
+} as const