@kwirthmagnify/kwirth-homepage-matrix 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/front.js +161 -9
- package/package.json +1 -1
package/front.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
(() => {
|
|
2
3
|
var __create = Object.create;
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
@@ -64,7 +65,7 @@
|
|
|
64
65
|
var MATRIX_GLOW = "rgba(0,255,65,0.3)";
|
|
65
66
|
var EVENTS_LIMIT = 25;
|
|
66
67
|
var POLL_INTERVAL_MS = 1e4;
|
|
67
|
-
var MatrixRain = () => {
|
|
68
|
+
var MatrixRain = ({ speed, activeLines }) => {
|
|
68
69
|
const canvasRef = (0, import_react.useRef)(null);
|
|
69
70
|
(0, import_react.useEffect)(() => {
|
|
70
71
|
const canvas = canvasRef.current;
|
|
@@ -74,22 +75,41 @@
|
|
|
74
75
|
const fontSize = 22;
|
|
75
76
|
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";
|
|
76
77
|
let drops = [];
|
|
78
|
+
let active = [];
|
|
77
79
|
let animId;
|
|
78
80
|
let frame = 0;
|
|
79
|
-
const
|
|
81
|
+
const activateDrops = (cols, h, count) => {
|
|
82
|
+
const indices = Array.from({ length: cols }, (_, i) => i);
|
|
83
|
+
for (let i = indices.length - 1; i > 0; i--) {
|
|
84
|
+
const j = Math.floor(Math.random() * (i + 1));
|
|
85
|
+
[indices[i], indices[j]] = [indices[j], indices[i]];
|
|
86
|
+
}
|
|
87
|
+
const n = Math.min(count, cols);
|
|
88
|
+
indices.slice(0, n).forEach((i) => {
|
|
89
|
+
active[i] = true;
|
|
90
|
+
drops[i] = -Math.floor(Math.random() * (h / fontSize) * 2);
|
|
91
|
+
});
|
|
92
|
+
indices.slice(n).forEach((i) => {
|
|
93
|
+
active[i] = false;
|
|
94
|
+
drops[i] = -99999;
|
|
95
|
+
});
|
|
96
|
+
};
|
|
80
97
|
const resize = (w, h) => {
|
|
81
98
|
canvas.width = w;
|
|
82
99
|
canvas.height = h;
|
|
83
100
|
const cols = Math.floor(w / fontSize);
|
|
84
|
-
drops = Array
|
|
101
|
+
drops = new Array(cols).fill(0);
|
|
102
|
+
active = new Array(cols).fill(false);
|
|
103
|
+
activateDrops(cols, h, activeLines);
|
|
85
104
|
};
|
|
86
105
|
const draw = () => {
|
|
87
106
|
frame++;
|
|
88
107
|
ctx.fillStyle = "rgba(0,0,0,0.02)";
|
|
89
108
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
90
109
|
ctx.font = `${fontSize}px monospace`;
|
|
91
|
-
if (frame %
|
|
110
|
+
if (frame % speed === 0) {
|
|
92
111
|
for (let i = 0; i < drops.length; i++) {
|
|
112
|
+
if (!active[i]) continue;
|
|
93
113
|
if (drops[i] > 0) {
|
|
94
114
|
const bright = Math.random() > 0.97;
|
|
95
115
|
ctx.fillStyle = bright ? "#ccffcc" : MATRIX_GREEN;
|
|
@@ -113,7 +133,7 @@
|
|
|
113
133
|
cancelAnimationFrame(animId);
|
|
114
134
|
observer.disconnect();
|
|
115
135
|
};
|
|
116
|
-
}, []);
|
|
136
|
+
}, [speed, activeLines]);
|
|
117
137
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
118
138
|
"canvas",
|
|
119
139
|
{
|
|
@@ -192,6 +212,78 @@
|
|
|
192
212
|
return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { key: i, sx: { color: e.type === "Warning" ? "#ff9800" : MATRIX_GREEN, mb: 0.2 } }, /* @__PURE__ */ import_react.default.createElement(import_material.Box, { component: "span", sx: { color: MATRIX_DIM, mr: 0.5 } }, t), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { component: "span", sx: { mr: 0.5 } }, "[", e.reason, "]"), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { component: "span", sx: { color: MATRIX_DIM, mr: 0.5 } }, e.object), e.message);
|
|
193
213
|
}));
|
|
194
214
|
};
|
|
215
|
+
var matrixCardSx = {
|
|
216
|
+
bgcolor: "rgba(0,0,0,0.80)",
|
|
217
|
+
border: `1px solid ${MATRIX_GREEN}`,
|
|
218
|
+
boxShadow: `0 0 10px ${MATRIX_GLOW}, inset 0 0 10px rgba(0,255,65,0.05)`,
|
|
219
|
+
color: MATRIX_GREEN,
|
|
220
|
+
backdropFilter: "blur(2px)"
|
|
221
|
+
};
|
|
222
|
+
var matrixIconBtnSx = {
|
|
223
|
+
color: MATRIX_DIM,
|
|
224
|
+
p: 0.25,
|
|
225
|
+
borderRadius: 0.5,
|
|
226
|
+
fontSize: "0.6rem",
|
|
227
|
+
fontFamily: "monospace",
|
|
228
|
+
lineHeight: 1,
|
|
229
|
+
"&:hover": { color: MATRIX_GREEN, bgcolor: "rgba(0,255,65,0.1)" }
|
|
230
|
+
};
|
|
231
|
+
function QuickColumn({ label, items, getKey, getName, getSub, onLaunch, onDelete }) {
|
|
232
|
+
return /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 0.5, alignSelf: "stretch" } }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", color: MATRIX_DIM, letterSpacing: 1, mb: 0.25 } }, "// ", label), /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { borderTop: `1px solid ${MATRIX_DIM}`, mb: 0.5 } }), items.length === 0 ? /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.7rem", color: MATRIX_DIM, opacity: 0.5 } }, "// empty") : items.map((item) => /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { key: getKey(item), direction: "row", alignItems: "center", sx: { minWidth: 0, gap: 0.5 } }, /* @__PURE__ */ import_react.default.createElement(import_material.Typography, { sx: { fontFamily: "monospace", fontSize: "0.75rem", flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: MATRIX_GREEN } }, getName(item)), getSub(item) && /* @__PURE__ */ import_react.default.createElement("span", { style: { color: MATRIX_DIM, paddingLeft: "20px" } }, getSub(item))), /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: "Launch" }, /* @__PURE__ */ import_react.default.createElement(import_material.IconButton, { size: "small", sx: matrixIconBtnSx, onClick: () => onLaunch(item) }, "\u25B6")), /* @__PURE__ */ import_react.default.createElement(import_material.Tooltip, { title: "Remove" }, /* @__PURE__ */ import_react.default.createElement(import_material.IconButton, { size: "small", sx: matrixIconBtnSx, onClick: () => onDelete(item) }, "\u2715")))));
|
|
233
|
+
}
|
|
234
|
+
var QuickAccessCard = (props) => {
|
|
235
|
+
const delLastTab = (tab) => props.onUpdateTabs(props.lastTabs.filter((t) => t.name !== tab.name || t.channel !== tab.channel), props.favTabs);
|
|
236
|
+
const delFavTab = (tab) => props.onUpdateTabs(props.lastTabs, props.favTabs.filter((t) => t.name !== tab.name || t.channel !== tab.channel));
|
|
237
|
+
const delLastWs = (ws) => props.onUpdateWorkspaces(props.lastWorkspaces.filter((w) => w.name !== ws.name), props.favWorkspaces);
|
|
238
|
+
const delFavWs = (ws) => props.onUpdateWorkspaces(props.lastWorkspaces, props.favWorkspaces.filter((w) => w.name !== ws.name));
|
|
239
|
+
const allEmpty = props.lastTabs.length === 0 && props.favTabs.length === 0 && props.lastWorkspaces.length === 0 && props.favWorkspaces.length === 0;
|
|
240
|
+
if (allEmpty) return null;
|
|
241
|
+
return /* @__PURE__ */ import_react.default.createElement(import_material.Card, { variant: "outlined", sx: { ...matrixCardSx, gridColumn: "1 / -1", minHeight: 160 } }, /* @__PURE__ */ import_react.default.createElement(import_material.CardContent, { sx: { py: 1.5, px: 2, height: "100%", boxSizing: "border-box", "&:last-child": { pb: 1.5 } } }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 2, alignItems: "flex-start", sx: { minWidth: 0 } }, /* @__PURE__ */ import_react.default.createElement(
|
|
242
|
+
QuickColumn,
|
|
243
|
+
{
|
|
244
|
+
label: "LAST TABS",
|
|
245
|
+
items: props.lastTabs,
|
|
246
|
+
getKey: (t) => `${t.channel}::${t.name}`,
|
|
247
|
+
getName: (t) => t.name,
|
|
248
|
+
getSub: (t) => `${t.channel} \xB7 ${t.channelObject.clusterName}`,
|
|
249
|
+
onLaunch: (t) => props.onHomepageSelectTab(t),
|
|
250
|
+
onDelete: delLastTab
|
|
251
|
+
}
|
|
252
|
+
), /* @__PURE__ */ import_react.default.createElement(import_material.Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: MATRIX_DIM, opacity: 0.4 } }), /* @__PURE__ */ import_react.default.createElement(
|
|
253
|
+
QuickColumn,
|
|
254
|
+
{
|
|
255
|
+
label: "FAV TABS",
|
|
256
|
+
items: props.favTabs,
|
|
257
|
+
getKey: (t) => `${t.channel}::${t.name}`,
|
|
258
|
+
getName: (t) => t.name,
|
|
259
|
+
getSub: (t) => `${t.channel} \xB7 ${t.channelObject.clusterName}`,
|
|
260
|
+
onLaunch: (t) => props.onHomepageSelectTab(t),
|
|
261
|
+
onDelete: delFavTab
|
|
262
|
+
}
|
|
263
|
+
), /* @__PURE__ */ import_react.default.createElement(import_material.Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: MATRIX_DIM, opacity: 0.4 } }), /* @__PURE__ */ import_react.default.createElement(
|
|
264
|
+
QuickColumn,
|
|
265
|
+
{
|
|
266
|
+
label: "LAST WORKSPACES",
|
|
267
|
+
items: props.lastWorkspaces,
|
|
268
|
+
getKey: (w) => w.name,
|
|
269
|
+
getName: (w) => w.name,
|
|
270
|
+
getSub: (w) => w.description,
|
|
271
|
+
onLaunch: (w) => props.onSelectWorkspace(w),
|
|
272
|
+
onDelete: delLastWs
|
|
273
|
+
}
|
|
274
|
+
), /* @__PURE__ */ import_react.default.createElement(import_material.Divider, { orientation: "vertical", flexItem: true, sx: { borderColor: MATRIX_DIM, opacity: 0.4 } }), /* @__PURE__ */ import_react.default.createElement(
|
|
275
|
+
QuickColumn,
|
|
276
|
+
{
|
|
277
|
+
label: "FAV WORKSPACES",
|
|
278
|
+
items: props.favWorkspaces,
|
|
279
|
+
getKey: (w) => w.name,
|
|
280
|
+
getName: (w) => w.name,
|
|
281
|
+
getSub: (w) => w.description,
|
|
282
|
+
onLaunch: (w) => props.onSelectWorkspace(w),
|
|
283
|
+
onDelete: delFavWs
|
|
284
|
+
}
|
|
285
|
+
))));
|
|
286
|
+
};
|
|
195
287
|
var Matrix = (props) => {
|
|
196
288
|
(0, import_react.useEffect)(() => {
|
|
197
289
|
const id = "matrix-keyframes";
|
|
@@ -263,6 +355,10 @@
|
|
|
263
355
|
channelObject: { clusterName, view: "cluster", namespace: "", group: "", pod: "", container: "" }
|
|
264
356
|
});
|
|
265
357
|
};
|
|
358
|
+
const showQuickAccess = props.config?.showQuickAccess ?? true;
|
|
359
|
+
const showRain = props.config?.showRain ?? true;
|
|
360
|
+
const rainSpeed = props.config?.rainSpeed ?? 12;
|
|
361
|
+
const rainActiveLines = props.config?.rainActiveLines ?? 50;
|
|
266
362
|
const hasMagnify = props.frontChannels.has("magnify");
|
|
267
363
|
const hasTopology = props.frontChannels.has("topology");
|
|
268
364
|
const magnifyClass = props.frontChannels.get("magnify");
|
|
@@ -278,7 +374,7 @@
|
|
|
278
374
|
boxShadow: `0 0 8px ${MATRIX_GLOW}`
|
|
279
375
|
}
|
|
280
376
|
};
|
|
281
|
-
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,
|
|
377
|
+
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: {
|
|
282
378
|
position: "relative",
|
|
283
379
|
zIndex: 1,
|
|
284
380
|
p: 3,
|
|
@@ -288,7 +384,7 @@
|
|
|
288
384
|
gridTemplateColumns: "repeat(2, 1fr)",
|
|
289
385
|
gap: 4,
|
|
290
386
|
alignContent: "start"
|
|
291
|
-
} }, props.clusters.map((cluster, idx) => {
|
|
387
|
+
} }, showQuickAccess && /* @__PURE__ */ import_react.default.createElement(QuickAccessCard, { ...props }), props.clusters.map((cluster, idx) => {
|
|
292
388
|
const clusterChannelIds = new Set((cluster.kwirthData?.channels ?? []).map((ch) => ch.id));
|
|
293
389
|
const clusterHasMagnify = hasMagnify && clusterChannelIds.has("magnify");
|
|
294
390
|
const clusterHasTopology = hasTopology && clusterChannelIds.has("topology");
|
|
@@ -315,7 +411,7 @@
|
|
|
315
411
|
overflow: "hidden",
|
|
316
412
|
textOverflow: "ellipsis",
|
|
317
413
|
whiteSpace: "nowrap"
|
|
318
|
-
} }, cluster.url), clusterMetrics[cluster.name] && /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 0.25 }, /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "CPU", value: clusterMetrics[cluster.name].cpu }), /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "MEM", value: clusterMetrics[cluster.name].memory }), /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "POD", value: clusterMetrics[cluster.name].maxPods > 0 ? clusterMetrics[cluster.name].pods / clusterMetrics[cluster.name].maxPods * 100 : 0 }))), clusterMetrics[cluster.name] && /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 1.5, sx: { justifyContent: "center" } }, /* @__PURE__ */ import_react.default.createElement(MiniInfoCard, { label: "vCPUs", value: clusterMetrics[cluster.name].vcpus != null ? String(clusterMetrics[cluster.name].vcpus) : "--" }), /* @__PURE__ */ import_react.default.createElement(MiniInfoCard, { label: "RAM", value: clusterMetrics[cluster.name].totalMemoryBytes != null ? `${(clusterMetrics[cluster.name].totalMemoryBytes / 1073741824).toFixed(0)}G` : "--" }), /* @__PURE__ */ import_react.default.createElement(MiniInfoCard, { label: "Pods", value: clusterMetrics[cluster.name].pods ? String(clusterMetrics[cluster.name].pods) : "--" })), /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 0.75 }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 0.5, alignItems: "center" }, (cluster.kwirthData?.channels ?? []).map((ch) => {
|
|
414
|
+
} }, cluster.url), clusterMetrics[cluster.name] && /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 0.25 }, /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "CPU", value: clusterMetrics[cluster.name].cpu }), /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "MEM", value: clusterMetrics[cluster.name].memory }), /* @__PURE__ */ import_react.default.createElement(MetricBar, { label: "POD", value: clusterMetrics[cluster.name].maxPods > 0 ? clusterMetrics[cluster.name].pods / clusterMetrics[cluster.name].maxPods * 100 : 0 }))), clusterMetrics[cluster.name] && /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 1.5, sx: { justifyContent: "center" } }, /* @__PURE__ */ import_react.default.createElement(MiniInfoCard, { label: "vCPUs", value: clusterMetrics[cluster.name].vcpus != null ? String(clusterMetrics[cluster.name].vcpus) : "--" }), /* @__PURE__ */ import_react.default.createElement(MiniInfoCard, { label: "RAM", value: clusterMetrics[cluster.name].totalMemoryBytes != null ? `${(clusterMetrics[cluster.name].totalMemoryBytes / 1073741824).toFixed(0)}G` : "--" }), /* @__PURE__ */ import_react.default.createElement(MiniInfoCard, { label: "Pods", value: clusterMetrics[cluster.name].pods ? String(clusterMetrics[cluster.name].pods) : "--" }), /* @__PURE__ */ import_react.default.createElement(MiniInfoCard, { label: "Nodes", value: cluster.clusterInfo?.nodes?.length != null ? String(cluster.clusterInfo.nodes.length) : "--" })), /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "column", spacing: 0.75 }, /* @__PURE__ */ import_react.default.createElement(import_material.Stack, { direction: "row", spacing: 0.5, alignItems: "center" }, (cluster.kwirthData?.channels ?? []).map((ch) => {
|
|
319
415
|
const channelClass = props.frontChannels.get(ch.id);
|
|
320
416
|
if (!channelClass) return null;
|
|
321
417
|
const icon = new channelClass().getChannelIcon();
|
|
@@ -346,10 +442,66 @@
|
|
|
346
442
|
}), 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...")));
|
|
347
443
|
};
|
|
348
444
|
|
|
445
|
+
// src/front/MatrixSetup.tsx
|
|
446
|
+
var import_react2 = __toESM(require_react(), 1);
|
|
447
|
+
var import_material2 = __toESM(require_material(), 1);
|
|
448
|
+
var MATRIX_GREEN2 = "#00ff41";
|
|
449
|
+
var MATRIX_DIM2 = "#006620";
|
|
450
|
+
var MatrixSetup = ({ config, onSave, onClose }) => {
|
|
451
|
+
const [showQuickAccess, setShowQuickAccess] = (0, import_react2.useState)(config.showQuickAccess ?? true);
|
|
452
|
+
const [showRain, setShowRain] = (0, import_react2.useState)(config.showRain ?? true);
|
|
453
|
+
const [rainSpeed, setRainSpeed] = (0, import_react2.useState)(config.rainSpeed ?? 12);
|
|
454
|
+
const [rainActiveLines, setRainActiveLines] = (0, import_react2.useState)(config.rainActiveLines ?? 50);
|
|
455
|
+
const checkSx = { color: MATRIX_DIM2, "&.Mui-checked": { color: MATRIX_GREEN2 } };
|
|
456
|
+
const labelSx = { fontFamily: "monospace", fontSize: "0.85rem", color: MATRIX_GREEN2 };
|
|
457
|
+
const sliderSx = { color: MATRIX_GREEN2, "& .MuiSlider-thumb": { bgcolor: MATRIX_GREEN2 }, "& .MuiSlider-rail": { bgcolor: MATRIX_DIM2 } };
|
|
458
|
+
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(
|
|
459
|
+
import_material2.FormControlLabel,
|
|
460
|
+
{
|
|
461
|
+
control: /* @__PURE__ */ import_react2.default.createElement(import_material2.Checkbox, { checked: showQuickAccess, onChange: (e) => setShowQuickAccess(e.target.checked), sx: checkSx }),
|
|
462
|
+
label: /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: labelSx }, "Show tabs / workspaces card")
|
|
463
|
+
}
|
|
464
|
+
), /* @__PURE__ */ import_react2.default.createElement(
|
|
465
|
+
import_material2.FormControlLabel,
|
|
466
|
+
{
|
|
467
|
+
control: /* @__PURE__ */ import_react2.default.createElement(import_material2.Checkbox, { checked: showRain, onChange: (e) => setShowRain(e.target.checked), sx: checkSx }),
|
|
468
|
+
label: /* @__PURE__ */ import_react2.default.createElement(import_material2.Typography, { sx: labelSx }, "Falling code")
|
|
469
|
+
}
|
|
470
|
+
), /* @__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(
|
|
471
|
+
import_material2.Slider,
|
|
472
|
+
{
|
|
473
|
+
value: 21 - rainSpeed,
|
|
474
|
+
min: 1,
|
|
475
|
+
max: 20,
|
|
476
|
+
onChange: (_, v) => setRainSpeed(21 - v),
|
|
477
|
+
sx: sliderSx
|
|
478
|
+
}
|
|
479
|
+
), /* @__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(
|
|
480
|
+
import_material2.Slider,
|
|
481
|
+
{
|
|
482
|
+
value: rainActiveLines,
|
|
483
|
+
min: 5,
|
|
484
|
+
max: 100,
|
|
485
|
+
onChange: (_, v) => setRainActiveLines(v),
|
|
486
|
+
sx: sliderSx
|
|
487
|
+
}
|
|
488
|
+
), /* @__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(
|
|
489
|
+
import_material2.Button,
|
|
490
|
+
{
|
|
491
|
+
onClick: () => onSave({ showQuickAccess, showRain, rainSpeed, rainActiveLines }),
|
|
492
|
+
variant: "contained",
|
|
493
|
+
sx: { bgcolor: MATRIX_GREEN2, color: "#000", fontFamily: "monospace", fontWeight: "bold", "&:hover": { bgcolor: "#00cc33" } }
|
|
494
|
+
},
|
|
495
|
+
"Save"
|
|
496
|
+
), /* @__PURE__ */ import_react2.default.createElement(import_material2.Button, { onClick: onClose, sx: { color: MATRIX_DIM2, fontFamily: "monospace" } }, "Cancel")));
|
|
497
|
+
};
|
|
498
|
+
|
|
349
499
|
// src/front/index.ts
|
|
350
500
|
window.__kwirth_homepages__["matrix"] = {
|
|
351
501
|
homepageId: "matrix",
|
|
352
502
|
displayName: "Matrix",
|
|
353
|
-
Component: Matrix
|
|
503
|
+
Component: Matrix,
|
|
504
|
+
SetupDialog: MatrixSetup,
|
|
505
|
+
defaultConfig: { showQuickAccess: true, showRain: true, rainSpeed: 12, rainActiveLines: 50 }
|
|
354
506
|
};
|
|
355
507
|
})();
|