From 2425e3dc2af22c3281122715d60bd4506d48938a Mon Sep 17 00:00:00 2001
From: Blaster4385 <venkatesh@tablaster.dev>
Date: Mon, 13 Jan 2025 00:40:01 +0530
Subject: Initial application

---
 frontend/src/components/CustomGrid/CustomGrid.jsx  | 115 +++++++++++++++++++++
 .../components/CustomGrid/CustomGrid.module.css    |  41 ++++++++
 frontend/src/components/Header/Header.jsx          |   7 ++
 frontend/src/components/Header/Header.module.css   |   7 ++
 4 files changed, 170 insertions(+)
 create mode 100644 frontend/src/components/CustomGrid/CustomGrid.jsx
 create mode 100644 frontend/src/components/CustomGrid/CustomGrid.module.css
 create mode 100644 frontend/src/components/Header/Header.jsx
 create mode 100644 frontend/src/components/Header/Header.module.css

(limited to 'frontend/src/components')

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;
+}
-- 
cgit