14 files changed, 288 insertions, 0 deletions
diff --git a/frontend/src/app.jsx b/frontend/src/app.jsx
new file mode 100644
index 0000000..9936415
--- /dev/null
+++ b/frontend/src/app.jsx
@@ -0,0 +1,9 @@
+import Home from "./pages/Home/Home";
+
+export function App(props) {
+  return (
+    <>
+      <Home />
+    </>
+  );
+}
diff --git a/frontend/src/assets/fonts/JetBrainsMono-VariableFont_wght.ttf b/frontend/src/assets/fonts/JetBrainsMono-VariableFont_wght.ttf
new file mode 100644
index 0000000..d73994a
--- /dev/null
+++ b/frontend/src/assets/fonts/JetBrainsMono-VariableFont_wght.ttf
diff --git a/frontend/src/assets/fonts/JetBrains_Mono_latin-ext.woff2 b/frontend/src/assets/fonts/JetBrains_Mono_latin-ext.woff2
new file mode 100644
index 0000000..06b0c9e
--- /dev/null
+++ b/frontend/src/assets/fonts/JetBrains_Mono_latin-ext.woff2
diff --git a/frontend/src/assets/fonts/JetBrains_Mono_latin.woff2 b/frontend/src/assets/fonts/JetBrains_Mono_latin.woff2
new file mode 100644
index 0000000..9d41658
--- /dev/null
+++ b/frontend/src/assets/fonts/JetBrains_Mono_latin.woff2
diff --git a/frontend/src/components/CustomGrid/CustomGrid.jsx b/frontend/src/components/CustomGrid/CustomGrid.jsx
new file mode 100644
index 0000000..372308b
--- /dev/null
+++ b/frontend/src/components/CustomGrid/CustomGrid.jsx
@@ -0,0 +1,115 @@
+import styles from "./CustomGrid.module.css";
+import {
+  GenerateHexCommand,
+  ExportGrid,
+  SendPattern,
+} from "../../../wailsjs/go/main/App";
+import { useState } from "preact/hooks";
+
+const CustomGrid = () => {
+  const gridSize = 14;
+  const [grid, setGrid] = useState(
+    Array.from({ length: gridSize }, () => Array(gridSize).fill(false)),
+  );
+  const [history, setHistory] = useState([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const [currentState, setCurrentState] = useState(null);
+
+  const toggleCell = (row, col, activate) => {
+    setGrid((prevGrid) => {
+      const newGrid = prevGrid.map((rowArray, rowIndex) =>
+        rowArray.map((cell, colIndex) =>
+          rowIndex === row && colIndex === col ? activate : cell,
+        ),
+      );
+      return newGrid;
+    });
+  };
+
+  const handleMouseDown = (row, col) => {
+    setHistory((prevHistory) => [...prevHistory, grid.map((row) => [...row])]);
+    setIsDragging(true);
+    setCurrentState(!grid[row][col]);
+    toggleCell(row, col, !grid[row][col]);
+  };
+
+  const handleMouseOver = (row, col) => {
+    if (isDragging) {
+      toggleCell(row, col, currentState);
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const undo = () => {
+    if (history.length > 0) {
+      setGrid(history[history.length - 1]);
+      setHistory((prevHistory) => prevHistory.slice(0, -1));
+    }
+  };
+
+  const clearGrid = () => {
+    setHistory((prevHistory) => [...prevHistory, grid.map((row) => [...row])]);
+    setGrid(
+      Array.from({ length: gridSize }, () => Array(gridSize).fill(false)),
+    );
+  };
+
+  const sendGrid = async () => {
+    try {
+      console.log("Grid layout:", grid);
+      const hex = await SendPattern(grid);
+      console.log("Hex:", hex);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  const exportGrid = async () => {
+    try {
+      console.log("Grid layout:", grid);
+      const fileName = prompt("Enter a filename for your layout:");
+      const hex = await ExportGrid(fileName, grid).then((result) => {
+        alert("Layout exported successfully!");
+      });
+      console.log("Hex:", hex);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
+  return (
+    <div onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp}>
+      <div class={styles.container}>
+        {grid.map((row, rowIndex) => (
+          <div key={rowIndex} class={styles.row}>
+            {row.map((cell, colIndex) => (
+              <div
+                key={colIndex}
+                class={`${styles.cell} ${cell ? styles.active : ""}`}
+                onMouseDown={() => handleMouseDown(rowIndex, colIndex)}
+                onMouseOver={() => handleMouseOver(rowIndex, colIndex)}
+              ></div>
+            ))}
+          </div>
+        ))}
+      </div>
+      <button class={styles.button} onClick={undo}>
+        Undo
+      </button>
+      <button class={styles.button} onClick={clearGrid}>
+        Clear
+      </button>
+      <button class={styles.button} onClick={sendGrid}>
+        Send Layout
+      </button>
+      <button class={styles.button} onClick={exportGrid}>
+        Export Layout
+      </button>
+    </div>
+  );
+};
+
+export default CustomGrid;
diff --git a/frontend/src/components/CustomGrid/CustomGrid.module.css b/frontend/src/components/CustomGrid/CustomGrid.module.css
new file mode 100644
index 0000000..fb58936
--- /dev/null
+++ b/frontend/src/components/CustomGrid/CustomGrid.module.css
@@ -0,0 +1,41 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.grid {
+  display: grid;
+  grid-template-rows: repeat(14, 40px);
+  grid-gap: 2px;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: repeat(14, 40px);
+  grid-gap: 2px;
+}
+
+.cell {
+  width: 40px;
+  height: 40px;
+  background-color: var(--bg0_s);
+  border: 1px solid var(--fg);
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.cell.active {
+  background-color: var(--fg0);
+}
+
+.button {
+  margin: 10px;
+  padding: 10px 20px;
+  background-color: var(--fg);
+  color: var(--bg);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
diff --git a/frontend/src/components/Header/Header.jsx b/frontend/src/components/Header/Header.jsx
new file mode 100644
index 0000000..0e92281
--- /dev/null
+++ b/frontend/src/components/Header/Header.jsx
@@ -0,0 +1,7 @@
+import styles from "./Header.module.css";
+
+const Header = () => {
+  return <div class={styles.header}>Deepcool Display Linux</div>;
+};
+
+export default Header;
diff --git a/frontend/src/components/Header/Header.module.css b/frontend/src/components/Header/Header.module.css
new file mode 100644
index 0000000..53769e1
--- /dev/null
+++ b/frontend/src/components/Header/Header.module.css
@@ -0,0 +1,7 @@
+.header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0.5rem 2rem;
+  font-size: 1.5rem;
+}
diff --git a/frontend/src/fonts.css b/frontend/src/fonts.css
new file mode 100644
index 0000000..62b015a
--- /dev/null
+++ b/frontend/src/fonts.css
@@ -0,0 +1,21 @@
+/* latin-ext */
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url(/assets/fonts/JetBrains_Mono_latin-ext.woff2) format("woff2");
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url(/assets/fonts/JetBrains_Mono_latin.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
+    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
new file mode 100644
index 0000000..adb14bf
--- /dev/null
+++ b/frontend/src/main.jsx
@@ -0,0 +1,6 @@
+import { render } from "preact";
+import { App } from "./app";
+import "./style.css";
+
+render(<App />, document.getElementById("app"));
+
diff --git a/frontend/src/pages/Home/Home.jsx b/frontend/src/pages/Home/Home.jsx
new file mode 100644
index 0000000..35ed08e
--- /dev/null
+++ b/frontend/src/pages/Home/Home.jsx
@@ -0,0 +1,15 @@
+import Header from "../../components/Header/Header";
+import CustomGrid from "../../components/CustomGrid/CustomGrid";
+import styles from "./Home.module.css";
+const Home = () => {
+  return (
+    <>
+      <div class={styles.container}>
+        <Header />
+        <CustomGrid />
+      </div>
+    </>
+  );
+};
+
+export default Home;
diff --git a/frontend/src/pages/Home/Home.module.css b/frontend/src/pages/Home/Home.module.css
new file mode 100644
index 0000000..83d02d6
--- /dev/null
+++ b/frontend/src/pages/Home/Home.module.css
@@ -0,0 +1,8 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
diff --git a/frontend/src/style.css b/frontend/src/style.css
new file mode 100644
index 0000000..4f33297
--- /dev/null
+++ b/frontend/src/style.css
@@ -0,0 +1,28 @@
+@import url(variables.css);
+@import url(fonts.css);
+html {
+  background-color: #282828;
+  text-align: center;
+  color: #ebdbb2;
+}
+
+body {
+  margin: 0;
+  color: #ebdbb2;
+  font-family: "JetBrains Mono", monospace;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#app {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/frontend/src/variables.css b/frontend/src/variables.css
new file mode 100644
index 0000000..fb35b65
--- /dev/null
+++ b/frontend/src/variables.css
@@ -0,0 +1,31 @@
+:root {
+  --bg0_h: #1d2021;
+  --bg: #282828;
+  --bg0_s: #32302f;
+  --bg1: #3c3836;
+  --bg2: #504945;
+  --bg3: #665c54;
+  --bg4: #7c6f64;
+  --fg0: #fbf1c7;
+  --fg: #ebdbb2;
+  --fg1: #ebdbb2;
+  --fg2: #d5c4a1;
+  --fg3: #bdae93;
+  --fg4: #a89984;
+  --red: #fb4934;
+  --green: #b8bb26;
+  --yellow: #fabd2f;
+  --blue: #83a598;
+  --purple: #d3869b;
+  --aqua: #8ec07c;
+  --gray: #928374;
+  --orange: #fe8019;
+  --red-dim: #cc2412;
+  --green-dim: #98971a;
+  --yellow-dim: #d79921;
+  --blue-dim: #458588;
+  --purple-dim: #b16286;
+  --aqua-dim: #689d6a;
+  --gray-dim: #a89984;
+  --orange-dim: #d65d0e;
+}