diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..5c5c782 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,40 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: [main] + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: pages + cancel-in-progress: false + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm + - run: npm ci + - run: npm run build + - uses: actions/upload-pages-artifact@v3 + with: + path: dist + + deploy: + needs: build + runs-on: ubuntu-latest + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - id: deployment + uses: actions/deploy-pages@v4 diff --git a/_bmad-output/implementation-artifacts/5-1-tile-glow-effects.md b/_bmad-output/implementation-artifacts/5-1-tile-glow-effects.md new file mode 100644 index 0000000..daf4eb2 --- /dev/null +++ b/_bmad-output/implementation-artifacts/5-1-tile-glow-effects.md @@ -0,0 +1,90 @@ +# Story 5.1: Tile Glow Effects + +Status: done + +## Story + +As a player, +I want high-value tiles (128+) to glow, +so that I get visual feedback of my progress and milestone tiles feel special. + +## Acceptance Criteria + +1. Given a tile has a value of 128 or higher, when it renders on the grid, then it displays a glow effect: `box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.4)` (UX-DR6) +2. Given a tile has a value below 128, when it renders on the grid, then no glow effect is applied +3. Given a tile merges from 64+64 to 128, when the merge completes, then the glow effect appears on the resulting tile + +## Tasks / Subtasks + +- [x] Task 1: Add conditional glow box-shadow to Tile.svelte (AC: #1, #2, #3) + - [x] Added `$derived` glow: `value >= 128 ? '0 0 30px 10px rgba(243, 215, 116, 0.4)' : 'none'` + - [x] Applied `box-shadow: {glow}` in tile's inline style + - [x] Glow automatically appears on merged tiles via Svelte reactivity (no extra code needed) +- [x] Task 2: Verify no regressions (AC: #1, #2, #3) + - [x] All 90 tests pass, zero regressions + - [x] Production build succeeds + +## Dev Notes + +### Implementation Details + +This is a single-line change in Tile.svelte. Add a derived value for the box-shadow and include it in the inline style. + +### Current Tile.svelte (relevant section) + +```svelte +