Merge pull request #161 from daithihearn/ui-improvements

Minor UI enhancements

Dockerfile

@@ -21,4 +21,4 @@ COPY --from=builder /app/build /usr/share/nginx/html
 COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
 COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
 
-CMD sed -i -e 's|$SERVER_NAME|'"$SERVER_NAME"'|g' /etc/nginx/conf.d/default.conf && sed -i -e 's|$PORT|'"$PORT"'|g' /etc/nginx/conf.d/default.conf && find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$API_URL|'"$API_URL"'|g' {} \; && find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$WEBSOCKET_URL|'"$WEBSOCKET_URL"'|g' {} \; && find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$AUTH0_DOMAIN|'"$AUTH0_DOMAIN"'|g' {} \; && find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$AUTH0_AUDIENCE|'"$AUTH0_AUDIENCE"'|g' {} \; && find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$AUTH0_CLIENT_ID|'"$AUTH0_CLIENT_ID"'|g' {} \; && find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$AUTH0_SCOPE|'"$AUTH0_SCOPE"'|g' {} \; && nginx -g 'daemon off;'
+CMD find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$API_URL|'"$API_URL"'|g' {} \; && find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$WEBSOCKET_URL|'"$WEBSOCKET_URL"'|g' {} \; && find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$AUTH0_DOMAIN|'"$AUTH0_DOMAIN"'|g' {} \; && find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$AUTH0_AUDIENCE|'"$AUTH0_AUDIENCE"'|g' {} \; && find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$AUTH0_CLIENT_ID|'"$AUTH0_CLIENT_ID"'|g' {} \; && find /usr/share/nginx/html/static/js -type f -name '*.js' -exec sed -i -e 's|$AUTH0_SCOPE|'"$AUTH0_SCOPE"'|g' {} \; && nginx -g 'daemon off;'

nginx/default.conf

@@ -1,7 +1,5 @@
 server {
-    listen $PORT;
-
-    server_name $SERVER_NAME;
+    listen 80;
 
     #charset koi8-r;
     #access_log  /var/log/nginx/host.access.log  main;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "6.1.2",
+    "version": "6.1.3",
     "description": "React frontend for the Cards 110",
     "author": "Daithi Hearn",
     "license": "MIT",
@@ -38,6 +38,7 @@
         "react-beautiful-dnd": "^13.0.0",
         "react-block-ui": "^1.3.3",
         "react-chartjs-2": "5",
+        "react-confetti": "^6.1.0",
         "react-data-table-component": "7.5.3",
         "react-dom": "18.2.0",
         "react-redux": "^8.0.5",

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "short_name": "Cards 110",
   "name": "Cards 110",
-  "version": "6.1.2",
+  "version": "6.1.3",
   "icons": [
     {
       "src": "./assets/favicon.png",

src/components/Game/GameOver.tsx

@@ -1,6 +1,7 @@
 import { Card, CardBody, CardGroup, Container, CardHeader } from "reactstrap"
 
 import Leaderboard from "components/Leaderboard/Leaderboard"
+import Confetti from "react-confetti"
 
 const GameOver = () => {
     return (
@@ -10,6 +11,12 @@ const GameOver = () => {
                     Game Over
                 </CardHeader>
                 <CardBody>
+                    <Confetti
+                        colors={["#e6ee9c", "#f44336", "#2196f3"]}
+                        numberOfPieces={200}
+                        recycle={false}
+                        run={true}
+                    />
                     <Leaderboard />
                 </CardBody>
             </Card>

src/components/Game/PlayerCard.tsx

@@ -61,16 +61,16 @@ const PlayerCard: React.FC<PlayerRowI> = ({ player, className }) => {
     )
 
     const scoreClassName = useMemo(() => {
-        if (player.score < 30) {
+        if (player.score < -30) {
             return "bg-dark text-light"
-        } else if (player.score < 30) {
+        } else if (player.score < 0) {
             return "bg-secondary text-light"
-        } else if (player.score <= 65) {
+        } else if (player.score <= 75) {
             return "bg-primary text-light"
         } else if (player.score <= 90) {
-            return "bg-warning text-dark"
+            return "bg-warning text-light"
         } else if (player.score <= 105) {
-            return "bg-danger text-dark"
+            return "bg-danger text-light"
         } else {
             return "bg-success text-light"
         }
@@ -90,10 +90,9 @@ const PlayerCard: React.FC<PlayerRowI> = ({ player, className }) => {
                     className={`img-center player-avatar ${className}`}
                 />
                 <CardSubtitle className="player-score-container">
-                    <CardText className="player-score">
-                        <div className={`score-text ${scoreClassName}`}>
-                            {player.score}
-                        </div>
+                    <CardText
+                        className={`player-score score-text ${scoreClassName}`}>
+                        {player.score}
                     </CardText>
                 </CardSubtitle>
             </Card>

substitute.env

@@ -1,5 +1,3 @@
-PORT=80
-REACT_SERVER_NAME=\$SERVER_NAME
 REACT_APP_API_URL=\$API_URL
 REACT_APP_WEBSOCKET_URL=\$WEBSOCKET_URL