Merge pull request #387 from BIDMCDigitalPsychiatry/issue-810

Issue 815 changes completed

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<BoardProps, BoardState> {
@@ -90,6 +92,7 @@ class Board extends React.Component<BoardProps, BoardState> {
       successTaps: 0,
       timeout: false,
       wrongTaps: 0,
+      showInstruction: true,
     };
   }
   // Reset game state for each state
@@ -454,6 +457,11 @@ class Board extends React.Component<BoardProps, BoardState> {
       this.sendGameResult(true)
 
   }
+
+  handleCloseInstructionModal = () => {
+    this.setState({ showInstruction: false });
+  };
+
   // Render the game board
   render() {
     let boxes;
@@ -570,6 +578,15 @@ class Board extends React.Component<BoardProps, BoardState> {
         language={i18n.language}
       />
     ) : null;
+
+    const instructionModal = this.state.showInstruction ? (
+      <InstructionModal
+        show={true}
+        modalClose={this.handleCloseInstructionModal}
+        msg ={ `${i18n.t("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")}`  }      
+        language={i18n.language}
+      />
+    ) : null;
     return (
       <div>
             {!this.props.noBack && <nav className="back-link">
@@ -585,6 +602,7 @@ class Board extends React.Component<BoardProps, BoardState> {
         <div className="mt-30">{boxes}</div>
         {modal}
       </div>
+      {instructionModal}
       </div>
       </div>
     );

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<Props, State> {    
+
+    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 (            
+          <Modal show={this.state.showStatus} onHide={this.handleClose} 
+          animation={false}
+          size="lg"
+          aria-labelledby="contained-modal-title-vcenter"
+          centered={true}>               
+              <Modal.Body className='modal-body-section'>{this.props.msg}</Modal.Body>
+              <Modal.Footer className=''>              
+                  <Button onClick={this.handleClose}>
+                    {i18n.t("OK")}
+                  </Button>
+            </Modal.Footer>
+         </Modal>    
+        );
+    }
+}

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;
+}

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: {

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<HTMLCanvasElement | null>(null);
   const divRef = useRef<HTMLDivElement | null>(null);
-
+  const helpTextRef = useRef<HTMLElement | null>(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 (
     <>
       <canvas
@@ -161,6 +216,13 @@ export function GameComponent({...props}){
         }}
       />
       <div ref={divRef} className="cursor"></div>
+      <span ref={helpTextRef} className={classes.helpText}>
+        To find your cursor, try moving your mouse to the center of the screen
+        </span>
+
+        <span className={classes.countText}>
+        {`${currentCount}/${props?.totalCount ?? 120}`}
+        </span>
     </>
   );
 };