From 4de763e02ce565f00daf92eccaf3f916820fb43e Mon Sep 17 00:00:00 2001
From: wangmeng <wangmeng08@sparkedu.com>
Date: Tue, 19 Dec 2023 14:27:28 +0800
Subject: [PATCH] fix: some code fixing

---
 src/components/ColorSelect/ColorSelect.tsx |  2 +-
 src/components/Dot/Dot.tsx                 |  2 +-
 src/components/OnlineCount/OnlineCount.tsx |  5 ++--
 src/stores/store.ts                        | 35 ++++++++++++++++++++--
 src/utils/indexDB.ts                       | 20 +++++++++++++
 5 files changed, 58 insertions(+), 6 deletions(-)
 create mode 100644 src/utils/indexDB.ts

diff --git a/src/components/ColorSelect/ColorSelect.tsx b/src/components/ColorSelect/ColorSelect.tsx
index 83a06d1..2f24da9 100644
--- a/src/components/ColorSelect/ColorSelect.tsx
+++ b/src/components/ColorSelect/ColorSelect.tsx
@@ -11,7 +11,7 @@ const colors = [
     "#00ffff",
     "#0000ff",
     "#800080",
-];
+] as const;
 
 const ulStyle: any = {
     margin: 0,
diff --git a/src/components/Dot/Dot.tsx b/src/components/Dot/Dot.tsx
index f607b2b..57a7fd4 100644
--- a/src/components/Dot/Dot.tsx
+++ b/src/components/Dot/Dot.tsx
@@ -4,7 +4,7 @@ interface Props {
     onClick: Function;
     row: number;
     col: number;
-    color: any;
+    color: string;
 }
 
 function Dot(props: Props) {
diff --git a/src/components/OnlineCount/OnlineCount.tsx b/src/components/OnlineCount/OnlineCount.tsx
index c05ffef..bc9381a 100644
--- a/src/components/OnlineCount/OnlineCount.tsx
+++ b/src/components/OnlineCount/OnlineCount.tsx
@@ -1,13 +1,14 @@
 import { useState } from "react";
+import { Socket } from "socket.io-client";
 // import { useState } from "react";
 
-function useOnlineCount(socket: any) {
+function useOnlineCount(socket: Socket) {
     var [count, setCount] = useState(0);
     socket && socket.on("online-count", setCount);
     return count;
 }
 
-function OnlineCount({ socket }: any) {
+function OnlineCount({ socket }: { socket: Socket }) {
     var count = useOnlineCount(socket);
 
     return <div style={{ margin: "20px" }}>Online people: {count}</div>;
diff --git a/src/stores/store.ts b/src/stores/store.ts
index b80d231..272a979 100644
--- a/src/stores/store.ts
+++ b/src/stores/store.ts
@@ -9,6 +9,14 @@ import {
     Offset,
 } from "../utils/const";
 
+export interface PixelContext {
+    state: typeof initialState;
+    dispatch: React.Dispatch<{
+        type: string;
+        payload?: any;
+    }>;
+}
+
 export const initialState = {
     zoomLevel: 1,
     wrapperLeft: 0,
@@ -21,11 +29,34 @@ export const initialState = {
     mouseInitialX: 0,
     mouseInitialY: 0,
     draggingRef: null,
+    initialX: -1,
+    initialY: -1,
+    mouseMoveX: -1,
+    mouseMoveY: -1,
 };
 
-export const PixelGridContext = React.createContext({} as any);
+export const PixelGridContext = React.createContext<PixelContext>({
+    state: {
+        zoomLevel: 1,
+        wrapperLeft: 0,
+        wrapperTop: 0,
+        dotHoveX: 0,
+        dotHoveY: 0,
+        isPickingColor: false,
+        initialLeft: 0,
+        initialTop: 0,
+        mouseInitialX: 0,
+        mouseInitialY: 0,
+        draggingRef: null,
+        initialX: -1,
+        initialY: -1,
+        mouseMoveX: -1,
+        mouseMoveY: -1,
+    },
+    dispatch: () => {},
+});
 
-export function reducer(state: any, action: any) {
+export function reducer(state: typeof initialState, action: any) {
     switch (action.type) {
         case Zoom: {
             const { zoomLevel } = state;
diff --git a/src/utils/indexDB.ts b/src/utils/indexDB.ts
new file mode 100644
index 0000000..1865760
--- /dev/null
+++ b/src/utils/indexDB.ts
@@ -0,0 +1,20 @@
+export const initDB = (dbName: string, dbType = 3) => {
+    if (window.indexedDB) {
+        //
+        return new Promise((resolve, reject) => {
+            const request = window.indexedDB.open(dbName, dbType);
+            request.onerror = () => {
+                console.error(
+                    "Why didn't you allow my web app to use IndexedDB?!"
+                );
+                reject();
+            };
+            request.onsuccess = (event: any) => {
+                let db = event.target.result;
+                resolve(db);
+            };
+        });
+    } else {
+        throw Error("Not Support IndexDB");
+    }
+};