From 5b55a6ce7370b4dd01bf965474540f5cad4d32b4 Mon Sep 17 00:00:00 2001
From: Lang <7system7@gmail.com>
Date: Fri, 10 Apr 2026 21:53:50 +0200
Subject: [PATCH] chg: dev: use namespaces for front-end #4

---
 assets/js/app.jsx                             | 10 ++++-
 assets/js/mine-seeker/MineSeeker.jsx          | 13 ++++++-
 .../js/mine-seeker/components/GameBoard.jsx   |  6 +--
 .../components/grid/GridControl.jsx           | 13 ++++++-
 .../mine-seeker/components/grid/GridField.jsx | 11 +++++-
 assets/js/mine-seeker/components/index.js     | 14 +++++++
 .../js/mine-seeker/components/user/User.jsx   | 37 ++++++++++++-------
 .../components/user/UserControl.jsx           | 11 +++++-
 .../js/mine-seeker/contexts/GameContext.jsx   |  9 +++++
 .../js/mine-seeker/contexts/GameProvider.jsx  | 26 +++++++++----
 assets/js/mine-seeker/contexts/index.js       | 13 +++++++
 assets/js/mine-seeker/hooks/index.js          | 13 +++++++
 assets/js/mine-seeker/hooks/useGameRefs.jsx   | 11 +++++-
 assets/js/mine-seeker/hooks/useGameState.jsx  | 11 +++++-
 .../hooks/useServerCommunication.jsx          | 13 ++++++-
 assets/js/mine-seeker/utils/constants.jsx     |  9 +++++
 assets/js/mine-seeker/utils/index.js          | 10 +++++
 vite.config.js                                | 12 ++++++
 18 files changed, 208 insertions(+), 34 deletions(-)
 create mode 100644 assets/js/mine-seeker/components/index.js
 create mode 100644 assets/js/mine-seeker/contexts/index.js
 create mode 100644 assets/js/mine-seeker/hooks/index.js
 create mode 100644 assets/js/mine-seeker/utils/index.js

diff --git a/assets/js/app.jsx b/assets/js/app.jsx
index 6d98a91..cba2136 100644
--- a/assets/js/app.jsx
+++ b/assets/js/app.jsx
@@ -1,6 +1,14 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-
 import MineSeeker from './mine-seeker/MineSeeker';
 
 const wrapper = document.getElementById('mine-wrapper');
