JSFiddle - React, Tailwind, and code Playground

by jarosciak

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.34.0/plotly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
<div style="padding: 10px;">
    <label for="numPlayers">Number of Players:</label>
    <input type="number" id="numPlayers" value="10" min="1" style="width: 60px;">
    <button onclick="simulateLatticeMPC()">Run Simulation</button>
</div>

<div style="display: flex; height: 90vh;">
    <!-- Left side for the graph -->
    <div id="graphContainer" style="width: 70%; height: 100%;">
        <div id="plot" style="width: 100%; height: 100%;"></div>
    </div>
    
    <!-- Right side for the table -->
    <div id="tableContainer" style="width: 30%; padding-left: 10px;">
        <!-- Winner display section -->
        <div id="winnerDisplay" style="margin-bottom: 10px; font-size: 18px;"></div>
        <!-- Table to display players and their distances -->
        <div id="playerTable"></div>
    </div>
</div>

CSS

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

JavaScript

function sha256(data) {
    return CryptoJS.SHA256(data).toString();
}

// Generate lattice point based on a hash-derived point within the bounded space in 3D
function generateLatticePointFromHash(hashInt, minX, maxX, minY, maxY, minZ, maxZ) {
    const rangeX = maxX - minX;
    const rangeY = maxY - minY;
    const rangeZ = maxZ - minZ;

    const x = minX + (hashInt % rangeX);
    const y = minY + (hashInt % rangeY);
    const z = minZ + (hashInt % rangeZ);

    return { x, y, z };
}

// Define the Player class to manage random data, VDF, and reveals
class Player {
    constructor(id) {
        this.id = id;
        this.random1 = Math.floor(Math.random() * 10000) + 1; // Generate a random number 1
        this.random2 = Math.floor(Math.random() * 10000) + 1; // Generate a random number 2
        this.random3 = Math.floor(Math.random() * 10000) + 1; // Generate a random number 3 for 3D space
        this.commitment = sha256(this.random1.toString() + this.random2.toString() + this.random3.toString());
        this.revealed = false;
    }

    reveal() {
        this.revealed = true;
        return { id: this.id, random1: this.random1, random2: this.random2, random3: this.random3 };
    }
}

// Main function to simulate the lattice-based MPC protocol in 3D
function simulateLatticeMPC() {
    const numPlayers = document.getElementById('numPlayers').value; // Get number of players from input
    const players = [];
    const playerData = [];

    for (let i = 1; i <= numPlayers; i++) {
        players.push(new Player(i));
    }

    // Reveal phase
    let revealedData = [];
    let minX = 10000;
    let maxX = 0;
    let minY = 10000;
    let maxY = 0;
    let minZ = 10000;
    let maxZ = 0;

    players.forEach(player => {
        const data = player.reveal();
        revealedData.push(data);

        // Update min and max values for X, Y, and Z
        if (data.random1 < minX) minX = data.random1;
        if (data.random1 > maxX) maxX = data.random1;
        if...