wip

ky-y · Sep 5, 2024 · d93abbd · d93abbd
1 parent 6875ff4
commit d93abbd
Show file tree

Hide file tree

Showing 6 changed files with 187 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
         "stylelint:fix": "stylelint \"**/*.{css,scss,sass}\" --fix"
     },
     "dependencies": {
-        "@ky-y./ui": "^1.0.153",
+        "@ky-y./ui": "^1.0.165",
         "next": "^14.2.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -26,6 +26,9 @@ export const Header = () => {
             <Link href="/hex-mixer">
                 Hex Mixer
             </Link>
+            <Link href="/hex-steps-generator">
+                Hex Steps Generator
+            </Link>
         </HeaderC>
     );
 };
diff --git a/src/pages/hex-steps-generator.tsx b/src/pages/hex-steps-generator.tsx
@@ -0,0 +1,25 @@
+import { Footer, Main } from "@ky-y./ui";
+import type { NextPage } from "next";
+import Head from "next/head";
+
+import { Header } from "components/Header/Header";
+
+import { Generator } from "sections/hex-steps-generator";
+
+const Password: NextPage = () => {
+
+    return (
+        <>
+            <Head>
+                <title>Hex Steps Generator | kyTools</title>
+            </Head>
+            <Header />
+            <Main>
+                <Generator />
+            </Main>
+            <Footer/>
+        </>
+    );
+};
+
+export default Password;
diff --git a/src/sections/hex-steps-generator/Generator/Generator.module.scss b/src/sections/hex-steps-generator/Generator/Generator.module.scss
@@ -0,0 +1,38 @@
+.form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .inputHex {
+        font-family: "Roboto Mono", monospace;
+
+        input {
+            width: 4rem;
+            text-align: center;
+        }
+    }
+
+    .inputSteps {
+        font-family: "Roboto Mono", monospace;
+
+        input {
+            width: 2rem;
+            text-align: center;
+        }
+    }
+
+    .wave {
+        padding: 0 0.75rem;
+    }
+}
+
+.result {
+    padding: 1.5rem 0;
+    font-family: "Roboto Mono", monospace;
+    text-align: center;
+
+    &.disable {
+        color: #999;
+        cursor: not-allowed;
+    }
+}
diff --git a/src/sections/hex-steps-generator/Generator/Generator.tsx b/src/sections/hex-steps-generator/Generator/Generator.tsx
@@ -0,0 +1,115 @@
+import { Card, Code, Section } from "@ky-y./ui";
+import { Roboto_Mono } from "next/font/google";
+import { FC, useEffect, useState } from "react";
+
+import { cn } from "scripts/cn";
+
+import scss from "./Generator.module.scss";
+
+const inter = Roboto_Mono({ subsets: ["latin"] });
+
+export const Generator: FC = () => {
+    const [hex1, setHex1] = useState<string>("000000");
+    const [hex2, setHex2] = useState<string>("FFFFFF");
+    const [steps, setSteps] = useState<number>(10);
+
+    const [hex, setHex] = useState<string[]>([]);
+
+    const [disable, setDisable] = useState<boolean>(true);
+
+    useEffect(() => {
+        const hexF = [hex1, hex2].map(
+            hex => hex.replace(/[^0-9a-fA-F]/gi, "")
+        );
+
+        if (hexF[0].length !== 3 && hexF[0].length !== 6) return setDisable(true);
+        if (hexF[1].length !== 3 && hexF[1].length !== 6) return setDisable(true);
+        if (steps < 2 || 255 < steps) return setDisable(true);
+
+        setDisable(false);
+
+        const hexA = hexF.map(hex => {
+            const hex_length = hex.length / 3;
+            const regex = new RegExp(`.{${hex_length}}`, "g");
+            const match = hex.match(regex);
+
+            if (!match)
+                throw new Error("Error!");
+
+            return match.map(digit => digit.length === 1
+                ? parseInt(digit + digit, 16)
+                : parseInt(digit, 16)
+            );
+        });
+
+        const hex1A = hexA[0];
+        const hex2A = hexA[1];
+
+        const genHexs = (hex1: number[], hex2: number[], steps: number) => {
+
+            const diff = hex1.map((v, i) => {
+                return hex2[i] - v;
+            });
+
+            return Array(steps).fill("").map((_, i) => {
+
+                return [
+                    hex1[0] + (diff[0] / (steps - 1) * i),
+                    hex1[1] + (diff[1] / (steps - 1) * i),
+                    hex1[2] + (diff[2] / (steps - 1) * i)
+                ];
+            });
+        };
+
+        const hexs = genHexs(hex1A, hex2A, steps);
+
+        setHex(
+            hexs.map(hex => {
+                return "#" + hex.map((v) => {
+                    return ("00" + Math.round(v).toString(16)).slice(-2);
+                }).join("");
+            })
+        );
+
+
+    }, [hex1, hex2, steps]);
+
+    return (
+        <Section inner="xs">
+            <Card className={scss.card}>
+                <div className={scss.form}>
+                    <div className={scss.inputHex}>
+                        <span>#</span>
+                        <input
+                            type="text" value={hex1} onChange={e => setHex1(e.target.value)}
+                            maxLength={6} className={inter.className}
+                        />
+                    </div>
+                    <div className={scss.wave}>〜</div>
+                    <div className={scss.inputSteps}>
+                        <span>Steps:</span>
+                        <input
+                            type="number" value={steps} onChange={e => setSteps(Number(e.target.value))}
+                            min={2} max={255} className={inter.className}
+                        />
+                    </div>
+                    <div className={scss.wave}>〜</div>
+                    <div className={scss.inputHex}>
+                        <span>#</span>
+                        <input
+                            type="text" value={hex2} onChange={e => setHex2(e.target.value)}
+                            maxLength={6} className={inter.className}
+                        />
+                    </div>
+                </div>
+                <div className={cn(scss.result, inter.className, (disable ? scss.disable : ""))}>
+                    { hex.map((v, i) => <div key={ i }>{ v }</div>) }
+                </div>
+                <Code
+                    language="SCSS"
+                    code={ hex.map((v, i) => `$color-${i * 100}: ${v};`).join("\n") }
+                />
+            </Card>
+        </Section>
+    );
+};
diff --git a/yarn.lock b/yarn.lock
@@ -176,7 +176,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@ky-y./kytools@workspace:."
   dependencies:
