Add github action

.github/workflows/app-deploy.yml

@@ -0,0 +1,41 @@
+name: Deploy Application
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  aws_auth:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Git clone the repository
+        uses: actions/checkout@v3
+      - name: configure aws credentials
+        uses: aws-actions/configure-aws-credentials@v1.7.0
+        with:
+          role-to-assume: arn:aws:iam::891612573605:role/github-oidc
+          role-session-name: GitHub_to_AWS_via_FederatedOIDC
+          aws-region: us-east-2
+      # Hello from AWS: WhoAmI
+      - name: Sts GetCallerIdentity
+        run: |
+          aws sts get-caller-identity
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '23'
+          cache: 'npm'
+      - name: Install Dependencies
+        run: yarn install
+      - name: Build
+        run: yarn build
+      - name: Deploy
+        run: ./scripts/deploy.sh

src/components/LevelCarousel/LevelCarousel.tsx

@@ -1,6 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import { motion, AnimatePresence, PanInfo } from 'framer-motion';
-import { MdLock, MdPlayArrow, MdChevronLeft, MdChevronRight, MdHandshake, MdMonitorHeart, MdOutlineHandshake } from 'react-icons/md';
+import {
+    MdLock,
+    MdPlayArrow,
+    MdChevronLeft,
+    MdChevronRight,
+    MdHandshake,
+    MdMonitorHeart,
+    MdOutlineHandshake,
+} from 'react-icons/md';
 import './LevelCarousel.css';
 import { useNavigate } from 'react-router-dom';
 import { getPercentageText } from '../../utils';
@@ -164,11 +172,7 @@ const LevelCarousel: React.FC<LevelCarouselProps> = ({
                 </div>
             </motion.div>
 
-            <button
-                className="nav-button right"
-                onClick={() => navigate(1)}
-                disabled={activeIndex === levels.length}
-            >
+            <button className="nav-button right" onClick={() => navigate(1)} disabled={activeIndex === levels.length}>
                 <MdChevronRight size={30} />
             </button>
         </div>

src/components/WelcomePopup/WelcomePopup.tsx

@@ -23,7 +23,10 @@ const WelcomePopup: React.FC<WelcomePopupProps> = ({ isOpen, onClose }) => {
                         animate={{ scale: 1, opacity: 1 }}
                         exit={{ scale: 0.5, opacity: 0 }}
                     >
-                        <h2>Welcome to <br/>"Just a couple questions..."</h2>
+                        <h2>
+                            Welcome to <br />
+                            "Just a couple questions..."
+                        </h2>
                         <p>Think you're good at evading tips? Let's test you!</p>
                         <p>
                             You'll have to pretend you don't care about the social pressure of tipping. The rules are

src/pages/HomePage/HomePage.tsx

@@ -80,7 +80,7 @@ const HomePage: React.FC = () => {
             y: 0,
             transition: {
                 duration: 0.8,
-                ease: "easeOut",
+                ease: 'easeOut',
             },
         },
     };
@@ -105,21 +105,29 @@ const HomePage: React.FC = () => {
         <div className="home-container">
             <motion.div className="home-content" variants={containerVariants} initial="hidden" animate="visible">
                 <motion.div>
-                    <motion.h1 
-                        className="home-title" 
-                        variants={titleVariants} 
-                        initial="hidden" 
-                        animate="visible"
-                    >
-                        <span className="title-highlight">Just</span> a couple 
+                    <motion.h1 className="home-title" variants={titleVariants} initial="hidden" animate="visible">
+                        <span className="title-highlight">Just</span> a couple
                         <span className="title-emphasis"> questions</span>...
                     </motion.h1>
-                    <motion.div 
-                    className="home-title-buttons">
-                        <motion.button className="home-nav-button" onClick={() => navigate('/thank-you')} whileHover={{ boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', transition: { duration: 0.3 } }}>
+                    <motion.div className="home-title-buttons">
+                        <motion.button
+                            className="home-nav-button"
+                            onClick={() => navigate('/thank-you')}
+                            whileHover={{
+                                boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)',
+                                transition: { duration: 0.3 },
+                            }}
+                        >
                             Note <MdInfo size={24} />
                         </motion.button>
-                        <motion.button className="home-nav-button" onClick={() => setShowWelcomePopup(true)} whileHover={{ boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', transition: { duration: 0.3 } }}>
+                        <motion.button
+                            className="home-nav-button"
+                            onClick={() => setShowWelcomePopup(true)}
+                            whileHover={{
+                                boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)',
+                                transition: { duration: 0.3 },
+                            }}
+                        >
                             Help <MdHelp size={24} />
                         </motion.button>
                     </motion.div>

src/pages/ThankYouPage/ThankYouPage.tsx

@@ -16,26 +16,26 @@ const PSAPage: React.FC = () => {
 
     const iconVariants = {
         initial: { scale: 0, rotate: -180 },
-        animate: { 
-            scale: 1, 
+        animate: {
+            scale: 1,
             rotate: 0,
             transition: {
-                type: "spring",
+                type: 'spring',
                 stiffness: 260,
-                damping: 20
-            }
+                damping: 20,
+            },
         },
-        exit: { 
+        exit: {
             scale: 0,
             rotate: 180,
             transition: {
-                duration: 0.2
-            }
-        }
+                duration: 0.2,
+            },
+        },
     };
 
     return (
-        <motion.div 
+        <motion.div
             className="thankyou-overlay"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
@@ -49,20 +49,15 @@ const PSAPage: React.FC = () => {
             >
                 <h2>Thank You for Playing!</h2>
                 <div className="thankyou-message">
-                    <p>
-                        If you enjoyed the game, share it with your friends!
-                    </p>
+                    <p>If you enjoyed the game, share it with your friends!</p>
                     <p>
                         Have any feedback, found an issue, or have an idea for a new level? Reach out to me at{' '}
-                        <span 
-                            className="email-wrapper"
-                            onClick={handleCopyEmail}
-                        >
+                        <span className="email-wrapper" onClick={handleCopyEmail}>
                             <span className="email-text">lukeharwood.dev@gmail.com</span>
                             <span className="copy-icon">
                                 <AnimatePresence mode="wait">
                                     <motion.span
-                                        className={"copy-icon"}
+                                        className={'copy-icon'}
                                         key={copied ? 'check' : 'copy'}
                                         variants={iconVariants}
                                         initial="initial"
@@ -84,4 +79,4 @@ const PSAPage: React.FC = () => {
     );
 };
 
-export default PSAPage; 
+export default PSAPage;

src/utils.ts

@@ -3,4 +3,4 @@ export const getPercentageText = (tipPercentage: number) => {
     else if (tipPercentage < 1) return '<1%';
     else if (tipPercentage > 10000) return '>10,000%';
     else return `${tipPercentage.toFixed(2)}%`;
-};
+};