Skip to content

Commit

Permalink
Merge pull request #85 from nickydotnet/master
Browse files Browse the repository at this point in the history 
french language declaration on i18n module
  • Loading branch information
@joshzcold
joshzcold authored Jul 29, 2024
2 parents 289b560 + 0148b25 commit cf554de
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 156 deletions.
265 changes: 135 additions & 130 deletions components/Admin/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,146 +3,151 @@ import "i18n/i18n";
import "tailwindcss/tailwind.css";

function debounce(callback, wait = 400) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(function () {
callback.apply(this, args);
}, wait);
};
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(function () {
callback.apply(this, args);
}, wait);
};
}

export function ThemeSwitcher(props) {
const availableThemes = {
default: {
bgcolor: "white",
fgcolor: "text-black",
title: "default",
},
darkTheme: {
bgcolor: "#18181B",
fgcolor: "text-white",
title: "dark theme",
},
slate: {
bgcolor: "#18181B",
fgcolor: "text-white",
title: "slate",
},
educational: {
bgcolor: "#fffbf0",
fgcolor: "text-black",
title: "educational",
},
};
return (
<div class="flex flex-row space-x-5 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
role="img"
width="32"
height="32"
viewBox="0 0 16 16"
>
<path
d="M8 1.002v2.5a.5.5 0 0 0 1 0v-2.5h1v3.494a.5.5 0 0 0 1 0V1.002h1.5V7h-9V1.002H8ZM3.5 8v.5a2 2 0 0 0 2 2h1v2.999a1.5 1.5 0 0 0 3 0v-3h1a2 2 0 0 0 2-2V8h-9Z"
fill="gray"
/>
</svg>
<select
class="bg-secondary-300 text-foreground rounded-lg p-2"
value={props.game.settings.theme}
onChange={(e) => {
props.game.settings.theme = e.target.value;
props.setGame((prv) => ({ ...prv }));
props.send({ action: "data", data: props.game });
}}
>
{Object.keys(availableThemes).map((key, index) => (
<option
value={key}
key={index}
style={{
backgroundColor: availableThemes[key].bgcolor
}}
class={`${availableThemes[key].fgcolor}`}
>
{availableThemes[key].title}
</option>
))}
</select>
</div>
);
const availableThemes = {
default: {
bgcolor: "white",
fgcolor: "text-black",
title: "default",
},
darkTheme: {
bgcolor: "#18181B",
fgcolor: "text-white",
title: "dark theme",
},
slate: {
bgcolor: "#18181B",
fgcolor: "text-white",
title: "slate",
},
educational: {
bgcolor: "#fffbf0",
fgcolor: "text-black",
title: "educational",
},
red: {
bgcolor: "#7B2C35",
fgcolor: "text-white",
title: "red",
},
};
return (
<div class="flex flex-row space-x-5 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
role="img"
width="32"
height="32"
viewBox="0 0 16 16"
>
<path
d="M8 1.002v2.5a.5.5 0 0 0 1 0v-2.5h1v3.494a.5.5 0 0 0 1 0V1.002h1.5V7h-9V1.002H8ZM3.5 8v.5a2 2 0 0 0 2 2h1v2.999a1.5 1.5 0 0 0 3 0v-3h1a2 2 0 0 0 2-2V8h-9Z"
fill="gray"
/>
</svg>
<select
class="bg-secondary-300 text-foreground rounded-lg p-2"
value={props.game.settings.theme}
onChange={(e) => {
props.game.settings.theme = e.target.value;
props.setGame((prv) => ({ ...prv }));
props.send({ action: "data", data: props.game });
}}
>
{Object.keys(availableThemes).map((key, index) => (
<option
value={key}
key={index}
style={{
backgroundColor: availableThemes[key].bgcolor
}}
class={`${availableThemes[key].fgcolor}`}
>
{availableThemes[key].title}
</option>
))}
</select>
</div>
);
}

