Merge pull request #393 from BIDMCDigitalPsychiatry/gyroscope-game

D-cog game changes
BIDMCDigitalPsychiatry · Sep 3, 2024 · cef63d1 · cef63d1
2 parents f4ca7f4 + 29b6ac6
commit cef63d1
Show file tree

Hide file tree

Showing 7 changed files with 408 additions and 0 deletions.
diff --git a/D-cog/images.d.ts b/D-cog/images.d.ts
@@ -0,0 +1,7 @@
+declare module '*.svg'
+declare module '*.png'
+declare module '*.jpg'
+declare module 'react-router-dom'
+declare module 'react-dom'
+declare module 'react-hot-loader'
+declare module 'styled-components'
diff --git a/D-cog/public/favicon.ico b/D-cog/public/favicon.ico
diff --git a/D-cog/public/index.html b/D-cog/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/D-cog/src/components/dcogs/box.css b/D-cog/src/components/dcogs/box.css
@@ -0,0 +1,327 @@
+/**
+ * @file   box.css
+ * @brief  style sheet for Cats and Dogs game game
+ * @date   Mar , 2020
+ * @author ZCO Engineer
+ * @copyright (c) 2020, ZCO
+ */
+:root {
+	--square-size:84px;
+	--square-font-size:72px
+}
+body{background: rgba(53,159,254,1);}
+nav a{color: rgba(53,159,254,1); padding: 10px; display: inline-block;}
+.App {
+	padding-top:2em;
+	text-align:center
+}
+.App-logo {
+	-webkit-animation:App-logo-spin infinite 20s linear;
+	animation:App-logo-spin infinite 20s linear;
+	height:80px
+}
+.timer-div {
+	margin-top: 10px;
+}
+.home-link{
+	position: absolute;
+	right: 0;
+	margin: 15px;
+}
+
+.back-link{
+	position: absolute;
+	left: 0;
+	margin: 15px;
+}
+.App-header {
+	height:90px;
+	padding:20px;
+	color:#fff
+}
+.heading{
+	text-align: center;
+	color: rgba(53,159,254,1);
+	padding: 15px;
+	background: #fff;
+}
+.App-intro {
+	font-size:large
+}
+.timer-div{
+	min-height: 20px;
+}
+.box{
+	height: 50px;	
+	z-index: 0;
+	position: absolute;
+	border: 2px solid #fff;
+}
+.game-board{
+	color: #fff;
+	text-align: center;
+	position: absolute;
+	width: 100%;
+	height: 90%;
+}
+.game-board>div{
+	position: absolute;
+	width: 100%;
+	height: 90%;
+}
+.box-square{
+	/* transform: translateY(50px);
+  	transition: transform 400ms ease-in; */
+
+	height: 50px;
+	width:50px;
+	/* background-color: #fff; */
+}
+svg.svg-inline--fa.fa-redo.fa-w-16 {
+    color: rgba(53,159,254,1);
+	margin: 16px 18px 0 10px;
+}
+svg.svg-inline--fa.fa-arrow-left.fa-w-14 {    
+	margin: 16px 18px 0 10px;
+}
+.slideIn {
+	transform: translateY(0);
+  }
+
+.slideOut {
+	/* transform: translateY(100%); */
+	z-index: 999;
+}
+
+.animal-cls{
+	position: absolute;
+
+}
+.first{
+	margin-left: 11%;
+    top: 22%;
+}
+.second{
+	margin-left: 26%;
+    top: 64%;
+}
+.third{
+	margin-left: 51%;
+    top: 77%;
+}
+.fourth{
+	margin-left: 72%;
+    top: 72%;
+}
+.fifth{
+	margin-left: 42%;
+    top: 40%;
+}
+.sixth{
+	margin-left: 59%;
+    top: 15%;
+}
+.seventh{
+	margin-left: 26%;
+    top: 2.5%;
+}
+.eightth{
+	margin-left: 10%;
+    top: 85%;
+}
+.nineth{
+	margin-left: 73%;
+    top: 34%;
+}
+.tenth{
+	margin-left: 77%;
+    top: 3%;
+}
+.mt-30{
+	margin-top: 30px;
+}
+@keyframes slidein {
+    0% {
+        top: -100%;
+    }
+    100% {
+        top: 50%;
+    }
+}
+
+@keyframes slideout {
+    0% {
+        top: 50%;
+    }
+    100% {
+        top: 100%;
+    }
+}
+.carousel-img {
+	/* position: absolute; */
+	z-index: -1;
+	display: block;
+	width: 50px;
+}
+
+.carousel-img-white {
+	/* position: absolute; */
+	z-index: 10;
+	display: block;
+	width: 50px;
+}
+
+.carousel-appear {
+    animation: slidein 1s ease-in-out both;
+}
+
+.carousel-enter {
+    animation: slidein 1s ease-in-out both;
+}
+
+.carousel-leave {
+    animation: slideout 1s ease-in-out both;
+} 
+.green-box-square{
+	background-color:#40bd40 !important;
+	background-image: url("data:image/svg+xml,%0A%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 397.37 394.67'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='148.72 377.69 29.01 257.99 46.33 240.68 148.24 342.58 352.71 126.47 370.5 143.31 148.72 377.69'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position-y: -7px;
+
+}
+.red-box-square{
+	background-color:#d40c0c !important;
+	background-image: url("data:image/svg+xml,%0A%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 397.37 394.67'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='376.13 44.75 358.17 26.8 204.39 180.58 50.6 26.8 32.65 44.75 186.43 198.54 32.65 352.32 50.6 370.28 204.39 216.49 358.17 370.28 376.13 352.32 222.34 198.54 376.13 44.75'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-position: center;
+}
+.dog {
+	background-image: url("data:image/svg+xml,%0A%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 397.37 394.67'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23a14529;%7D.cls-2%7Bfill:%23ffa152;%7D.cls-3%7Bfill:%23455a64;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M377.85,68.63c-4,36.4-19,60.14-65.68,51.43l15.82-57S346.19,67.83,377.85,68.63Z'/%3E%3Cpath class='cls-2' d='M371.85,94.82c3.06-7.56,4.94-16.42,6-26.19-7.51-.19-14.24-.61-20.17-1.12A74.09,74.09,0,0,0,371.85,94.82Z'/%3E%3Cpath class='cls-1' d='M289.22,247.47V345.6s21.36-3.17,25.32,23.74h-64.1V268.05S275.76,260.13,289.22,247.47Z'/%3E%3Cpath class='cls-1' d='M184,257.76c-16.62,25.32-35.61,50.64-61.73,59.35V344s26.12,2.37,27.7,24.53H117.49s-19-3.17-20.57-23.74V247.47Z'/%3E%3Cpath class='cls-2' d='M290,370.13S287.64,348,263.1,345.6V272.79s41.95-4.74,45.11-53V147a37,37,0,0,1,11.87-18.2c9.5-7.92,27.7-45.11,4.75-78.35S244.11,28.26,236.2,66.25c0,0-13.45,68.06-32.45,72s-68.05,7.91-103.66,1.58S50.23,111.36,57.35,81.29,96.13,52,93,40.93s-34-10.29-45.89,24.53c0,0-31.66,51.43,29.27,101.29,0,0-9.49,11.87-7.12,40.36s-15,62.52-26.11,73.59-1.58,57.77-1.58,57.77,2.37,32.45,25.32,33.24,29.28-1.58,29.28-1.58.79-21.37-27.7-25.33V318.69s40.36-18.2,54.61-38,34-30.86,53.81-21.36,35.61,15.83,35.61,15.83L233,353.51s.79,17.41,19.79,18.2Z'/%3E%3Cpath class='cls-1' d='M283.68,70.21C294,86,320.08,150.13,303.46,167.54s-59.35,3.17-56.18-37.19S265.48,49.63,283.68,70.21Z'/%3E%3Cpath class='cls-1' d='M210.08,135.89c7.13,25.32,17.41,72.81-9.49,78.34s-122.15-11.74-95.76-50.64c15-22.16,27.7-21.37,27.7-21.37S194.26,145.39,210.08,135.89Z'/%3E%3Cpath class='cls-3' d='M313,73c0,6.33-4.79,11.47-10.68,11.47S291.59,79.31,291.59,73s4.79-11.48,10.69-11.48S313,66.64,313,73Z'/%3E%3C/svg%3E");
+	z-index: -1;
+	display: block;
+    background-repeat: no-repeat;
+    width: 50px;
+    height: 50px;
+    background-size: 50px;
+    background-position: -2px -2px;
+	position: absolute;
+	top: 0;
+}
+.dog-cover{
+	width: 50px;
+    height: 50.5px;
+    background-color: #fff;
+    position: absolute;
+    top: -2px;
+    z-index: 2;
+}
+@-webkit-keyframes App-logo-spin {
+	0% {
+		-webkit-transform:rotate(0deg);
+		transform:rotate(0deg)
+	}
+	to {
+		-webkit-transform:rotate(1turn);
+		transform:rotate(1turn)
+	}
+}
+@keyframes App-logo-spin {
+	0% {
+		-webkit-transform:rotate(0deg);
+		transform:rotate(0deg)
+	}
+	to {
+		-webkit-transform:rotate(1turn);
+		transform:rotate(1turn)
+	}
+}
+body {
+	font:18px Helvetica,Arial,sans-serif;
+	margin:30px
+}
+ol,ul {
+	padding-left:30px
+}
+.status {
+	margin-bottom:10px
+}
+.square {
+	background:#fff;
+	border:1.7px solid #000;
+	float:left;
+	font-size:var(--square-font-size);
+	font-weight:700;
+	line-height:var(--square-size);
+	height:var(--square-size);
+	margin-right:-1px;
+	margin-top:-1px;
+	padding:0;
+	text-align:center;
+	vertical-align:middle;
+	width:var(--square-size);
+	margin-bottom:0;
+	border-radius:0
+}
+.board-row:first-child > .square {
+	border-top:none
+}
+.board-row:last-child > .square {
+	border-bottom:none
+}
+.board-row>.square:first-child {
+	border-left:none
+}
+.board-row>.square:last-child {
+	border-right:none
+}
+.kbd-navigation .square:focus {
+	background:#ddd
+}
+.game {
+	-webkit-box-orient:horizontal;
+	-webkit-box-direction:normal;
+	-ms-flex-direction:row;
+	flex-direction:row
+}
+.board-row,.game {
+	display:-webkit-box;
+	display:-ms-flexbox;
+	display:flex
+}
+.board-row {
+	-webkit-box-pack:center;
+	-ms-flex-pack:center;
+	justify-content:center
+}
+.board-row:after {
+	clear:both;
+	content:"";
+	display:table
+}
+.game-info {
+	margin-bottom:1em
+}
+.controls {
+	padding:2em
+}
+.winner {
+	-webkit-animation:blinker 1s linear infinite;
+	animation:blinker 1s linear infinite;
+	color:green!important
+}
+@-webkit-keyframes blinker {
+	50% {
+		opacity:0
+	}
+}
+@keyframes blinker {
+	50% {
+		opacity:0
+	}
+}
+
+.modal-body-section {
+	padding: 15px !important;
+    margin-bottom: 10px;
+	font-size: 20px;
+}
diff --git a/D-cog/src/functions.ts b/D-cog/src/functions.ts
@@ -0,0 +1,15 @@
+ // Get random numbers
+export function getRandomNumbers (dcount:number, min:number, max:number) {
+    const randomArray:Array<number> =  []  ;
+    for(let i = min; i <= dcount; i++) {      
+      randomArray[i-1] = randomNumber(max, 1, randomArray)       
+    }       
+    return randomArray;
+  }
+// recursive random number generation without any duplicate
+function randomNumber  (max:number, min:number, randomArray:Array<number>): number {
+const num = Math.floor(Math.random() * (max - min +1)) + min;
+return randomArray.indexOf(num) >= 0 ? randomNumber(max, min, randomArray) : num;
+}
+
+