diff --git a/app/main.js b/app/main.js
index 2ea92c1..d417451 100644
--- a/app/main.js
+++ b/app/main.js
@@ -1,5 +1,7 @@
-import mnswpr from '../lib/mnswpr.js'
-import * as pkg from '../package.json'
+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/'
const version = import.meta.env.MODE === 'development'
? 'dev'
@@ -9,4 +11,13 @@ const game = new mnswpr('app', version, {
levelChanged: () => console.log('[hook]: level reset'),
gameDone: (game) => console.log('[hook]: game done', game)
})
-game.initialize()
\ No newline at end of file
+game.initialize()
+
+const loadingService = new LoadingService()
+const loadingWrapper = document.createElement('div')
+loadingWrapper.id = 'loading-wrapper'
+loadingService.addLoading(loadingWrapper)
+
+const appElement = document.getElementById('app')
+appElement.append(loadingWrapper)
+
diff --git a/app/package.json b/app/package.json
new file mode 100644
index 0000000..ac8fb40
--- /dev/null
+++ b/app/package.json
@@ -0,0 +1,11 @@
+{
+ "name": "app",
+ "version": "0.0.1",
+ "description": "the mnswpr.com web app",
+ "private": true,
+ "main": "main.js",
+ "devDependencies": {
+ "@ayo-run/mnswpr": "workspace:*"
+ },
+ "author": "Ayo Ayco"
+}
diff --git a/lib/package.json b/lib/package.json
new file mode 100644
index 0000000..a6fba1c
--- /dev/null
+++ b/lib/package.json
@@ -0,0 +1,28 @@
+{
+ "name": "@ayo-run/mnswpr",
+ "version": "0.4.26",
+ "description": "Classic Minesweeper browser game",
+ "author": "Ayo",
+ "type": "module",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/ayo-run/mnswpr"
+ },
+ "main": "mnswpr.js",
+ "exports": {
+ ".": {
+ "default": "./dist/mnswpr.js"
+ },
+ "./dist/*": {
+ "default": "./dist/*"
+ },
+ "./*": {
+ "default": "./*"
+ }
+ },
+ "files": [
+ "./*",
+ "./dist"
+ ],
+ "license": "BSD-2-Clause"
+}
diff --git a/package.json b/package.json
index 5a68c32..1cef049 100644
--- a/package.json
+++ b/package.json
@@ -1,14 +1,14 @@
{
- "name": "@ayo-run/mnswpr",
- "version": "0.4.26",
+ "name": "monorepo",
+ "version": "0.0.1",
+ "private": true,
"description": "Classic Minesweeper browser game",
- "author": "Ayo",
+ "author": "Ayo Ayco",
"type": "module",
"repository": {
"type": "git",
"url": "https://github.com/ayo-run/mnswpr"
},
- "main": "dist/mnswpr.js",
"scripts": {
"test": "echo \"Warn: no test specified\"",
"dev": "vite app",
@@ -23,20 +23,6 @@
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
- "exports": {
- ".": {
- "default": "./lib/dist/mnswpr.js"
- },
- "./*": {
- "default":"./lib/dist/*"
- }
- },
- "files": [
- "lib/dist",
- "README.md",
- "LICENSE"
- ],
- "license": "BSD-2-Clause",
"devDependencies": {
"@eslint/css": "^1.1.0",
"@eslint/js": "^10.0.1",
@@ -47,5 +33,6 @@
"husky": "^9.1.7",
"simple-git": "^3.33.0",
"vite": "^8.0.3"
- }
+ },
+ "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a1c0adc..b7d7fe4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,6 +36,14 @@ importers:
specifier: ^8.0.3
version: 8.0.3(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)(jiti@2.6.1)(yaml@2.8.3)
+ app:
+ devDependencies:
+ '@ayo-run/mnswpr':
+ specifier: workspace:*
+ version: link:../lib
+
+ lib: {}
+
packages:
'@emnapi/core@1.9.2':
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..2928adc
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+ - "lib"
+ - "app"
\ No newline at end of file
diff --git a/utils/index.js b/utils/index.js
index 8cf731a..b613eab 100644
--- a/utils/index.js
+++ b/utils/index.js
@@ -1,4 +1,5 @@
export * from './logger/logger.js'
export * from './storage/storage.js'
export * from './timer/timer.js'
+export * from './loading/loading.js'
diff --git a/utils/loading/loading.css b/utils/loading/loading.css
new file mode 100644
index 0000000..315e809
--- /dev/null
+++ b/utils/loading/loading.css
@@ -0,0 +1,55 @@
+.lds-ellipsis {
+ display: inline-block;
+ position: relative;
+ width: 80px;
+ height: 80px;
+}
+.lds-ellipsis div {
+ position: absolute;
+ top: 33px;
+ width: 13px;
+ height: 13px;
+ border-radius: 50%;
+ background: #fff;
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+ left: 8px;
+ animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+ left: 8px;
+ animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+ left: 32px;
+ animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+ left: 56px;
+ animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+ 0% {
+ transform: scale(0);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+@keyframes lds-ellipsis3 {
+ 0% {
+ transform: scale(1);
+ }
+ 100% {
+ transform: scale(0);
+ }
+}
+@keyframes lds-ellipsis2 {
+ 0% {
+ transform: translate(0, 0);
+ }
+ 100% {
+ transform: translate(24px, 0);
+ }
+}
diff --git a/utils/loading/loading.js b/utils/loading/loading.js
new file mode 100644
index 0000000..46b07ea
--- /dev/null
+++ b/utils/loading/loading.js
@@ -0,0 +1,13 @@
+/**
+ * import styles for vite bundling
+ */
+import './loading.css'
+
+export class LoadingService {
+ addLoading(element) {
+ element.innerHTML = '
'
+ }
+ removeLoading(element) {
+ element.innerHTML = ''
+ }
+}
\ No newline at end of file