diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..73af5e4 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md new file mode 100644 index 0000000..3dfda8d --- /dev/null +++ b/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` \ No newline at end of file diff --git a/README.md b/README.md index 59e8c50..f70c738 100644 --- a/README.md +++ b/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. diff --git a/src/App.tsx b/src/App.tsx index 6e32809..a8a2a11 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -28,6 +28,21 @@ function App() { 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) => { setParticlePosition({ x: e.clientX, y: e.clientY }); setTimeout(() => { @@ -35,6 +50,7 @@ function App() { }, 1000); }; + return ( <>