Merge pull request #245 from BIDMCDigitalPsychiatry/issue-715

Spin wheel game
BIDMCDigitalPsychiatry · Jan 5, 2023 · 032f5eb · 032f5eb
2 parents 756d958 + c2184f6
commit 032f5eb
Show file tree

Hide file tree

Showing 31 changed files with 1,482 additions and 0 deletions.
diff --git a/Spin_Wheel/.env b/Spin_Wheel/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/Spin_Wheel/.gitignore b/Spin_Wheel/.gitignore
@@ -0,0 +1,26 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+/dist
+
+# IDE
+/.vscode/
+/.idea/
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/Spin_Wheel/gulpfile.js b/Spin_Wheel/gulpfile.js
@@ -0,0 +1,14 @@
+const gulp = require('gulp')
+const inlinesource = require('gulp-inline-source')
+const replace = require('gulp-replace')
+
+gulp.task('default', () => {
+    return gulp.src('./build/*.html')
+        .pipe(replace('.js"></script>', '.js" inline></script>'))
+        .pipe(replace('rel="stylesheet">', 'rel="stylesheet" inline>'))
+        .pipe(inlinesource({
+            compress: false,
+            ignore: ['png']
+        }))
+        .pipe(gulp.dest('./build'))
+});
diff --git a/Spin_Wheel/images.d.ts b/Spin_Wheel/images.d.ts
@@ -0,0 +1,6 @@
+declare module '*.svg'
+declare module '*.png'
+declare module '*.jpg'
+declare module 'react-router-dom'
+declare module 'react-dom'
+declare module 'styled-components'
diff --git a/Spin_Wheel/package.json b/Spin_Wheel/package.json
@@ -0,0 +1,71 @@
+{
+  "name": "Spin Wheel",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.27",
+    "@fortawesome/free-solid-svg-icons": "^5.12.1",
+    "@fortawesome/react-fontawesome": "^0.1.8",
+    "@material-ui/core": "^4.9.10",
+    "@material-ui/lab": "^4.0.0-alpha.49",
+    "@material-ui/icons": "^4.11.2",
+    "@types/d3-ease": "^1.0.9",
+    "@types/jest": "^25.1.2",
+    "@types/react-router-dom": "^5.1.3",
+    "bootstrap": "^4.4.1",
+    "classnames": "^2.2.5",
+    "d3-ease": "^1.0.6",
+    "dotenv": "^8.2.0",
+    "html-loader": "^1.1.0",
+    "html-webpack-inline-source-plugin": "^1.0.0-beta.2",
+    "html-webpack-plugin": "^4.0.0-beta.4",
+    "i18next": "^19.8.3",
+    "i18next-http-backend": "^1.2.6",
+    "lodash": "^4.17.20",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.0",
+    "react-bootstrap": "^1.0.0-beta.17",
+    "react-circular-progressbar": "^2.0.3",
+    "react-dom": "^16.12.0",
+    "react-i18next": "^11.7.3",
+    "react-router-dom": "^5.1.2",
+    "react-scripts-ts": "^4.0.8",
+    "rx": "^4.1.0",
+    "styled-components": "^5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts-ts start",
+    "build": "npm run build:react && npm run build:bundle && npx gulp",
+    "build:react": "react-scripts-ts build",
+    "build:bundle": "webpack --config webpack.config.js",
+    "test": "react-scripts-ts test --env=jsdom",
+    "eject": "react-scripts-ts eject",
+    "predeploy": "gh-pages -d build",
+    "deploy": "gh-pages -d build"
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^2.4.1",
+    "@types/classnames": "^2.2.3",
+    "@types/lodash": "^4.14.109",
+    "@types/node": "^10.17.14",
+    "@types/prop-types": "^15.7.3",
+    "@types/react": "^16.9.19",
+    "@types/react-dom": "^16.9.5",
+    "@types/rx": "^4.1.1",
+    "gh-pages": "^1.1.0",
+    "gulp": "^4.0.2",
+    "gulp-inline-source": "^4.0.0",
+    "gulp-replace": "^1.0.0",
+    "react-hot-loader": "^4.12.21",
+    "react-scripts": "^3.4.3",
+    "typescript": "^3.7.5",
+    "webpack-cli": "^3.3.12"
+  },
+  "homepage": "./",
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/Spin_Wheel/public/favicon.ico b/Spin_Wheel/public/favicon.ico
diff --git a/Spin_Wheel/public/index.html b/Spin_Wheel/public/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/Spin_Wheel/public/manifest.json b/Spin_Wheel/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/Spin_Wheel/src/components/ImageComponents/blueButtonSVG.tsx b/Spin_Wheel/src/components/ImageComponents/blueButtonSVG.tsx
@@ -0,0 +1,59 @@
+import {
+    Box
+  } from "@material-ui/core"
+  import React from 'react'
+  import "./bluebutton.css"
+
+
+const BluebuttonSVG = () => {
+    return (
+        <Box>
+           <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="60.011" height="60.692" viewBox="0 0 79.011 80.692">
+            <defs>
+                <linearGradient id="a4" x1="0.176" y1="0.138" x2="1.195" y2="1.29" gradientUnits="objectBoundingBox">
+                    <stop offset="0" stopColor="#b5aca1"/>
+                    <stop offset="0.347" stopColor="#554c3c"/>
+                    <stop offset="1" stopColor="#11100c"/>
+                </linearGradient>
+                <filter id="b4" x="7.011" y="8.692" width="70" height="70" filterUnits="userSpaceOnUse">
+                    <feOffset dy="3" in="SourceAlpha"/>
+                    <feGaussianBlur stdDeviation="3" result="c4"/>
+                    <feFlood floodOpacity="0.412" result="d"/>
+                    <feComposite operator="out" in="SourceGraphic" in2="c4"/>
+                    <feComposite operator="in" in="d"/>
+                    <feComposite operator="in" in2="SourceGraphic"/>
+                </filter>
+                <radialGradient id="e4" cx="0.304" cy="0.242" r="0.841" gradientTransform="matrix(0.427, 0.904, -0.864, 0.408, 0.384, -0.131)" gradientUnits="objectBoundingBox">
+                    <stop offset="0" stopColor="#2195d5"/>
+                    <stop offset="0.665" stopColor="#31aae9"/>
+                    <stop offset="0.816" stopColor="#255e7a"/>
+                    <stop offset="1" stopColor="#114c85"/>
+                </radialGradient><radialGradient id="f4" cx="0.574" cy="1" r="0.749" gradientTransform="matrix(0.981, 0.196, 0.406, -2.031, -0.395, 2.919)" gradientUnits="objectBoundingBox">
+                    <stop offset="0" stopColor="#b1e1ff"/>
+                    <stop offset="0" stopColor="#3db7ff"/>
+                    <stop offset="0.318" stopColor="#91d4ff"/>
+                    <stop offset="0.766" stopColor="#7acdff"/>
+                    <stop offset="1" stopColor="#2291db"/>
+                </radialGradient>
+            </defs>
+            <g transform="translate(-4177.989 -3086.308)">
+                <circle className="a4" cx="36" cy="36" r="36" transform="translate(4185 3095)"/>
+                <path d="M36,3A33.009,33.009,0,0,0,23.156,66.408,33.009,33.009,0,0,0,48.844,5.592,32.79,32.79,0,0,0,36,3m0-3A36,36,0,1,1,0,36,36,36,0,0,1,36,0Z" transform="translate(4185 3095)"/>
+                <g data-type="innerShadowGroup">
+                    <circle className="b4" cx="35" cy="35" r="35" transform="translate(4185 3095)"/>
+                    <g className="i" transform="matrix(1, 0, 0, 1, 4177.99, 3086.31)">
+                        <circle className="a4" cx="35" cy="35" r="35" transform="translate(7.01 8.69)"/>
+                    </g>
+                </g>
+                <path className="c4" d="M28,0A28,28,0,1,1,0,28,28,28,0,0,1,28,0Z" transform="translate(4192 3101)"/>
+                <path className="d4" d="M28,2A26.007,26.007,0,0,0,17.88,51.958,26.007,26.007,0,0,0,38.12,4.042,25.835,25.835,0,0,0,28,2m0-2A28,28,0,1,1,0,28,28,28,0,0,1,28,0Z" transform="translate(4192 3101)"/>
+                <path className="e4" d="M7986-3227.333c2.5,2.984,4,3.667,7.667,4a18.85,18.85,0,0,0,7.667-1.333s2.667-.651,9.667-5.667,8.588-10.142,9-12.216c.172-3.062-.167-3.118-1-4.784a12.975,12.975,0,0,0-7-5.542,20.6,20.6,0,0,0-11.678,0c-4.232,1.107-6.7,2.75-9.989,5.542s-6.667,7.25-7,10.667A11.572,11.572,0,0,0,7986-3227.333Z" transform="translate(-3786 6358.349)"/>
+                <path className="f4" d="M7994.671-3222.789h0c-.36,0-.713-.015-1.05-.046-3.919-.356-5.49-1.176-8-4.177a12.018,12.018,0,0,1-2.781-9.7c.359-3.681,3.971-8.282,7.174-11,3.369-2.857,5.869-4.515,10.186-5.644a24.935,24.935,0,0,1,6.284-.859,18.287,18.287,0,0,1,5.675.868,13.5,13.5,0,0,1,7.292,5.793c.119.238.23.447.328.631.667,1.255.872,1.777.724,4.4l0,.035-.007.034c-.513,2.583-2.39,7.646-9.2,12.525-6.618,4.742-9.417,5.629-9.8,5.735A20.164,20.164,0,0,1,7994.671-3222.789Zm11.808-30.429a23.944,23.944,0,0,0-6.031.827c-4.13,1.081-6.538,2.68-9.792,5.439a26.133,26.133,0,0,0-4.52,5,12.181,12.181,0,0,0-2.306,5.333,11.1,11.1,0,0,0,2.552,8.964c2.487,2.969,3.869,3.509,7.329,3.823.307.028.629.042.959.042a19.482,19.482,0,0,0,6.47-1.339l.036-.015.038-.009c.024-.006,2.711-.727,9.494-5.587,6.5-4.657,8.3-9.424,8.794-11.873.135-2.442-.054-2.8-.61-3.844-.1-.189-.215-.4-.34-.654a12.576,12.576,0,0,0-6.708-5.29A17.294,17.294,0,0,0,8006.479-3253.218Z" transform="translate(-3786 6358.349)"/>
+                <ellipse className="g4" cx="3.5" cy="3" rx="3.5" ry="3" transform="translate(4218 3127)"/>
+                <path className="h4" d="M7885.21-3467.062c5.522-5.128,11.045-10.651,24.852-9.468s-7.562,6.28-7.562,6.28-10.95.977-14.5,6.5-7.289,9.2-6.5,12.75-7.188,3.926-5.188-2.574S7879.688-3461.934,7885.21-3467.062Z" transform="translate(-3689 6572)"/>
+            </g>
+        </svg>
+    </Box>)
+
+}
+export default BluebuttonSVG;
diff --git a/Spin_Wheel/src/components/ImageComponents/bluebutton.css b/Spin_Wheel/src/components/ImageComponents/bluebutton.css
@@ -0,0 +1,11 @@
+.a4,
+.g4,
+.h4{fill:#fff;}
+.b4{fill:url(#a4);}
+.c4{fill:url(#e4);}
+.d4{fill:#0b425e;}
+.e4{fill:url(#f4);}
+.f4{fill:#269ccf;}
+.g4{opacity:0.52;}
+.h4{opacity:0.44;}
+.i4{filter:url(#b4);}
diff --git a/Spin_Wheel/src/components/ImageComponents/greenButtonSVG.tsx b/Spin_Wheel/src/components/ImageComponents/greenButtonSVG.tsx
@@ -0,0 +1,60 @@
+import {
+    Box
+  } from "@material-ui/core"
+  import React from 'react'
+  import "./greenbutton.css"
+
+
+const GreenButtonSVG = () => {
+    return (
+        <Box>
+           <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="60.011" height="60.692" viewBox="0 0 79.011 80.692">
+            <defs>
+                <linearGradient id="a3" x1="0.176" y1="0.138" x2="1.195" y2="1.29" gradientUnits="objectBoundingBox">
+                    <stop offset="0" stopColor="#b5aca1"/>
+                    <stop offset="0.347" stopColor="#554c3c"/>
+                    <stop offset="1" stopColor="#11100c"/>
+                </linearGradient>
+                <filter id="b3" x="7.011" y="8.692" width="70" height="70" filterUnits="userSpaceOnUse">
+                    <feOffset dy="3" in="SourceAlpha"/>
+                    <feGaussianBlur stdDeviation="3" result="c3"/>
+                    <feFlood floodOpacity="0.412" result="d3"/>
+                    <feComposite operator="out" in="SourceGraphic" in2="c3"/>
+                    <feComposite operator="in" in="d3"/>
+                    <feComposite operator="in" in2="SourceGraphic"/>
+                </filter>
+                <radialGradient id="e3" cx="0.304" cy="0.242" r="0.841" gradientTransform="matrix(0.427, 0.904, -0.864, 0.408, 0.384, -0.131)" gradientUnits="objectBoundingBox">
+                    <stop offset="0" stopColor="#56cb1d"/>
+                    <stop offset="0.665" stopColor="#66ce34"/>
+                    <stop offset="0.816" stopColor="#2c8105"/>
+                    <stop offset="1" stopColor="#1a5100"/>
+                </radialGradient>
+                <radialGradient id="f3" cx="0.574" cy="1" r="0.749" gradientTransform="matrix(0.981, 0.196, 0.406, -2.031, -0.395, 2.919)" gradientUnits="objectBoundingBox">
+                    <stop offset="0" stopColor="#d93f26" stopOpacity="0.412"/>
+                    <stop offset="0" stopColor="#b2e76d"/>
+                    <stop offset="0.318" stopColor="#97e173"/>
+                    <stop offset="0.766" stopColor="#b1ff57"/>
+                    <stop offset="1" stopColor="#96dd5c"/>
+                </radialGradient>
+            </defs>
+            <g transform="translate(-4177.989 -3086.308)">
+                <circle className="a3" cx="36" cy="36" r="36" transform="translate(4185 3095)"/>
+                <path d="M36,3A33.009,33.009,0,0,0,23.156,66.408,33.009,33.009,0,0,0,48.844,5.592,32.79,32.79,0,0,0,36,3m0-3A36,36,0,1,1,0,36,36,36,0,0,1,36,0Z" transform="translate(4185 3095)"/>
+                <g data-type="innerShadowGroup">
+                    <circle className="b3" cx="35" cy="35" r="35" transform="translate(4185 3095)"/>
+                    <g className="i" transform="matrix(1, 0, 0, 1, 4177.99, 3086.31)">
+                        <circle className="a3" cx="35" cy="35" r="35" transform="translate(7.01 8.69)"/>
+                    </g>
+                </g>
+                <path className="c3" d="M28,0A28,28,0,1,1,0,28,28,28,0,0,1,28,0Z" transform="translate(4192 3101)"/>
+                <path className="d3" d="M28,2A26.007,26.007,0,0,0,17.88,51.958,26.007,26.007,0,0,0,38.12,4.042,25.835,25.835,0,0,0,28,2m0-2A28,28,0,1,1,0,28,28,28,0,0,1,28,0Z" transform="translate(4192 3101)"/>
+                <path className="e3" d="M7986-3227.333c2.5,2.984,4,3.667,7.667,4a18.85,18.85,0,0,0,7.667-1.333s2.667-.651,9.667-5.667,8.588-10.142,9-12.216c.172-3.062-.167-3.118-1-4.784a12.975,12.975,0,0,0-7-5.542,20.6,20.6,0,0,0-11.678,0c-4.232,1.107-6.7,2.75-9.989,5.542s-6.667,7.25-7,10.667A11.572,11.572,0,0,0,7986-3227.333Z" transform="translate(-3786 6358.349)"/>
+                <path className="f3" d="M7994.671-3222.789h0c-.36,0-.713-.015-1.05-.046-3.919-.356-5.49-1.176-8-4.177a12.018,12.018,0,0,1-2.781-9.7c.359-3.681,3.971-8.282,7.174-11,3.369-2.857,5.869-4.515,10.186-5.644a24.935,24.935,0,0,1,6.284-.859,18.287,18.287,0,0,1,5.675.868,13.5,13.5,0,0,1,7.292,5.793c.119.238.23.447.328.631.667,1.255.872,1.777.724,4.4l0,.035-.007.034c-.513,2.583-2.39,7.646-9.2,12.525-6.618,4.742-9.417,5.629-9.8,5.735A20.164,20.164,0,0,1,7994.671-3222.789Zm11.808-30.429a23.944,23.944,0,0,0-6.031.827c-4.13,1.081-6.538,2.68-9.792,5.439a26.133,26.133,0,0,0-4.52,5,12.181,12.181,0,0,0-2.306,5.333,11.1,11.1,0,0,0,2.552,8.964c2.487,2.969,3.869,3.509,7.329,3.823.307.028.629.042.959.042a19.482,19.482,0,0,0,6.47-1.339l.036-.015.038-.009c.024-.006,2.711-.727,9.494-5.587,6.5-4.657,8.3-9.424,8.794-11.873.135-2.442-.054-2.8-.61-3.844-.1-.189-.215-.4-.34-.654a12.576,12.576,0,0,0-6.708-5.29A17.294,17.294,0,0,0,8006.479-3253.218Z" transform="translate(-3786 6358.349)"/>
+                <ellipse className="g3" cx="3.5" cy="3" rx="3.5" ry="3" transform="translate(4218 3127)"/>
+                <path className="h3" d="M7885.21-3467.062c5.522-5.128,11.045-10.651,24.852-9.468s-7.562,6.28-7.562,6.28-10.95.977-14.5,6.5-7.289,9.2-6.5,12.75-7.188,3.926-5.188-2.574S7879.688-3461.934,7885.21-3467.062Z" transform="translate(-3689 6572)"/>
+            </g>
+        </svg>
+    </Box>)
+
+}
+export default GreenButtonSVG;
diff --git a/Spin_Wheel/src/components/ImageComponents/greenbutton.css b/Spin_Wheel/src/components/ImageComponents/greenbutton.css
@@ -0,0 +1,11 @@
+.a3,
+.g3,
+.h3{fill:#fff;}
+.b3{fill:url(#a3);}
+.c3{fill:url(#e3);}
+.d3{fill:#2f5123;}
+.e3{fill:url(#f3);}
+.f3{fill:#4ac51b;}
+.g3{opacity:0.52;}
+.h3{opacity:0.44;}
+.i3{filter:url(#b3);}