Merge pull request #2 from dbecker1/dev

Dueling Tree Enhancements and Home Screen Updates
dbecker1 · Apr 13, 2020 · 686cf5a · 686cf5a
2 parents 56b5488 + bfa93ae
commit 686cf5a
Show file tree

Hide file tree

Showing 9 changed files with 340 additions and 180 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
     "@reduxjs/toolkit": "^1.3.3",
@@ -21,6 +22,7 @@
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
+    "react-youtube": "^7.11.1",
     "redux": "^4.0.5"
   },
   "scripts": {

diff --git a/public/manifest.json b/public/manifest.json
@@ -6,20 +6,10 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#171317"
 }
diff --git a/src/components/App.js b/src/components/App.js
@@ -71,7 +71,9 @@ class App extends React.Component {
                 <section className={"page"} style={{backgroundColor: backgroundColor, color: color}}>
                     <div className={"header"}>
                         <div style={{borderBottom: "1px solid white"}}>
+                            <a href={"/"}>
                             <img src={"/logo.svg"} style={{height: "100px", marginBottom: "10px"}}/>
+                            </a>
                         </div>
                     </div>
                     <Container>

diff --git a/src/components/mainScreen/pages/Welcome.js b/src/components/mainScreen/pages/Welcome.js
@@ -3,6 +3,9 @@ import {Row, Col, Button} from "react-bootstrap";
 import Card from "../../Card";
 import {withRouter} from "react-router";
 import GoogleAnalyticsUtils from "../../../util/GoogleAnalyticsUtils";
+import YouTube from "react-youtube";
+import {faReddit, faGithub} from "@fortawesome/free-brands-svg-icons";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 class Welcome extends React.Component {
     constructor(props) {
@@ -13,6 +16,22 @@ class Welcome extends React.Component {
         GoogleAnalyticsUtils.pageview(window.location.pathname + window.location.search);
     }
 
+    renderButton() {
+        return (
+            <>
+                <Button variant={"customPrimary"}
+                        onClick={() => {this.props.history.push("/launch")}}
+                        disabled={!(this.props.videoReady && this.props.cvReady)}>Lets Get Started!</Button>
+                { !this.props.videoReady ?
+                    <p style={{fontSize: "80%"}}>Waiting on webcam feed...</p>
+                    : !this.props.cvReady ?
+                        <p style={{fontSize: "80%"}}>Still loading...</p>
+                        :
+                        null
+                }
+            </>
+        )
+    }
 
     render() {
         return (
@@ -29,7 +48,25 @@ class Welcome extends React.Component {
                         </>
                     </Col>
                 </Row>
-                <Row className={"text-center"}>
+                <Row>
+                    <Col sm={12} className={"text-center"}>
+                        {this.renderButton()}
+
+                        <hr />
+                    </Col>
+                </Row>
+                <Row className={"text-center"} style={{borderTop: "1px solid white", paddingTop: "10px"}}>
+                    <Col sm={12}>
+                        <h3>About Take Aim</h3>
+                    </Col>
+                </Row>
+                <Row style={{marginTop: "20px"}}>
+                    <Col sm={12} className={"text-center"}>
+                    <h4 style={{textDecoration: "underline"}}>Demo Video</h4>
+                    <YouTube videoId={"YH3_XY4QLIs"} />
+                    </Col>
+                </Row>
+                <Row className={"text-center"} style={{marginTop: "20px"}}>
                     <Col sm={12}>
                         <h4  style={{textDecoration: "underline"}}>Features</h4>
                     </Col>
@@ -88,20 +125,33 @@ class Welcome extends React.Component {
                         </Card>
                     </Col>
                 </Row>
+                <Row className={"text-center"} style={{marginTop: "20px"}}>
+                    <Col sm={12}>
+                        <h4  style={{textDecoration: "underline"}}>Find Us Online!</h4>
+                    </Col>
+                </Row>
+                <Row className={"text-center"} >
+                    <Col sm={6} md={{span: 3, offset: 3}} className={"text-center"}>
+                        <Card>
+                            <a href={"https://www.reddit.com/r/TakeAim"} style={{fontSize: "150%", color: "white"}}>
+                                <FontAwesomeIcon icon={faReddit} /> Reddit
+                            </a>
+                        </Card>
+                    </Col>
+                    <Col sm={6} md={{span: 3, offset: 0}} className={"text-center"}>
+                        <Card>
+                            <a href={"https://www.github.com/dbecker1/take-aim"} style={{fontSize: "150%", color: "white"}}>
+                                <FontAwesomeIcon icon={faGithub} /> Github
+                            </a>
+                        </Card>
+                    </Col>
+                </Row>
                 <Row style={{marginTop: "20px"}}>
                     <Col sm={12} className={"text-center"}>
-                        <Button variant={"customPrimary"}
-                                onClick={() => {this.props.history.push("/launch")}}
-                                disabled={!(this.props.videoReady && this.props.cvReady)}>Lets Get Started!</Button>
-                        { !this.props.videoReady ?
-                            <p style={{fontSize: "80%"}}>Waiting on webcam feed...</p>
-                        : !this.props.cvReady ?
-                            <p style={{fontSize: "80%"}}>Still loading...</p>
-                        :
-                            null
-                        }
+                        {this.renderButton()}
                     </Col>
                 </Row>
+
             </>
         );
     }

diff --git a/src/components/mainScreen/shooting/ShotFeed.js b/src/components/mainScreen/shooting/ShotFeed.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ShotDetector from "../../../util/ShotDetector"
-import {Button, Form} from "react-bootstrap";
 import cookie from 'react-cookies'
 import { connect } from "react-redux";
 import { addShot, wipeShots } from "../../../app/slices/shotSlice";
@@ -87,6 +86,10 @@ class ShotFeed extends React.Component {
         })
     }
 
+    stop() {
+        this.shotDetector.stop();
+    }
+
     redrawCanvas(props)  {
         if (!this.canvas) {
             return;