nulang/docs/src/components/animations/SupervisionTree.astro at main · ghzhost/nulang · 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
---
---

<svg viewBox="0 0 360 240" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Supervision tree with automatic actor restart">
  <line class="sv-link" data-id="0" x1="180" y1="45" x2="55" y2="195" />
  <line class="sv-link" data-id="1" x1="180" y1="45" x2="125" y2="195" />
  <line class="sv-link" data-id="2" x1="180" y1="45" x2="235" y2="195" />
  <line class="sv-link" data-id="3" x1="180" y1="45" x2="305" y2="195" />

  <circle class="sv-supervisor" cx="180" cy="45" r="22" />
  <text x="180" y="45" class="sv-supervisor-label">S</text>
  <text x="180" y="15" class="sv-node-label">Supervisor</text>

  <circle class="sv-actor" data-id="0" cx="55" cy="195" r="18" />
  <text x="55" y="195" class="sv-actor-label">A1</text>
  <text x="55" y="230" class="sv-node-label">Actor 1</text>
  <text class="sv-error" data-id="0" x="55" y="195">✕</text>

  <circle class="sv-actor" data-id="1" cx="125" cy="195" r="18" />
  <text x="125" y="195" class="sv-actor-label">A2</text>
  <text x="125" y="230" class="sv-node-label">Actor 2</text>
  <text class="sv-error" data-id="1" x="125" y="195">✕</text>

  <circle class="sv-actor" data-id="2" cx="235" cy="195" r="18" />
  <text x="235" y="195" class="sv-actor-label">A3</text>
  <text x="235" y="230" class="sv-node-label">Actor 3</text>
  <text class="sv-error" data-id="2" x="235" y="195">✕</text>

  <circle class="sv-actor" data-id="3" cx="305" cy="195" r="18" />
  <text x="305" y="195" class="sv-actor-label">A4</text>
  <text x="305" y="230" class="sv-node-label">Actor 4</text>
  <text class="sv-error" data-id="3" x="305" y="195">✕</text>
</svg>

<style is:global>
  .sv-actor { fill: #22c55e; transition: fill 0.3s ease; }
  .sv-actor.crashed { fill: #ef4444; }
  .sv-actor.restarting { fill: #eab308; }
  .sv-link { stroke: var(--sl-color-hairline); stroke-width: 2; transition: stroke 0.3s ease, stroke-width 0.3s ease; }
  .sv-link.active { stroke: var(--sl-color-accent); stroke-width: 2.5; }
  .sv-error { opacity: 0; font-size: 14px; text-anchor: middle; dominant-baseline: central; fill: #fff; font-weight: bold; transition: opacity 0.2s; pointer-events: none; }
  .sv-error.visible { opacity: 1; }
  .sv-supervisor { fill: var(--sl-color-accent); }
  .sv-supervisor-label { font-size: 14px; text-anchor: middle; dominant-baseline: central; fill: #fff; font-weight: bold; pointer-events: none; }
  .sv-actor-label { font-size: 11px; text-anchor: middle; dominant-baseline: central; fill: #fff; font-weight: 600; pointer-events: none; }
  .sv-node-label { font-size: 10px; text-anchor: middle; fill: var(--sl-color-gray-2); pointer-events: none; }
</style>

<script>
  function initSupervisionTree() {
    const actors = document.querySelectorAll('.sv-actor');
    const links = document.querySelectorAll('.sv-link');
    const errorTexts = document.querySelectorAll('.sv-error');
    if (actors.length === 0) return;

    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reducedMotion) return;

    function crashCycle() {
      const i = Math.floor(Math.random() * actors.length);
      links[i].classList.add('active');
      actors[i].classList.add('crashed');
      errorTexts[i].classList.add('visible');

      setTimeout(() => {
        actors[i].classList.remove('crashed');
        actors[i].classList.add('restarting');
        errorTexts[i].classList.remove('visible');
      }, 1000);

      setTimeout(() => {
        actors[i].classList.remove('restarting');
        links[i].classList.remove('active');
      }, 1600);

      setTimeout(crashCycle, 2500 + Math.random() * 2000);
    }

    setTimeout(crashCycle, 1500);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initSupervisionTree);
  } else {
    initSupervisionTree();
  }
</script>