Merge pull request #424 from BIDMCDigitalPsychiatry/funny-memory

Game updates - QA fixes

D-cog/src/components/dcogs/1Star.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import {
+  Box
+} from "@material-ui/core"
+
+const Star1 = () => {
+  return (
+    <Box><svg xmlns="http://www.w3.org/2000/svg" width="126" height="126" viewBox="0 0 126 126">
+      <g id="_1Star" data-name="1Star" transform="translate(-183 -201)">
+        <circle id="Ellipse_1" data-name="Ellipse 1" cx="63" cy="63" r="63" transform="translate(183 201)" fill="#f50100" />
+        <circle id="Ellipse_2" data-name="Ellipse 2" cx="8.5" cy="8.5" r="8.5" transform="translate(212 252)" fill="#333" />
+        <circle id="Ellipse_4" data-name="Ellipse 4" cx="8.5" cy="8.5" r="8.5" transform="translate(263.533 252)" fill="#333" />
+        <path id="Path_1" data-name="Path 1" d="M365.534,351.5a3,3,0,0,1-1.091-5.8c.127-.05,12.769-5.075,20.548-15a3,3,0,1,1,4.722,3.7C380.9,345.656,367.2,351.071,366.62,351.3A2.992,2.992,0,0,1,365.534,351.5Z" transform="translate(-158 -88)" fill="#333" />
+        <path id="Path_1-2" data-name="Path 1" d="M387.351,351.5a3,3,0,0,0,1.091-5.8c-.127-.05-12.769-5.075-20.548-15a3,3,0,1,0-4.722,3.7c8.817,11.245,22.514,16.66,23.093,16.885A2.992,2.992,0,0,0,387.351,351.5Z" transform="translate(-102.352 -88)" fill="#333" />
+        <path id="Path_1-3" data-name="Path 1" d="M382.239,384.517a3,3,0,0,1-1.933-5.3c.24-.2,24.268-19.956,47.361.027a3,3,0,0,1-3.926,4.537c-19.267-16.674-38.752-.662-39.572.027A2.988,2.988,0,0,1,382.239,384.517Z" transform="translate(-158 -88)" fill="#333" />
+      </g>
+    </svg>
+    </Box>
+  )
+}
+export default Star1

D-cog/src/components/dcogs/2Star.svg → D-cog/src/components/dcogs/2Star.tsx

@@ -1,4 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="126" height="126" viewBox="0 0 126 126">
+import React from 'react'
+import {
+    Box
+  } from "@material-ui/core"
+
+const Star2 = () => {
+  return (
+    <Box><svg xmlns="http://www.w3.org/2000/svg" width="126" height="126" viewBox="0 0 126 126">
   <g id="_2Star" data-name="2Star" transform="translate(-519 -289)">
     <circle id="Ellipse_1" data-name="Ellipse 1" cx="63" cy="63" r="63" transform="translate(519 289)" fill="#ff8b00"/>
     <g id="Group_2" data-name="Group 2" transform="translate(0 -1)">
@@ -8,3 +15,7 @@
     </g>
   </g>
 </svg>
+</Box>
+  )
+}
+export default Star2

D-cog/src/components/dcogs/3Star.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import {
+  Box
+} from "@material-ui/core"
+
+const Star3 = () => {
+  return (
+    <Box><svg xmlns="http://www.w3.org/2000/svg" width="126" height="126" viewBox="0 0 126 126">
+      <g id="_3Star" data-name="3Star" transform="translate(-698 -289)">
+        <circle id="Ellipse_5" data-name="Ellipse 5" cx="63" cy="63" r="63" transform="translate(698 289)" fill="#fff800" />
+        <g id="Group_3" data-name="Group 3" transform="translate(179 -1)">
+          <circle id="Ellipse_2" data-name="Ellipse 2" cx="8.5" cy="8.5" r="8.5" transform="translate(548 341)" fill="#333" />
+          <circle id="Ellipse_4" data-name="Ellipse 4" cx="8.5" cy="8.5" r="8.5" transform="translate(599.533 341)" fill="#333" />
+        </g>
+        <path id="Line_1" data-name="Line 1" d="M46,3H0A3,3,0,0,1-3,0,3,3,0,0,1,0-3H46a3,3,0,0,1,3,3A3,3,0,0,1,46,3Z" transform="translate(738.5 384.5)" fill="#333" />
+      </g>
+    </svg>
+    </Box>
+  )
+}
+export default Star3

D-cog/src/components/dcogs/4Star.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import {
+  Box
+} from "@material-ui/core"
+
+const Star4 = () => {
+  return (
+    <Box>
+      <svg xmlns="http://www.w3.org/2000/svg" width="126" height="126" viewBox="0 0 126 126">
+        <g id="_4Star" data-name="4Star" transform="translate(-877 -289)">
+          <circle id="Ellipse_6" data-name="Ellipse 6" cx="63" cy="63" r="63" transform="translate(877 289)" fill="#cdff00" />
+          <g id="Group_4" data-name="Group 4" transform="translate(357 -1)">
+            <circle id="Ellipse_2" data-name="Ellipse 2" cx="8.5" cy="8.5" r="8.5" transform="translate(548 341)" fill="#333" />
+            <circle id="Ellipse_4" data-name="Ellipse 4" cx="8.5" cy="8.5" r="8.5" transform="translate(599.533 341)" fill="#333" />
+          </g>
+          <path id="Path_1" data-name="Path 1" d="M382.239,372.961a3,3,0,0,0-1.933,5.3c.24.2,23.064,14,47.361-.027a3,3,0,0,0-3.926-4.537c-19.472,9.4-38.752.662-39.572-.027A2.988,2.988,0,0,0,382.239,372.961Z" transform="translate(535.296 4)" fill="#333" />
+        </g>
+      </svg>
+    </Box>
+  )
+}
+export default Star4

