feat: add English localization

Author: BachoSeven

demo/demo.jsx

@@ -4,7 +4,11 @@ import { Planimetrie } from '../src/element.jsx'
 import '../src/element.scss'
 
 const App = () => {
-    return <Planimetrie />
+    let lang = 'it'
+
+    const isEnglish = location.href.includes('/en')
+    if (isEnglish) lang = 'en'
+    return <Planimetrie lang={lang} />
 }
 
 render(<App />, document.body)

src/components/Buttons.jsx

@@ -3,9 +3,7 @@ import { useState } from 'preact/hooks'
 import { clsx } from '../lib/utils.js'
 import { GridAnimation } from './Animations.jsx'
 import { toChildArray } from 'preact'
-
-const FLOOR_LABELS = ['Piano Terra', '1° Piano', '2° Piano']
-const GROUP_LABELS = ['Edifici A e B', 'Edificio ex-Albergo']
+import { LocalizedString } from './LocalizedString.jsx'
 
 const LayerFloor = ({ label, viewportName, cameraToViewpoint, data: { viewpoint } }) => {
     return (
@@ -17,15 +15,20 @@ const LayerFloor = ({ label, viewportName, cameraToViewpoint, data: { viewpoint
             >
                 <LuEye size={16} />
             </div>
-            <div class="fix-text">{label}</div>
+            <div class="fix-text">
+                <LocalizedString name={label} />
+            </div>
         </div>
     )
 }
 
 const LayerGroup = ({ label, data: { floors }, viewportName, cameraToViewpoint }) => {
+    const FLOOR_LABELS = ['ground-floor', 'first-floor', 'second-floor']
     return (
         <div class="layer">
-            <div class="row">{label}</div>
+            <div class="row">
+                <LocalizedString name={label} />
+            </div>
             <div class="children">
                 {floors.map((floor, i) => (
                     <LayerFloor
@@ -103,6 +106,8 @@ export const Buttons = ({ planimetriaRef, reset, layerToggles: { dip, exdma }, s
         })
     }
 
+    const GROUP_LABELS = ['building-a-b', 'building-exdma']
+
     return (
         <div class="buttons">
             <CollapsibleIconPanel
@@ -111,10 +116,14 @@ export const Buttons = ({ planimetriaRef, reset, layerToggles: { dip, exdma }, s
             >
                 <LuLayers />
                 <div class="label">
-                    <div class="fix-text">Livelli</div>
+                    <div class="fix-text">
+                        <LocalizedString name="floors" />
+                    </div>
                 </div>
                 <div class="content">
-                    <div class="title">Dipartimento di Matematica</div>
+                    <div class="title">
+                        <LocalizedString name="dip" />
+                    </div>
                     <LayerGroup
                         label={GROUP_LABELS[0]}
                         data={dip}
@@ -132,7 +141,9 @@ export const Buttons = ({ planimetriaRef, reset, layerToggles: { dip, exdma }, s
             <CollapsibleIconButton onClick={onResetView}>
                 <LuHome />
                 <div class="label">
-                    <div class="fix-text">Reimposta Vista</div>
+                    <div class="fix-text">
+                        <LocalizedString name="reset-view" />
+                    </div>
                 </div>
             </CollapsibleIconButton>
             <CollapsibleIconPanel
@@ -144,19 +155,10 @@ export const Buttons = ({ planimetriaRef, reset, layerToggles: { dip, exdma }, s
                     <div class="fix-text">Help</div>
                 </div>
                 <div class="content">
-                    <div class="title">Come navigare la mappa</div>
-                    <ul>
-                        <li>Per spostare la mappa, trascina con il mouse o con un dito.</li>
-                        <li>Per zoomare, usa la rotellina del mouse o i gesti di pinch-to-zoom.</li>
-                        <li>Per ruotare, clicca e trascina con il tasto destro del mouse o con due dita.</li>
-                        <li>
-                            Per selezionare un piano, clicca sull'icona dell'occhio corrispondente dentro il
-                            pannello <LuLayers />.
-                        </li>
-                        <li>
-                            Per tornare alla vista iniziale, clicca su <LuHome />.
-                        </li>
-                    </ul>
+                    <div class="title">
+                        <LocalizedString name="help-title" />
+                    </div>
+                    <LocalizedString name="help-content" />
                 </div>
             </CollapsibleIconPanel>
         </div>

src/components/LocalizedString.jsx

@@ -0,0 +1,15 @@
+import { createContext } from 'preact'
+import { useContext } from 'preact/hooks'
+import i18n from '../i18n'
+
+export const LangContext = createContext('it')
+
+export const useLocalization = name => {
+    const lang = useContext(LangContext)
+    return i18n[name][lang]
+}
+
+export const LocalizedString = ({ name }) => {
+    const lang = useContext(LangContext)
+    return <>{i18n[name][lang]}</>
+}

src/components/Search.jsx

@@ -1,6 +1,9 @@
 import { LuSearch } from 'react-icons/lu'
 import { clsx } from '../lib/utils.js'
 import { useEventCallback, useFuse } from '../lib/hooks.js'
+import { useContext } from 'preact/hooks'
+import { LangContext, LocalizedString, useLocalization } from './LocalizedString.jsx'
+import i18n from '../i18n.jsx'
 
 const HighlightedText = ({ indices, value }) => {
     if (!indices) {
@@ -37,11 +40,13 @@ export const Search = ({ rooms, selectId, ...rest }) => {
         if (e.key === 'Escape') setQuery('')
     })
 
+    const searchPlaceholder = useLocalization('search-placeholder')
+
     return (
         <div class={clsx('search', rest?.class)}>
             <div class="search-field">
                 <input
-                    placeholder="Cerca il codice di una stanza o un professore..."
+                    placeholder={searchPlaceholder}
                     type="text"
                     value={query}
                     onInput={e => setQuery(e.target.value)}
@@ -85,7 +90,9 @@ export const Search = ({ rooms, selectId, ...rest }) => {
                     </div>
                 ) : (
                     <div class="search-results">
-                        <div class="no-result">Nessun risultato...</div>
+                        <div class="no-result">
+                            <LocalizedString name="no-result" />
+                        </div>
                     </div>
                 ))}
         </div>

src/components/Sidebar.jsx

@@ -1,39 +1,49 @@
 import { clsx } from '../lib/utils.js'
-
-const SIDEBAR_LABELS = {
-    buildings: {
-        ['A']: 'Edificio A',
-        ['B']: 'Edificio B',
-        ['X']: 'Ex-Albergo',
-    },
-    floors: {
-        ['0']: 'Piano terra',
-        ['1']: 'Primo piano',
-        ['2']: 'Secondo Piano',
-    },
-}
+import { LocalizedString } from './LocalizedString.jsx'
 
 export const Sidebar = ({ rooms, ...rest }) => {
+    const SIDEBAR_LABELS = {
+        buildings: {
+            ['A']: 'building-a',
+            ['B']: 'building-b',
+            ['X']: 'building-x',
+        },
+        floors: {
+            ['0']: 'ground-floor',
+            ['1']: 'first-floor',
+            ['2']: 'second-floor',
+        },
+    }
     return (
         <div class={clsx('sidebar', rest?.class)}>
             {rooms.map(room => (
                 <div class="room">
-                    <h2>Stanza "{room.number}"</h2>
+                    <h2>
+                        <LocalizedString name="room" /> "{room.number}"
+                    </h2>
                     <h3>
-                        {SIDEBAR_LABELS.buildings[room.building] ?? 'Ignoto'},{' '}
-                        {SIDEBAR_LABELS.floors[room.floor] ?? 'Ignoto'}
+                        <LocalizedString name={SIDEBAR_LABELS.buildings[room.building] ?? 'unknown'} />,{' '}
+                        <LocalizedString name={SIDEBAR_LABELS.floors[room.floor] ?? 'unknown'} />
                     </h3>
                     <p>
-                        <strong>Codice:</strong> <code>{room.code}</code>
+                        <strong>
+                            <LocalizedString name="code" />:
+                        </strong>{' '}
+                        <code>{room.code}</code>
                     </p>
                     {room.notes && (
                         <p>
-                            <strong>Note:</strong> {room.notes}
+                            <strong>
+                                <LocalizedString name="notes" />:
+                            </strong>{' '}
+                            {room.notes}
                         </p>
                     )}
                     {room.roomAssignments.length > 0 && (
                         <>
-                            <h3>Assegnazioni</h3>
+                            <h3>
+                                <LocalizedString name="assignments" />
+                            </h3>
                             <ul>
                                 {room.roomAssignments.map(assignment => (
                                     <li>

src/element.jsx

@@ -5,13 +5,14 @@ import { PlanimetrieViewer } from './dm-planimetrie/PlanimetrieViewer.js'
 import styles from './element.scss?inline'
 
 import { useEffect, useRef, useState } from 'preact/hooks'
-import { Sets, clsx } from './lib/utils.js'
+import { clsx } from './lib/utils.js'
 import { useEventCallback, useToggle, useToggleRegion } from './lib/hooks.js'
 import { createApiProxy } from './lib/mapper.js'
 import { render } from 'preact'
 import { Search } from './components/Search.jsx'
 import { Sidebar } from './components/Sidebar.jsx'
 import { Buttons } from './components/Buttons.jsx'
+import { LangContext } from './components/LocalizedString.jsx'
 
 const Canvas3D = memo(({ planimetrieRef }) => {
     const canvasRef = useRef(null)
@@ -58,7 +59,7 @@ const loadRooms = async () => {
         .filter(room => room.polygon)
 }
 
-export const Planimetrie = ({ selectedRoom }) => {
+export const Planimetrie = ({ selectedRoom, lang }) => {
     const [rooms, setRooms] = useState([])
     const [selection, setSelection] = useState(selectedRoom ?? null)
 
@@ -128,19 +129,17 @@ export const Planimetrie = ({ selectedRoom }) => {
         const room = rooms.find(({ _id }) => _id === id)
 
         if (room.building === 'A' || room.building === 'B') {
-            // setDipVisible(true)
             layerSetters[`dm-floor-${room.floor}`](true)
         }
         if (room.building === 'X') {
-            // setExdmaVisible(true)
             layerSetters[`exdma-floor-${room.floor}`](true)
         }
 
         setSelection(id)
     }
 
     return (
-        <>
+        <LangContext.Provider value={lang}>
             <div class="dm-planimetrie">
                 <Canvas3D planimetrieRef={planimetrieRef} />
                 <div class="overlay">
@@ -209,7 +208,7 @@ export const Planimetrie = ({ selectedRoom }) => {
                     />
                 </div>
             </div>
-        </>
+        </LangContext.Provider>
     )
 }
 
@@ -223,6 +222,7 @@ export class PlanimetrieElement extends HTMLElement {
         this.style.display = 'block'
         this.style.height = '720px'
         this.style.maxHeight = '100%'
+        this.lang = 'it'
 
         this.attachShadow({ mode: 'open' })
 
@@ -240,21 +240,24 @@ export class PlanimetrieElement extends HTMLElement {
         const url = new URL(location.href)
         const initialSelection = url.searchParams.get('sel')
 
+        const isEnglish = location.href.includes('/en')
+        if (isEnglish) this.lang = 'en'
+
         console.log('Initial Room Selection:', initialSelection)
 
-        this.#render({ selectedId: initialSelection })
+        this.#render({ selectedId: initialSelection, lang: this.lang })
     }
 
-    #render({ selectedId }) {
-        render(<Planimetrie selectedRoom={selectedId} />, this.shadowRoot)
+    #render({ selectedId, lang }) {
+        render(<Planimetrie selectedRoom={selectedId} lang={lang} />, this.shadowRoot)
     }
 
     /**
      * @param {string[]} selectedId
      * @returns {void}
      */
     setSelection(selectedId) {
-        this.#render({ selectedId })
+        this.#render({ selectedId, lang: this.lang })
     }
 }