function FinalRoundTitleChanger(props) {
const { i18n, t } = useTranslation();
return (
<div class="flex flex-row space-x-5 items-center">
<p class="text-xl text-foreground">{t("Final Round Title")}:</p>
<input
class="border-4 rounded text-xl w-32 bg-secondary-500 text-foreground p-1 placeholder-secondary-900"
onChange={debounce((e) => {
props.game.settings.final_round_title = e.target.value;
props.setGame((prv) => ({ ...prv }));
props.send({ action: "data", data: props.game });
})}
defaultValue={props.game.settings.final_round_title}
placeholder={t("fast money")}
></input>
</div>
);
const { i18n, t } = useTranslation();
return (
<div class="flex flex-row space-x-5 items-center">
<p class="text-xl text-foreground">{t("Final Round Title")}:</p>
<input
class="border-4 rounded text-xl w-32 bg-secondary-500 text-foreground p-1 placeholder-secondary-900"
onChange={debounce((e) => {
props.game.settings.final_round_title = e.target.value;
props.setGame((prv) => ({ ...prv }));
props.send({ action: "data", data: props.game });
})}
defaultValue={props.game.settings.final_round_title}
placeholder={t("fast money")}
></input>
</div>
);
}

export default function AdminSettings(props) {
let game = props.game;
const { i18n, t } = useTranslation();
let game = props.game;
const { i18n, t } = useTranslation();

function HideGameQuestions(props) {
return (
<div class="flex flex-col">
<div class="flex flex-row space-x-5 items-center">
<div>
<p class="text-xl normal-case text-foreground">
{t("Hide questions")}:
</p>
</div>
<input
class="w-4 h-4 rounded placeholder-secondary-900"
checked={game.settings.hide_questions}
onChange={(e) => {
game.settings.hide_questions = e.target.checked;
props.setGame((prv) => ({ ...prv }));
props.send({ action: "data", data: game });
}}
type="checkbox"
></input>
</div>
<div>
<p class="text-sm normal-case text-secondary-900 italic max-w-xs">
{t("hide questions on the game window and player buzzer screens")}
</p>
</div>
</div>
);
}

function HideGameQuestions(props) {
return (
<div class="flex flex-col">
<div class="flex flex-row space-x-5 items-center">
<div>
<p class="text-xl normal-case text-foreground">
{t("Hide questions")}:
</p>
</div>
<input
class="w-4 h-4 rounded placeholder-secondary-900"
checked={game.settings.hide_questions}
onChange={(e) => {
game.settings.hide_questions = e.target.checked;
props.setGame((prv) => ({ ...prv }));
props.send({ action: "data", data: game });
}}
type="checkbox"
></input>
</div>
<div>
<p class="text-sm normal-case text-secondary-900 italic max-w-xs">
{t("hide questions on the game window and player buzzer screens")}
</p>
</div>
</div>
<>
<div class="grid grid-cols-2 gap-y-10 gap-x-48">
<HideGameQuestions
game={game}
setGame={props.setGame}
send={props.send}
/>
<ThemeSwitcher game={game} setGame={props.setGame} send={props.send} />
<FinalRoundTitleChanger
game={game}
setGame={props.setGame}
send={props.send}
/>
</div>
</>
);
}

return (
<>
<div class="grid grid-cols-2 gap-y-10 gap-x-48">
<HideGameQuestions
game={game}
setGame={props.setGame}
send={props.send}
/>
<ThemeSwitcher game={game} setGame={props.setGame} send={props.send} />
<FinalRoundTitleChanger
game={game}
setGame={props.setGame}
send={props.send}
/>
</div>
</>
);
}
54 changes: 29 additions & 25 deletions i18n/i18n.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,36 @@ import translationEN from "public/locales/en/translation.json";
import translationES from "public/locales/es/translation.json";
import translationID from "public/locales/id/translation.json";
import translationET from "public/locales/et/translation.json";
import translationFR from "public/locales/fr/translation.json";

const resources = {
en: {
translation: translationEN,
},
es: {
translation: translationES,
},
id: {
translation: translationID,
},
et: {
translation: translationET,
},
};
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources,
react: {
useSuspense: false,
en: {
translation: translationEN,
},
es: {
translation: translationES,
},
id: {
translation: translationID,
},
fallbackLng: "en",
interpolation: {
format,
et: {
translation: translationET,
},
whitelist: ["es", "en", "id", "et"],
});
fr: {
translation: translationFR,
},
};
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources,
react: {
useSuspense: false,
},
fallbackLng: "en",
interpolation: {
format,
},
whitelist: ["es", "en", "id", "et", "fr"],
});
2 changes: 1 addition & 1 deletion i18n/i18next-scanner.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ module.exports = {
},
trans: false,
plural: false,
lngs: ["en", "es", "et", "id"],
lngs: ["en", "es", "et", "id","fr"],
ns: ["translation"],
defaultNs: "translation",
defaultValue: "__STRING_NOT_TRANSLATED__",
Expand Down

0 comments on commit cf554de

Please sign in to comment.