suggestions, close button & translations

locales/en-us/challenge.json

@@ -0,0 +1,26 @@
+{
+  "congratulationsModal": {
+    "title": "You did it!",
+    "subtitle": "Something to think about...",
+    "text1": "Your program is not the only one that solves the problem. There are other solutions!",
+    "text2": "Are you using the concepts correctly?"
+  },
+  "stepByStepRun": {
+    "label": "Step",
+    "tooltip": "Run the proposed solution step by step"
+  },
+  "runStep": {
+    "label": "Step",
+    "tooltip": "Move forward one step"
+  },
+  "run": {
+    "label": "Run",
+    "tooltip": "Run the proposed solution"
+  },
+  "restart": {
+    "label": "Restart",
+    "tooltip": "Restart execution"
+  },
+  "multipleScenarios": "There are multiple scenarios!",
+  "close": "Close"
+}

locales/es-ar/challenge.json

@@ -21,5 +21,6 @@
     "label": "Reiniciar",
     "tooltip": "Reiniciar la ejecución"
   },
-  "multipleScenarios": "¡Hay varios escenarios!"
+  "multipleScenarios": "¡Hay varios escenarios!",
+  "close": "Cerrar"
 }

locales/pt-br/challenge.json

@@ -0,0 +1,26 @@
+{
+  "congratulationsModal": {
+    "title": "Você conseguiu!",
+    "subtitle": "Para pensar...",
+    "text1": "Seu programa não é o único que resolve o problema. Existem outras soluções!",
+    "text2": "Você está usando bem os conceitos?"
+  },
+  "stepByStepRun": {
+    "label": "Passo",
+    "tooltip": "Executar a solução proposta passo a passo"
+  },
+  "runStep": {
+    "label": "Passo",
+    "tooltip": "Dê um passo"
+  },
+  "run": {
+    "label": "Executar",
+    "tooltip": "Executar a solução proposta"
+  },
+  "restart": {
+    "label": "Reiniciar",
+    "tooltip": "Reiniciar execução"
+  },
+  "multipleScenarios": "Existem vários cenários!",
+  "close": "Fechar"
+}

src/components/challengeView/SceneButtons/Execute.tsx

@@ -1,4 +1,4 @@
-import { Button, Dialog, DialogContent, DialogTitle, Grid, IconButton, Stack, Typography } from "@mui/material"
+import { Button, Dialog, DialogContent, DialogTitle, IconButton, Stack, Tooltip, Typography } from "@mui/material"
 import { scene } from "../scene"
 import { interpreterFactory } from "./interpreter-factory"
 import Interpreter from "js-interpreter"
