diff --git a/palette-switcher-v2/src/index.tsx b/palette-switcher-v2/src/index.tsx index a5496be..39d27bd 100644 --- a/palette-switcher-v2/src/index.tsx +++ b/palette-switcher-v2/src/index.tsx @@ -5,7 +5,7 @@ import "./index.css"; import App from "./App"; import { Router, Route } from "@solidjs/router"; import About from "./pages/About"; -import Switcher from "./pages/Switcher"; +import Switcher from "./pages/Switcher/Switcher"; const root = document.getElementById("root"); diff --git a/palette-switcher-v2/src/lib/algorithm.ts b/palette-switcher-v2/src/lib/algorithm.ts new file mode 100644 index 0000000..70915e8 --- /dev/null +++ b/palette-switcher-v2/src/lib/algorithm.ts @@ -0,0 +1,3 @@ +import { BaseJob } from "./job" + +type Algorithm = typeof BaseJob.kind; diff --git a/palette-switcher-v2/src/lib/job.ts b/palette-switcher-v2/src/lib/job.ts index 879d37a..0743692 100644 --- a/palette-switcher-v2/src/lib/job.ts +++ b/palette-switcher-v2/src/lib/job.ts @@ -1,21 +1,35 @@ type Color = string; +export enum Algorithm { + FLOYD_STEINBERG = "FLOYD_STEINBERG", + BAYER = "BAYER", + PIXEL_MAPPER = "PIXEL_MAPPER" +}; + +type AlgorithmName = { + [T in Algorithm]: { + [Algorithm.FLOYD_STEINBERG]: "Floyd-Steinberg", + [Algorithm.BAYER]: "Bayer", + [Algorithm.PIXEL_MAPPER]: "Pixel Mapper" + }[T] +} + interface BaseJob { - kind: string; + kind: Algorithm; image: ArrayBuffer; palette: Color[]; } interface FloydSteinberg extends BaseJob { - kind: "FLOYD_STEINBERG"; + kind: Algorithm.FLOYD_STEINBERG; } interface Bayer extends BaseJob { - kind: "BAYER"; + kind: Algorithm.BAYER; } interface PixelMapper extends BaseJob { - kind: "PIXEL_MAPPER"; + kind: Algorithm.PIXEL_MAPPER; } export type Job = FloydSteinberg | Bayer | PixelMapper; diff --git a/palette-switcher-v2/src/pages/Switcher.tsx b/palette-switcher-v2/src/pages/Switcher.tsx deleted file mode 100644 index 4206d41..0000000 --- a/palette-switcher-v2/src/pages/Switcher.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import { Component, JSX, splitProps } from "solid-js"; -import { image, setJob } from "../lib/ditherer"; - -type DefaultButtonProps = { children?: JSX.Element } & JSX.HTMLAttributes; - -const DefaultButton: Component = (props) => { - const [, rest] = splitProps(props, ["children"]); - - return -} - -const Switcher: Component = () => { - const handler = () => { - setJob({ - kind: "FLOYD_STEINBERG", - image: new ArrayBuffer(1), - palette: ["FFFFFF"], - }); - }; - return ( -
-
-
-
-
-
-
-
-
- Trigger - {image()} -
- ); -}; - -export default Switcher; diff --git a/palette-switcher-v2/src/pages/Switcher/Switcher.tsx b/palette-switcher-v2/src/pages/Switcher/Switcher.tsx new file mode 100644 index 0000000..7328376 --- /dev/null +++ b/palette-switcher-v2/src/pages/Switcher/Switcher.tsx @@ -0,0 +1,57 @@ +import { Component, For, JSX, createSignal, splitProps } from "solid-js"; +import { image, setJob } from "../../lib/ditherer"; +import { Algorithm, AlgorithmName } from "../../lib/job"; + + +const Switcher: Component = () => { + const handler = () => { + setJob({ + kind: Algorithm.FLOYD_STEINBERG, + image: new ArrayBuffer(1), + palette: ["FFFFFF"], + }); + }; + + const [algorithms, setAlgorithms] = createSignal(Object.keys(Algorithm)); + + return ( +
+
+
+
+ Image Goes Here +
+
+
+
+

Configuration

+
+
+
+ + +
+
+ +
+
+
+
+
+
+ + {image()} +
+ ); +}; + +export default Switcher;