D-cog/src/components/dcogs/5Star.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import {
+    Box
+  } from "@material-ui/core"
+
+const Star5 = () => {
+  return (
+    <Box>
+      <svg xmlns="http://www.w3.org/2000/svg" width="126" height="126" viewBox="0 0 126 126">
+        <g id="_5Star" data-name="5Star" transform="translate(-1054 -289)">
+          <circle id="Ellipse_7" data-name="Ellipse 7" cx="63" cy="63" r="63" transform="translate(1054 289)" fill="#2cff00"/>
+          <g id="Group_5" data-name="Group 5" transform="translate(535 -1)">
+            <circle id="Ellipse_2" data-name="Ellipse 2" cx="8.5" cy="8.5" r="8.5" transform="translate(548 341)" fill="#333"/>
+            <circle id="Ellipse_4" data-name="Ellipse 4" cx="8.5" cy="8.5" r="8.5" transform="translate(599.533 341)" fill="#333"/>
+          </g>
+          <path id="Path_1" data-name="Path 1" d="M80.012,67.155A42.446,42.446,0,0,1,43.5,87,43.594,43.594,0,0,1,7.328,67.67Z" transform="translate(1074 302)" fill="#333"/>
+        </g>
+      </svg>
+  </Box>
+  )
+}
+export default Star5

D-cog/src/components/dcogs/Questinnaire.tsx

@@ -8,11 +8,11 @@
 import * as React from "react";
 import "./box.css";
 import { Button, Modal, Row, Col } from "react-bootstrap";
-import FiveStar from "./5Star.svg";
-import FourStar from "./4Star.svg";
-import ThreeStar from "./3Star.svg";
-import TwoStar from "./2Star.svg";
-import OneStar from "./1Star.svg";
+import Star5 from "./5Star.svg";
+import Star4 from "./4Star.svg";
+import Star3 from "./3Star.svg";
+import Star2 from "./2Star.svg";
+import Star1 from "./1Star.svg";
 import i18n from "../../i18n";
 
 interface Props {
@@ -74,21 +74,21 @@ export class Questinnaire extends React.Component<Props, State> {
           <Row className="align-items-center mb-4">
             <Col lg={4} className="fw-bolder">How clear were the instructions?</Col>
             <Col className="smileynav">
-              <Button onClick={(e) => this.setClarity(e, 5)} className={this.state.clarity == 5 ? "active" : ""}><img src={FiveStar}/></Button>
-              <Button onClick={(e) => this.setClarity(e, 4)} className={this.state.clarity == 4 ? "active" : ""}><img src={FourStar}/></Button>
-              <Button onClick={(e) => this.setClarity(e, 3)} className={this.state.clarity == 3 ? "active" : ""}><img src={ThreeStar}/></Button>
-              <Button onClick={(e) => this.setClarity(e, 2)} className={this.state.clarity == 2 ? "active" : ""}><img src={TwoStar}/></Button>
-              <Button onClick={(e) => this.setClarity(e, 1)} className={this.state.clarity == 1 ? "active" : ""}><img src={OneStar}/></Button>
+              <Button onClick={(e) => this.setClarity(e, 5)} className={this.state.clarity == 5 ? "active" : ""}><img src={Star5}/></Button>
+              <Button onClick={(e) => this.setClarity(e, 4)} className={this.state.clarity == 4 ? "active" : ""}><img src={Star4}/></Button>
+              <Button onClick={(e) => this.setClarity(e, 3)} className={this.state.clarity == 3 ? "active" : ""}><img src={Star3}/></Button>
+              <Button onClick={(e) => this.setClarity(e, 2)} className={this.state.clarity == 2 ? "active" : ""}><img src={Star2}/></Button>
+              <Button onClick={(e) => this.setClarity(e, 1)} className={this.state.clarity == 1 ? "active" : ""}><img src={Star1}/></Button>
             </Col>
           </Row>
           <Row className="align-items-center mb-4">
             <Col lg={4} className="fw-bolder">How happy would you be to do this again?</Col>
             <Col className="smileynav">
-              <Button onClick={(e) => this.setHappiness(e, 5)} className={this.state.happiness == 5 ? "active" : ""}><img src={FiveStar}/></Button>
-              <Button onClick={(e) => this.setHappiness(e, 4)} className={this.state.happiness == 4 ? "active" : ""}><img src={FourStar}/></Button>
-              <Button onClick={(e) => this.setHappiness(e, 3)} className={this.state.happiness == 3 ? "active" : ""}><img src={ThreeStar}/></Button>
-              <Button onClick={(e) => this.setHappiness(e, 2)} className={this.state.happiness == 2 ? "active" : ""}><img src={TwoStar}/></Button>
-              <Button onClick={(e) => this.setHappiness(e, 1)} className={this.state.happiness == 1 ? "active" : ""}><img src={OneStar}/></Button>
+              <Button onClick={(e) => this.setHappiness(e, 5)} className={this.state.happiness == 5 ? "active" : ""}><img src={Star5}/></Button>
+              <Button onClick={(e) => this.setHappiness(e, 4)} className={this.state.happiness == 4 ? "active" : ""}><img src={Star4}/></Button>
+              <Button onClick={(e) => this.setHappiness(e, 3)} className={this.state.happiness == 3 ? "active" : ""}><img src={Star3}/></Button>
+              <Button onClick={(e) => this.setHappiness(e, 2)} className={this.state.happiness == 2 ? "active" : ""}><img src={Star2}/></Button>
+              <Button onClick={(e) => this.setHappiness(e, 1)} className={this.state.happiness == 1 ? "active" : ""}><img src={Star1}/></Button>
             </Col>
           </Row>
         </Modal.Body>