Compare commits

...

94 commits

Author SHA1 Message Date
Ayo
832afc1128 chore: add vite build app monorepo script 2026-04-05 15:31:10 +02:00
Ayo
4f3897bfaf chore(lib): move vite config to lib dir 2026-04-04 01:22:04 +02:00
Ayo
d4228c60f3 chore: update publish scripts 2026-04-03 23:46:24 +02:00
Ayo
7b9529bddb chore: add publish:lib script 2026-04-03 23:35:22 +02:00
Ayo
ba91f1ec50 chore: remove publish in release script 2026-04-03 23:34:34 +02:00
Ayo
debc9495ae chore: release v0.4.31
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 23:33:25 +02:00
Ayo
f4763e711c chore: move lib publish script 2026-04-03 23:33:13 +02:00
Ayo
788fc2dfe1 chore: add publish script 2026-04-03 23:31:43 +02:00
Ayo
07ebca0834 chore: release v0.4.30
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 23:31:02 +02:00
Ayo
52e223f2dd chore: add package homepage 2026-04-03 23:30:45 +02:00
Ayo
60aee72af3 chore: release v0.4.29
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 23:27:04 +02:00
Ayo
3e524968f3 chore(lib): update release script 2026-04-03 23:22:11 +02:00
Ayo
af22f0908a chore: release v0.4.28
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 23:20:37 +02:00
Ayo
1ae0e8b169 chore: adjust lib scripts for build and release 2026-04-03 23:19:40 +02:00
Ayo
64ac0bbebb chore(lib): add minimal-mnswpr link to guide 2026-04-03 23:19:40 +02:00
Ayo
2328a7251a chore(lib): update user guide 2026-04-03 23:19:33 +02:00
Ayo
b56530bf92 feat: New guide to building a browser game using **mnswpr** 2026-04-03 23:18:23 +02:00
Ayo
011f285bf3 chore: update publish scripts 2026-04-03 23:12:20 +02:00
Ayo
2bf6cbe968 feat(app): top links to npm and github 2026-04-03 23:11:28 +02:00
Ayo
1075422a1d refactor: use options object as param for generateGrid 2026-04-03 23:11:28 +02:00
Ayo
5a682640c6 refactor(app): initialize loadingService once 2026-04-03 23:11:28 +02:00
Ayo
1a6f07e84f chore: initial pkg license & readme 2026-04-03 23:11:28 +02:00
Ayo
6a3ce486df chore: add publish script 2026-04-03 23:09:38 +02:00
Ayo
32bb31ecf1 chore: add publish script 2026-04-03 23:09:38 +02:00
Ayo
6b01a0272e chore(app): move build & preview scripts to app workspace 2026-04-03 23:09:38 +02:00
Ayo
0555154ea6 chore: update workspace scripts 2026-04-03 15:31:20 +02:00
Ayo
b6cad231c3 chore: release v0.4.27
Some checks are pending
Release / release (push) Waiting to run
2026-04-03 15:29:37 +02:00
Ayo
c09181f380 feat(app): show leaderboard & enable sending result on game done 2026-04-03 14:57:51 +02:00
Ayo
8ba28261f8 chore: update readme to mention pnpm in tooling section 2026-04-03 14:15:20 +02:00
Ayo
93fe1d64fd chore: update readme for development setup 2026-04-03 14:14:15 +02:00
Ayo
dab366496e chore: organize pnpm workspaces 2026-04-03 14:13:11 +02:00
Ayo
45507df720 chore: update readme with more info 2026-04-03 12:20:11 +02:00
Ayo
e12115792d feat(app): update default html title 2026-04-03 12:03:21 +02:00
Ayo
cc50d990eb chore: update package repo 2026-04-03 12:03:05 +02:00
Ayo
e4f578b3da chore(app): remove unused instructions file 2026-04-03 11:32:59 +02:00
Ayo
a67cec1bd5 chore: remove unused pnpm-workspace file 2026-04-03 11:32:03 +02:00
Ayo
6e37fcfbed refactor: separate utils directory 2026-04-03 11:31:26 +02:00
Ayo
1ed1f15d36 chore: remove unnecessary vite config prop 2026-04-03 11:27:59 +02:00
Ayo
994e0d2d5b feat: set default hooks functions 2026-04-03 11:26:48 +02:00
Ayo
39683946a7 feat: expose hooks for events levelChanged & gameDone 2026-04-03 11:23:55 +02:00
Ayo
29bcaace1e refactor: separate app & lib directories 2026-04-03 11:15:18 +02:00
Ayo
8824f9215b chore: site build & preview scripts 2026-04-03 10:54:19 +02:00
Ayo
d117fb2d21 chore: move mnswpr package source to lib dir 2026-04-03 10:45:07 +02:00
Ayo
a72421defe refactor: import mnswpr.css in user main.js 2026-04-03 03:38:12 +02:00
Ayo
2fbb7f69a8 chore: release v0.4.26
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 03:31:04 +02:00
Ayo
20c98e77a4 fix: export all inside dist dir 2026-04-03 03:30:56 +02:00
Ayo
ea9effe3ba chore: release v0.4.25
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 03:22:40 +02:00
Ayo
902c3073ec fix: export only class as defaul 2026-04-03 03:22:27 +02:00
Ayo
2db1129489 chore: update release action to not publish to npm 2026-04-03 03:18:06 +02:00
Ayo
823b035d70 chore: release v0.4.24 2026-04-03 03:17:39 +02:00
Ayo
18187b69b0 chore: package entry as mnswpr.js 2026-04-03 03:17:27 +02:00
Ayo
a6aae78396 chore: remove unused dep esbuild 2026-04-03 03:17:05 +02:00
Ayo
79b9b7b9eb chore: release v0.4.23 2026-04-03 03:10:01 +02:00
Ayo
f9e64cf234 chore: release v0.4.22 2026-04-03 03:09:31 +02:00
Ayo
477a10238a chore: use pnpm in release gh action 2026-04-03 03:09:13 +02:00
Ayo
dc544e61e1 chore: release v0.4.21
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 03:07:43 +02:00
Ayo
992c326c19 chore: release v0.4.20
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 03:07:00 +02:00
Ayo
6cd5bd48f5 chore: update release gh action 2026-04-03 03:06:51 +02:00
Ayo
ccdd995e18 chore: release v0.4.19
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 03:03:23 +02:00
Ayo
bb1cf4b3c2 chore: update release gh action 2026-04-03 03:03:08 +02:00
Ayo
e6c41e34af chore: release v0.4.18
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 03:01:34 +02:00
Ayo
cbd7635759 chore: release v0.4.17
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 03:00:28 +02:00
Ayo
d8d6533dae chore: update release gh action 2026-04-03 03:00:20 +02:00
Ayo
afa35ee79e chore: release v0.4.16
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 02:54:42 +02:00
Ayo
aa8a069afb chore: release v0.4.15
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 02:53:21 +02:00
Ayo
f66f8e6d52 chore: catch up package version 2026-04-03 02:52:17 +02:00
Ayo
709868ebf4 chore: release v0.0.7
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 02:50:23 +02:00
Ayo
04e21c35c7 chore: enable npm publish on release ci 2026-04-03 02:50:12 +02:00
Ayo
ee9affabaa refactor: move mnswpr.css import into mnswpr.js 2026-04-03 02:46:52 +02:00
Ayo
86c46dc430 0.0.6
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 02:37:50 +02:00
Ayo
d101b6c9a7 chore: add exports to package.json 2026-04-03 02:37:41 +02:00
Ayo
8b8d3ea2a0 chore: disable pnpm & npm publish on ci 2026-04-03 02:34:28 +02:00
Ayo
d4decdf21f chore: update gh action release 2026-04-03 02:33:24 +02:00
Ayo
b36f1d4bc0 chore: release v0.0.5
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 02:17:48 +02:00
Ayo
bcf34d68e4 chore: indicate pnpm version in release gh action 2026-04-03 02:17:41 +02:00
Ayo
40022df835 chore: release v0.0.4
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 02:14:56 +02:00
Ayo
f480c808f3 chore: update gh action to set up pnpm 2026-04-03 02:14:44 +02:00
Ayo
9f9dbf7506 chore: release v0.0.3
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 02:11:54 +02:00
Ayo
2d3c6943e0 chore: use pnpm in gh action 2026-04-03 02:11:37 +02:00
Ayo
b87b324ddd chore: release v0.0.2
Some checks failed
Release / release (push) Has been cancelled
2026-04-03 02:06:54 +02:00
Ayo
516f2f2f8c chore: make no test as warning 2026-04-03 02:06:39 +02:00
Ayo
51af77d61d chore: add npm publish in github action 2026-04-03 02:05:52 +02:00
Ayo
304557163b feat: initial npm package @ayo-run/mnswpr 2026-04-03 02:02:50 +02:00
Ayo
aea4ac2518 chore: update readme w/ dev server info 2026-04-02 22:13:29 +02:00
Ayo
19bd063c24 refactor: remove unnecessary asset import 2026-04-02 22:10:07 +02:00
Ayo
8f5373b2a7 chore: release v0.4.14
Some checks failed
Release / release (push) Has been cancelled
2026-04-02 21:43:24 +02:00
Ayo
964268c311 fix: initialize the leaderboard only on initial generateGrid or updating the level 2026-04-02 21:43:15 +02:00
Ayo
82b74dcbe2 chore: release v0.4.13
Some checks failed
Release / release (push) Has been cancelled
2026-04-02 21:31:04 +02:00
Ayo
c5e4c6d27a fix: prevent the reset button from clearing the leader board 2026-04-02 21:30:54 +02:00
Ayo
2dfa43f157 chore: release v0.4.12
Some checks failed
Release / release (push) Has been cancelled
2026-04-02 21:22:19 +02:00
Ayo
ca431cfeea feat: show [version] on tab title; show [dev] as version on development mode 2026-04-02 21:21:05 +02:00
Ayo
36ac8fb474 refactor: remove unused custom level logic 2026-04-02 20:43:59 +02:00
Ayo
6abd2d6c81 fix: replace existing leaderboard when switching levels 2026-04-02 20:40:55 +02:00
Ayo
45f416433b refactor: handle loading in mnswpr class 2026-04-02 20:31:59 +02:00
32 changed files with 515 additions and 315 deletions

