Latest updates
So. In an attempt to make my site/rulebook far more interactive, I want to be able to utilise the svg images I’ve been making and animate between them with some simple Javascript and CSS.
The SVGs
Turns out the SVGs (scalable vector graphics) by default in this template were wrapped in <img> tags, this isn’t good to be able to select parts of them.
Normally I reference my images by a simple shortcode , that works great! Nice and simple to type with VS Code doing autofills and image previews for all my images. Simple file management.
Unfortunately, when wrapped in img tags, it kinda just groups all the svg together in one block that you can’t do much with. Rather than being able to utilise layers that I can easily set up in Illustrator.
This sent me down a rabbit whole of working out how to create a shortcode that would work with svgs.
After a lot of trial and error, it turned out the solution was quite simple. It now lives in the /layouts part of the site, in /shortcodes, and is an svg.html file that looks like this:
1
2
3
|
{{ $path := print "img/svgs/" (.Get 0) }}
{{ $svg := resources.Get $path }}
{{ $svg.Content | safeHTML }}
|
Now I can have all my svgs living in my assets folder, and can link to them like this in my Markdown blogposts like this:
1
2
|
{{ < svg "image-title.svg" > }}
|
Might add some extra functionality later if I need it, but for now it’s very simple. Might need to include lazy loading etc. (is that possible with svgs?) We’ll see!
The Javascript
I hate Javascript with a passion. But sometimes I’ve just got to use it. Here’s the code I currently have to enable 60 degree rotations (perfect for hexagons):
1
2
3
4
5
6
7
8
9
10
11
|
<script>
document.addEventListener('DOMContentLoaded', () => {
const rotatableElements = document.querySelectorAll('.rotatable');
let rotationAngle = 0;
rotatableElements.forEach(element => {
element.addEventListener('click', () => {
rotationAngle = (rotationAngle + 60) % 360;
element.style.transform = `rotate(${rotationAngle}deg)`;
});
});
|
Thanks CoPilot.
V2 Day 2
It wasn’t appearing quite as I’d like, so I asked the ol’ ai to assist. I’m sure I could prompt it to simplify but want to avoid. It spat out this monstrosity:
Javascript v2
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
|
// const desertElements = document.querySelectorAll('#desert polygon, #desert polyline');
// const grasslandElements = document.querySelectorAll('#grassland polygon, #grassland polyline');
// const forestElements = document.querySelectorAll('#forest polygon, #forest polyline');
// const highlightColor = '#ffb700'; // Replace with your desired highlight color
// const highlightWidth = 25;
// const fadeOutOpacity = 0.2; // Adjust fade-out opacity as needed
// function highlight(elements, color, width) {
// elements.forEach(element => {
// element.style.stroke = color;
// element.style.strokeWidth = width;
// });
// }
// function fadeOut(elements) {
// elements.forEach(element => {
// element.style.opacity = fadeOutOpacity;
// });
// }
// function reset(elements) {
// elements.forEach(element => {
// element.style.stroke = '';
// element.style.strokeWidth = '';
// element.style.opacity = 1;
// });
// }
// desertElements.forEach(element => {
// element.addEventListener('mouseover', () => {
// highlight(desertElements, highlightColor, highlightWidth);
// fadeOut(grasslandElements);
// fadeOut(forestElements);
// });
// element.addEventListener('mouseout', () => {
// reset(desertElements);
// reset(grasslandElements);
// reset(forestElements);
// });
// });
// grasslandElements.forEach(element => {
// element.addEventListener('mouseover', () => {
// highlight(grasslandElements, '#0dab47', highlightWidth);
// fadeOut(desertElements);
// fadeOut(forestElements);
// });
// element.addEventListener('mouseout', () => {
// reset(grasslandElements);
// reset(desertElements);
// reset(forestElements);
// });
// });
// forestElements.forEach(element => {
// element.addEventListener('mouseover', () => {
// highlight(forestElements, '#1d734e', highlightWidth);
// fadeOut(desertElements);
// fadeOut(grasslandElements);
// });
// element.addEventListener('mouseout', () => {
// reset(forestElements);
// reset(desertElements);
// reset(grasslandElements);
// });
// });
// });
|
CSS
I’ll be adding like crazy now I have access to my svgs. But will likely have some hover effects that could make things very tidy. But need to design mobile first.
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
|
// SVG Interactions
/* Highlight desert tiles */
#desert:hover polygon,
#desert:hover polyline {
stroke: #ffb700;
stroke-width: 20;
transition: 0.3s ease-in-out;
}
/* Highlight grasslands tiles */
#grassland:hover polygon,
#grassland:hover polyline {
stroke: #0dab47;
stroke-width: 20;
transition: 0.3s ease-in-out;
}
/* Highlight forest tiles */
#forest:hover polygon,
#forest:hover polyline {
stroke: #1d734e;
stroke-width: 20;
transition: 0.3s ease-in-out;
}
|
CSS V2 was also pretty long, but hey it’s the devil I know. Just a bunch of, if you highlight this, fade that.
CSS V2
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
|
#desert polygon, #desert polyline,
#grassland polygon, #grassland polyline,
#forest polygon, #forest polyline {
transition: stroke 0.2s, stroke-width 0.2s, opacity 0.5s;
}
/* Highlight desert elements on hover */
#desert polygon:hover, #desert polyline:hover {
stroke: #ffb700;
stroke-width: 25;
}
#desert polygon:hover ~ polygon, #desert polyline:hover ~ polyline,
#desert polygon:hover ~ polyline, #desert polyline:hover ~ polygon {
opacity: 0.2;
}
/* Highlight grassland elements on hover */
#grassland polygon:hover, #grassland polyline:hover {
stroke: #0dab47;
stroke-width: 25;
}
#grassland polygon:hover ~ polygon, #grassland polyline:hover ~ polyline,
#grassland polygon:hover ~ polyline, #grassland polyline:hover ~ polygon {
opacity: 0.2;
}
/* Highlight forest elements on hover */
#forest polygon:hover, #forest polyline:hover {
stroke: #00547a;
stroke-width: 25;
}
#forest polygon:hover ~ polygon, #forest polyline:hover ~ polyline,
#forest polygon:hover ~ polyline, #forest polyline:hover ~ polygon {
opacity: 0.2;
}
|
Lava your comments here