Did some arrows stuff

This commit is contained in:
2026-03-27 21:18:36 +01:00
parent 535a4584aa
commit a3707f25b3
2 changed files with 19 additions and 9 deletions

View File

@@ -7,7 +7,7 @@
</head>
<body id="body">
<div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;">
<div class="disbox node" id="n0">
<div class="disbox node" id="proj">
<div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img>
@@ -21,7 +21,7 @@
</div>
<div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;">
<div>
<div class="disbox node" id="n1" style="margin-bottom: 50px;">
<div class="disbox node" id="fich" style="margin-bottom: 50px;">
<div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img>
@@ -36,7 +36,7 @@
I develloped it with <b>Golang</b> for the backend and <b>svelte</b> for the frontend, and it has worked pretty well for me :D
</p>
</div>
<div class="disbox node" id="n2">
<div class="disbox node" id="rust">
<div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img>
@@ -51,7 +51,7 @@
</div>
</div>
<div style="width: 20px;"></div>
<div class="disbox">
<div class="disbox node" id="hack">
<div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img>
@@ -70,7 +70,7 @@
</div>
</div>
<div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;">
<div class="disbox node" id="n3">
<div class="disbox node" id="alac">
<div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img>
@@ -83,7 +83,7 @@
</div>
</div>
<div style="display: flex; direction: row; justify-content: center; margin-bottom: 50px;">
<div class="disbox">
<div class="disbox" id="mine">
<div class="disboxh">
<img class="ico" src="../assets/gitico.png"></img>
<img class="ico" src="../assets/blogico.png"></img>

View File

@@ -3,9 +3,12 @@
// Arrows go from the bottom-center of the source
// to the top-center of the target.
const CONNECTIONS = [
['n0', 'n1'],
['n1', 'n2'],
['n2', 'n3'],
['proj', 'fich'],
['proj', 'hack'],
['fich', 'rust'],
['rust', 'alac'],
['hack', 'alac'],
['alac', 'mine'],
];
// ─── Setup ────────────────────────────────────────────────────
@@ -65,6 +68,13 @@ function redraw() {
};
pathEls[i].setAttribute('d', manhattanPath(r1, r2));
if (tgt.left > src.left) {
pathEls[i].style.stroke = "#008000";
} else if (tgt.left < src.left){
pathEls[i].style.stroke = "#ff0000";
} else {
pathEls[i].style.stroke = "#0000ff";
}
});
}