33 changed files with 383 additions and 1469 deletions
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -16,6 +16,9 @@ jobs:
        with:
          fetch-depth: 0

+      - name: Set pnpm
+        uses: pnpm/action-setup
+
      - name: Set node
        uses: actions/setup-node@v6
        with:
@ -24,3 +27,7 @@ jobs:
      - run: npx changelogithub
        env:
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      
+      - run: pnpm install
+      - run: pnpm build
+      - run: npm publish --ignore-scripts
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,4 @@
 node_modules/
 dist/
-
 *.*~
 *.*swp
--- a/.nvmrc
+++ b/.nvmrc
@ -1 +1 @@
-lts/*
+lts/*
--- a/README.md
+++ b/README.md
@ -3,37 +3,18 @@

 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; [Google Firebase](https://firebase.google.com) for leader board store; [Netlify](https://netlify.com) for hosting
+Technology Stack:
+- HTML, JS, and CSS
+- Firebase for leader board store
+- Netlify for hosting

-## 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:
+Development tooling:
 - [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

-## 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
+## Project motivation
 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. 🤣
@ -52,9 +33,10 @@ 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`

-
---
-
-_Just keep building._<br>
-_A project by [Ayo](https://ayo.ayco.io)_
+## Live Demo
+*👉 The live site is here: [Minesweeper](https://mnswpr.com)*
--- a/app/.env.example
+++ b/app/.env.example
--- a/app/index.html
+++ b/app/index.html
@ -1,45 +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>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>
--- a/app/main.js
+++ b/app/main.js
@ -1,42 +0,0 @@
-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()
--- a/app/modules/leader-board/leader-board.js
+++ b/app/modules/leader-board/leader-board.js
@ -1,176 +0,0 @@
-import { TimerService } from '../../../utils/timer/timer'
-import { LoggerService } from '../../../utils/logger/logger'
-import { UserService } from '../user/user'
-
-import { initializeApp } from 'firebase/app'
-import {
-  getFirestore, doc, getDocs, getDoc, setDoc, collection, query, orderBy, limit 
-} from 'firebase/firestore/lite'
-
-
-export class LeaderBoardService {
-
-  timerService = new TimerService()
-  loggerService = new LoggerService()
-  user = new UserService()
-
-  /**
-     * 
-     * Create the Leader Board service
-     * @param {String} leaders 
-     * @param {String} all 
-     * @param {String} configuration 
-     */
-  constructor() {
-
-    // necessary keys to interact with firebase
-    // not a secret
-    // https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public/37484053#37484053
-    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
-    const config = {
-      apiKey: 'AIzaSyCTi_5Sm5dHFNf0d_Gn0MNWmlGheFBf6MQ',
-      authDomain: 'moment-188701.firebaseapp.com',
-      databaseURL: 'https://moment-188701.firebaseio.com',
-      projectId: 'secure-moment-188701',
-      storageBucket: 'secure-moment-188701.firebasestorage.app',
-      messagingSenderId: '113827947104',
-      appId: '1:113827947104:web:b176f746d8358302c51905',
-      measurementId: 'G-LZRDY0TG46'
-    }
-    const app = initializeApp(config)
-    this._store = getFirestore(app)
-
-    const configRef = doc(this.store, 'mw-config', 'configuration')
-    getDoc(configRef)
-      .then(res => {
-        this.configuration = res.data()
-      })
-  }
-
-  get store() {
-    return this._store
-  }
-
-  /**
-   * 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')
-
-    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)
-
-    return displayElement
-  }
-
-  renderList(displayElement, title, docs) {
-    if (!displayElement) return
-
-    displayElement.innerHTML = ''
-    const leaderHeading = document.createElement('h3')
-    leaderHeading.innerText = title
-    leaderHeading.style.borderBottom = '1px solid #c0c0c0'
-    leaderHeading.style.paddingBottom = '10px'
-
-
-    displayElement.style.maxWidth = '270px'
-    displayElement.style.margin = '0 auto'
-
-    const leaderList = document.createElement('div')
-
-    leaderList.innerHTML = ''
-    leaderList.style.listStyle = 'none'
-    leaderList.style.textAlign = 'left'
-    leaderList.style.marginTop = '-15px'
-
-    if (docs && docs.length) {
-      let i = 1
-      docs.forEach(game => {
-        if (game) {
-          const prettyTime = this.timerService.pretty(game.data().time)
-          const name = game.data().name || 'Anonymous'
-          const item = document.createElement('div')
-          item.style.display = 'flex'
-          const nameElement =document.createElement('div')
-          nameElement.innerHTML = name
-          nameElement.setAttribute('title', name)
-          nameElement.style.textOverflow = 'ellipsis'
-          nameElement.style.whiteSpace = 'nowrap'
-          nameElement.style.overflow = 'hidden'
-          nameElement.style.padding = '0 5px'
-          nameElement.style.cursor = 'pointer'
-          nameElement.style.fontWeight = 'bold'
-          nameElement.style.fontStyle = 'italic'
-          // nameElement.onmousedown = () => console.log(game.data());
-
-          const indexElement = document.createElement('div')
-          indexElement.innerText = `#${i++}`
-                    
-          const timeElement = document.createElement('div')
-          timeElement.innerText = prettyTime
-
-          item.append(indexElement, nameElement, timeElement)
-          leaderList.append(item)
-        }
-      })
-      if (docs.length >= 10) {
-        this.lastPlace = docs[9].data().time
-      }
-
-      displayElement.append(leaderHeading, leaderList)
-    } else {
-      const message = document.createElement('em')
-      message.innerText = 'Be the first to the top!'
-      displayElement.append(leaderHeading, message)
-    }
-  }
-
-
-  async send(game, key) {
-    const sessionId = new Date().toDateString().replace(/\s/g, '_')
-    const gameId = new Date().toTimeString().replace(/\s/g, '_')
-    const data = { }
-    data[gameId] = game
-    
-    const sessionRef = doc(this.store, 'mw-all', this.user.browserId, 'games', sessionId)
-    await setDoc(sessionRef, data, { merge: true })
-
-    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'
-      }
-
-      const newGame = {
-        name,
-        browserId: this.user.browserId,
-        ...game
-      }
-
-      const gameScoreRef = doc(collection(this.store, 'mw-leaders', game.level, 'games'))
-      await setDoc(gameScoreRef, newGame)
-    }
-  }
-
-  configurationPromt() {
-    if (!this.configuration) {
-      this.loggerService.debug('Failed to fetch server configuration. Please contact your developer.')
-    }
-  }
-}
--- a/app/modules/user/user.js
+++ b/app/modules/user/user.js
@ -1,21 +0,0 @@
-export class UserService {
-  constructor() {
-    if (!this.id) {
-      this.browserId = this.generateId()
-    }
-  }
-
-  generateId() {
-
-    var nav = window.navigator
-    var screen = window.screen
-    var guid = nav.mimeTypes.length
-    guid += nav.userAgent.replace(/\D+/g, '')
-    guid += nav.plugins.length
-    guid += screen.height || ''
-    guid += screen.width || ''
-    guid += screen.pixelDepth || ''
-
-    return guid
-  }
-}
--- a/app/package.json
+++ b/app/package.json
@ -1,17 +0,0 @@
-{
-  "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"
-}
--- a/eslint.config.js
+++ b/eslint.config.js
@ -21,7 +21,8 @@ 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}'],
@ -49,5 +50,5 @@ export default defineConfig([
      }]
    }
  },
-  globalIgnores(['**/dist'])
+  globalIgnores(['dist'])
 ])
