Added fading shot on target screen

dbecker1 · Jul 5, 2020 · 8baaa27 · 8baaa27
1 parent 6862783
commit 8baaa27
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 70 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/public/index.html b/public/index.html
@@ -42,6 +42,13 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Take Aim</title>
+
+    <style>
+      @keyframes fadeShot {
+        from {opacity: 1;}
+        to {opacity: 0; visibility: hidden}
+      }
+    </style>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/TargetCanvas.js b/src/components/TargetCanvas.js
@@ -61,6 +61,11 @@ class TargetCanvas extends React.Component{
                 {this.props.shots.map((value, index) => {
                     if (shotMode === "standard") {
                         return <circle cx={value.center.x} cy={value.center.y} r={3} style={{fill: "red"}} />
+                    } else if (shotMode === "fade") {
+                        return <circle cx={value.center.x}
+                                       cy={value.center.y}
+                                       r={5}
+                                       style={{fill: "black", animationName: "fadeShot", animationDuration: "3s", animationFillMode: "forwards"}} />
                     }
                     return null;
                 })}

diff --git a/src/components/targetScreen/ProjectorScreen.js b/src/components/targetScreen/ProjectorScreen.js
@@ -72,7 +72,7 @@ class ProjectorScreen extends React.Component {
                     </Row>
                     <Row>
                         <Col sm={12} className={"text-center"}>
-                            <TargetCanvas shotMode={"standard"}/>
+                            <TargetCanvas shotMode={"fade"}/>
                         </Col>
                     </Row>
                 </>
-Original file line number
+Diff line change
@@ Expand Up / @@ -72,7 +72,7 @@ class ProjectorScreen extends React.Component { @@
                         </Row>
                         <Row>
                             <Col sm={12} className={"text-center"}>
-                                <TargetCanvas shotMode={"standard"}/>
+                                <TargetCanvas shotMode={"fade"}/>
                             </Col>
                         </Row>
                     </>
@@ Expand Down @@