From 8b42ca5298d0112c707c196729f325047b8aa227 Mon Sep 17 00:00:00 2001 From: "ITHQ1947\\saritha.pillai" Date: Wed, 3 Jul 2024 13:54:34 +0530 Subject: [PATCH] Issue 815 changes completed --- CatsnDogs/src/components/catsndogs/Board.tsx | 18 ++ .../components/catsndogs/InstructionModal.tsx | 51 ++++++ CatsnDogs/src/components/catsndogs/box.css | 6 + CatsnDogs/src/i18n.js | 4 +- Gyroscope/src/containers/GameComponent.tsx | 154 ++++++++++++------ Maze_Game/src/containers/DialogMessage.tsx | 70 ++++++++ Maze_Game/src/containers/Layout.tsx | 5 +- Maze_Game/src/i18n.js | 7 +- .../pop_the_bubbles/InstructionModal.tsx | 51 ++++++ .../pop_the_bubbles/PopTheBubbles.tsx | 16 ++ .../src/components/pop_the_bubbles/bubble.css | 14 +- PopTheBubbles/src/i18n.js | 3 + Spin_Wheel/src/containers/DialogMessage.tsx | 69 ++++++++ Spin_Wheel/src/containers/Layout.tsx | 4 + Spin_Wheel/src/i18n.js | 8 +- 15 files changed, 427 insertions(+), 53 deletions(-) create mode 100644 CatsnDogs/src/components/catsndogs/InstructionModal.tsx create mode 100644 Maze_Game/src/containers/DialogMessage.tsx create mode 100644 PopTheBubbles/src/components/pop_the_bubbles/InstructionModal.tsx create mode 100644 Spin_Wheel/src/containers/DialogMessage.tsx diff --git a/CatsnDogs/src/components/catsndogs/Board.tsx b/CatsnDogs/src/components/catsndogs/Board.tsx index 9b6697ec..0fad10cd 100644 --- a/CatsnDogs/src/components/catsndogs/Board.tsx +++ b/CatsnDogs/src/components/catsndogs/Board.tsx @@ -20,6 +20,7 @@ import i18n from "./../../i18n"; import * as React from "react"; import "./box.css"; +import { InstructionModal } from "./InstructionModal"; export interface BoardProps { language: string; @@ -52,6 +53,7 @@ interface BoardState { status:any; wrongTaps: number; sendResponse: boolean; + showInstruction: boolean; } class Board extends React.Component { @@ -90,6 +92,7 @@ class Board extends React.Component { successTaps: 0, timeout: false, wrongTaps: 0, + showInstruction: true, }; } // Reset game state for each state @@ -454,6 +457,11 @@ class Board extends React.Component { this.sendGameResult(true) } + + handleCloseInstructionModal = () => { + this.setState({ showInstruction: false }); + }; + // Render the game board render() { let boxes; @@ -570,6 +578,15 @@ class Board extends React.Component { language={i18n.language} /> ) : null; + + const instructionModal = this.state.showInstruction ? ( + + ) : null; return (
{!this.props.noBack &&
+ {instructionModal} ); diff --git a/CatsnDogs/src/components/catsndogs/InstructionModal.tsx b/CatsnDogs/src/components/catsndogs/InstructionModal.tsx new file mode 100644 index 00000000..2d59726a --- /dev/null +++ b/CatsnDogs/src/components/catsndogs/InstructionModal.tsx @@ -0,0 +1,51 @@ + +import * as React from 'react'; +import { Button, Modal } from 'react-bootstrap'; +import i18n from "./../../i18n"; + +interface Props { + show: boolean; + modalClose(status:boolean):void; + msg:string; + language: string; +} + +interface State { + showStatus : boolean +} + +export class InstructionModal extends React.Component { + + constructor(props: Props) { + super(props); + this.state = { + showStatus : this.props.show + } + } + + // Handles modal close + handleClose = () => { + this.setState({ + showStatus : false + }); + this.props.modalClose(false); + } + + // Modal render function + render() { + return ( + + {this.props.msg} + + + + + ); + } +} \ No newline at end of file diff --git a/CatsnDogs/src/components/catsndogs/box.css b/CatsnDogs/src/components/catsndogs/box.css index 6f205722..7035baf4 100644 --- a/CatsnDogs/src/components/catsndogs/box.css +++ b/CatsnDogs/src/components/catsndogs/box.css @@ -317,3 +317,9 @@ ol,ul { opacity:0 } } + +.modal-body-section { + padding: 15px !important; + margin-bottom: 10px; + font-size: 20px; +} \ No newline at end of file diff --git a/CatsnDogs/src/i18n.js b/CatsnDogs/src/i18n.js index f66e59c4..eb25a853 100644 --- a/CatsnDogs/src/i18n.js +++ b/CatsnDogs/src/i18n.js @@ -38,7 +38,9 @@ const resources = { "Now tap the boxes that have a cat behind them. Don't tap the boxes with a dog behind them.", OK: "Ok", TAP_THE_BOXES_THAT_HAVE_A_DOG_BEHIND_THEM: - "Tap the boxes that have a dog behind them.", + "Tap the boxes that have a dog behind them.", + IN_THIS_GAME_YOU_WILL_SEE_A_SCREEN_WITH_MANY_BOXES_THESE_BOXES_WILL_LIFT_REVEALING_EITHER_A_DOG_CAT_OR_NOTHING_BEHIND_THEM_A_TASK_IS_TO_TAP_THE_CORRECT_BOXES_BASED_ON_WHAT_IS_BEHIND_EACH_BOX_THE_INSTRUCTIONS_FOR_WHICH_BOXES_ARE_CORRECT_WILL_CHANGE_DEPENDING_ON_THE_LEVEL_SO_PAY_ATTENTION_TO_THE_ANIMALS: + "In this game, you will see a screen with many boxes. These boxes will ‘lift’ revealing either a dog, cat or nothing behind them. A task is to tap the correct boxes based on what is behind each box. The instructions for which boxes are correct will change depending on the level, so pay attention to the animals!" }, },"es-ES": { translation: { diff --git a/Gyroscope/src/containers/GameComponent.tsx b/Gyroscope/src/containers/GameComponent.tsx index c8df72e1..150ec9fc 100644 --- a/Gyroscope/src/containers/GameComponent.tsx +++ b/Gyroscope/src/containers/GameComponent.tsx @@ -4,12 +4,34 @@ import { drawCircle } from "../components/Circle"; let isPhone = false; let permissionButton: any; let permissionGranted = false; +import { makeStyles, Theme, createStyles } from "@material-ui/core" + + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + helpText: { + color: "blue", + bottom: "55px", + position: "absolute", + }, + countText: { + float: "left", + color: "blue", + bottom: "55px", + position: "absolute", + marginLeft:"-100px" + }, + })) +//Up to 30 - same direction export function GameComponent({...props}){ const canvasRef = useRef(null); const divRef = useRef(null); - + const helpTextRef = useRef(null); const [state, setState] = useState(null) + const [currentCount, setcurrentCount] = useState(0) + + const classes = useStyles() const setup = (p: any) => { return () => { if ( @@ -65,16 +87,16 @@ export function GameComponent({...props}){ } const handleOrientation = () => { - var orientation = window.orientation; + let orientation = window.orientation; setState({...state, landscape: orientation === 90 || orientation === -90 }); } const handleAcceleration = (event) => { - var landscape = state?.landscape; - var acceleration = event.accelerationIncludingGravity; - var rotation = event.rotationRate || 0; - var x = acceleration.x; - var y = acceleration.y; - var z = acceleration.z; + let landscape = state?.landscape; + let acceleration = event.accelerationIncludingGravity; + let rotation = event.rotationRate || 0; + let x = acceleration.x; + let y = acceleration.y; + let z = acceleration.z; setState({...state, rotation: rotation, x: landscape ? y : x, @@ -95,23 +117,8 @@ export function GameComponent({...props}){ const ctx = canvasRef.current.getContext("2d"); var centerX = ctx.canvas.width / 2 - 110; var centerY = ctx.canvas.height / 2 - 100; - drawCircle(ctx, { - radius: 16, - lineWidth:2, - strokeStyle: "#FF0000", - colorFill: "#FF0000", - startY: centerY, - startX: centerX - }); - drawCircle(ctx, { - radius: 12, - lineWidth: 5, - strokeStyle: "#FFFF00", - colorFill: "#FF0000", - startY: centerY, - startX: centerX - }); - + drawCenterCircle(ctx, centerX, centerY) + divRef.current.style.background="transparent" canvasRef.current.onmousemove = (event) => { //track mouse position and change for custom cursor @@ -120,35 +127,83 @@ export function GameComponent({...props}){ if(Math.abs(event.clientX- centerX - 100) < 10 && Math.abs(event.clientY- centerY - 60) < 10) { + helpTextRef.current.style.display="none" divRef.current.style.background = "linear-gradient(to right, rgb(182, 244, 146), rgb(51, 139, 147))" - } + drawTarget(ctx) + clearCenter(ctx, centerX, centerY) + } if(Math.abs(event.clientX - 5 - 350) < 10 && Math.abs(event.clientY - 5- 310) < 10) { divRef.current.style.background = "transparent" - - - drawCircle(ctx, { - radius: 16, - lineWidth:2, - strokeStyle: "#FFFFFF", - colorFill: "#FFFFFF", - startY: centerY, - startX: centerX - }); - drawCircle(ctx, { - radius: 12, - lineWidth: 5, - strokeStyle: "#FFFFFF", - colorFill: "#FFFFFF", - startY: centerY, - startX: centerX - }); - - } + clearTarget(ctx) + drawCenterCircle(ctx, centerX, centerY) + helpTextRef.current.style.display="block" + setcurrentCount(currentCount+1) + } }; } }, []); + const drawTarget = (ctx) => { + drawCircle(ctx, { + radius: 12, + lineWidth: 0, + strokeStyle: "#FFFFFF", + colorFill: "#ADD8E6", + startY: 250, + startX: 250 + }); + } + + const clearTarget = (ctx) => { + drawCircle(ctx, { + radius: 12, + lineWidth: 0, + strokeStyle: "#FFFFFF", + colorFill: "#FFFFFF", + startY: 250, + startX: 250 + }); + } + + const clearCenter = (ctx, centerX, centerY) => { + drawCircle(ctx, { + radius: 16, + lineWidth:0, + strokeStyle: "#FFFFFF", + colorFill: "#FFFFFF", + startY: centerY, + startX: centerX + }); + drawCircle(ctx, { + radius: 12, + lineWidth: 0, + strokeStyle: "#FFFFFF", + colorFill: "#FFFFFF", + startY: centerY, + startX: centerX + }); + } + + const drawCenterCircle = (ctx, centerX, centerY) => { + drawCircle(ctx, { + radius: 16, + lineWidth:2, + strokeStyle: "#FF0000", + colorFill: "#FF0000", + startY: centerY, + startX: centerX + }); + drawCircle(ctx, { + radius: 12, + lineWidth: 5, + strokeStyle: "#FFFF00", + colorFill: "#FF0000", + startY: centerY, + startX: centerX + }); + } + return ( <>
+ + To find your cursor, try moving your mouse to the center of the screen + + + + {`${currentCount}/${props?.totalCount ?? 120}`} + ); }; diff --git a/Maze_Game/src/containers/DialogMessage.tsx b/Maze_Game/src/containers/DialogMessage.tsx new file mode 100644 index 00000000..6f8e709b --- /dev/null +++ b/Maze_Game/src/containers/DialogMessage.tsx @@ -0,0 +1,70 @@ +// Core Imports +import React, { useEffect, useState } from "react" +import { + Button, + makeStyles, + DialogTitle, + DialogContentText, + DialogActions, + Dialog, + DialogContent, +} from "@material-ui/core" +import { useTranslation } from "react-i18next" +import i18n from "../i18n"; + +const useStyles = makeStyles((theme) => ({ + + popupstartBtn: { + background: "#359ffe", + color: "#ffffff", + fontWeight: "bold", + borderRadius: "10px", + boxShadow: "0px 3px 5px rgba(0, 0, 0, 0.20)", + cursor: "pointer", + minWidth: "100px", + "&:hover": { background: "#359ffe" }, + + }, + startbtnDiv: { + width: "59%", + marginBottom: "10px" + }, + comment: { + color: "#000", + textAlign: "justify" + }, +})) + + +export default function DialogMessage({ ...props }) { + + const classes = useStyles() + const { t } = useTranslation() + const [open, setOpen] = useState(false) + + useEffect(() => { + setOpen(props.open) + }, [props.open]) + + return ( + + {`${t("")}`} + + + {i18n.t("IN_THIS_GAME_YOU_CAN_TILT_YOUR_PHONE_TO_CONTROL_A_SMALL_BALL_SEEN_ON_YOUR_SCREEN_TRY_TO_NAVIGATE_THE_BALL_OUT_OF_THE_CENTER_OF_THE_MAZE_AND_INTO_THE_OPEN_SPACE_THE_FASTER_YOU_ESCAPE_THE_MORE_POINTS_YOU_WILL_ACCURE")} + + + + + + + + ) +} + diff --git a/Maze_Game/src/containers/Layout.tsx b/Maze_Game/src/containers/Layout.tsx index a46852fb..de50a169 100644 --- a/Maze_Game/src/containers/Layout.tsx +++ b/Maze_Game/src/containers/Layout.tsx @@ -6,6 +6,7 @@ import { faArrowLeft } from "@fortawesome/free-solid-svg-icons"; import i18n from "../i18n"; import ModalPopup from './uielements/ModalPopup'; import { MazeComponent } from "./MazeComponent"; +import DialogMessage from "./DialogMessage"; const Layout = ({...props} : any) =>{ @@ -20,6 +21,7 @@ const Layout = ({...props} : any) =>{ const [routes, setRoutes] = useState([]) const [startGame, setStartGame] = useState(false) const [showStartButton, setShowStartButton] = useState(false) + const [open, setOpen] = useState(false) useEffect(() => { const configuration = props?.data?.configuration; @@ -36,7 +38,7 @@ const Layout = ({...props} : any) =>{ setShowStartButton(true) } } - + setOpen(true) }, [props.data]) @@ -163,6 +165,7 @@ const Layout = ({...props} : any) =>{
{footerMsg}
+ ) } diff --git a/Maze_Game/src/i18n.js b/Maze_Game/src/i18n.js index 585019f3..f1305cb3 100644 --- a/Maze_Game/src/i18n.js +++ b/Maze_Game/src/i18n.js @@ -45,7 +45,9 @@ const resources = { PERMISSION:"Click to grant accelerometer Permission", START_GAME: "Start Game", YES: "Yes", - YOU_WON: "You Won" + YOU_WON: "You Won", + IN_THIS_GAME_YOU_CAN_TILT_YOUR_PHONE_TO_CONTROL_A_SMALL_BALL_SEEN_ON_YOUR_SCREEN_TRY_TO_NAVIGATE_THE_BALL_OUT_OF_THE_CENTER_OF_THE_MAZE_AND_INTO_THE_OPEN_SPACE_THE_FASTER_YOU_ESCAPE_THE_MORE_POINTS_YOU_WILL_ACCURE: + "In this game, you can tilt your phone to control a small ball seen on your screen. Try to navigate the ball out of the center of the maze and into the open space. The faster you escape, the more points you will accrue." }, }, "es-ES": { @@ -97,7 +99,8 @@ const resources = { MAZE_GAME: "रास्ता खोजना, खेल", IN_THIS_GAME_YOU_CAN_TILT_YOUR_PHONE_TO_CONTROL_A_SMALL_BALL_SEEN_ON_YOUR_SCREEN_TRY_TO_NAVIGATE_THE_BALL_OUT_OF_THE_CENTER_OF_THE_MAZE_AND_INTO_THE_OPEN_SPACE_THE_FASTER_YOU_ESCAPE_THE_MORE_POINTS_YOU_WILL_ACCURE: "इस गेम में, आप अपनी स्क्रीन पर दिखाई देने वाली एक छोटी सी गेंद को नियंत्रित करने के लिए अपने फ़ोन को झुका सकते हैं। गेंद को भूलभुलैया के केंद्र से बाहर और खुली जगह में ले जाने का प्रयास करें। आप जितनी तेजी से बचेंगे, उतने अधिक अंक अर्जित करेंगे।", - LEVEL_1: "स्तर-1" + LEVEL_1: "स्तर-1", + OK: "ठीक है", }, }, "it-IT":{ diff --git a/PopTheBubbles/src/components/pop_the_bubbles/InstructionModal.tsx b/PopTheBubbles/src/components/pop_the_bubbles/InstructionModal.tsx new file mode 100644 index 00000000..5bc17742 --- /dev/null +++ b/PopTheBubbles/src/components/pop_the_bubbles/InstructionModal.tsx @@ -0,0 +1,51 @@ + +import * as React from 'react'; +import { Button, Modal } from 'react-bootstrap'; +import i18n from "./../../i18n"; + +interface Props { + show: boolean; + modalClose(status:boolean):void; + msg:string; + language: string; +} + +interface State { + showStatus : boolean +} + +export class InstructionModal extends React.Component { + + constructor(props: Props) { + super(props); + this.state = { + showStatus : this.props.show + } + } + + // Handles modal close + handleClose = () => { + this.setState({ + showStatus : false + }); + this.props.modalClose(false); + } + + // Modal render function + render() { + return ( + + {this.props.msg} + + + + + ); + } +} \ No newline at end of file diff --git a/PopTheBubbles/src/components/pop_the_bubbles/PopTheBubbles.tsx b/PopTheBubbles/src/components/pop_the_bubbles/PopTheBubbles.tsx index 3be92960..14a12617 100644 --- a/PopTheBubbles/src/components/pop_the_bubbles/PopTheBubbles.tsx +++ b/PopTheBubbles/src/components/pop_the_bubbles/PopTheBubbles.tsx @@ -17,6 +17,7 @@ import i18n from "./../../i18n"; import Board from "./Board"; import { Bubble } from "./Bubble"; import "./bubble.css"; +import { InstructionModal } from "./InstructionModal"; interface AppProps { configuration: any; @@ -59,6 +60,7 @@ interface AppState { wrongNoGoClicks: number; time:number; noBack: boolean; + showDialog: boolean; } class PopTheBubbles extends React.Component { @@ -108,6 +110,7 @@ class PopTheBubbles extends React.Component { xPoints: this.getCoordPoints(xValues), yCoords: yValues, yPoints: this.getCoordPoints(yValues), + showDialog: true, }; this.bubbleCount = this.state.bubble_count[0]; } @@ -541,9 +544,21 @@ class PopTheBubbles extends React.Component { "*" ); } + + handleCloseInstructionModal = () => { + this.setState({ showDialog: false }); + }; // Game render function render() { const infoSection = this.getLevelCases(); + const instructionModal = this.state.showDialog ? ( + + ) : null; return (
{!this.state.noBack &&
{i18n.t("POP_THE_BUBBLES")}
{infoSection} + {instructionModal}
); } diff --git a/PopTheBubbles/src/components/pop_the_bubbles/bubble.css b/PopTheBubbles/src/components/pop_the_bubbles/bubble.css index 59c81e5d..fb2f47fc 100644 --- a/PopTheBubbles/src/components/pop_the_bubbles/bubble.css +++ b/PopTheBubbles/src/components/pop_the_bubbles/bubble.css @@ -330,4 +330,16 @@ bottom: auto !important; width: 100%; position: relative !important; } -.bubble-result{position: relative !important; margin-top: 15px;} \ No newline at end of file +.bubble-result{position: relative !important; margin-top: 15px;} +.footer-cls { + margin-top: 10px; +} +.modal-body-section { + padding: 15px !important; + margin-bottom: 10px; + font-size: 18px; +} + +.footer-cls button { + font-size: 14px; + } \ No newline at end of file diff --git a/PopTheBubbles/src/i18n.js b/PopTheBubbles/src/i18n.js index 0f9460eb..ea2ac558 100644 --- a/PopTheBubbles/src/i18n.js +++ b/PopTheBubbles/src/i18n.js @@ -67,6 +67,8 @@ const resources = { TAP_TO_POP_LEVEL_2_BUBBLES_BOTTOM:"ONLY POP YELLOW AND BLUE BUBBLES.", TAP_TO_POP_LEVEL_3_BUBBLES_BOTTOM:"ONLY POP PINK YELLOW AND BLUE BUBBLES.", YOU_GOT_PERCENT: "You got {{ percentage }}", + IN_THIS_GAME_YOU_WILL_SEE_LOTS_OF_DIFFERENT_COLORED_BUBBLES_ONE_AT_A_TIME_YOUR_TASK_IS_TO_POP_THE_CORRECTLY_COLORED_BUBBLES_WHILE_IGNORING_THE_INCORRECT_ONES_PAY_ATTENTION_TO_THE_INSTRUCTIONS_FOR_EACH_LEVEL_TO_KNOW_WHICH_COLORED_BUBBLES_YOU_SHOULD_TAP_AND_WHICH_ONES_YOU_SHOULD_IGNORE: + "In this game, you will see lots of different colored bubbles, one at a time. Your task is to 'pop' the correctly colored bubbles, while ignoring the incorrect ones. Pay attention to the instructions for each level to know which colored bubbles you should tap, and which ones you should ignore." }, },"es-ES": { translation: { @@ -145,6 +147,7 @@ const resources = { LEVEL_3_COMPLETED: "स्तर 3 पूरा हुआ", IN_THIS_GAME_YOU_WILL_SEE_LOTS_OF_DIFFERENT_COLORED_BUBBLES_ONE_AT_A_TIME_YOUR_TASK_IS_TO_POP_THE_CORRECTLY_COLORED_BUBBLES_WHILE_IGNORING_THE_INCORRECT_ONES_PAY_ATTENTION_TO_THE_INSTRUCTIONS_FOR_EACH_LEVEL_TO_KNOW_WHICH_COLORED_BUBBLES_YOU_SHOULD_TAP_AND_WHICH_ONES_YOU_SHOULD_IGNORE: "इस खेल में, आप बहुत से विभिन्न रंगों के बुलबुल देखेंगे, एक बार में एक। आपका कार्य है सही रंग के बुलबुलों को 'फोड़ना’ है एवं गलत रंगों को बुलबुले को नजरअंदाज करना। (आपका कार्य है की गलत रंगों के बुलबुलों को बिना दबाए, सही रंग के बुलबुलों को चुने) प्रत्येक स्तर के लिए निर्देशों पर ध्यान दें ताकि आप जान सकें कौन सी रंग के बुलबुलों को आपको दबाना चाहिए, और किसको आपको नजरअंदाज करना चाहिए।", + OK: "ठीक है", }, }, "it-IT": { translation: { diff --git a/Spin_Wheel/src/containers/DialogMessage.tsx b/Spin_Wheel/src/containers/DialogMessage.tsx new file mode 100644 index 00000000..ae78de67 --- /dev/null +++ b/Spin_Wheel/src/containers/DialogMessage.tsx @@ -0,0 +1,69 @@ +// Core Imports +import React, { useEffect, useState } from "react" +import { + Button, + makeStyles, + DialogTitle, + DialogContentText, + DialogActions, + Dialog, + DialogContent, +} from "@material-ui/core" +import { useTranslation } from "react-i18next" +import i18n from "../i18n"; + +const useStyles = makeStyles((theme) => ({ + + popupstartBtn: { + background: "#359ffe", + color: "#ffffff", + fontWeight: "bold", + borderRadius: "10px", + boxShadow: "0px 3px 5px rgba(0, 0, 0, 0.20)", + cursor: "pointer", + minWidth: "100px", + "&:hover": { background: "#359ffe" }, + + }, + startbtnDiv: { + width: "59%", + marginBottom: "10px" + }, + comment: { + color: "#000", + textAlign: "justify" + }, +})) + + +export default function DialogMessage({ ...props }) { + + const classes = useStyles() + const { t } = useTranslation() + const [open, setOpen] = useState(false) + + useEffect(() => { + setOpen(props.open) + }, [props.open]) + + return ( + + {`${t("")}`} + + + {i18n.t("THE_GAME_PRESENTS_YOU_WITH_TWO_WHEELS_THAT_CAN_BE_SPUN_BY_SELECTING_ONE_OF_FOUR_BUTTONS_AT_THE_BOTTOM_OF_THE_SCREEN_THE_COLORS_OF_THE_BUTTONS_DO_NOT_CORRESPOND_TO_THE_COLORS_ON_THE_WHEEL_EACH_SPIN_CAN_RESULT_IN_A_WIN_OR_LOSS_OF_MONEY_WITH_THE_WHEEL_AT_THE_TOP_DISPLAYING_THE_MONEY_YOU_WON_AND_THE_BOTTOM_DISPLAYING_THE_MONEY_YOU_LOST_THE_TOTAL_AMOUNT_REMAINING_IS_DISPLAYED_AT_THE_TOP_OF_THE_SCREEN_YOU_START_WITH_$2000_AND_HAVE_20_SPINS_PER_GAME_BY_DEFAULT_POINTS_AT_THE_END_OF_A_SESSION_ARE_REPRESENTED_IN_THE_AMOUNT_OF_MONEY_YOU_HAVE")} + + + + + + + + ) +} + diff --git a/Spin_Wheel/src/containers/Layout.tsx b/Spin_Wheel/src/containers/Layout.tsx index ebe922e6..f7a5a387 100644 --- a/Spin_Wheel/src/containers/Layout.tsx +++ b/Spin_Wheel/src/containers/Layout.tsx @@ -14,6 +14,7 @@ import { } from "@material-ui/core" import ArrowBackIcon from '@material-ui/icons/ArrowBack' import './layout.css'; +import DialogMessage from './DialogMessage'; const useStyles = makeStyles((theme) => ({ toolbardashboard: { @@ -58,6 +59,7 @@ const Layout = ({...props}) => { const [disableButtons, setDisableButtons] = useState(false) const [showResult, setShowResult] = useState(false) + const [open, setOpen] = useState(false) function getRandomWithProbability(array : any) { @@ -113,6 +115,7 @@ const Layout = ({...props}) => { }) : null, "*") }, 2000) } + setOpen(true) }, [complete]) useEffect(() => { @@ -279,6 +282,7 @@ const Layout = ({...props}) => { } + ); diff --git a/Spin_Wheel/src/i18n.js b/Spin_Wheel/src/i18n.js index c70f4d51..70828ef8 100644 --- a/Spin_Wheel/src/i18n.js +++ b/Spin_Wheel/src/i18n.js @@ -36,7 +36,8 @@ const resources = { TOTAL_SPINS: "Total Spins", YOU_LOSE: "You Lose", YOU_WON: "You Won", - + THE_GAME_PRESENTS_YOU_WITH_TWO_WHEELS_THAT_CAN_BE_SPUN_BY_SELECTING_ONE_OF_FOUR_BUTTONS_AT_THE_BOTTOM_OF_THE_SCREEN_THE_COLORS_OF_THE_BUTTONS_DO_NOT_CORRESPOND_TO_THE_COLORS_ON_THE_WHEEL_EACH_SPIN_CAN_RESULT_IN_A_WIN_OR_LOSS_OF_MONEY_WITH_THE_WHEEL_AT_THE_TOP_DISPLAYING_THE_MONEY_YOU_WON_AND_THE_BOTTOM_DISPLAYING_THE_MONEY_YOU_LOST_THE_TOTAL_AMOUNT_REMAINING_IS_DISPLAYED_AT_THE_TOP_OF_THE_SCREEN_YOU_START_WITH_$2000_AND_HAVE_20_SPINS_PER_GAME_BY_DEFAULT_POINTS_AT_THE_END_OF_A_SESSION_ARE_REPRESENTED_IN_THE_AMOUNT_OF_MONEY_YOU_HAVE: + "The game presents you with two wheels that can be spun by selecting one of four buttons at the bottom of the screen. The colors of the buttons do not correspond to the colors on the wheel. Each spin can result in a win or loss of money, with the wheel at the top displaying the money you won and the bottom displaying the money you lost. The total amount remaining is displayed at the top of the screen. You start with $2000 and have 20 spins per game by default. Points at the end of a session are represented in the amount of money you have.", }, }, "es-ES": { @@ -78,7 +79,10 @@ const resources = { BEGIN: "खेल शुरू करें!", TOTAL_SPIN: "कुल घूमाव", LOTTERY: "लॉटरी", - TOTAL_SPIN_20: "कुल घूमाव 20" + TOTAL_SPIN_20: "कुल घूमाव 20", + THE_GAME_PRESENTS_YOU_WITH_TWO_WHEELS_THAT_CAN_BE_SPUN_BY_SELECTING_ONE_OF_FOUR_BUTTONS_AT_THE_BOTTOM_OF_THE_SCREEN_THE_COLORS_OF_THE_BUTTONS_DO_NOT_CORRESPOND_TO_THE_COLORS_ON_THE_WHEEL_EACH_SPIN_CAN_RESULT_IN_A_WIN_OR_LOSS_OF_MONEY_WITH_THE_WHEEL_AT_THE_TOP_DISPLAYING_THE_MONEY_YOU_WON_AND_THE_BOTTOM_DISPLAYING_THE_MONEY_YOU_LOST_THE_TOTAL_AMOUNT_REMAINING_IS_DISPLAYED_AT_THE_TOP_OF_THE_SCREEN_YOU_START_WITH_$2000_AND_HAVE_20_SPINS_PER_GAME_BY_DEFAULT_POINTS_AT_THE_END_OF_A_SESSION_ARE_REPRESENTED_IN_THE_AMOUNT_OF_MONEY_YOU_HAVE: + "खेल आपको दो पहियों के साथ प्रस्तुत करता है जो स्क्रीन के नीचे चार बटनों में से एक को चयन करके घूमाया जा सकता हैं। बटनों के रंग पहियों पर रंग के साथ मेल नहीं खाते हैं। प्रत्येक घूमाव पैसे जीतने या हारने का परिणाम हो सकता है, जिसमें ऊपर का पहिया आपकी जीती हुई धनराशि और नीचे आपकी हारी हुई धनराशि को दिखाता है। स्क्रीन के शीर्ष पर शेष राशि दिखाई जाती है। आप 2000 रुपए के साथ शुरुआत करते हैं और प्रति खेल आपको 20 घूमाव मिलेंगे । सत्र के अंत में आपके पास होने वाले पॉइंट्स आपकी धनराशि के रूप में दिखाई देंगे ।", + OK: "ठीक है", }, }, "it-IT":{