@kwirthmagnify/kwirth-homepage-matrix 0.1.2 → 0.1.3

package/front.js

@@ -65,7 +65,7 @@
   var MATRIX_GLOW = "rgba(0,255,65,0.3)";
   var EVENTS_LIMIT = 25;
   var POLL_INTERVAL_MS = 1e4;
-  var MatrixRain = () => {
+  var MatrixRain = ({ speed, activeLines }) => {
     const canvasRef = (0, import_react.useRef)(null);
     (0, import_react.useEffect)(() => {
       const canvas = canvasRef.current;
@@ -75,22 +75,41 @@
       const fontSize = 22;
       const chars = "\u30A2\u30A4\u30A6\u30A8\u30AA\u30AB\u30AD\u30AF\u30B1\u30B3\u30B5\u30B7\u30B9\u30BB\u30BD\u30BF\u30C1\u30C4\u30C6\u30C8\u30CA\u30CB\u30CC\u30CD\u30CE\u30CF\u30D2\u30D5\u30D8\u30DB\u30DE\u30DF\u30E0\u30E1\u30E2\u30E4\u30E6\u30E8\u30E9\u30EA\u30EB\u30EC\u30ED\u30EF\u30F2\u30F30123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
       let drops = [];
+      let active = [];
       let animId;
       let frame = 0;
-      const SPEED = 12;
+      const activateDrops = (cols, h, count) => {
+        const indices = Array.from({ length: cols }, (_, i) => i);
+        for (let i = indices.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [indices[i], indices[j]] = [indices[j], indices[i]];
+        }
+        const n = Math.min(count, cols);
+        indices.slice(0, n).forEach((i) => {
+          active[i] = true;
+          drops[i] = -Math.floor(Math.random() * (h / fontSize) * 2);
+        });
+        indices.slice(n).forEach((i) => {
+          active[i] = false;
+          drops[i] = -99999;
+        });
+      };
       const resize = (w, h) => {
         canvas.width = w;
         canvas.height = h;
         const cols = Math.floor(w / fontSize);
-        drops = Array.from({ length: cols }, () => -Math.floor(Math.random() * (h / fontSize) * 4));
+        drops = new Array(cols).fill(0);
+        active = new Array(cols).fill(false);
+        activateDrops(cols, h, activeLines);
       };
       const draw = () => {
         frame++;
         ctx.fillStyle = "rgba(0,0,0,0.02)";
         ctx.fillRect(0, 0, canvas.width, canvas.height);
         ctx.font = `${fontSize}px monospace`;
-        if (frame % SPEED === 0) {
+        if (frame % speed === 0) {
           for (let i = 0; i < drops.length; i++) {
+            if (!active[i]) continue;
             if (drops[i] > 0) {
               const bright = Math.random() > 0.97;
               ctx.fillStyle = bright ? "#ccffcc" : MATRIX_GREEN;
@@ -114,7 +133,7 @@
         cancelAnimationFrame(animId);
         observer.disconnect();
       };
-    }, []);
+    }, [speed, activeLines]);
     return /* @__PURE__ */ import_react.default.createElement(
       "canvas",
       {
@@ -336,6 +355,10 @@
         channelObject: { clusterName, view: "cluster", namespace: "", group: "", pod: "", container: "" }
       });
     };
+    const showQuickAccess = props.config?.showQuickAccess ?? true;
+    const showRain = props.config?.showRain ?? true;
+    const rainSpeed = props.config?.rainSpeed ?? 12;
+    const rainActiveLines = props.config?.rainActiveLines ?? 50;
     const hasMagnify = props.frontChannels.has("magnify");
     const hasTopology = props.frontChannels.has("topology");
     const magnifyClass = props.frontChannels.get("magnify");
@@ -351,7 +374,7 @@
         boxShadow: `0 0 8px ${MATRIX_GLOW}`
       }
     };
-    return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { ref: containerRef, sx: { position: "relative", width: "100%", height: `${containerHeight}px`, overflow: "hidden", bgcolor: "#000" } }, /* @__PURE__ */ import_react.default.createElement(MatrixRain, null), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: {
+    return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { ref: containerRef, sx: { position: "relative", width: "100%", height: `${containerHeight}px`, overflow: "hidden", bgcolor: "#000" } }, showRain && /* @__PURE__ */ import_react.default.createElement(MatrixRain, { speed: rainSpeed, activeLines: rainActiveLines }), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: {
       position: "relative",
       zIndex: 1,
       p: 3,
@@ -361,7 +384,7 @@
       gridTemplateColumns: "repeat(2, 1fr)",
       gap: 4,
       alignContent: "start"
-    } }, /* @__PURE__ */ import_react.default.createElement(QuickAccessCard, { ...props }), props.clusters.map((cluster, idx) => {
+    } }, showQuickAccess && /* @__PURE__ */ import_react.default.createElement(QuickAccessCard, { ...props }), props.clusters.map((cluster, idx) => {
       const clusterChannelIds = new Set((cluster.kwirthData?.channels ?? []).map((ch) => ch.id));
       const clusterHasMagnify = hasMagnify && clusterChannelIds.has("magnify");
       const clusterHasTopology = hasTopology && clusterChannelIds.has("topology");
@@ -419,10 +442,66 @@
     }), props.clusters.length === 0 && /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", color: MATRIX_GREEN, p: 2, textShadow: `0 0 8px ${MATRIX_GREEN}` } }, "// Entering the matrix...")));
   };
 
