Boton de Lectura Simple

locales/en-us/others.json

@@ -1,4 +1,8 @@
 {
     "previousChallenge": "Previous challenge",
-    "nextChallenge": "Next challenge"
+    "nextChallenge": "Next challenge",
+    "lightThemeMode": "Light theme mode on",
+    "darkThemeMode": "Dark theme mode on",
+    "simpleReadModeOn": "Simple read mode on",
+    "simpleReadModeOff": "Simple read mode off"
 }

locales/es-ar/others.json

@@ -1,4 +1,8 @@
 {
     "previousChallenge": "Desafío anterior",
-    "nextChallenge": "Desafío siguiente"
+    "nextChallenge": "Desafío siguiente",
+    "lightThemeMode": "Activar modo claro",
+    "darkThemeMode": "Activar modo oscuro",
+    "simpleReadModeOn": "Activar modo de lectura simple",
+    "simpleReadModeOff": "Desactivar modo de lectura simple"
 }

locales/pt-br/others.json

@@ -1,4 +1,8 @@
 {
     "previousChallenge": "Desafio anterior",
-    "nextChallenge": "Próximo desafio"
+    "nextChallenge": "Próximo desafio",
+    "lightThemeMode": "Ativar tema claro",
+    "darkThemeMode": "Ativar tema escuro",
+    "simpleReadModeOn": "Ativar o modo de leitura simple",
+    "simpleReadModeOff": "Desativar o modo de leitura simples"
 }

src/components/ChallengeView.tsx

@@ -75,7 +75,7 @@ const ChallengeView = (props: ChallengeViewProps) => {
     const solutionParam: string = solution ? `?codigo=${solution}` : ""
 
     return <>
-        <Header CenterComponent={ChallengeBreadcrumb(path)} />
+        <Header CenterComponent={ChallengeBreadcrumb(path)} shouldShowSimpleReadSwitch={!path.book.simpleReadMode} />
         <EmberView path={`desafio/${props.challengeId}${solutionParam}`} />
     </>
 }

src/components/PBSwitch.tsx

