WIP

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "chesspic",
       "version": "0.0.0",
+      "license": "GNU GPL V3.0",
       "dependencies": {
         "@arrows/array": "^1.4.1",
         "@types/chess.js": "^0.11.2",
@@ -29,6 +30,7 @@
         "@types/hammerjs": "^2.0.41",
         "@types/howler": "^2.2.6",
         "@types/node": "^17.0.8",
+        "@types/ua-parser-js": "^0.7.36",
         "@types/webfontloader": "^1.6.34",
         "typescript": "^4.4.4",
         "vite": "^2.7.2",
@@ -559,6 +561,12 @@
       "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
       "dev": true
     },
+    "node_modules/@types/ua-parser-js": {
+      "version": "0.7.36",
+      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz",
+      "integrity": "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==",
+      "dev": true
+    },
     "node_modules/@types/webfontloader": {
       "version": "1.6.34",
       "resolved": "https://registry.npmjs.org/@types/webfontloader/-/webfontloader-1.6.34.tgz",
@@ -4183,6 +4191,12 @@
       "integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
       "dev": true
     },
+    "@types/ua-parser-js": {
+      "version": "0.7.36",
+      "resolved": "https://registry.npmjs.org/@types/ua-parser-js/-/ua-parser-js-0.7.36.tgz",
+      "integrity": "sha512-N1rW+njavs70y2cApeIw1vLMYXRwfBy+7trgavGuuTfOd7j1Yh7QTRc/yqsPl6ncokt72ZXuxEU0PiCp9bSwNQ==",
+      "dev": true
+    },
     "@types/webfontloader": {
       "version": "1.6.34",
       "resolved": "https://registry.npmjs.org/@types/webfontloader/-/webfontloader-1.6.34.tgz",

package.json

@@ -13,6 +13,7 @@
     "@types/hammerjs": "^2.0.41",
     "@types/howler": "^2.2.6",
     "@types/node": "^17.0.8",
+    "@types/ua-parser-js": "^0.7.36",
     "@types/webfontloader": "^1.6.34",
     "typescript": "^4.4.4",
     "vite": "^2.7.2",

src/state.ts

@@ -3,9 +3,10 @@ import { createStore } from "solid-js/store";
 import Game from "./game/Game";
 import loadConfig from "./persistance/loadConfig";
 import { BoardConfig, GameConfig, SiteConfig } from "./types";
+import UAParser from "ua-parser-js";
 
+const userAgent = UAParser();
 const mobile = isMobile();
-
 const saved = loadConfig();
 
 const initialBoardConfig: BoardConfig = {
@@ -34,6 +35,7 @@ const initialSiteConfig: SiteConfig = {
   darkMode: true,
   sounds: true,
   speech: false,
+  wrongBrowserPopup: true,
 };
 
 export type TabName = "game" | "load" | "share" | "boards" | "pieces";
@@ -53,6 +55,8 @@ export type State = {
   playing: boolean;
   anonymous: boolean;
   refreshHash: boolean;
+  browser?: string;
+  os?: string;
 };
 
 const initialState: State = {
@@ -78,8 +82,12 @@ const initialState: State = {
   playing: false,
   anonymous: false,
   refreshHash: true,
+  browser: userAgent.browser.name,
+  os: userAgent.os.name,
 };
 
 const [state, setState] = createStore(initialState);
 
+console.log(state);
+
 export { state, setState };

src/types.ts

@@ -105,6 +105,7 @@ export type SiteConfig = {
   darkMode: boolean;
   sounds: boolean;
   speech: boolean;
+  wrongBrowserPopup: boolean;
 };
 
 export type MaterialCount = {

src/ui/App.tsx

@@ -2,14 +2,16 @@ import { Component, Show } from "solid-js";
 import type { DeepReadonly } from "solid-js/store";
 
 import { Handlers } from "../types";
-import { State, state } from "../state";
+import { setState, State, state } from "../state";
 
 import Header from "./components/Header";
 import GameTabs from "./components/GameTabs";
 import SetupTabs from "./components/SetupTabs";
 import Controls from "./components/Controls";
+import Popup from "./components/Popup";
 
 import "./App.css";
+import saveConfig from "../persistance/saveConfig";
 
 const App: Component<{ handlers: Handlers; state: DeepReadonly<State> }> = (
   props
@@ -42,6 +44,17 @@ const App: Component<{ handlers: Handlers; state: DeepReadonly<State> }> = (
           ></GameTabs>
         </div>
       </div>
+      <Show when={state.siteConfig.wrongBrowserPopup}>
+        <Popup
+          handlers={props.handlers}
+          onClose={() => {
+            setState("siteConfig", "wrongBrowserPopup", false);
+            saveConfig("site");
+          }}
+        >
+          {state.browser} | {state.os}
+        </Popup>
+      </Show>
     </div>
   );
 };

src/ui/components/Popup.css

@@ -0,0 +1,34 @@
+.popup {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 2rem;
+  display: grid;
+  vertical-align: middle;
+}
+
+.popup__box {
+  background-color: var(--color-bg-block);
+  max-width: 300px;
+  width: 100%;
+  margin: auto;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 2rem #00000099;
+  position: relative;
+}
+
+.popup__close {
+  width: 3.2rem;
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+}
+
+.popup__title {
+  text-align: left;
+  margin: 0 4.2rem 2rem 0;
+  /* background-color: aqua; */
+}

src/ui/components/Popup.tsx

@@ -0,0 +1,23 @@
+import { Component } from "solid-js";
+import { Handlers } from "../../types";
+import { state, setState } from "../../state";
+
+import "./Popup.css";
+
+const Popup: Component<{ handlers: Handlers; onClose: () => void }> = (
+  props
+) => {
+  return (
+    <div className="popup">
+      <div className="popup__box">
+        <button className="popup__close" onClick={props.onClose}>
+          <i class="las la-times"></i>
+        </button>
+        <h2 className="popup__title">Popup title</h2>
+        <div className="popup__content">{props.children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Popup;