-    "@ky-y./ui": "npm:^1.0.153"
+    "@ky-y./ui": "npm:^1.0.165"
     "@types/node": "npm:^20.14.11"
     "@types/react": "npm:^18.3.3"
     "@types/uuid": "npm:^10.0.0"
@@ -205,16 +205,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@ky-y./ui@npm:^1.0.153":
-  version: 1.0.153
-  resolution: "@ky-y./ui@npm:1.0.153"
+"@ky-y./ui@npm:^1.0.165":
+  version: 1.0.165
+  resolution: "@ky-y./ui@npm:1.0.165"
   dependencies:
     react: "npm:^18.3.1"
     react-icons: "npm:^5.2.1"
     react-textarea-autosize: "npm:^8.5.3"
     shiki: "npm:^1.14.1"
     uuid: "npm:^10.0.0"
-  checksum: 10c0/eef5dc4b18e0708a2c2f1b0170d0f695210050b4122f92ca27ad3fd92c4a2185e7311c68aee2dbbcfcf854f47d24389f68a32b74303b1a2796e3aff51ff3a4d9
+  checksum: 10c0/cc67ae34be73fdfdc44947cf8737fe1ad7e06ad71f48e60308dcec6d6607e105967f2f00f5cc34722f4202078510d0f023136ab3bdcb80249464d3d9a45c20de
   languageName: node
   linkType: hard