1
.gitignore vendored
View file

@ -1,4 +1,5 @@
node_modules/
dist/
*.*~
*.*swp

2
.nvmrc
View file

@ -1 +1 @@
lts/*
lts/*

View file

@ -3,18 +3,37 @@
Play it here: [mnswpr.com](https://mnswpr.com). This is the classic game **Minesweeper** built with vanilla web technologies (i.e., no framework dependency).
Technology Stack:
- HTML, JS, and CSS
- Firebase for leader board store
- Netlify for hosting
Technology Stack: HTML, JS, and CSS; [Google Firebase](https://firebase.google.com) for leader board store; [Netlify](https://netlify.com) for hosting
Development tooling:
- [Vite](https://vite.dev/) for bundling
## Usage
The web is a wonderful, free, and open platform to create and distribute value. You can use **mnswpr** in different ways:
- as a deployed [web app](https://mnswpr.com)
- as a [library](https://npmx.dev/package/@ayo-run/mnswpr) with `npm i @ayo-run/mnswpr`
- as a `web component` (coming soon).
## Tooling
The project has gone through years of existence. It started from 2019 when tooling was massively different. I have [modernized it](https://elk.zone/social.ayco.io/@ayo/116333804543330938) since and have witnessed how much easier and faster it is to build now - even without web frameworks or LLMs!
As of now the tooling I use are:
- [Vite](https://vite.dev/) for bundling and development server
- [Eslint](https://eslint.org) for JS linting & [CSS linting](https://eslint.org/blog/2025/02/eslint-css-support/)
- [ESLint Stylistic](https://eslint.style) for JS formatting
- [Husky](https://typicode.github.io/husky/) for git hooks
- [PNPM](https://pnpm.io/installation) for dependency & workspace management
- and a bunch of automation using scripts and Continuous Integration actions
## Project motivation
## Development
To start development, you need [`node`](https://nodejs.org/en/download). I highly recommend [`pnpm`](https://pnpm.io/installation) to be used as well. Once you know you have this, you can do the following:
1. Install dependencies: `pnpm i`
2. Start the dev server: `pnpm run dev`
## You just want to play?
*👉 The live site is here: [mnswpr.com](https://mnswpr.com)*
## Background
One day, while working in my home office, I heard loud and fast mouse clicks coming from our bedroom. It's my wife, playing her favorite game (Minesweeper) on a crappy website full of advertisements.
I can't allow this, it's a security issue. 🤣
@ -33,10 +52,9 @@ Can I make a page with complex interactions (more on this later) without any lib
1. Competition motivates users to use your app more ✨
1. Hash in bundled filenames help issues in browser caching (when shipping versions fast) ✨
## Development
To start development, you need node v16 (the dev server doesn't work on v18 *yet*). Once you know you have this, you can do the following:
1. Install dependencies: `npm i`
2. Start the dev server: `npm run dev`
## Live Demo
*👉 The live site is here: [Minesweeper](https://mnswpr.com)*
---
_Just keep building._<br>
_A project by [Ayo](https://ayo.ayco.io)_

0
app/.env.example Normal file
View file

45
app/index.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Play Minesweeper online for FREE!" />
<title>Play Minesweeper online for FREE!</title>
<link rel="shortcut icon" type="image/png" href="/favicon.ico" />
<link rel="stylesheet" href="./main.css" />
<link rel="stylesheet" href="../utils/loading/loading.css" />
<style>
:host, :root{
--mnswpr-transition: 10s ease-in-out;
}
nav {
a {
color: white;
text-decoration-color: orange;
transition: 500ms ease-in-out;
&:hover {
text-decoration-thickness: 2px;
}
}
}
</style>
</head>
<body>
<div id="body-wrapper">
<nav>
<a target="_blank" href="https://npmx.dev/package/@ayo-run/mnswpr">npm</a>
&middot;
<a target="_blank" href="https://github.com/ayo-run/mnswpr">github</a>
</nav>
<div id="app">
Please use Chrome or Firefox.
</div>
</div>
<script type="module" src="./main.js"></script>
</body>
</html>

42
app/main.js Normal file
View file

@ -0,0 +1,42 @@
import mnswpr from '@ayo-run/mnswpr/mnswpr.js'
import '@ayo-run/mnswpr/mnswpr.css'
import * as pkg from '@ayo-run/mnswpr/package.json'
import { LoadingService } from '../utils/'
import { LeaderBoardService } from './modules/leader-board/leader-board.js'
const leaderBoardService = new LeaderBoardService()
const loadingService = new LoadingService()
const version = import.meta.env.MODE === 'development'
? 'dev'
: pkg.version
const initializeGameBoard = async (level) => {
const prevousLeaderBoard = document.getElementById('leaderboard')
const loadingWrapper = document.createElement('div')
loadingWrapper.id = 'loading-wrapper'
loadingService.addLoading(loadingWrapper)
const appElement = document.getElementById('app')
if (prevousLeaderBoard){
const parent = prevousLeaderBoard.parentNode
parent.replaceChild(loadingWrapper, prevousLeaderBoard)
}else{
appElement.append(loadingWrapper)
}
const leaderBoardWrapper = await leaderBoardService.update(level.id, `Best Times (${level.name})`)
leaderBoardWrapper.id = 'leaderboard'
appElement.replaceChild(leaderBoardWrapper, loadingWrapper)
}
const sendGameResult = (game) => {
leaderBoardService.send(game, 'time')
}
const game = new mnswpr('app', version, {
levelChanged: (level) => initializeGameBoard(level),
gameDone: (game) => sendGameResult(game)
})
game.initialize()

View file

@ -1,7 +1,6 @@
import { TimerService } from '../timer/timer'
import { TimerService } from '../../../utils/timer/timer'
import { LoggerService } from '../../../utils/logger/logger'
import { UserService } from '../user/user'
import { LoadingService } from '../loading/loading'
import { LoggerService } from '../logger/logger'
import { initializeApp } from 'firebase/app'
import {
@ -12,10 +11,8 @@ import {
export class LeaderBoardService {
timerService = new TimerService()
loadingService = new LoadingService()
loggerService = new LoggerService()
user = new UserService()
previousLevel
/**
*
@ -54,22 +51,26 @@ export class LeaderBoardService {
return this._store
}
async update(level, displayElement, title) {
/**
* Update the leader board
* @param {String} level - the id of the game level
* @param {String} title - the displayed name of the game level
* @returns {HTMLDivElement} - element with the rendered leader board
*/
async update(level, title) {
const displayElement = document.createElement('div')
if (level !== this.previousLevel) {
this.loadingService.addLoading(displayElement)
this.previousLevel = level
this.lastPlace = Number.MAX_SAFE_INTEGER
this.lastPlace = Number.MAX_SAFE_INTEGER
const q = query(
collection(this.store, 'mw-leaders', level, 'games'),
orderBy('time'),
limit(10)
)
this.topListSnapshot = await getDocs(q)
this.renderList(displayElement, title, this.topListSnapshot.docs)
}
const q = query(
collection(this.store, 'mw-leaders', level, 'games'),
orderBy('time'),
limit(10)
)
this.topListSnapshot = await getDocs(q)
this.renderList(displayElement, title, this.topListSnapshot.docs)
return displayElement
}
renderList(displayElement, title, docs) {
@ -144,7 +145,13 @@ export class LeaderBoardService {
const sessionRef = doc(this.store, 'mw-all', this.user.browserId, 'games', sessionId)
await setDoc(sessionRef, data, { merge: true })
if (this.configuration && game.status === this.configuration.passingStatus && game[key] < this.lastPlace) {
const winningCondigion = (
this.configuration
&& game.status === this.configuration.passingStatus
&& game[key] < this.lastPlace
)
if (winningCondigion) {
let name = window.prompt(this.configuration.message)
if (!name) {
name = 'Anonymous'

17
app/package.json Normal file
View file

@ -0,0 +1,17 @@
{
"name": "app",
"version": "0.0.1",
"description": "the mnswpr.com web app",
"private": true,
"main": "main.js",
"scripts": {
"build": "vite build",
"preview": "vite preview",
"build:preview": "npm run build && npm run preview"
},
"devDependencies": {
"@ayo-run/mnswpr": "workspace:*",
"firebase": "^12.11.0"
},
"author": "Ayo Ayco"
}

View file

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

2
app/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1,2 @@
/// <reference types="vite/client" />
/// <reference types="vite/types/importMeta.d.ts" />

View file

@ -21,8 +21,7 @@ export default defineConfig([
'css/no-empty-blocks': 'error',
'css/no-invalid-at-rules': 'error',
'css/no-invalid-properties': 'error'
},
ignores: ['./src/modules/loading/loading.css']
}
},
{
files: ['**/*.{js,mjs,cjs}'],
@ -50,5 +49,5 @@ export default defineConfig([
}]
}
},
globalIgnores(['dist'])
globalIgnores(['**/dist'])
])

View file

@ -1,24 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Play Minesweeper online for FREE!" />
<title>Minesweeper</title>
<link rel="shortcut icon" type="image/png" href="/favicon.ico" />
<link rel="stylesheet" href="./main.css" >
</head>
<body>
<div id="body-wrapper">
<div id="app">
Please use Chrome or Firefox.
<br />
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</div>
</div>
<script type="module" src="./src/main.js"></script>
</body>
</html>

View file

@ -1,11 +0,0 @@
<div id="instructions" class="hint-wrapper">
<h1 class="pointer">Instructions</h1>
<ol class="body instructions">
<li>Clicking a cell which doesn't have a bomb reveals the number of surrounding bombs. Use this information plus some guess work to avoid opening the bombs.</li>
<li>To open a cell, click on it. To flag a cell you think is a bomb, right-click.</li>
</ol>
</div>
<div id="pro-tip" class="hint-wrapper">
<h1 class="pointer">Pro Tip</h1>
<span class="body hint">Clicking an open cell that has the correct number of flagged neighboring bombs will open all remaining unopened neighbor cells all at once. If an incorrect number of neighbors are flagged, or all neighbors are flagged or open, clicking the cell has no effect. If an incorrect neighbor is flagged, this will cause instant death.</span>
</div>

24
lib/LICENSE Normal file
View file

@ -0,0 +1,24 @@
BSD 2-Clause License
Copyright (c) 2019, Ayo Ayco
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

157
lib/README.md Normal file
View file

@ -0,0 +1,157 @@
# Build your own web browser game with `mnswpr`
Have you ever wondered how games on a web browser are built? Believe it or not, anything you see on a web browser can be built by anyone. That's why the web is so great: it is free and open for everyone to enjoy!
In this guide, we will use **mnswpr** as a simple building block for you to build your own browser game. I will walk you through the steps to create your own Minesweeper browser game from scratch.
If you want to skip to the ending, all the code are in this repository: [minimal-mnswpr](https://github.com/ayo-run/minimal-mnswpr)
First, let's go through the requirements.
## Requirements
It is assumed that you have some knowledge in HTML and JavaScript. You can easily read about this and play around examples online. Some knowledge on using a terminal and a text editor is also required.
You will need a computer with [node.js](https://nodejs.org/en/download).
If you are familiar with HTML and JavaScript, and has a computer with `node.js` installed... let's now start with the project setup!
## Project Setup
Open the terminal and confirm that you have `node.js`.
```bash
# verify the node.js version
node --version # Should print the version
```
Next, create a directory where we'll write some code for your game.
```bash
# on mac or linux
mkdir my-game
cd my-game
```
Once your terminal is in the new directory `my-game`, we will initialize the JavaScript project using the Node Package Manager or `npm`. Type the following on your terminal:
```bash
npm init
```
This will start the `npm` initialization interface, which will ask you some questions. You can think of what you want to answer, but if you want to go with the defaults, you can just press the `Enter` key repeatedly for each until the questions are done.
The last question will ask you if everything is OK:
```bash
Is this OK? (yes)
# Don't be shy, you can just press ENTER again
```
Next, we will add `vite` as a development tool for bundling and as a development server.
<details>
<summary>Additional info on Vite...</summary>
Making web pages work in different browsers often brings challenges brought about by differences in technological implementations and limitations. Vite helps us so that our code will work in different environments without us worrying about issues in compatibility and performance. </details><br />
```bash
npm i -D vite
```
Now that the JS project is initialized and we have a development environment with `vite`, we will install **mnswpr** as a dependency:
```bash
npm i @ayo-run/mnswpr
```
Finally, you can run the installed `vite` dev server by running the following:
```bash
# `npx` here is the execute command for npm
npx vite # will run the vite dev server
```
Vite will now show the address you can type to your browser to see your project. It will show something like this:
```bash
VITE v8.0.3 ready in 128 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
```
You can then open the "Local" address (e.g., http://localhost:5173) on your browser.
Congratulations. You now have your project setup! It's time to write some code.
## Write Some Code
Believe it or not, you have done the hard part. Now we start the fun part: putting the parts of your game together!
There are mainly 3 kinds of code that work together in a web page: HTML, JavaScript or JS, and Cascading Style Sheets or CSS.
In this guide, we work mostly with HTML & JS to focus on the basics.
### The HTML
Using your favorite text editor, create a file named `index.html` with the following content:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Minesweeper Game</title>
<style>
html, body {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>My Minesweeper Game</h1>
<div id="app"></div>
<script type="module" src="main.js"></script>
</body>
</html>
```
<details>
<summary>Additional info on `index.html`</summary>
The file name `index.html` is important. It is the default file that Web browsers look for in any given path/directory as the web page it will show.
</details>
<br />
If you have your browser opened to the Local address `vite` just showed earlier, you should see your very first web page with a title **My Minesweeper Game**
Exciting right? You can try editing the text inside `<h1>...</h1>` to see the web page change as well. :)
Take a second to read through the content of your `index.html`. The `<div>` element there with `id="app"` attribute will be where the game board will be rendered.
Now we just need JavaScript to do this. You will find the `<script>` tag that has the `src="main.js"` attribute, which means the web page is ready to load that JavaScript... but this file doesn't exist yet. So let's write the code for that.
### The JavaScript
Create a new file named `main.js` with the following content:
```js
/**
* main.js
*/
import '@ayo-run/mnswpr/mnswpr.css'
import mnswpr from '@ayo-run/mnswpr'
const game = new mnswpr('app')
game.initialize()
```
When you create this `main.js` file, the dev server will instantly update the web page for you and you should now see your minesweeper browser game!
---
_Just keep building._<br>
_A project by [Ayo](https://ayo.ayco.io)_

View file

@ -1,47 +1,54 @@
// @ts-check
/**
* import styles for vite bundling
*/
import './mnswpr.css'
import {
LeaderBoardService,
LoggerService,
StorageService,
TimerService
} from './modules/index.js'
} from '../utils/index.js'
import { levels } from './levels.js'
import * as pkg from '../package.json'
const TEST_MODE = false // set to true if you want to test the game with visual hints and separate leaderboard
const VERSION = pkg.version
const TEST_MODE = false // set to true if you want to test the game with visual hints
const MOBILE_BUSY_DELAY = 250
const PC_BUSY_DELAY = 500
const CASUAL_MODE = false
/**
* Create Minesweeper game board
* @param {String} appId
* @param {String} version
* @param {{
* levelChanged: (setting: any) => void,
* gameDone: (game: any) => void
* } | undefined } hooks
*/
export const Minesweeper = function(appId) {
const Minesweeper = function(appId, version, hooks = undefined) {
const _this = this
const storageService = new StorageService()
const timerService = new TimerService()
const loggerService = new LoggerService()
const leaderBoard = new LeaderBoardService()
if (!hooks) {
hooks = {
levelChanged: () => {},
gameDone: () => {}
}
}
let grid = document.createElement('table')
grid.setAttribute('id', 'grid')
let flagsDisplay = document.createElement('span')
let smileyDisplay = document.createElement('span')
let timerDisplay = document.createElement('span')
let footbar = document.createElement('div')
let customWrapper = document.createElement('div')
customWrapper.setAttribute('id', 'custom-wrapper')
let appElement = document.getElementById(appId)
if (!appElement) {
const body = document.getElementsByTagName('body')[0]
appElement = document.createElement('div')
body.append(appElement)
}
let leaderWrapper = document.createElement('div')
let isMobile = false
let isLeft = false
@ -81,33 +88,15 @@ export const Minesweeper = function(appId) {
const headingElement = document.createElement('h1')
const gameBoard = document.createElement('div')
headingElement.innerHTML = `<span>Minesweeper</span><sup>v${VERSION}</sup>`
headingElement.innerHTML = `<span>Minesweeper</span><sup>${version}</sup>`
document.title = `mnswpr [${version}]`
gameBoard.setAttribute('id', 'game-board')
gameBoard.append(initializeToolbar(), grid, initializeFootbar())
if(appElement) {
appElement.innerHTML = ''
appElement.append(headingElement, gameBoard)
appElement.append(initializeSourceLink())
}
generateGrid()
}
function initializeSourceLink() {
const sourceLink = document.createElement('a')
sourceLink.href = 'https://github.com/ayoayco/mnswpr'
sourceLink.innerText = 'Source code'
sourceLink.target = '_blank'
sourceLink.style.color = 'white'
return sourceLink
}
function initializeLeaderBoard() {
const title = `Best Times (${setting.name})`
leaderBoard.update(setting.id ?? setting.name, leaderWrapper, title)
if(appElement)
appElement.append(leaderWrapper)
generateGrid({ initial: true })
}
function initializeFootbar() {
@ -132,12 +121,7 @@ export const Minesweeper = function(appId) {
levelsDropdown.add(levelOption, null)
})
// custom level
// const customOption = document.createElement('option');
// customOption.onmousedown = () => {}
// customOption.value = 'custom';
// customOption.text = 'Custom';
// levelsDropdown.add(customOption);
if (TEST_MODE) {
const testLevel = document.createElement('span')
@ -150,50 +134,6 @@ export const Minesweeper = function(appId) {
return footBar
}
function removeCustomOptions() {
const customCopy = document.getElementById('custom-wrapper')
if (customCopy) {
footbar.removeChild(customWrapper)
}
}
function insertCustomOptions() {
const inputElements = []
const rowsInput = document.createElement('input')
rowsInput.placeholder = 'Rows'
inputElements.push(rowsInput)
const colsInput = document.createElement('input')
colsInput.placeholder = 'Columns'
inputElements.push(colsInput)
const bombsInput = document.createElement('input')
bombsInput.placeholder = 'Bombs'
inputElements.push(bombsInput)
const okButton = document.createElement('button')
okButton.innerText = 'Okay'
const setting = {
rows: rowsInput.value,
cols: colsInput.value,
bombs: bombsInput.value
}
okButton.onmousedown = () => updateSetting('custom-action', setting)
inputElements.forEach(input => {
input.style.marginRight = '15px'
input.style.width = '100px'
input.maxLength = 3
input.type = 'number'
input.width = 50
})
customWrapper.append(...inputElements, okButton)
footbar.append(customWrapper)
}
function initializeToolbar() {
const toolbar = document.createElement('div')
const toolbarItems = []
@ -224,23 +164,24 @@ export const Minesweeper = function(appId) {
return toolbar
}
function updateSetting(key, custom) {
if (key === 'custom') {
insertCustomOptions()
} else if (key === 'custom-action') {
console.log('custom', custom)
} else {
setting = levels[key]
storageService.saveToLocal('setting', setting)
removeCustomOptions()
generateGrid()
}
/**
* Updates the game level
* @param {String} key
*/
function updateSetting(key) {
setting = levels[key]
storageService.saveToLocal('setting', setting)
generateGrid({ initial: true })
}
function generateGrid() {
//generate 10 by 10 grid
/**
* Generate the Game Board
* @param {{
* initial: boolean
* }} options - Game Board Options
*/
function generateGrid(options = { initial: false }) {
firstClick = true
grid.innerHTML = ''
grid.oncontextmenu = () => false
@ -273,9 +214,12 @@ export const Minesweeper = function(appId) {
appElement.style.margin = '0 auto'
}
if (!CASUAL_MODE) {
initializeLeaderBoard()
}
/**
* TODO: add hook afterGridGenerated
* - for initializing the leaderboard
*/
if (options.initial)
hooks.levelChanged(setting)
timerService.initialize(timerDisplay)
updateFlagsCountDisplay()
@ -537,9 +481,11 @@ export const Minesweeper = function(appId) {
isMobile
}
if (!TEST_MODE) {
leaderBoard.send(game, 'time')
}
/**
* TODO: add hook after gameSession send back `game`
* - for sending the game score to the db
*/
hooks.gameDone(game)
}
@ -895,4 +841,4 @@ export const Minesweeper = function(appId) {
}
}
export default Minesweeper
export default Minesweeper

32
lib/package.json Normal file
View file

@ -0,0 +1,32 @@
{
"name": "@ayo-run/mnswpr",
"version": "0.4.31",
"description": "Classic Minesweeper browser game",
"author": "Ayo",
"type": "module",
"repository": {
"type": "git",
"url": "https://github.com/ayo-run/mnswpr"
},
"homepage": "https://mnswpr.com",
"scripts": {
"release": "bumpp && node ../scripts/release.js"
},
"main": "mnswpr.js",
"exports": {
".": {
"default": "./dist/mnswpr.js"
},
"./dist/*": {
"default": "./dist/*"
},
"./*": {
"default": "./*"
}
},
"files": [
"./*",
"./dist"
],
"license": "BSD-2-Clause"
}

12
lib/vite.config.js Normal file
View file

@ -0,0 +1,12 @@
import { resolve } from 'node:path'
import { defineConfig } from 'vite'
export default defineConfig({
build: {
lib: {
entry: resolve(import.meta.dirname, './mnswpr.js'),
name: 'mnswpr',
fileName: 'mnswpr'
}
}
})

View file

@ -1,29 +1,27 @@
{
"name": "@ayco/mnswpr",
"version": "0.4.11",
"name": "monorepo",
"version": "0.0.1",
"private": true,
"description": "Classic Minesweeper browser game",
"author": "Ayo Ayco",
"type": "module",
"repository": {
"type": "git",
"url": "https://github.com/ayoayco/mnswpr"
"url": "https://github.com/ayo-run/mnswpr"
},
"main": "src/index.js",
"homepage": "https://mnswpr.com",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vite",
"start": "vite",
"build": "vite build",
"preview": "vite preview",
"build:preview": "npm run build && npm run preview",
"test": "echo \"Warn: no test specified\"",
"dev": "vite app",
"start": "vite app",
"build": "vite build app",
"build:lib": "vite build lib",
"release:lib": "pnpm -F @ayo-run/mnswpr run release",
"publish:lib": "cd lib && npm publish",
"build:preview": "pnpm -F app run build:preview",
"prepare": "husky",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"release": "bumpp && node scripts/release.js"
},
"license": "BSD-2-Clause",
"dependencies": {
"firebase": "^12.11.0"
"lint:fix": "eslint . --fix"
},
"devDependencies": {
"@eslint/css": "^1.1.0",
@ -35,5 +33,6 @@
"husky": "^9.1.7",
"simple-git": "^3.33.0",
"vite": "^8.0.3"
}
},
"packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
}

View file

@ -7,10 +7,6 @@ settings:
importers:
.:
dependencies:
firebase:
specifier: ^12.11.0
version: 12.11.0
devDependencies:
'@eslint/css':
specifier: ^1.1.0
@ -38,18 +34,29 @@ importers:
version: 3.33.0
vite:
specifier: ^8.0.3
version: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)(terser@5.46.0)(yaml@2.8.3)
version: 8.0.3(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@types/node@25.5.2)(jiti@2.6.1)(yaml@2.8.3)
app:
devDependencies:
'@ayo-run/mnswpr':
specifier: workspace:*
version: link:../lib
firebase:
specifier: ^12.11.0
version: 12.11.0
lib: {}
packages:
'@emnapi/core@1.9.1':
resolution: {integrity: sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==}
'@emnapi/core@1.9.2':
resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
'@emnapi/runtime@1.9.1':
resolution: {integrity: sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==}
'@emnapi/runtime@1.9.2':
resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
'@emnapi/wasi-threads@1.2.0':
resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==}
'@emnapi/wasi-threads@1.2.1':
resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
'@eslint-community/eslint-utils@4.9.1':
resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
@ -333,22 +340,6 @@ packages:
resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
engines: {node: '>=18.18'}
'@jridgewell/gen-mapping@0.3.13':
resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
'@jridgewell/resolve-uri@3.1.2':
resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
engines: {node: '>=6.0.0'}
'@jridgewell/source-map@0.3.11':
resolution: {integrity: sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==}
'@jridgewell/sourcemap-codec@1.5.5':
resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
'@jridgewell/trace-mapping@0.3.31':
resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
'@kwsites/file-exists@1.1.1':
resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
@ -432,36 +423,42 @@ packages:
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [linux]
libc: [glibc]
'@rolldown/binding-linux-arm64-musl@1.0.0-rc.12':
resolution: {integrity: sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [arm64]
os: [linux]
libc: [musl]
'@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12':
resolution: {integrity: sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [ppc64]
os: [linux]
libc: [glibc]
'@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12':
resolution: {integrity: sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [s390x]
os: [linux]
libc: [glibc]
'@rolldown/binding-linux-x64-gnu@1.0.0-rc.12':
resolution: {integrity: sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [linux]
libc: [glibc]
'@rolldown/binding-linux-x64-musl@1.0.0-rc.12':
resolution: {integrity: sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==}
engines: {node: ^20.19.0 || >=22.12.0}
cpu: [x64]
os: [linux]
libc: [musl]
'@rolldown/binding-openharmony-arm64@1.0.0-rc.12':
resolution: {integrity: sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==}
@ -507,8 +504,8 @@ packages:
'@types/json-schema@7.0.15':
resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
'@types/node@25.5.0':
resolution: {integrity: sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==}
'@types/node@25.5.2':
resolution: {integrity: sha512-tO4ZIRKNC+MDWV4qKVZe3Ql/woTnmHDr5JD8UI5hn2pwBrHEwOEMZK7WlNb5RKB6EoJ02gwmQS9OrjuFnZYdpg==}
'@typescript-eslint/types@8.58.0':
resolution: {integrity: sha512-O9CjxypDT89fbHxRfETNoAnHj/i6IpRK0CvbVN3qibxlLdo5p5hcLmUuCCrHMpxiWSwKyI8mCP7qRNYuOJ0Uww==}
@ -546,9 +543,6 @@ packages:
resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==}
engines: {node: 18 || 20 || >=22}
buffer-from@1.1.2:
resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
bumpp@11.0.1:
resolution: {integrity: sha512-X0ti27I/ewsx/u0EJSyl0IZWWOE95q+wIpAG/60kc5gqMNR4a23YJdd3lL7JsBN11TgLbCM4KpfGMuFfdigb4g==}
engines: {node: '>=20.19.0'}
@ -569,9 +563,6 @@ packages:
color-name@1.1.4:
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
commander@2.20.3:
resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
cross-spawn@7.0.6:
resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
engines: {node: '>= 8'}
@ -805,24 +796,28 @@ packages:
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
libc: [glibc]
lightningcss-linux-arm64-musl@1.32.0:
resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
engines: {node: '>= 12.0.0'}
cpu: [arm64]
os: [linux]
libc: [musl]
lightningcss-linux-x64-gnu@1.32.0:
resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
libc: [glibc]
lightningcss-linux-x64-musl@1.32.0:
resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
engines: {node: '>= 12.0.0'}
cpu: [x64]
os: [linux]
libc: [musl]
lightningcss-win32-arm64-msvc@1.32.0:
resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
@ -949,13 +944,6 @@ packages:
resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
engines: {node: '>=0.10.0'}
source-map-support@0.5.21:
resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
source-map@0.6.1:
resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
engines: {node: '>=0.10.0'}
string-width@4.2.3:
resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
engines: {node: '>=8'}
@ -964,11 +952,6 @@ packages:
resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
engines: {node: '>=8'}
terser@5.46.0:
resolution: {integrity: sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==}
engines: {node: '>=10'}
hasBin: true
tinyexec@1.0.4:
resolution: {integrity: sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==}
engines: {node: '>=18'}
@ -1086,18 +1069,18 @@ packages:
snapshots:
'@emnapi/core@1.9.1':
'@emnapi/core@1.9.2':
dependencies:
'@emnapi/wasi-threads': 1.2.0
'@emnapi/wasi-threads': 1.2.1
tslib: 2.8.1
optional: true
'@emnapi/runtime@1.9.1':
'@emnapi/runtime@1.9.2':
dependencies:
tslib: 2.8.1
optional: true
'@emnapi/wasi-threads@1.2.0':
'@emnapi/wasi-threads@1.2.1':
dependencies:
tslib: 2.8.1
optional: true
@ -1468,7 +1451,7 @@ snapshots:
'@grpc/grpc-js@1.9.15':
dependencies:
'@grpc/proto-loader': 0.7.15
'@types/node': 25.5.0
'@types/node': 25.5.2
'@grpc/proto-loader@0.7.15':
dependencies:
@ -1488,30 +1471,6 @@ snapshots:
'@humanwhocodes/retry@0.4.3': {}
'@jridgewell/gen-mapping@0.3.13':
dependencies:
'@jridgewell/sourcemap-codec': 1.5.5
'@jridgewell/trace-mapping': 0.3.31
optional: true
'@jridgewell/resolve-uri@3.1.2':
optional: true
'@jridgewell/source-map@0.3.11':
dependencies:
'@jridgewell/gen-mapping': 0.3.13
'@jridgewell/trace-mapping': 0.3.31
optional: true
'@jridgewell/sourcemap-codec@1.5.5':
optional: true
'@jridgewell/trace-mapping@0.3.31':
dependencies:
'@jridgewell/resolve-uri': 3.1.2
'@jridgewell/sourcemap-codec': 1.5.5
optional: true
'@kwsites/file-exists@1.1.1':
dependencies:
debug: 4.4.3
@ -1520,10 +1479,10 @@ snapshots:
'@kwsites/promise-deferred@1.1.1': {}
'@napi-rs/wasm-runtime@1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)':
'@napi-rs/wasm-runtime@1.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
dependencies:
'@emnapi/core': 1.9.1
'@emnapi/runtime': 1.9.1
'@emnapi/core': 1.9.2
'@emnapi/runtime': 1.9.2
'@tybys/wasm-util': 0.10.1
optional: true
@ -1592,9 +1551,9 @@ snapshots:
'@rolldown/binding-openharmony-arm64@1.0.0-rc.12':
optional: true
'@rolldown/binding-wasm32-wasi@1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)':
'@rolldown/binding-wasm32-wasi@1.0.0-rc.12(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
dependencies:
'@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
'@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
transitivePeerDependencies:
- '@emnapi/core'
- '@emnapi/runtime'
@ -1629,7 +1588,7 @@ snapshots:
'@types/json-schema@7.0.15': {}
'@types/node@25.5.0':
'@types/node@25.5.2':
dependencies:
undici-types: 7.18.2
@ -1662,9 +1621,6 @@ snapshots:
dependencies:
balanced-match: 4.0.4
buffer-from@1.1.2:
optional: true
bumpp@11.0.1:
dependencies:
args-tokenizer: 0.3.0
@ -1691,9 +1647,6 @@ snapshots:
color-name@1.1.4: {}
commander@2.20.3:
optional: true
cross-spawn@7.0.6:
dependencies:
path-key: 3.1.1
@ -2019,7 +1972,7 @@ snapshots:
'@protobufjs/path': 1.1.2
'@protobufjs/pool': 1.1.0
'@protobufjs/utf8': 1.1.0
'@types/node': 25.5.0
'@types/node': 25.5.2
long: 5.3.2
punycode@2.3.1: {}
@ -2028,7 +1981,7 @@ snapshots:
require-directory@2.1.1: {}
rolldown@1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1):
rolldown@1.0.0-rc.12(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2):
dependencies:
'@oxc-project/types': 0.122.0
'@rolldown/pluginutils': 1.0.0-rc.12
@ -2045,7 +1998,7 @@ snapshots:
'@rolldown/binding-linux-x64-gnu': 1.0.0-rc.12
'@rolldown/binding-linux-x64-musl': 1.0.0-rc.12
'@rolldown/binding-openharmony-arm64': 1.0.0-rc.12
'@rolldown/binding-wasm32-wasi': 1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
'@rolldown/binding-wasm32-wasi': 1.0.0-rc.12(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
'@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.12
'@rolldown/binding-win32-x64-msvc': 1.0.0-rc.12
transitivePeerDependencies:
@ -2072,15 +2025,6 @@ snapshots:
source-map-js@1.2.1: {}
source-map-support@0.5.21:
dependencies:
buffer-from: 1.1.2
source-map: 0.6.1
optional: true
source-map@0.6.1:
optional: true
string-width@4.2.3:
dependencies:
emoji-regex: 8.0.0
@ -2091,14 +2035,6 @@ snapshots:
dependencies:
ansi-regex: 5.0.1
terser@5.46.0:
dependencies:
'@jridgewell/source-map': 0.3.11
acorn: 8.16.0
commander: 2.20.3
source-map-support: 0.5.21
optional: true
tinyexec@1.0.4: {}
tinyglobby@0.2.15:
@ -2131,18 +2067,17 @@ snapshots:
dependencies:
punycode: 2.3.1
vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)(terser@5.46.0)(yaml@2.8.3):
vite@8.0.3(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(@types/node@25.5.2)(jiti@2.6.1)(yaml@2.8.3):
dependencies:
lightningcss: 1.32.0
picomatch: 4.0.4
postcss: 8.5.8
rolldown: 1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
rolldown: 1.0.0-rc.12(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
tinyglobby: 0.2.15
optionalDependencies:
'@types/node': 25.5.0
'@types/node': 25.5.2
fsevents: 2.3.3
jiti: 2.6.1
terser: 5.46.0
yaml: 2.8.3
transitivePeerDependencies:
- '@emnapi/core'

3
pnpm-workspace.yaml Normal file
View file

@ -0,0 +1,3 @@
packages:
- "lib"
- "app"

View file

@ -1,7 +0,0 @@
import './modules/loading/loading.css'
import '../public/favicon.ico'
import './mnswpr.css'
import Minesweeper from './mnswpr.js'
const myMinesweeper = new Minesweeper('app')
myMinesweeper.initialize()

View file

@ -1,7 +1,5 @@
export * from './leader-board/leader-board.js'
export * from './loading/loading.js'
export * from './logger/logger.js'
export * from './storage/storage.js'
export * from './timer/timer.js'
export * from './user/user.js'
export * from './loading/loading.js'

View file

@ -1,3 +1,8 @@
/**
* import styles for vite bundling
*/
import './loading.css'
export class LoadingService {
addLoading(element) {
element.innerHTML = '<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>'