fix: some changing of directory

zer0fire · Sep 19, 2023 · b4b6341 · b4b6341
1 parent 8ab8a45
commit b4b6341
Show file tree

Hide file tree

Showing 11 changed files with 20 additions and 13 deletions.
diff --git a/src/App.test.ts → __test__/App.test.ts b/src/App.test.ts → __test__/App.test.ts
@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./components/App";
+import App from "../src/components/App/App";
 
 it("renders without crashing", () => {
     const div = document.createElement("div");

diff --git a/src/components/App.css → src/components/App/App.css b/src/components/App.css → src/components/App/App.css
diff --git a/src/components/App.tsx → src/components/App/App.tsx b/src/components/App.tsx → src/components/App/App.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useContext, useState } from "react";
 import io from "socket.io-client";
 import "./App.css";
-import PixelGrid from "./PixelGrid";
-import ColorSelect from "./ColorSelect";
-import OnlineCount from "./OnlineCount";
+import PixelGrid from "../PixelGrid/PixelGrid";
+import ColorSelect from "../ColorSelect/ColorSelect";
+import OnlineCount from "../OnlineCount/OnlineCount";
 // import { produce } from "immer";
 // import _ from "lodash";
 

diff --git a/src/components/ColorSelect.tsx → src/components/ColorSelect/ColorSelect.tsx b/src/components/ColorSelect.tsx → src/components/ColorSelect/ColorSelect.tsx
diff --git a/src/components/Dot.tsx → src/components/Dot/Dot.tsx b/src/components/Dot.tsx → src/components/Dot/Dot.tsx
diff --git a/src/components/Movable.tsx → src/components/Movable/Movable.tsx b/src/components/Movable.tsx → src/components/Movable/Movable.tsx
diff --git a/src/components/OnlineCount.tsx → src/components/OnlineCount/OnlineCount.tsx b/src/components/OnlineCount.tsx → src/components/OnlineCount/OnlineCount.tsx
diff --git a/src/components/PixelGrid.tsx → src/components/PixelGrid/PixelGrid.tsx b/src/components/PixelGrid.tsx → src/components/PixelGrid/PixelGrid.tsx
@@ -1,15 +1,20 @@
 import React, { useRef, useState, useEffect, useReducer } from "react";
 import ReactDOM from "react-dom";
-import { initialState, reducer } from "../stores/store";
-import { createImageFromArrayBuffer, getMousePos, makeCursor } from "../utils";
+import { initialState, reducer } from "../../stores/store";
+import {
+    createImageFromArrayBuffer,
+    getMousePos,
+    makeCursor,
+} from "../../utils";
 import {
     Offset,
     PickColor,
+    TOP_LAYER,
     WrapperMouseDown,
     WrapperMouseMove,
     WrapperMouseUp,
     Zoom,
-} from "../utils/const";
+} from "../../utils/const";
 
 const canvasStyle = {
     display: "block",
@@ -215,7 +220,7 @@ function PixelGrid({ onPickColor, currentColor, onPixelClick, socket }: Props) {
             let pixelColor = Array.from(
                 ctx.current.getImageData(x, y, 1, 1).data
             );
-            let pixelColorCss = "rgba(" + pixelColor + ")";
+            let pixelColorCss = `rgba(${pixelColor})`;
             // console.log(pixelColor, pixelColorCss)
             let cursorUrl = makeCursor(pixelColorCss);
             if (canvas) {
@@ -253,19 +258,19 @@ function PixelGrid({ onPickColor, currentColor, onPixelClick, socket }: Props) {
                     className="dot-hover-box"
                     style={{
                         boxShadow: "0 0 1px black",
-                        width: zoomLevel + "px",
-                        height: zoomLevel + "px",
+                        width: `${zoomLevel}px`,
+                        height: `${zoomLevel}px`,
                         position: "absolute",
                         left: dotHoveX * zoomLevel,
                         top: dotHoveY * zoomLevel,
-                        zIndex: 8,
+                        zIndex: TOP_LAYER,
                         pointerEvents: "none",
                     }}
                 ></span>
                 <canvas
                     style={{
                         ...canvasStyle,
-                        transform: "scale(" + zoomLevel + ")",
+                        transform: `scale(${TOP_LAYER})`,
                         transformOrigin: "top left",
                     }}
                     // onWheel={handleZoom}

diff --git a/src/components/Zoomable.tsx → src/components/Zoomable/Zoomable.tsx b/src/components/Zoomable.tsx → src/components/Zoomable/Zoomable.tsx
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,7 +1,7 @@
 import ReactDOM from "react-dom";
 import React from "react";
 import "./index.css";
-import App from "./components/App";
+import App from "./components/App/App";
 // import * as serviceWorker from './serviceWorker';
 
 // class App extends React.Component {

diff --git a/src/utils/const.ts b/src/utils/const.ts
@@ -6,3 +6,5 @@ export const WrapperMouseMove = "WrapperMouseMove";
 export const WrapperMouseDown = "WrapperMouseDown";
 export const PickColor = "PickColor";
 export const Offset = "Offset";
+
+export const TOP_LAYER = 8;