--- a/index.html
+++ b/index.html
@ -0,0 +1,28 @@
+<!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">
+        import MineSweeper from './src/main.js'
+        const mnswpr = new MineSweeper('app', 'dev')
+        mnswpr.initialize()
+    </script>
+</body>
+</html>
--- a/11
+++ b/11
@ -0,0 +1,11 @@
+    <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>
--- a/lib/LICENSE
+++ b/lib/LICENSE
@ -1,24 +0,0 @@
-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.
--- a/lib/README.md
+++ b/lib/README.md
@ -1,157 +0,0 @@
-# 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)_
--- a/lib/package.json
+++ b/lib/package.json
@ -1,32 +0,0 @@
-{
-  "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"
-}
--- a/app/main.css
+++ b/app/main.css
--- a/package.json
+++ b/package.json
@ -1,38 +1,40 @@
 {
-  "name": "monorepo",
-  "version": "0.0.1",
+  "name": "@ayo-run/mnswpr",
+  "version": "0.0.3",
  "private": true,
  "description": "Classic Minesweeper browser game",
-  "author": "Ayo Ayco",
+  "author": "Ayo",
  "type": "module",
  "repository": {
    "type": "git",
-    "url": "https://github.com/ayo-run/mnswpr"
+    "url": "https://github.com/ayoayco/mnswpr"
  },
-  "homepage": "https://mnswpr.com",
+  "main": "src/index.js",
  "scripts": {
    "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",
+    "dev": "vite",
+    "start": "vite",
+    "build": "vite build",
    "prepare": "husky",
    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "release": "bumpp && node scripts/release.js"
  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "license": "BSD-2-Clause",
  "devDependencies": {
    "@eslint/css": "^1.1.0",
    "@eslint/js": "^10.0.1",
    "@stylistic/eslint-plugin": "^5.10.0",
    "bumpp": "^11.0.1",
+    "esbuild": "^0.28.0",
    "eslint": "^10.1.0",
    "globals": "^17.4.0",
    "husky": "^9.1.7",
    "simple-git": "^3.33.0",
    "vite": "^8.0.3"
-  },
-  "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
+  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -1,3 +1,2 @@
 packages:
-  - "lib"
-  - "app"
+  - "package"
--- a/app/public/favicon.ico
+++ b/app/public/favicon.ico
--- a/src/levels.js
+++ b/src/levels.js
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,5 @@
+import './modules/loading/loading.css'
+import './mnswpr.css'
+import Minesweeper from './mnswpr.js'
+
+export default Minesweeper
--- a/src/mnswpr.css
+++ b/src/mnswpr.css
--- a/src/mnswpr.js
+++ b/src/mnswpr.js
@ -1,15 +1,10 @@
 // @ts-check

-/**
- * import styles for vite bundling
- */
-import './mnswpr.css'
-
 import {
  LoggerService,
  StorageService,
  TimerService
-} from '../utils/index.js'
+} from './modules/index.js'
 import { levels } from './levels.js'

 const TEST_MODE = false // set to true if you want to test the game with visual hints
@ -20,24 +15,13 @@ const PC_BUSY_DELAY = 500
 * Create Minesweeper game board
 * @param {String} appId 
 * @param {String} version
- * @param {{
- * levelChanged: (setting: any) => void,
- * gameDone: (game: any) => void
- * } | undefined } hooks
 */
-const Minesweeper = function(appId, version, hooks = undefined) {
+export const Minesweeper = function(appId, version) {
  const _this = this
  const storageService = new StorageService()
  const timerService = new TimerService()
  const loggerService = new LoggerService()

-  if (!hooks) {
-    hooks = {
-      levelChanged: () => {},
-      gameDone: () => {}
-    }
-  }
-
  let grid = document.createElement('table')
  grid.setAttribute('id', 'grid')
  let flagsDisplay = document.createElement('span')
@ -95,8 +79,19 @@ const Minesweeper = function(appId, version, hooks = undefined) {
    if(appElement) {
      appElement.innerHTML = ''
      appElement.append(headingElement, gameBoard)
+      appElement.append(initializeSourceLink())
    }
-    generateGrid({ initial: true })
+    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 initializeFootbar() {
@ -171,17 +166,11 @@ const Minesweeper = function(appId, version, hooks = undefined) {
  function updateSetting(key) {
    setting = levels[key]
    storageService.saveToLocal('setting', setting)
-    generateGrid({ initial: true })
+    generateGrid()
  }


-  /**
-   * Generate the Game Board
-   * @param {{
-   * initial: boolean
-   * }} options - Game Board Options
-   */
-  function generateGrid(options = { initial: false }) {
+  function generateGrid() {
    firstClick = true
    grid.innerHTML = ''
    grid.oncontextmenu = () => false
@ -218,8 +207,8 @@ const Minesweeper = function(appId, version, hooks = undefined) {
     * TODO: add hook afterGridGenerated
     *   - for initializing the leaderboard
     */
-    if (options.initial)
-      hooks.levelChanged(setting)
+    console.log('[hook]: after grid generated')
+

    timerService.initialize(timerDisplay)
    updateFlagsCountDisplay()
@ -485,7 +474,7 @@ const Minesweeper = function(appId, version, hooks = undefined) {
     * TODO: add hook after gameSession send back `game`
     *   - for sending the game score to the db
     */
-    hooks.gameDone(game)
+    console.log('[hook]: after game session', game)

  }

@ -841,4 +830,4 @@ const Minesweeper = function(appId, version, hooks = undefined) {
  }
 }

-export default Minesweeper
+export default Minesweeper
--- a/src/modules/index.js
+++ b/src/modules/index.js
@ -1,5 +1,5 @@
+export * from './loading/loading.js'
 export * from './logger/logger.js'
 export * from './storage/storage.js'
 export * from './timer/timer.js'
-export * from './loading/loading.js'

--- a/src/modules/loading/loading.css
+++ b/src/modules/loading/loading.css
--- a/src/modules/loading/loading.js
+++ b/src/modules/loading/loading.js
@ -1,8 +1,3 @@
-/**
- * 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>'
--- a/src/modules/logger/logger.js
+++ b/src/modules/logger/logger.js
--- a/src/modules/storage/storage.js
+++ b/src/modules/storage/storage.js
--- a/src/modules/timer/timer.js
+++ b/src/modules/timer/timer.js
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
--- a/lib/vite.config.js
+++ b/lib/vite.config.js
@ -4,9 +4,9 @@ import { defineConfig } from 'vite'
 export default defineConfig({
  build: {
    lib: {
-      entry: resolve(import.meta.dirname, './mnswpr.js'),
+      entry: resolve(import.meta.dirname, 'src/main.js'),
      name: 'mnswpr',
      fileName: 'mnswpr'
    }
  }
-})
+})