fix: some code fixing

src/components/ColorSelect/ColorSelect.tsx

@@ -11,7 +11,7 @@ const colors = [
     "#00ffff",
     "#0000ff",
     "#800080",
-];
+] as const;
 
 const ulStyle: any = {
     margin: 0,

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) {

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>;

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;

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");
+    }
+};