[WIP] Feature/live-nand-game

packages/hfr/_category_.yml

@@ -0,0 +1,4 @@
+label: '@hfr/'
+link:
+    type: generated-index
+    title: '@hfr/ Packages'

packages/hfr/circuit/README.mdx

@@ -0,0 +1,16 @@
+---
+page_id: 980c75ef-0868-422e-9578-5ce228a48a0a
+---
+
+import DynamicDocumentRoots from '@tdev-components/documents/DynamicDocumentRoots';
+import BrowserWindow from '@tdev-components/BrowserWindow';
+
+# Schaltkreise
+
+```mdx
+<DynamicDocumentRoots id="e8844ea2-cdc7-4e9c-ba72-eef74511ff5f" name="Schaltkreise" roomType='circuit'/>
+```
+
+<BrowserWindow>
+    <DynamicDocumentRoots id="e7abf364-54c5-4b0d-a078-dfb22c8bab5f" name="Schaltkreise" roomType='circuit'/>
+</BrowserWindow>

packages/hfr/circuit/components/Circuit.tsx

@@ -0,0 +1,192 @@
+import clsx from 'clsx';
+
+import { observer } from 'mobx-react-lite';
+import styles from './styles.module.scss';
+import React from 'react';
+import PermissionsPanel from '@tdev-components/PermissionsPanel';
+import { Background, ReactFlow, MiniMap, Controls, Panel } from '@xyflow/react';
+import type {
+    OnConnect,
+    Edge,
+    OnEdgesChange,
+    OnNodesChange,
+    Node,
+    OnReconnect,
+    FinalConnectionState,
+    HandleType,
+    OnNodesDelete
+} from '@xyflow/react';
+
+import '@xyflow/react/dist/style.css';
+import { mdiCarBattery, mdiElectricSwitch, mdiLedOn } from '@mdi/js';
+import Button from '@tdev-components/shared/Button';
+import { useStore } from '@tdev-hooks/useStore';
+import { nodeTypes } from './Nodes';
+import { NodeType } from '@hfr/circuit';
+import { DynamicRoomProps } from '@tdev-stores/ComponentStore';
+
+type OnReconnectEnd = (
+    event: MouseEvent | TouchEvent,
+    edge: Edge,
+    handleType: HandleType,
+    connectionState: FinalConnectionState
+) => void;
+
+type OnReconnectStart = (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void;
+
+const Circuit = observer((props: DynamicRoomProps<'circuit'>): React.ReactNode => {
+    const { dynamicRoot } = props;
+    const documentStore = useStore('documentStore');
+    const edgeReconnectSuccessful = React.useRef(true);
+    const onChange = React.useCallback<OnNodesChange<Node>>(
+        (change) => {
+            dynamicRoot.room!.onNodesChange(change);
+        },
+        [dynamicRoot.room]
+    );
+    const onChangeEdge = React.useCallback<OnEdgesChange<Edge>>(
+        (change) => {
+            dynamicRoot.room!.onEdgeChange(change);
+        },
+        [dynamicRoot.room]
+    );
+    const onConnect = React.useCallback<OnConnect>(
+        (connection) => {
+            dynamicRoot.room!.onConnect(connection);
+        },
+        [dynamicRoot.room]
+    );
+    const onNodesDelete = React.useCallback<OnNodesDelete>(
+        (deleted) => {
+            edgeReconnectSuccessful.current = true;
+            dynamicRoot.room!.onDelete(deleted);
+        },
+        [dynamicRoot.room]
+    );
+    const onReconnectStart = React.useCallback<OnReconnectStart>(() => {
+        edgeReconnectSuccessful.current = false;
+    }, []);
+
+    const onReconnect = React.useCallback<OnReconnect>(
+        (oldEdge, newConnection) => {
+            edgeReconnectSuccessful.current = true;
+            dynamicRoot.room!.reconnectEdge(oldEdge.id, newConnection);
+        },
+        [dynamicRoot.room]
+    );
+
+    const onReconnectEnd = React.useCallback<OnReconnectEnd>((_, edge) => {
+        if (!edgeReconnectSuccessful.current) {
+            const doc = documentStore.find(edge.id);
+            if (doc) {
+                documentStore.apiDelete(doc);
+            }
+        }
+
+        edgeReconnectSuccessful.current = true;
+    }, []);
+    if (!dynamicRoot || !dynamicRoot.room) {
+        return null;
+    }
+
+    return (
+        <div className={clsx(styles.wrapper)}>
+            <div className={clsx(styles.rooms)}>
+                <h1 className={clsx(styles.name)}>
+                    {dynamicRoot.name} <PermissionsPanel documentRootId={dynamicRoot.rootDocumentId} />
+                </h1>
+                <div style={{ width: '100%', height: '80vh' }}>
+                    <ReactFlow
+                        nodeTypes={nodeTypes}
+                        nodes={dynamicRoot.room!.nodes}
+                        edges={dynamicRoot.room!.edges}
+                        onNodesDelete={onNodesDelete}
+                        onNodesChange={onChange}
+                        onEdgesChange={onChangeEdge}
+                        onConnect={onConnect}
+                        onReconnect={onReconnect}
+                        onReconnectStart={onReconnectStart}
+                        onReconnectEnd={onReconnectEnd}
+                        fitView
+                        minZoom={0.1}
+                        maxZoom={4}
+                        snapToGrid={true}
+                        snapGrid={[10, 10]}
+                        proOptions={{ hideAttribution: true }}
+                    >
+                        <MiniMap />
+                        <Controls />
+                        <Panel position="top-right" className={clsx(styles.panel)}>
+                            <Button
+                                icon={mdiElectricSwitch}
+                                size={1}
+                                color="blue"
+                                onClick={() => {
+                                    dynamicRoot.room!.addFlowNode(NodeType.SwitchNode, { power: 0 });
+                                }}
+                            />
+                            <Button
+                                text="OR"
+                                size={1}
+                                color="blue"
+                                onClick={() => {
+                                    dynamicRoot.room!.addFlowNode(NodeType.OrNode, {});
+                                }}
+                            />
+                            <Button
+                                text="XOR"
+                                size={1}
+                                color="blue"
+                                onClick={() => {
+                                    dynamicRoot.room!.addFlowNode(NodeType.XorNode, {});
+                                }}
+                            />
+                            <Button
+                                text="AND"
+                                size={1}
+                                color="blue"
+                                onClick={() => {
+                                    dynamicRoot.room!.addFlowNode(NodeType.AndNode, {});
+                                }}
+                            />
+                            <Button
+                                text="123"
+                                size={1}
+                                color="blue"
+                                onClick={() => {
+                                    dynamicRoot.room!.addFlowNode(NodeType.DecimalDisplayNode, { pins: 4 });
+                                }}
+                            />
+                            <Button
+                                text="NOT"
+                                size={1}
+                                color="blue"
+                                onClick={() => {
+                                    dynamicRoot.room!.addFlowNode(NodeType.NotNode, {});
+                                }}
+                            />
+                            <Button
+                                icon={mdiLedOn}
+                                size={1}
+                                color="blue"
+                                onClick={() => {
+                                    dynamicRoot.room!.addFlowNode(NodeType.LedNode, {});
+                                }}
+                            />
+                            <Button
+                                icon={mdiCarBattery}
+                                size={1}
+                                color="blue"
+                                onClick={() => {
+                                    dynamicRoot.room!.addFlowNode(NodeType.BatteryNode, { pins: 5 });
+                                }}
+                            />
+                        </Panel>
+                        <Background />
+                    </ReactFlow>
+                </div>
+            </div>
+        </div>
+    );
+});
+export default Circuit;

packages/hfr/circuit/components/Nodes/And/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import shared from '../styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import { useStore } from '@tdev-hooks/useStore';
+import { Handle, Node, NodeProps, Position } from '@xyflow/react';
+import FlowNode from '@hfr/circuit/models/FlowNode';
+import { NodeType } from '@hfr/circuit';
+import NodeWrapper from '../NodeWrapper';
+import AndGate from './assets/Gate-AND.svg';
+
+export type AndNode = Node<{}, 'AndNode'>;
+
+const AndNode = observer((props: NodeProps<AndNode>) => {
+    const documentStore = useStore('documentStore');
+    const doc = documentStore.find(props.id) as FlowNode<NodeType.AndNode> | undefined;
+    if (!doc) {
+        return null;
+    }
+    return (
+        <NodeWrapper node={doc} className={clsx(styles.and, shared.gate)}>
+            <AndGate className={shared.image} />
+            AND
+            <Handle
+                type="target"
+                position={Position.Left}
+                style={{ top: '10px' }}
+                className={clsx(doc.inputEdgeA?.isPowerOn && shared.on, shared.handle)}
+                id="a"
+            />
+            <Handle
+                type="target"
+                position={Position.Left}
+                style={{ top: '50px' }}
+                className={clsx(doc.inputEdgeB?.isPowerOn && shared.on, shared.handle)}
+                id="b"
+            />
+            <Handle
+                type="source"
+                position={Position.Right}
+                style={{
+                    right: '0px'
+                }}
+                className={clsx(doc.deriver.output && shared.on, shared.handle)}
+            />
+        </NodeWrapper>
+    );
+});
+
+export default AndNode;

packages/hfr/circuit/components/Nodes/And/styles.module.scss

@@ -0,0 +1,4 @@
+.and {
+    width: 80px;
+    height: 60px;
+}

packages/hfr/circuit/components/Nodes/Battery/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.scss';
+import shared from '../styles.module.scss';
+import { observer } from 'mobx-react-lite';
+import { useStore } from '@tdev-hooks/useStore';
+import { Handle, Node, NodeProps, Position, useUpdateNodeInternals } from '@xyflow/react';
+import { mdiCarBattery, mdiMinusCircle, mdiPlusCircle } from '@mdi/js';
+import FlowNode from '@hfr/circuit/models/FlowNode';
+import { NodeType } from '@hfr/circuit';
+import Icon from '@mdi/react';
+import Button from '@tdev-components/shared/Button';
+import NodeWrapper from '../NodeWrapper';
+
+export type BatteryNode = Node<{}, 'BatteryNode'>;
+
+const BatteryNode = observer((props: NodeProps<BatteryNode>) => {
+    const documentStore = useStore('documentStore');
+    const updateNodeInternals = useUpdateNodeInternals();
+    const doc = documentStore.find(props.id) as FlowNode<NodeType.BatteryNode> | undefined;
+    if (!doc) {
+        return null;
+    }
+    const pins = doc?.deriver.pins ?? 3;
+    return (
+        <NodeWrapper node={doc} className={styles.battery}>
+            <Icon path={mdiCarBattery} color="var(--ifm-color-primary)" size={1} />
+            <Handle
+                type="source"
+                position={Position.Top}
+                className={clsx(shared.on, shared.handle)}
+                style={{ top: -2, left: '17px' }}
+            />
+            {Array.from({ length: pins }).map((_, i) => (
+                <Handle
+                    key={i}
+                    id={i === 0 ? 'a' : i === 1 ? 'b' : `p${i}`}
+                    type="target"
+                    position={i === 0 ? Position.Bottom : Position.Top}
+                    className={clsx(shared.handle)}
+                    style={{ top: `${25 - (i === 0 ? 5 : 0)}px`, left: `${5 + i * 50}px` }}
+                />
+            ))}
+            <div className={clsx(styles.ground)} style={{ ['--data-width' as any]: `${(pins - 1) * 50}px` }}>
+                <Button
+                    icon={mdiPlusCircle}
+                    size={0.3}
+                    className={clsx(styles.pin, styles.pinAdd)}
+                    onClick={() => {
+                        doc?.deriver.addPin();
+                        updateNodeInternals(props.id);
+                    }}
+                />
+                <Button
+                    icon={mdiMinusCircle}
+                    size={0.3}
+                    className={clsx(styles.pin, styles.pinRemove)}
+                    onClick={() => {
+                        doc?.deriver.removePin();
+                        updateNodeInternals(props.id);
+                    }}
+                />
+            </div>
+        </NodeWrapper>
+    );
+});
+
+export default BatteryNode;

packages/hfr/circuit/components/Nodes/Battery/styles.module.scss

@@ -0,0 +1,20 @@
+.battery {
+    .ground {
+        position: absolute;
+        border-top: 1px solid var(--ifm-color-danger);
+        width: var(--data-width);
+        bottom: 5px;
+        margin-top: -1px;
+        margin-left: 6px;
+        .pin {
+            position: absolute;
+            bottom: -22px;
+            &.pinAdd {
+                right: -30px;
+            }
+            &.pinRemove {
+                right: 15px;
+            }
+        }
+    }
+}