phc/lean4game
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mark all texts for translation #179

Browse Source
This commit is contained in:
Jon Eugster
2024-03-25 23:51:19 +01:00
parent 038dbe71b8
commit 7e9514fe96
19 changed files with 264 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/popup/erase.tsx
+13 -11
View File
@@ -8,6 +8,7 @@ import { useAppDispatch } from '../../hooks'
import { deleteProgress, selectProgress } from '../../state/progress'
import { downloadFile } from '../world_tree'
import { Button } from '../button'
import { Trans, useTranslation } from 'react-i18next'
/** download the current progress (i.e. what's saved in the browser store) */
export function downloadProgress(gameId: string, gameProgress: any, ev: React.MouseEvent) {
@@ -25,6 +26,7 @@ export function downloadProgress(gameId: string, gameProgress: any, ev: React.Mo
* controlled by the containing element.
*/
export function ErasePopup ({handleClose}) {
let { t } = useTranslation()
const gameId = React.useContext(GameIdContext)
const gameProgress = useSelector(selectProgress(gameId))
const dispatch = useAppDispatch()
@@ -43,17 +45,17 @@ export function ErasePopup ({handleClose}) {
<div className="modal-backdrop" onClick={handleClose} />
<div className="modal">
<div className="codicon codicon-close modal-close" onClick={handleClose}></div>
<h2>Delete Progress?</h2>
<p>Do you want to delete your saved progress irreversibly?</p>
<p>
(This deletes your proofs and your collected inventory.
Saves from other games are not deleted.)
</p>
<Button onClick={eraseProgress} to="">Delete</Button>
<Button onClick={downloadAndErase} to="">Download & Delete</Button>
<Button onClick={handleClose} to="">Cancel</Button>
<h2>{t("Delete Progress?")}</h2>
<Trans>
<p>Do you want to delete your saved progress irreversibly?</p>
<p>
(This deletes your proofs and your collected inventory.
Saves from other games are not deleted.)
</p>
</Trans>
<Button onClick={eraseProgress} to="">{t("Delete")}</Button>
<Button onClick={downloadAndErase} to="">{t("Download & Delete")}</Button>
<Button onClick={handleClose} to="">{t("Cancel")}</Button>
</div>
</div>
}
client/src/components/popup/language_config.json
-14
View File
@@ -1,14 +0,0 @@
{
"languages": [
{
"iso": "en",
"flag": "GB",
"name": "English"
},
{
"iso": "de",
"flag": "DE",
"name": "Deutsch"
}
]
}
client/src/components/popup/preferences.tsx
+9 -7
View File
@@ -4,18 +4,20 @@ import Markdown from '../markdown'
import { Switch, Button, ButtonGroup } from '@mui/material';
import Box from '@mui/material/Box';
import Slider from '@mui/material/Slider';
import supportedLanguages from './language_config.json'
import lean4gameConfig from '../../config.json'
import FormControlLabel from '@mui/material/FormControlLabel';
import { IPreferencesContext } from "../infoview/context"
import ReactCountryFlag from 'react-country-flag';
import { useTranslation } from 'react-i18next';
interface PreferencesPopupProps extends Omit<IPreferencesContext, 'mobile'> {
handleClose: () => void
}
export function PreferencesPopup({ layout, setLayout, isSavePreferences, language, setIsSavePreferences, handleClose, setLanguage }: PreferencesPopupProps) {
let { t } = useTranslation()
const marks = [
{
@@ -50,7 +52,7 @@ export function PreferencesPopup({ layout, setLayout, isSavePreferences, languag
<Typography variant="body1" component="div" className="settings">
<div className='preferences-category'>
<div className='category-title'>
<h3>Language</h3>
<h3>{t("Language")}</h3>
</div>
<div className='preferences-item first leave-left-gap'>
<FormControlLabel
@@ -58,9 +60,9 @@ export function PreferencesPopup({ layout, setLayout, isSavePreferences, languag
<Box sx={{ width: 300 }}>
<Select
value={language}
label={"Language"}
label={t("Language")}
onChange={handlerChangeLanguage}>
{supportedLanguages.languages.map(lang => {return <MenuItem key={`menu-item-lang-${lang.iso}`} value={lang.iso}><ReactCountryFlag countryCode={lang.flag}/>&nbsp;{lang.name}</MenuItem>})}
{lean4gameConfig.languages.map(lang => {return <MenuItem key={`menu-item-lang-${lang.iso}`} value={lang.iso}><ReactCountryFlag countryCode={lang.flag}/>&nbsp;{lang.name}</MenuItem>})}
</Select>
</Box>
}
@@ -70,14 +72,14 @@ export function PreferencesPopup({ layout, setLayout, isSavePreferences, languag
</div>
<div className='preferences-category'>
<div className='category-title'>
<h3>Layout</h3>
<h3>{t("Layout")}</h3>
</div>
<div className='preferences-item first leave-left-gap'>
<FormControlLabel
control={
<Box sx={{ width: 300 }}>
<Slider
aria-label="Always visible"
aria-label={t("Always visible")}
value={marks.find(item => item.key === layout).value}
step={1}
marks={marks}
@@ -105,7 +107,7 @@ export function PreferencesPopup({ layout, setLayout, isSavePreferences, languag
color="primary"
/>
}
label="Save my settings (in the browser store)"
label={t("Save my settings (in the browser store)")}
labelPlacement="end"
/>
</div>
client/src/components/popup/privacy_policy.tsx
+2 -16
View File
@@ -9,6 +9,8 @@ import * as React from 'react'
*
* `handleClose` is the function to close it again because it's open/closed state is
* controlled by the containing element.
*
* Note: Do not translate the Impressum!
*/
export function PrivacyPolicyPopup ({handleClose}: {handleClose: () => void}) {
return <div className="privacy-policy modal-wrapper">
@@ -57,19 +59,3 @@ export function PrivacyPolicyPopup ({handleClose}: {handleClose: () => void}) {
</div>
</div>
}
export const PrivacyPolicy: React.FC = () => {
const [open, setOpen] = React.useState(false)
const handleOpen = () => setOpen(true)
const handleClose = () => setOpen(false)
return (
<>
<div className="privacy" onClick={handleOpen} title="Privacy Policy &amp; Impressum">
<FontAwesomeIcon icon={faShield} />
<p className="p1">legal</p>
<p className="p2">notes</p>
</div>
{open ? <PrivacyPolicyPopup handleClose={handleClose} /> : null}
</>
)
}
client/src/components/popup/rules_help.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import { Trans, useTranslation } from 'react-i18next'
* controlled by the containing element.
*/
export function RulesHelpPopup ({handleClose}: {handleClose: () => void}) {
const { t, i18n } = useTranslation()
const { t } = useTranslation()
return <div className="privacy-policy modal-wrapper">
<div className="modal-backdrop" onClick={handleClose} />
client/src/components/popup/upload.tsx
+11 -6
View File
@@ -8,6 +8,7 @@ import { useAppDispatch } from '../../hooks'
import { GameProgressState, loadProgress, selectProgress } from '../../state/progress'
import { downloadFile } from '../world_tree'
import { Button } from '../button'
import { Trans, useTranslation } from 'react-i18next'
/** Pop-up that is displaying the Game Info.
*
@@ -15,6 +16,8 @@ import { Button } from '../button'
* controlled by the containing element.
*/
export function UploadPopup ({handleClose}) {
let { t } = useTranslation()
const [file, setFile] = React.useState<File>();
const gameId = React.useContext(GameIdContext)
const gameProgress = useSelector(selectProgress(gameId))
@@ -54,17 +57,19 @@ export function UploadPopup ({handleClose}) {
<div className="modal-backdrop" onClick={handleClose} />
<div className="modal">
<div className="codicon codicon-close modal-close" onClick={handleClose}></div>
<h2>Upload Saved Progress</h2>
<h2>{t("Upload Saved Progress")}</h2>
<Trans>
<p>Select a JSON file with the saved game progress to load your progress.</p>
<p>Select a JSON file with the saved game progress to load your progress.</p>
<p><b>Warning:</b> This will delete your current game progress!
Consider <a className="download-link" onClick={downloadProgress} >downloading your current progress</a> first!</p>
<p><b>Warning:</b> This will delete your current game progress!
Consider <a className="download-link" onClick={downloadProgress} >downloading your current progress</a> first!
</p>
</Trans>
<p>
<input type="file" onChange={handleFileChange}/>
</p>
<Button to="" onClick={uploadProgress}>Load selected file</Button>
<Button to="" onClick={uploadProgress}>{t("Load selected file")}</Button>
</div>
</div>
}