diff --git a/assets/js/mine-seeker/MineSeeker.jsx b/assets/js/mine-seeker/MineSeeker.jsx
index efeef6f..66e982d 100644
--- a/assets/js/mine-seeker/MineSeeker.jsx
+++ b/assets/js/mine-seeker/MineSeeker.jsx
@@ -1,7 +1,16 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 import React, { useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { GameProvider } from './contexts/GameProvider';
-import { GameBoard } from './components/GameBoard';
+import { GameProvider } from '@mine-contexts';
+import { GameBoard } from '@mine-components';
 
 const queryClient = new QueryClient();
 
diff --git a/assets/js/mine-seeker/components/GameBoard.jsx b/assets/js/mine-seeker/components/GameBoard.jsx
index 4afc5d3..a7dd837 100644
--- a/assets/js/mine-seeker/components/GameBoard.jsx
+++ b/assets/js/mine-seeker/components/GameBoard.jsx
@@ -1,4 +1,4 @@
-/*
+/**
  * This file is part of the SplendidBear Websites' projects.
  *
  * Copyright (c) 2026 @ www.splendidbear.org
@@ -8,8 +8,8 @@
  */
 
 import React from 'react';
-import { useGame } from '../contexts/GameContext';
-import useServerCommunication from '../hooks/useServerCommunication';
+import { useGame } from '@mine-contexts';
+import { useServerCommunication } from '@mine-hooks';
 import GridControl from './grid/GridControl';
 
 export const GameBoard = ({ gameAssoc, gameInherited, isEnvDev }) => {
diff --git a/assets/js/mine-seeker/components/grid/GridControl.jsx b/assets/js/mine-seeker/components/grid/GridControl.jsx
index 6b1d7de..e08f57d 100644
--- a/assets/js/mine-seeker/components/grid/GridControl.jsx
+++ b/assets/js/mine-seeker/components/grid/GridControl.jsx
@@ -1,8 +1,17 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 import React from 'react';
-import { useGame } from '../../contexts/GameContext';
+import { useGame } from '@mine-contexts';
 import GridField from './GridField';
 import UserControl from '../user/UserControl';
-import { BOMB_SYMBOLS, bombRadius } from '../../utils/constants';
+import { BOMB_SYMBOLS, bombRadius } from '@mine-utils';
 
 const GridControl = ({ onClick, resign }) => {
   const {
diff --git a/assets/js/mine-seeker/components/grid/GridField.jsx b/assets/js/mine-seeker/components/grid/GridField.jsx
index 1986c5b..d6a06b0 100644
--- a/assets/js/mine-seeker/components/grid/GridField.jsx
+++ b/assets/js/mine-seeker/components/grid/GridField.jsx
@@ -1,5 +1,14 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 import React, { memo } from 'react';
-import { IMAGES } from '../../utils/constants';
+import { IMAGES } from '@mine-utils';
 
 const bombSrc = area => {
   if (null === area) return null;
diff --git a/assets/js/mine-seeker/components/index.js b/assets/js/mine-seeker/components/index.js
new file mode 100644
index 0000000..22c7c30
--- /dev/null
+++ b/assets/js/mine-seeker/components/index.js
@@ -0,0 +1,14 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+export { GameBoard } from './GameBoard';
+export { default as GridControl } from './grid/GridControl';
+export { default as GridField } from './grid/GridField';
+export { default as User } from './user/User';
+export { default as UserControl } from './user/UserControl';
diff --git a/assets/js/mine-seeker/components/user/User.jsx b/assets/js/mine-seeker/components/user/User.jsx
index 5411933..aad7994 100644
--- a/assets/js/mine-seeker/components/user/User.jsx
+++ b/assets/js/mine-seeker/components/user/User.jsx
@@ -1,17 +1,28 @@
-import React, { memo } from 'react';
-import { IMAGES } from '../../utils/constants';
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
 
-const User = memo(function User({
-  color,
-  webPlayer,
-  name,
-  desc,
-  active,
-  mines,
-  haveBomb,
-  enabledBomb,
-  onClickBombSelector,
-}) {
+import React, { memo } from 'react';
+import { IMAGES } from '@mine-utils';
+
+const User = memo(function User(
+  {
+    color,
+    webPlayer,
+    name,
+    desc,
+    active,
+    mines,
+    haveBomb,
+    enabledBomb,
+    onClickBombSelector,
+  },
+) {
   const buzzClass = 'bomb-container'
     + (active && color === webPlayer && haveBomb && enabledBomb ? ' buzz' : '');
 
diff --git a/assets/js/mine-seeker/components/user/UserControl.jsx b/assets/js/mine-seeker/components/user/UserControl.jsx
index 4c3cbb8..38cc65b 100644
--- a/assets/js/mine-seeker/components/user/UserControl.jsx
+++ b/assets/js/mine-seeker/components/user/UserControl.jsx
@@ -1,5 +1,14 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 import React from 'react';
-import { useGame } from '../../contexts/GameContext';
+import { useGame } from '@mine-contexts';
 import User from './User';
 
 const UserControl = ({ resign }) => {
diff --git a/assets/js/mine-seeker/contexts/GameContext.jsx b/assets/js/mine-seeker/contexts/GameContext.jsx
index b8ac5a4..6ce879b 100644
--- a/assets/js/mine-seeker/contexts/GameContext.jsx
+++ b/assets/js/mine-seeker/contexts/GameContext.jsx
@@ -1,3 +1,12 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 import { createContext, useContext } from 'react';
 
 const GameContext = createContext(null);
diff --git a/assets/js/mine-seeker/contexts/GameProvider.jsx b/assets/js/mine-seeker/contexts/GameProvider.jsx
index d13bd1d..e4297cb 100644
--- a/assets/js/mine-seeker/contexts/GameProvider.jsx
+++ b/assets/js/mine-seeker/contexts/GameProvider.jsx
@@ -1,9 +1,17 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 import React, { useRef } from 'react';
 import { Howl } from 'howler';
 import GameContext from './GameContext';
-import useGameRefs from '../hooks/useGameRefs';
-import useGameState from '../hooks/useGameState';
-import { DESC, IMAGES, patchCells } from '../utils/constants';
+import { useGameRefs, useGameState } from '@mine-hooks';
+import { DESC, IMAGES, patchCells } from '@mine-utils';
 
 export const GameProvider = ({ children }) => {
   const {
@@ -41,7 +49,8 @@ export const GameProvider = ({ children }) => {
     won: new Howl({ src: ['/sound/won.mp3'] }),
   });
 
-  // ── Sync helpers (keep ref + state in lockstep) ──────────────────────────
+  /** Sync helpers (keep ref + state in lockstep) */
+
   const syncWebPlayer = v => {
     webPlayerRef.current = v;
     setWebPlayer(v);
@@ -69,7 +78,8 @@ export const GameProvider = ({ children }) => {
     setBlue(n);
   };
 
-  // ── Overlay ───────────────────────────────────────────────────────────────
+  /** Overlay */
+
   const showOverlay = (title, sub) => {
     setOverlay(true);
     setOverlayTitle(title);
@@ -78,7 +88,8 @@ export const GameProvider = ({ children }) => {
 
   const hideOverlay = () => setOverlay(false);
 
-  // ── Cell helpers ──────────────────────────────────────────────────────────
+  /** Cell helpers */
+
   const applyRevealedCell = (cell, player, isMainCell = false) => {
     const { row, col, value } = cell;
     setCells(prev => {
@@ -105,7 +116,8 @@ export const GameProvider = ({ children }) => {
     });
   };
 
-  // ── Game logic ────────────────────────────────────────────────────────────
+  /** Game logic */
+
   const changePlayer = () => {
     const wasColor = activePlayerRef.current ? 'blue' : 'red';
     const nextColor = activePlayerRef.current ? 'red' : 'blue';
diff --git a/assets/js/mine-seeker/contexts/index.js b/assets/js/mine-seeker/contexts/index.js
new file mode 100644
index 0000000..86775ae
--- /dev/null
+++ b/assets/js/mine-seeker/contexts/index.js
@@ -0,0 +1,13 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+export { useGame } from './GameContext';
+export { GameProvider } from './GameProvider';
+export { default as GameContext } from './GameContext';
+
diff --git a/assets/js/mine-seeker/hooks/index.js b/assets/js/mine-seeker/hooks/index.js
new file mode 100644
index 0000000..a3d5cbd
--- /dev/null
+++ b/assets/js/mine-seeker/hooks/index.js
@@ -0,0 +1,13 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+export { default as useGameRefs } from './useGameRefs';
+export { default as useGameState } from './useGameState';
+export { default as useServerCommunication } from './useServerCommunication';
+
diff --git a/assets/js/mine-seeker/hooks/useGameRefs.jsx b/assets/js/mine-seeker/hooks/useGameRefs.jsx
index 6112f6f..99f1ea2 100644
--- a/assets/js/mine-seeker/hooks/useGameRefs.jsx
+++ b/assets/js/mine-seeker/hooks/useGameRefs.jsx
@@ -1,5 +1,14 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 import { useRef } from 'react';
-import { PLAYER_DEF } from '../utils/constants';
+import { PLAYER_DEF } from '@mine-utils';
 
 const useGameRefs = () => {
   const webPlayerRef = useRef(null);
diff --git a/assets/js/mine-seeker/hooks/useGameState.jsx b/assets/js/mine-seeker/hooks/useGameState.jsx
index 74fc0f2..d33b27d 100644
--- a/assets/js/mine-seeker/hooks/useGameState.jsx
+++ b/assets/js/mine-seeker/hooks/useGameState.jsx
@@ -1,5 +1,14 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 import { useState } from 'react';
-import { initCells, PLAYER_DEF } from '../utils/constants';
+import { initCells, PLAYER_DEF } from '@mine-utils';
 
 const useGameState = () => {
   const [webPlayer, setWebPlayer] = useState(null);
diff --git a/assets/js/mine-seeker/hooks/useServerCommunication.jsx b/assets/js/mine-seeker/hooks/useServerCommunication.jsx
index e5c537f..0e59b55 100644
--- a/assets/js/mine-seeker/hooks/useServerCommunication.jsx
+++ b/assets/js/mine-seeker/hooks/useServerCommunication.jsx
@@ -1,7 +1,16 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 import React, { useEffect, useRef } from 'react';
 import { useMutation, useQuery } from '@tanstack/react-query';
-import { useGame } from '../contexts/GameContext';
-import { DESC } from '../utils/constants';
+import { useGame } from '@mine-contexts';
+import { DESC } from '@mine-utils';
 
 /** Handles all server communication: SSE (Mercure), REST calls, and the initialization lifecycle. */
 const useServerCommunication = (gameAssoc, gameInherited, isEnvDev) => {
diff --git a/assets/js/mine-seeker/utils/constants.jsx b/assets/js/mine-seeker/utils/constants.jsx
index a7a3143..c36cff1 100644
--- a/assets/js/mine-seeker/utils/constants.jsx
+++ b/assets/js/mine-seeker/utils/constants.jsx
@@ -1,3 +1,12 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
 import React from 'react';
 
 export const ROWS = 16;
diff --git a/assets/js/mine-seeker/utils/index.js b/assets/js/mine-seeker/utils/index.js
new file mode 100644
index 0000000..fbb1db7
--- /dev/null
+++ b/assets/js/mine-seeker/utils/index.js
@@ -0,0 +1,10 @@
+/**
+ * This file is part of the SplendidBear Websites' projects.
+ *
+ * Copyright (c) 2026 @ www.splendidbear.org
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+export { DESC, IMAGES, BOMB_SYMBOLS, PLAYER_DEF, bombRadius, initCells, patchCells } from './constants';
diff --git a/vite.config.js b/vite.config.js
index 3f34022..fe3697e 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,12 +1,24 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import symfonyPlugin from 'vite-plugin-symfony';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 export default defineConfig({
   plugins: [
     react(),
     symfonyPlugin({ refresh: true }),
   ],
+  resolve: {
+    alias: {
+      '@mine-components': resolve(__dirname, './assets/js/mine-seeker/components'),
+      '@mine-contexts': resolve(__dirname, './assets/js/mine-seeker/contexts'),
+      '@mine-hooks': resolve(__dirname, './assets/js/mine-seeker/hooks'),
+      '@mine-utils': resolve(__dirname, './assets/js/mine-seeker/utils'),
+    },
+  },
   build: {
     rollupOptions: {
       input: {