JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<h2>Berlin52: <span style="color:#0ff">Centroid-Based Partitioning</span></h2>
    <canvas id="mapCanvas" width="600" height="500"></canvas>
    
    <div class="ui">
        <button onclick="startSimulation()">ALAN PARÇALA VE ROTALA</button>
        <div class="stats">
            <div><span class="label">Toplam Mesafe</span><span id="scoreVal" class="stat-val">0.00</span></div>
            <div><span class="label">Mahalleler</span><span id="clusterVal" class="stat-val">0</span></div>
            <div><span class="label">Durum</span><span id="status" class="stat-val" style="font-size: 0.9em; color: #f0f;">Hazır</span></div>
        </div>
    </div>

CSS

body { background-color: #050505; color: #00ff41; font-family: 'Consolas', monospace; display: flex; flex-direction: column; align-items: center; padding: 20px; margin: 0; }
        canvas { border: 2px solid #00ff41; background: #000; box-shadow: 0 0 20px #003300; }
        .ui { background: #111; padding: 20px; border: 1px solid #333; margin: 15px; width: 600px; border-radius: 8px; }
        .stats { display: flex; justify-content: space-between; margin-top: 15px; border-top: 1px solid #222; padding-top: 10px; }
        .stat-val { font-size: 1.4em; color: #0ff; font-weight: bold; }
        .label { font-size: 0.8em; color: #888; text-transform: uppercase; display: block; }
        button { background: #004400; color: #0f0; border: 1px solid #0f0; padding: 12px; cursor: pointer; width: 100%; font-weight: bold; font-family: 'Consolas'; font-size: 1.1em; }
        button:hover { background: #0f0; color: #000; }

JavaScript

const canvas = document.getElementById("mapCanvas");
const ctx = canvas.getContext("2d");

let rawData = [
    {x:565, y:575}, {x:25, y:185}, {x:345, y:750}, {x:945, y:685}, {x:845, y:655}, {x:880, y:660}, {x:25, y:230}, {x:525, y:1000}, {x:580, y:1175}, {x:650, y:1130}, {x:1605, y:620}, {x:1220, y:580}, {x:1465, y:200}, {x:1530, y:5}, {x:845, y:680}, {x:725, y:370}, {x:145, y:665}, {x:415, y:635}, {x:510, y:875}, {x:560, y:365}, {x:300, y:465}, {x:520, y:585}, {x:480, y:415}, {x:835, y:625}, {x:975, y:580}, {x:1215, y:245}, {x:1320, y:315}, {x:1250, y:400}, {x:660, y:180}, {x:410, y:250}, {x:420, y:555}, {x:575, y:665}, {x:1150, y:1160}, {x:700, y:580}, {x:685, y:595}, {x:685, y:610}, {x:770, y:610}, {x:795, y:645}, {x:720, y:635}, {x:760, y:650}, {x:475, y:960}, {x:95, y:260}, {x:875, y:920}, {x:700, y:500}, {x:555, y:815}, {x:830, y:485}, {x:1170, y:65}, {x:830, y:610}, {x:605, y:625}, {x:595, y:360}, {x:1340, y:725}, {x:1740, y:245}
];

// --- Eksik Olan Fonksiyonlar ---

function drawBackground(neighborhoods) {
    const step = 5; 
    for(let x = 0; x < canvas.width; x += step) {
        for(let y = 0; y < canvas.height; y += step) {
            let minDist = Infinity;
            let bestColor = "#000";
            neighborhoods.forEach(n => {
                let d = distToHull({x, y}, n.hull);
                if(d < minDist) {
                    minDist = d;
                    bestColor = n.bgColor;
                }
            });
            ctx.fillStyle = bestColor;
            ctx.fillRect(x, y, step, step);
        }
    }
}

function drawHull(n) {
    ctx.beginPath();
    ctx.moveTo(n.hull[0].x, n.hull[0].y);
    n.hull.forEach(p => ctx.lineTo(p.x, p.y));
    ctx.closePath();
    ctx.fillStyle = n.color;
    ctx.globalAlpha = 0.3;
    ctx.fill();
    ctx.globalAlpha = 1.0;
    ctx.strokeStyle = "rgba(255,255,255,0.1)";
    ctx.stroke();
}

// --- Yardımcı Fonksiyonlar ---

function normalize(points) {
...