Did some arrows stuff
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user