@@ -1,4 +1,16 @@
-import { Switch, styled } from "@mui/material";
+import { Switch, Theme, styled } from "@mui/material";
+
+export const pbIconStyle = ( theme: Theme ) => {  
+    return {
+        backgroundColor: theme.palette.background.default, 
+        borderRadius: 10,
+        padding: '3px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: theme.palette.primary.main 
+    }
+}
 
 export const PBSwitch = styled(Switch)(() => ({
     alignSelf: 'center',

src/components/book/BookView.tsx

@@ -11,6 +11,7 @@ import { Chapter } from "../../staticData/chapters";
 import { Group } from "../../staticData/groups";
 import { PBCard } from "../PBCard";
 import { useThemeContext } from "../../theme/ThemeContext";
+import { useEffect } from "react";
 
 const Breadcrumb = (book: Book) => {    
     const {t} = useTranslation("books")
@@ -31,10 +32,16 @@ export const BookView = () => {
     const {id} = useParams()
     const book: Book = getBook(Number(id))
     const {t} = useTranslation("books")
-    const {theme} = useThemeContext()
-
+    const {theme, setSimpleReadModeEnabled} = useThemeContext()
+
+    useEffect(() => {
+        if ( book.simpleReadMode ) 
+          setSimpleReadModeEnabled(true)
+    }, [book, setSimpleReadModeEnabled ])
+
+
     return <>
-        <Header CenterComponent={Breadcrumb(book)}/>
+        <Header CenterComponent={Breadcrumb(book)} shouldShowSimpleReadSwitch={!book.simpleReadMode} />
         <Stack alignItems="center" style={{backgroundImage: "url(imagenes/book-background.svg)"}}>
             <PBCard style={{maxWidth: 'var(--creator-max-width)', padding: theme.spacing(2)}}>
                 <Stack>

src/components/header/DarkModeSwitch.tsx

@@ -1,25 +1,22 @@
+import { Tooltip } from "@mui/material";
 import { DarkMode, LightMode } from "@mui/icons-material";
-import { PBSwitch } from "../PBSwitch";
+import { PBSwitch, pbIconStyle } from "../PBSwitch";
+import { useTranslation } from "react-i18next"
 import { useThemeContext } from "../../theme/ThemeContext";
 
 export const DarkModeSwitch = () => {
-    const { darkModeEnabled, setDarkModeEnabled} = useThemeContext()
-
-    const iconSx = {
-        backgroundColor: 'white',
-        borderRadius: 10,
-        padding: '3px',
-        color: 'gray'
-    }
+    const { theme, darkModeEnabled, setDarkModeEnabled} = useThemeContext()
+    const { t } = useTranslation("others")
 
     const handleToggle = () => {
         setDarkModeEnabled(!darkModeEnabled)
     }
-
-    return <PBSwitch
-        checked={darkModeEnabled}
-        icon={<LightMode sx={iconSx} />}
-        checkedIcon={<DarkMode sx={iconSx} />}
-        onChange={handleToggle}
-    />
+
+    return <Tooltip title={darkModeEnabled ? t(`lightThemeMode`) : t(`darkThemeMode`) }>
+        <PBSwitch
+            checked={darkModeEnabled}
+            icon={<LightMode sx={pbIconStyle(theme)}/>}
+            checkedIcon={<DarkMode sx={pbIconStyle(theme)}/>}
+            onChange={handleToggle}/>
+        </Tooltip>
 }

src/components/header/Header.tsx

@@ -4,11 +4,13 @@ import styles from './header.module.css';
 import { SessionButton } from "./login/SessionButton";
 import { Link } from "react-router-dom";
 import { DarkModeSwitch } from "./DarkModeSwitch";
+import { SimpleReadSwitch } from "./SimpleReadSwitch";
 import { useThemeContext } from "../../theme/ThemeContext";
 
 type HeaderProps = {
     CenterComponent?: React.ReactNode,
-    SubHeader?: React.ReactNode 
+    SubHeader?: React.ReactNode,
+    shouldShowSimpleReadSwitch?: boolean
 }
 
 type HeaderTextProps = {
@@ -23,7 +25,7 @@ export const HeaderText = (props: HeaderTextProps) => {
 	</Typography>
 }
 
-export const Header = ({CenterComponent= <></>, SubHeader=<></>}: HeaderProps) => {
+export const Header = ({CenterComponent= <></>, SubHeader=<></>, shouldShowSimpleReadSwitch=true}: HeaderProps) => {
     const { theme } = useThemeContext()
 
     return <AppBar position="sticky" sx={{ bgcolor: theme.palette.background.default }} elevation={0}>
@@ -32,6 +34,7 @@ export const Header = ({CenterComponent= <></>, SubHeader=<></>}: HeaderProps) =
                 {CenterComponent}
                 <div>
                     <ChangeLanguageButton/>
+                    {shouldShowSimpleReadSwitch && <SimpleReadSwitch/>}
                     <DarkModeSwitch/>
                     <SessionButton/>
                 </div>

src/components/header/SimpleReadSwitch.tsx

@@ -0,0 +1,21 @@
+import { Icon, Tooltip } from "@mui/material";
+import { PBSwitch, pbIconStyle } from "../PBSwitch";
+import { useTranslation } from "react-i18next"
+import { useThemeContext } from "../../theme/ThemeContext";
+
+export const SimpleReadSwitch = () => {
+    const { theme, simpleReadModeEnabled, setSimpleReadModeEnabled} = useThemeContext()
+    const { t } = useTranslation("others")
+
+    const handleToggle = () => {
+        setSimpleReadModeEnabled(!simpleReadModeEnabled)
+    }
+
+    return <Tooltip title={simpleReadModeEnabled ? t(`simpleReadModeOff`) : t(`simpleReadModeOn`)}>
+        <PBSwitch
+            checked={simpleReadModeEnabled}
+            icon={<Icon sx={pbIconStyle(theme)}>a</Icon>}
+            checkedIcon={<Icon sx={pbIconStyle(theme)}>A</Icon>}
+            onChange={handleToggle}/>
+        </Tooltip>
+}

src/localStorage.ts

@@ -10,6 +10,7 @@ export namespace LocalStorage {
     const PB_USER = 'PB_USER'
     const PB_CREATOR_CHALLENGE = 'PB_CREATOR_CHALLENGE'
     const PB_USE_NIGHT_THEME = 'PB_USE_NIGHT_THEME'
+    const PB_USE_SIMPLE_READ = 'PB_USE_SIMPLE_READ'
 
     const remove = (key: string) => { localStorage.removeItem(key) }
 
@@ -18,12 +19,14 @@ export namespace LocalStorage {
     export const getUser = (): User | null => _get(PB_USER)
     export const getCreatorChallenge = (): SerializedChallenge | null => _get(PB_CREATOR_CHALLENGE)
     export const getIsDarkMode = (): boolean => _get(PB_USE_NIGHT_THEME) || false
+    export const getIsSimpleReadMode = (): boolean => _get(PB_USE_SIMPLE_READ) || false
 
     export const saveSelectedLocale = (selectedLocale: LanguageCode) => _save(PB_SELECTED_LOCALE, selectedLocale)
     export const saveImportedChallenge = (importedChallenge: EmberExecutableChallenge) => _save(PB_IMPORTED_CHALLENGE, importedChallenge)
     export const saveUser = (user: User | null) => _save(PB_USER, user)
     export const saveCreatorChallenge = (challenge: SerializedChallenge | null) => _save(PB_CREATOR_CHALLENGE, challenge)
     export const saveDarkMode = (darkMode: boolean) => _save(PB_USE_NIGHT_THEME, darkMode)
+    export const saveSimpleReadMode = (simpleReadMode: boolean) => _save(PB_USE_SIMPLE_READ, simpleReadMode)
 
     const _get = (key: string) => _doSafe(key, (storage: Storage) => {
         const value = storage.getItem(key)

src/staticData/books.ts

@@ -55,11 +55,11 @@ const rawBooksData: RawBookData[] = [
   {
     id: 3,
     chapterIds: ['Parametrización de soluciones'],
-    simpleReadMode: true
+    simpleReadMode: false
   },
   {
     id: 1000,
     chapterIds: ['1','2','3','4','5'],
-    simpleReadMode: true
+    simpleReadMode: false
   },  
 ];

src/theme/ThemeContext.tsx

@@ -9,37 +9,42 @@ export type ThemeMode = 'light' | 'dark'
 type ThemeContextType = {
     darkModeEnabled: boolean;
     setDarkModeEnabled: (mode: boolean) => void;
+    simpleReadModeEnabled: boolean;
+    setSimpleReadModeEnabled: (mode: boolean) => void;
     theme: Theme
 };
 
 export const ThemeContext = createContext<ThemeContextType>({
     darkModeEnabled: false,
     setDarkModeEnabled: () => { },
+    simpleReadModeEnabled: false,
+    setSimpleReadModeEnabled: () => { },
     theme: createTheme({})
 });
 
 export const ThemeContextProvider: FC<PropsWithChildren> = ({ children }) => {
 
     const [darkModeEnabled, setDarkModeEnabled] = useState(LocalStorage.getIsDarkMode());
+    const [simpleReadModeEnabled, setSimpleReadModeEnabled] = useState(LocalStorage.getIsSimpleReadMode());
 
-    const theme = useMemo(
-        () => createTheme(getDesignTokens(darkModeEnabled)),
-        [darkModeEnabled]
+    const theme = useMemo(     
+        () => createTheme( getDesignTokens(darkModeEnabled, simpleReadModeEnabled)),
+        [darkModeEnabled, simpleReadModeEnabled]
     );
 
     useEffect(() =>{
         LocalStorage.saveDarkMode(darkModeEnabled)
+        LocalStorage.saveSimpleReadMode(simpleReadModeEnabled)
         Ember.refreshIframe()
-    }, [darkModeEnabled])
+    }, [darkModeEnabled, simpleReadModeEnabled])
 
     return (
-        <ThemeContext.Provider value={{ darkModeEnabled, setDarkModeEnabled, theme }}>
+        <ThemeContext.Provider value={{ darkModeEnabled, setDarkModeEnabled, simpleReadModeEnabled, setSimpleReadModeEnabled, theme }}>
             {children}
         </ThemeContext.Provider>
     );
 };
 
-
 export const useThemeContext = () => {
     return useContext(ThemeContext);
   };

src/theme/theme.tsx

@@ -2,13 +2,13 @@ import { ThemeOptions } from "@mui/material";
 import { deepmerge } from '@mui/utils';
 
 const commonTheme: ThemeOptions = {
-    shape: {
-        borderRadius: 10
-    },
-    typography: {
-        fontFamily: 'Nunito',
+        shape: {
+            borderRadius: 10
+        },
+        typography: {
+            fontFamily: 'Nunito'
+        }
     }
-}
 
 const lightTheme: ThemeOptions = {
     typography: {
@@ -77,4 +77,5 @@ const darkTheme: ThemeOptions = {
 
 }
 
-export const getDesignTokens = (darkModeEnabled: boolean): ThemeOptions => deepmerge(darkModeEnabled ? darkTheme : lightTheme,commonTheme)
+export const getDesignTokens = (darkModeEnabled: boolean, simpleReadModeEnabled: boolean): ThemeOptions => 
+      deepmerge( {typography: { allVariants: { textTransform: simpleReadModeEnabled ? 'uppercase': 'initial'}}}, deepmerge(darkModeEnabled ? darkTheme : lightTheme,commonTheme))