Minesweeper (Vite + React)

A simple, responsive Minesweeper game built with React and Vite.

Features

• Classic gameplay: reveal cells, toggle flags with right-click
• Safe first click: your first reveal won't detonate a mine
• Difficulty presets: Beginner, Intermediate, Expert
• Timer and mines-left counters
• Keyboard accessible buttons and ARIA live status

Scripts

• npm run dev — start the dev server
• npm run build — production build to dist/
• npm run preview — preview the production build
• npm run lint — run ESLint

Notes

• Right-click to place a flag (or long-press on touch devices depending on OS/browser).
• If you lose, all mines are revealed.

Tech

• React 18
• Vite 5
• ESLint (flat config)

Deploy to Azure Static Web Apps

Azure Static Web Apps is the best fit for this Vite React SPA.

Prereqs: Code in a GitHub repo, Azure subscription.

Option A — Azure Portal:

1. In the Azure portal: Create resource → Static Web App.
2. Connect GitHub, pick this repo and the main branch.
3. Build parameters:
   • App location: /
   • Output location: dist
   • API location: leave empty
4. Complete creation. A GitHub Actions workflow and token will be set up.
5. Push to main to trigger deployment. The site URL appears in the Static Web App Overview.

Option B — Azure CLI:

# Login and set up Static Web Apps extension
az login
az extension add --name staticwebapp --upgrade

# Create a resource group (pick your region)
az group create --name rg-minesweeper --location westus2

# Create the Static Web App connected to your GitHub repo
az staticwebapp create `
	--name minesweeper-swa `
	--resource-group rg-minesweeper `
	--source https://github.com/<your-org>/<your-repo> `
	--branch main `
	--location westus2 `
	--app-location "/" `
	--output-location "dist" `
	--login-with-github

Local verify before deploy (optional):

npm run build
npm run preview

Notes:

• There is no npm start in Vite; use npm run dev for local dev, npm run preview to serve the build.
• Client-side routing is configured via staticwebapp.config.json to fall back to index.html.

Alternatives

• Azure Storage Static Website:

   az login
   az group create --name rg-minesweeper --location westus2
   az storage account create --name mystorage12345 --resource-group rg-minesweeper --location westus2 --sku Standard_LRS
  
   # Enable static website with SPA fallback
   az storage blob service-properties update `
   	--account-name mystorage12345 `
   	--static-website `
   	--index-document index.html `
   	--404-document index.html
  
   npm run build
   az storage blob upload-batch `
   	--account-name mystorage12345 `
   	--destination '$web' `
   	--source ./dist

• Azure App Service:

  • Build locally (npm run build) and deploy dist/ via GitHub Actions or Zip Deploy.
  • Serve static content (e.g., with Nginx) and ensure SPA fallback to index.html.