+  // src/front/MatrixSetup.tsx
+  var import_react2 = __toESM(require_react(), 1);
+  var import_material2 = __toESM(require_material(), 1);
+  var MATRIX_GREEN2 = "#00ff41";
+  var MATRIX_DIM2 = "#006620";
+  var MatrixSetup = ({ config, onSave, onClose }) => {
+    const [showQuickAccess, setShowQuickAccess] = (0, import_react2.useState)(config.showQuickAccess ?? true);
+    const [showRain, setShowRain] = (0, import_react2.useState)(config.showRain ?? true);
+    const [rainSpeed, setRainSpeed] = (0, import_react2.useState)(config.rainSpeed ?? 12);
+    const [rainActiveLines, setRainActiveLines] = (0, import_react2.useState)(config.rainActiveLines ?? 50);
+    const checkSx = { color: MATRIX_DIM2, "&.Mui-checked": { color: MATRIX_GREEN2 } };
+    const labelSx = { fontFamily: "monospace", fontSize: "0.85rem", color: MATRIX_GREEN2 };
+    const sliderSx = { color: MATRIX_GREEN2, "& .MuiSlider-thumb": { bgcolor: MATRIX_GREEN2 }, "& .MuiSlider-rail": { bgcolor: MATRIX_DIM2 } };
+    return /* @__PURE__ */ import_react2.default.createElement(import_material2.Dialog, { open: true, PaperProps: { sx: { bgcolor: "#000", border: `1px solid ${MATRIX_GREEN2}`, boxShadow: `0 0 20px rgba(0,255,65,0.3)`, color: MATRIX_GREEN2, minWidth: 360 } } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogTitle, { sx: { fontFamily: "monospace", fontSize: "1rem", color: MATRIX_GREEN2, borderBottom: `1px solid ${MATRIX_DIM2}`, pb: 1 } }, "// matrix setup"), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogContent, null, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "column", spacing: 2.5, sx: { pt: 2 } }, /* @__PURE__ */ import_react2.default.createElement(
+      import_material2.FormControlLabel,
+      {
+        control: /* @__PURE__ */ import_react2.default.createElement(import_material2.Checkbox, { checked: showQuickAccess, onChange: (e) => setShowQuickAccess(e.target.checked), sx: checkSx }),
+        label: /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: labelSx }, "Show tabs / workspaces card")
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(
+      import_material2.FormControlLabel,
+      {
+        control: /* @__PURE__ */ import_react2.default.createElement(import_material2.Checkbox, { checked: showRain, onChange: (e) => setShowRain(e.target.checked), sx: checkSx }),
+        label: /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: labelSx }, "Falling code")
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "column", spacing: 0.5, sx: { opacity: showRain ? 1 : 0.3, pointerEvents: showRain ? "auto" : "none" } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_DIM2 } }, "Speed"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_GREEN2 } }, rainSpeed <= 5 ? "fast" : rainSpeed <= 12 ? "normal" : "slow")), /* @__PURE__ */ import_react2.default.createElement(
+      import_material2.Slider,
+      {
+        value: 21 - rainSpeed,
+        min: 1,
+        max: 20,
+        onChange: (_, v) => setRainSpeed(21 - v),
+        sx: sliderSx
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM2 } }, "slow"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM2 } }, "fast"))), /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "column", spacing: 0.5, sx: { opacity: showRain ? 1 : 0.3, pointerEvents: showRain ? "auto" : "none" } }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_DIM2 } }, "Active lines"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_GREEN2 } }, rainActiveLines)), /* @__PURE__ */ import_react2.default.createElement(
+      import_material2.Slider,
+      {
+        value: rainActiveLines,
+        min: 5,
+        max: 100,
+        onChange: (_, v) => setRainActiveLines(v),
+        sx: sliderSx
+      }
+    ), /* @__PURE__ */ import_react2.default.createElement(import_material2.Stack, { direction: "row", justifyContent: "space-between" }, /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM2 } }, "5"), /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: { fontFamily: "monospace", fontSize: "0.6rem", color: MATRIX_DIM2 } }, "100"))))), /* @__PURE__ */ import_react2.default.createElement(import_material2.DialogActions, { sx: { borderTop: `1px solid ${MATRIX_DIM2}`, pt: 1 } }, /* @__PURE__ */ import_react2.default.createElement(
+      import_material2.Button,
+      {
+        onClick: () => onSave({ showQuickAccess, showRain, rainSpeed, rainActiveLines }),
+        variant: "contained",
+        sx: { bgcolor: MATRIX_GREEN2, color: "#000", fontFamily: "monospace", fontWeight: "bold", "&:hover": { bgcolor: "#00cc33" } }
+      },
+      "Save"
+    ), /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: onClose, sx: { color: MATRIX_DIM2, fontFamily: "monospace" } }, "Cancel")));
+  };
+
   // src/front/index.ts
   window.__kwirth_homepages__["matrix"] = {
     homepageId: "matrix",
     displayName: "Matrix",
-    Component: Matrix
+    Component: Matrix,
+    SetupDialog: MatrixSetup,
+    defaultConfig: { showQuickAccess: true, showRain: true, rainSpeed: 12, rainActiveLines: 50 }
   };
 })();

package/package.json

@@ -2,6 +2,6 @@
   "id": "matrix",
   "name": "@kwirthmagnify/kwirth-homepage-matrix",
   "displayName": "Matrix",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Matrix-style cluster overview homepage for Kwirth"
 }