vlw/victorwesterlund.com
1
0
Fork 0
mirror of https://codeberg.org/vlw/victorwesterlund.com.git synced 2025-09-14 11:33:41 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip: add bg pattern

Browse source
This commit is contained in:
Victor Westerlund 2022-03-24 00:17:53 +01:00
parent b3a577d6de
commit cfc8d68840
3 changed files with 70 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
public/assets/css/wrongplace.css
View file

@ -7,6 +7,7 @@ body {
align-content: center; align-content: center;
justify-content: center; justify-content: center;
user-select: none; user-select: none;
overflow: hidden;
} }
img { img {
@ -14,3 +15,24 @@ img {
image-rendering: pixelated; image-rendering: pixelated;
pointer-events: none; pointer-events: none;
} }
#pattern {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#pattern p {
margin: 0;
display: flex;
justify-content: space-between;
}
#pattern p span {
font-size: clamp(10px, 4vh, 10vw);
font-family: monospace;
font-weight: bold;
color: black;
}

41
public/assets/js/WrongPlace.mjs Normal file
View file

@ -0,0 +1,41 @@
export default class WrongPlace {
constructor(target) {
const interval = 2000;
this.target = target;
this.populate();
this.anim = setInterval(() => this.generate(), interval);
this.generate();
}
populate() {
const y = 30;
const x = 27;
// Add vertical paragraphs and horizontal spans, man
for (let i = 0; i <= y; i++) {
const p = document.createElement("p");
for (let j = 0; j <= x; j++) {
const span = document.createElement("span");
p.appendChild(span);
}
this.target.appendChild(p);
}
}
// Get a random number, man
rand() {
const clamp = [0, 100]
return Math.floor(Math.random() * (clamp[1] - clamp[0] + 1) + clamp[0]);
}
// Generate a new random background, man
generate() {
const spans = this.target.getElementsByTagName("span");
for (const span of spans) {
span.innerText = this.rand();
}
}
}

7
public/error.html
View file

@ -17,5 +17,12 @@
</head> </head>
<body> <body>
<img src="assets/media/wrongplace.gif"/> <img src="assets/media/wrongplace.gif"/>
<div id="pattern"></div>
<script type="module">
import { default as WrongPlace } from "./assets/js/WrongPlace.mjs";
const main = document.getElementById("pattern");
window._wrongplace = new WrongPlace(main);
</script>
</body> </body>
</html> </html>