Setup github pages and document link

.github/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v4
+
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '18'
+        cache: 'npm'
+
+    - name: Install dependencies
+      run: npm ci
+
+    - name: Build
+      run: npm run build
+
+    - name: Deploy to GitHub Pages
+      uses: peaceiris/actions-gh-pages@v3
+      if: github.ref == 'refs/heads/main'
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./dist

DEPLOYMENT.md

@@ -0,0 +1,56 @@
+# GitHub Pages Deployment Setup
+
+## Automatic Deployment
+
+This repository is configured for automatic deployment to GitHub Pages using GitHub Actions. Every push to the `main` branch will trigger a new deployment.
+
+## Repository Settings
+
+To enable GitHub Pages for this repository, follow these steps:
+
+1. Go to your repository on GitHub
+2. Click on "Settings" tab
+3. Scroll down to "Pages" in the left sidebar
+4. Under "Source", select "Deploy from a branch"
+5. Select "gh-pages" as the branch
+6. Select "/ (root)" as the folder
+7. Click "Save"
+
+## First Deployment
+
+After pushing the code with the GitHub Actions workflow:
+
+1. The workflow will run automatically on push to `main`
+2. It will build the project and deploy to the `gh-pages` branch
+3. GitHub Pages will serve the content from the `gh-pages` branch
+4. Your app will be available at: https://mikelyons.github.io/study-game
+
+## Manual Deployment
+
+You can also deploy manually using:
+
+```bash
+npm run deploy
+```
+
+This command will:
+1. Build the project (`npm run build`)
+2. Deploy the `dist` folder to the `gh-pages` branch using `gh-pages` package
+
+## Configuration Files
+
+The deployment setup includes:
+
+- **.github/workflows/deploy.yml** - GitHub Actions workflow for automatic deployment
+- **vite.config.ts** - Vite configuration with correct base path (`/study-game`)
+- **package.json** - Homepage URL and deploy scripts
+- **README.md** - Updated with link to live app
+
+## Troubleshooting
+
+If the deployment fails:
+
+1. Check the Actions tab in your GitHub repository for error logs
+2. Ensure the repository has GitHub Pages enabled
+3. Verify that the `main` branch protection rules (if any) allow the workflow to run
+4. Make sure the build completes successfully locally with `npm run build`

README.md

@@ -2,6 +2,46 @@
 
 This is an idle clicker game built with React and Vite. The goal is to manage resources, upgrade your skills, and progress through the ranks of knowledge.
 
+🎮 **[Play the Game Here!](https://mikelyons.github.io/study-game)** 🎮
+
+### About
+
+This is an incremental study game built with React, TypeScript, and Vite. Study hard and you too can be successful!
+
+### Development
+
+To run the project locally:
+
+```bash
+# Clone the repository
+git clone https://github.com/mikelyons/study-game.git
+cd study-game
+
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+```
+
+### Deployment
+
+This project is automatically deployed to GitHub Pages using GitHub Actions. Every push to the `main` branch triggers a new deployment.
+
+To deploy manually:
+```bash
+npm run deploy
+```
+
+For detailed deployment setup instructions, see [DEPLOYMENT.md](./DEPLOYMENT.md).
+
+### Technologies Used
+
+- **React 19** - UI library
+- **TypeScript** - Type-safe JavaScript
+- **Vite** - Fast build tool and dev server
+- **GitHub Pages** - Hosting platform
+
 ## How to Play
 
 - **Sleep:** Increase your energy.

src/App.tsx

@@ -28,13 +28,29 @@
     RANKS,
   } = useGameLogic();
 
+
+  // TODO: Implement energy and knowledge expenditures
+  // const handleCurrencyExpenditures = () => {
+  //   setEnergy((energy) => energy - 1);
+  // }
+
+  useEffect(() => {
+    if (energy > 10 && rank < 1) {
+      handleRankChange();
+    }
+    if (knowledge > RANK_THRESHOLDS[rank] + 10) {
+      handleRankChange();
+    }
+  }, [knowledge, rank, energy])
+
   const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     setParticlePosition({ x: e.clientX, y: e.clientY });
     setTimeout(() => {
       setParticlePosition(null);
     }, 1000);
   };
 
+
   return (
     <>
       <MenuBar version="e649b4c" />