feat: start of langauge select

Kaetram · Sep 29, 2023 · 89449f2 · 89449f2
1 parent 2063d3e
commit 89449f2
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 14 deletions.
diff --git a/packages/client/components/intro.astro b/packages/client/components/intro.astro
@@ -1,5 +1,16 @@
 ---
-import { t } from '@kaetram/common/i18n';
+import { t, getLanguage } from '@kaetram/common/i18n';
+
+let currentLanguage = getLanguage(),
+    languages = [
+        { locale: 'en', name: 'English' },
+        { locale: 'de', name: 'Deutsch' },
+        { locale: 'es', name: 'Español' },
+        { locale: 'fr', name: 'Français' },
+        { locale: 'pt', name: 'Português' },
+        { locale: 'ro', name: 'Română' },
+        { locale: 'ru', name: 'Русский' }
+    ];
 ---
 
 <div id="intro">
@@ -143,7 +154,7 @@ import { t } from '@kaetram/common/i18n';
         <article id="reset-password">
             <h1>
                 <span class="left-ornament"></span>
-                Reset Password
+                 Reset Password
                 <span class="right-ornament"></span>
             </h1>
 
@@ -187,7 +198,7 @@ import { t } from '@kaetram/common/i18n';
         <article id="world-select">
             <h1>
                 <span class="left-ornament"></span>
-                World Select
+                 World Select
                 <span class="right-ornament"></span>
             </h1>
 
@@ -222,20 +233,20 @@ import { t } from '@kaetram/common/i18n';
 
             <p>
                 <br />
-                Special thanks to
+                 Special thanks to
                 <a
                     rel="noopener noreferrer"
                     class="clickable"
                     target="_blank"
                     href="https://www.littleworkshop.fr/">Little Workshop</a
                 >
-                for the pixel art,
+                 for the pixel art,
                 <br />
                 <br />
-                and the Asky Team.
+                 and the Asky Team.
                 <br />
                 <br />
-                More pixel assets by
+                 More pixel assets by
                 <a
                     rel="noopener noreferrer"
                     class="clickable"
@@ -263,7 +274,7 @@ import { t } from '@kaetram/common/i18n';
                 >, &amp; Boo
                 <br />
                 <br />
-                Music by
+                 Music by
                 <a
                     rel="noopener noreferrer"
                     class="clickable"
@@ -337,6 +348,16 @@ import { t } from '@kaetram/common/i18n';
         </span>
     </section>
 
+    <select id="lang-select" oninput={'location = "/" + this.value + "/"'}>
+        {
+            languages.map(({ locale, name }) => (
+                <option value={locale} selected={locale === currentLanguage}>
+                    {name}
+                </option>
+            ))
+        }
+    </select>
+
     <button id="world-select-button" class="slice-button" hidden>
         <strong class="stroke"></strong>
         <span class="stroke"></span>

diff --git a/packages/client/scss/app/impl/_intro.scss b/packages/client/scss/app/impl/_intro.scss
@@ -16,6 +16,21 @@
     height: 100%;
 }
 
+#lang-select {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+
+    padding: 0.25em;
+
+    font-size: 1em;
+    color: #c6c0a3;
+
+    background-color: #000;
+    border: none;
+    border-radius: 0.25em;
+}
+
 body.intro {
     #intro-container {
         transition: 0.4s opacity linear;

diff --git a/packages/client/scss/base/_index.scss b/packages/client/scss/base/_index.scss
@@ -10,14 +10,15 @@
 
 body,
 button,
-input {
+input,
+select {
     font-family: Monogram, 'AdvoCut Fallback', arial, sans-serif;
+}
 
-    h1,
-    h2,
-    h3 {
-        font-family: Fibberish, Monogram, AdvoCut, arial, sans-serif;
-    }
+h1,
+h2,
+h3 {
+    font-family: Fibberish, Monogram, AdvoCut, arial, sans-serif;
 }
 
 @each $size, $scale in media.$sizes {