@@ -9,6 +9,8 @@ import { Challenge } from "../../../staticData/challenges"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import ConfettiExplosion from 'react-confetti-explosion';
+import { CloseOutlined } from '@mui/icons-material';
+import { IconButtonTooltip } from "../../creator/Editor/SceneEdition/IconButtonTooltip"
 
 type ExecuteButtonProps = {
   challenge: Challenge
@@ -39,7 +41,9 @@ export const ExecuteButton = ({ challenge }: ExecuteButtonProps) => {
       fullWidth={true}
       maxWidth="md"
       onClose={() => setShowModal(false)}>
-      <DialogTitle id="draggable-dialog" sx={{ cursor: 'auto', fontWeight: 'bold', height: '50px', display: 'flex', alignItems: 'center' }}>{t('congratulationsModal.title')}</DialogTitle>
+      <DialogTitle id="draggable-dialog" sx={{ cursor: 'auto', fontWeight: 'bold', height: '50px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>{t('congratulationsModal.title')}
+        <IconButtonTooltip onClick={() => setShowModal(false)} icon={<CloseOutlined />} tooltip={t('close')} />
+      </DialogTitle>
       <DialogContent sx={{ overflow: "hidden", backgroundColor: theme.palette.background.default }}>
         <Stack alignItems="center">
           <ConfettiExplosion {...{ force: 0.8, duration: 3000, particleCount: 250, width: 1600 }} />
@@ -77,16 +81,18 @@ export const ExecuteButton = ({ challenge }: ExecuteButtonProps) => {
   }
 
   return <>
-    {isSmallScreen ? <>
-      <IconButton className={styles['icon-button']} onClick={handleExcecute}>
-        <Stack>
-          <Circle color='success' className={styles['circle-icon']} />
-          <PlayArrow className={styles['icon']} />
-        </Stack>
-      </IconButton >
-    </> :
-      <Button variant="contained" color="success" onClick={handleExcecute}>{"Ejecutar"}</Button>
-    }
+    <Tooltip title={t('run.tooltip')}>
+      {isSmallScreen ?
+        <IconButton className={styles['icon-button']} onClick={handleExcecute}>
+          <Stack>
+            <Circle color='success' className={styles['circle-icon']} />
+            <PlayArrow className={styles['icon']} />
+          </Stack>
+        </IconButton >
+        :
+        <Button variant="contained" color="success" onClick={handleExcecute}>{t("run.label")}</Button>
+      }
+    </Tooltip>
     <EndDialog />
   </>
 }

src/components/challengeView/SceneButtons/SceneButtons.tsx

@@ -1,4 +1,4 @@
-import { IconButton, Stack } from "@mui/material"
+import { Button, IconButton, Stack, Tooltip } from "@mui/material"
 import { PBCard } from "../../PBCard"
 import { Circle, Info, PlayArrow, SkipNext } from "@mui/icons-material"
 import { PBSwitch, pbIconStyle } from "../../PBSwitch"
@@ -7,59 +7,71 @@ import BoltIcon from '@mui/icons-material/Bolt';
 import { useThemeContext } from "../../../theme/ThemeContext";
 import { ExecuteButton } from "./Execute"
 import { Challenge } from "../../../staticData/challenges"
+import { useTranslation } from "react-i18next"
 
 type SceneButtonsProps = {
-    challenge: Challenge
+  challenge: Challenge
 }
 
 export const SceneButtons = ({ challenge }: SceneButtonsProps) => {
-    return <PBCard>
-        <ExecuteButton challenge={challenge} />
-    </PBCard>
+  return <PBCard sx={{justifyContent: 'space-between'}}>
+    <ExecuteButton challenge={challenge} />
+    <NextStepButton />
+    <TurboModeSwitch />
+  </PBCard>
 }
 
 export const SceneButtonsVertical = ({ challenge }: SceneButtonsProps) => {
-    return <Stack gap={2} alignItems='center'>
-        <TurboModeSwitch />
-        <NextStepButton />
-        <ExecuteButton challenge={challenge} />
-    </Stack>
+  return <Stack gap={2} alignItems='center'>
+    <TurboModeSwitch />
+    <NextStepButton />
+    <ExecuteButton challenge={challenge} />
+  </Stack>
 }
 
 const NextStepButton = () => {
-    return <IconButton className={styles['icon-button']}>
+  const { t } = useTranslation('challenge');
+  const { isSmallScreen } = useThemeContext()
+
+  return <Tooltip title={t('stepByStepRun.tooltip')}>
+    {isSmallScreen ?
+      <IconButton className={styles['icon-button']}>
         <Stack>
-            <Circle className={styles['circle-icon']} sx={{ color: '#31b0d5' }} />
-            <SkipNext className={styles['icon']} />
+          <Circle className={styles['circle-icon']} sx={{ color: '#31b0d5' }} />
+          <SkipNext className={styles['icon']} />
         </Stack>
-    </IconButton>
+      </IconButton>
+      :
+      <Button variant="contained" sx={{ backgroundColor: "#31b0d5" }} onClick={() => { }}>{t("stepByStepRun.label")}</Button>
+    }
+  </Tooltip>
 }
 
 const TurboModeSwitch = () => {
-    const { theme } = useThemeContext()
+  const { theme } = useThemeContext()
 
-    return <PBSwitch
-        sx={{
-            "& .MuiSwitch-switchBase": {
-                "&.Mui-checked": {
-                    "+ .MuiSwitch-track": {
-                        backgroundColor: '#4ec2df',
-                        opacity: 1,
-                    }
-                },
-            },
-        }}
-        icon={<BoltIcon sx={pbIconStyle(theme)} />}
-        checkedIcon={<BoltIcon sx={pbIconStyle(theme)} />}
-        onChange={() => { }} />
+  return <PBSwitch
+    sx={{
+      "& .MuiSwitch-switchBase": {
+        "&.Mui-checked": {
+          "+ .MuiSwitch-track": {
+            backgroundColor: '#4ec2df',
+            opacity: 1,
+          }
+        },
+      },
+    }}
+    icon={<BoltIcon sx={pbIconStyle(theme)} />}
+    checkedIcon={<BoltIcon sx={pbIconStyle(theme)} />}
+    onChange={() => { }} />
 }
 
 type InfoButtonProps = {
-    onClick: () => void
+  onClick: () => void
 }
 
 export const InfoButton = ({ onClick }: InfoButtonProps) => {
-    return <IconButton onClick={onClick}>
-        <Info color="primary" />
-    </IconButton>
+  return <IconButton onClick={onClick}>
+    <Info color="primary" />
+  </IconButton>
 }