An HTML Canvas implementation of Minesweeper, plus eventually functionality to solve it automatically. Desktop-only.

1. Set up Svelte, Jest, Prettier
2. Create rudimentary page wherein to store game
3. Create Node class to store all data:
   • isMine: Boolean
   • isFlagged: Boolean
   • isVisible: Boolean
   • Either lots of neighbour properties in graph structure, e.g. northeastNeighbour: <reference to other Node> or simply an integer to store the number of mine neighbours, which is calculated before the game begins
   • coordinates: { x: Int, y: Int } to show the position of the tiles on the board
   • Static property to store amount of mines correctly flagged
4. Find out standard board sizes and how many mines per board, then create multidimensional array of all Nodes
5. Set x amount of nodes to be bombs in random locations
6. Populate neighbour field(s)
7. Create function to draw HTML canvas (named something like renderBoard()), with grid-style layout, using the array to define what to show and how to show it (e.g. flagged fields and such)
8. Create onClick method to set clicked node to visible. Then, if it's a bomb, end the game (needs a further method to do).
   • Need to figure out how to do the logic for large areas where none of the nodes have any mines as neighbours
   • Perhaps a Boolean field on the Node object to indicate whether any given node has neighbours who neighbour 0 bombs.
9. Create a right-click method to apply a flag to a field
10. Add things like a a bomb counter showing the amount of flags put onto the game, and the ability to change the board's size. Plus potentially a ticking time counter, for authenticity

This is a project template for Svelte apps. It lives at https://github.com/sveltejs/template.

To create a new project based on this template using degit:

npx degit sveltejs/template svelte-app
cd svelte-app

Note that you will need to have Node.js installed.

Install the dependencies...

cd svelte-app
npm install

...then start Rollup:

npm run dev

Navigate to localhost:8080. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the sirv commands in package.json to include the option --host 0.0.0.0.

If you're using Visual Studio Code we recommend installing the official extension Svelte for VS Code. If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.

To create an optimised version of the app:

npm run build

You can run the newly built app with npm run start. This uses sirv, which is included in your package.json's dependencies so that the app will work when you deploy to platforms like Heroku.

By default, sirv will only respond to requests that match files in public. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.

If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for any path. You can make it so by editing the "start" command in package.json:

"start": "sirv public --single"

This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:

node scripts/setupTypeScript.js

Or remove the script via:

rm scripts/setupTypeScript.js

If you want to use baseUrl or path aliases within your tsconfig, you need to set up @rollup/plugin-alias to tell Rollup to resolve the aliases. For more info, see this StackOverflow question.

Install vercel if you haven't already:

npm install -g vercel

Then, from within your project folder:

cd public
vercel deploy --name my-project

Install surge if you haven't already:

npm install -g surge

Then, from within your project folder:

npm run build
surge public my-project.surge.sh