candy_world/map_debug.html at main · ford442/candy_world · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
<head>
    <title>Candy World - Density Map</title>
    <style>
        body { background: #222; color: #fff; font-family: monospace; display: flex; flex-direction: column; align-items: center; }
        canvas { background: #90EE90; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
        .legend { margin-top: 20px; display: flex; gap: 20px; }
        .item { display: flex; align-items: center; gap: 8px; }
        .dot { width: 12px; height: 12px; border-radius: 50%; }
    </style>
</head>
<body>
    <h1>🍬 World Density Map (Simulated)</h1>
    <canvas id="map" width="600" height="600"></canvas>

    <div class="legend">
        <div class="item"><div class="dot" style="background:green"></div> Regular Tree (50)</div>
        <div class="item"><div class="dot" style="background:magenta"></div> Flowering Tree (40)</div>
        <div class="item"><div class="dot" style="background:red"></div> Giant Mushroom (30)</div>
        <div class="item"><div class="dot" style="background:orange"></div> Small Foliage (600)</div>
        <div class="item"><div class="dot" style="background:white; opacity: 0.5"></div> Cloud (25)</div>
    </div>

    <script>
        const ctx = document.getElementById('map').getContext('2d');
        const CENTER = 300;
        const SCALE = 2; // Map Units to Pixels

        // --- Configuration (Match your generation.js) ---
        const COUNTS = {
            trees: 50,
            flowers: 40,
            mushrooms: 30,
            foliage: 600,
            clouds: 25
        };

        function drawDot(x, z, color, size) {
            ctx.fillStyle = color;
            ctx.beginPath();
            // Convert World (0,0) to Canvas Center (300,300)
            ctx.arc(CENTER + x * SCALE, CENTER + z * SCALE, size, 0, Math.PI * 2);
            ctx.fill();
        }

        function generate() {
            ctx.clearRect(0, 0, 600, 600);

            // Draw Range Ring (150 unit radius)
            ctx.strokeStyle = "rgba(255,255,255,0.3)";
            ctx.beginPath();
            ctx.arc(CENTER, CENTER, 150 * SCALE, 0, Math.PI * 2);
            ctx.stroke();

            // 1. Trees
            for(let i=0; i<COUNTS.trees; i++) {
                const r = 20 + Math.random() * 120;
                const theta = Math.random() * Math.PI * 2;
                drawDot(Math.cos(theta)*r, Math.sin(theta)*r, 'green', 4);
            }

            // 2. Flowering Trees
            for(let i=0; i<COUNTS.flowers; i++) {
                const r = 30 + Math.random() * 110;
                const theta = Math.random() * Math.PI * 2;
                drawDot(Math.cos(theta)*r, Math.sin(theta)*r, 'magenta', 5);
            }

            // 3. Giant Mushrooms
            for(let i=0; i<COUNTS.mushrooms; i++) {
                const r = 10 + Math.random() * 130;
                const theta = Math.random() * Math.PI * 2;
                drawDot(Math.cos(theta)*r, Math.sin(theta)*r, 'red', 6);
            }

            // 4. Small Foliage Loop
            for(let i=0; i<COUNTS.foliage; i++) {
                const r = Math.random() * 140;
                const theta = Math.random() * Math.PI * 2;
                drawDot(Math.cos(theta)*r, Math.sin(theta)*r, 'orange', 1.5);
            }

            // 5. Clouds (Drifting)
            for(let i=0; i<COUNTS.clouds; i++) {
                const r = Math.random() * 140;
                const theta = Math.random() * Math.PI * 2;
                drawDot(Math.cos(theta)*r, Math.sin(theta)*r, 'rgba(255,255,255,0.5)', 10);
            }
        }

        generate();
        document.body.onclick = generate; // Click to re-roll
    </script>
</body>
</html>