Visualisation is in place, need to test in production for performance

package.json

@@ -15,6 +15,7 @@
     "@apollo/experimental-nextjs-app-support": "^0.9.0",
     "@react-three/drei": "^9.80.2",
     "@react-three/fiber": "^8.9.1",
+    "@splinetool/react-spline": "^2.2.6",
     "@studio-freight/lenis": "^1.0.42",
     "@types/three": "^0.162.0",
     "color": "^4.2.3",

src/parts/Form/index.jsx

@@ -7,11 +7,12 @@ import init, { Node, NodeConfig } from '@package/lumina-node-wasm';
 import Input from './Input';
 import Button from '@parts/Button';
 import Icon from '@icon';
+import Visualisation from '@parts/Visualisation';
 import { Grid } from '@waffl';
 
 // Styles
 // ------------
-import { Blanket, Jacket, ImageContainer, Container, Title, NetworkList, NetworkItem, StatsItem, Col, } from './styles';
+import { Blanket, Jacket, ImageContainer, Container, Title, NetworkList, NetworkItem, StatsItem, PeerList, Col, } from './styles';
 
 // Component
 // ------------
@@ -156,6 +157,7 @@ const Form = () => {
             setNode(newNode);
 
             setStats({
+                ...stats,
                 peerId: await newNode.local_peer_id(),
             });
         } catch (error) {
@@ -242,11 +244,11 @@ const Form = () => {
                                     <StatsItem $block>
                                         <label>
                                             <span>Peers:</span>
-                                            <ul>
+                                            <PeerList>
                                                 {stats.connectedPeers?.map((peer, index) => (
                                                     <li key={index} className="mono">{peer}</li>
                                                 ))}
-                                            </ul>
+                                            </PeerList>
                                         </label>
                                     </StatsItem>
                                 </Col>
@@ -280,11 +282,9 @@ const Form = () => {
                             </Grid>
                         </Col>
                         <Col $small="1/3" $medium="1/7" $large="7/13">
-                            <span>VFX</span>
+                            <Visualisation data={stats} />
                         </Col>
                     </Grid>
-
-                    {/* // TODO • Visualisation to be a random square of data in first version */}
                 </Container>
             </Jacket>
         </Blanket>

src/parts/Form/styles.js

@@ -213,27 +213,31 @@ export const StatsItem = styled.div(props => css`
             min-width: max-content;
         }
     }
+`);
 
-    ul {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: flex-start;
-        gap: .3rem;
-        
+export const PeerList = styled.ul(props => css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    gap: .3rem;
+
+    max-height: 15rem;
+    overflow: hidden;
+    overflow-y: scroll;
+
+    position: relative;
+    width: 100%;
+    padding: .3rem;
+    border-radius: .6rem;
+    border: 1px solid ${props.theme.colors.brand.bc1};
+
+    li {
         position: relative;
         width: 100%;
-        padding: .3rem;
+        padding: 1.2rem;
         border-radius: .6rem;
-        border: 1px solid ${props.theme.colors.brand.bc1};
-        
-        li {
-            position: relative;
-            width: 100%;
-            padding: 1.2rem;
-            border-radius: .6rem;
-            background: ${props.theme.colors.global.black05};
-        }
+        background: ${props.theme.colors.global.black05};
     }
 `);
 

src/parts/Visualisation/index.jsx

@@ -0,0 +1,75 @@
+'use client';
+
+// Imports
+// ------------
+import React, { useRef, useEffect } from 'react';
+import Spline from '@splinetool/react-spline';
+
+// Styles
+// ------------
+import { Jacket, Container, SplineJacket } from './styles';
+
+// Component
+// ------------
+const Visualisation = ({ data }) => {
+    // NOTE • Generate Grid
+    const containerRef = useRef(null);
+
+    // NOTE • Generate Grid
+    const generateSpans = () => {
+        const spans = [];
+        for (let i = 1; i <= 1024; i++) {
+            spans.push(<span key={i} className="grid-item"></span>);
+        }
+        return spans;
+    };
+
+    // NOTE • Highlight Random Squares
+    function highlightRandomSquares(num) {
+        const squares = document.querySelectorAll('.grid-item');
+        const indices = [];
+
+        // Remove selected class from all squares
+        squares.forEach(square => {
+            square.classList.remove('selected');
+        });
+
+        // Generate unique random indices
+        while (indices.length < num) {
+            const index = Math.floor(Math.random() * squares.length);
+            if (!indices.includes(index)) {
+                indices.push(index);
+            }
+        }
+
+        // Highlight random squares
+        indices.forEach(index => {
+            squares[index].classList.add('selected');
+        });
+    }
+
+    // NOTE • Interval highlight when data changes
+    useEffect(() => {
+        function getNumber(num) {
+            const numberBeforeX = num.substring(0, num.indexOf('x'));
+
+            return parseInt(numberBeforeX, 10);
+        }
+
+        let number = getNumber(data.networkHeadDataSquare);
+
+        // Highlight random squares
+        highlightRandomSquares(number);
+    }, [data]);
+
+    return (
+        <Jacket>
+            <Container ref={containerRef}>{generateSpans()}</Container>
+            <SplineJacket>
+                <Spline scene="https://prod.spline.design/vS5y3FkvJJqrWPgq/scene.splinecode" />
+            </SplineJacket>
+        </Jacket>
+    );
+}
+
+export default Visualisation;

src/parts/Visualisation/styles.js

@@ -0,0 +1,41 @@
+// Imports
+// ------------
+import styled, { css } from 'styled-components';
+import { bp, Div } from '@tackl';
+
+// Exports
+// ------------
+export const Jacket = styled(Div)(props => css`
+    position: relative;
+`);
+
+export const Container = styled(Div)(
+    props => css`
+        position: relative;
+        pointer-events: none;
+        padding: 1px;
+
+        display: grid;
+        grid-template-columns: repeat(32, 1fr);
+        grid-template-rows: repeat(32, 1fr);
+        grid-gap: 1px;
+
+        width: 42.08vw;
+        height: 42.08vw;
+
+        background: ${props.theme.colors.global.black10};
+
+        .grid-item {
+            background: white;
+        }
+
+        .selected {
+            background: ${props.theme.colors.brand.bc4};
+        }
+    `
+);
+
+export const SplineJacket = styled(Div)(props => css`
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+`);