Skip to content

Commit 20c172c

Browse files
ShirajukiShirajuki
committed
chore: add minor fixes
1 parent 2e66bb7 commit 20c172c

File tree

18 files changed

+59
-71
lines changed

18 files changed

+59
-71
lines changed

‎deploy.sh‎

100755100644
File mode changed.

‎src/kaboom.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
{{#> head }} Kaboom — JS Game Rendering Benchmark {{/head}}
3+
{{#> head }} Kaboom v3000 — JS Game Rendering Benchmark {{/head}}
44
<body>
55
{{> header }}
66
<main>

‎src/partials/footer.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<footer>
22
<div class="name-container">
33
<a class="name" href="https://shirajuki.js.org">Shirajuki</a
4-
><span>© 2023</span>
4+
><span>© 2025</span>
55
</div>
66
<div>
77
Design inspired by

‎src/public/sprite2.png‎

-6.27 KB
Binary file not shown.

‎src/public/style.css‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
* {
22
box-sizing: border-box;
33
}
4+
45
:root {
56
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
67
font-size: 16px;
@@ -16,40 +17,45 @@
1617
-moz-osx-font-smoothing: grayscale;
1718
-webkit-text-size-adjust: 100%;
1819
}
20+
1921
a {
2022
font-weight: 500;
2123
color: #9c64ff;
2224
text-decoration: none;
2325
border-bottom: 1px solid #9c64ff;
2426
transition: color 0.2s, filter 0.2s, border-color 0.2s;
2527
}
28+
2629
a:hover {
2730
color: #934ddd;
2831
}
2932

3033
body {
3134
margin: 0;
32-
place-items: center;
3335
min-width: 320px;
3436
min-height: 100vh;
3537
font-size: 18px;
3638
}
39+
3740
header {
3841
padding: 1rem 2rem 0 2rem;
3942
height: 90px;
4043
font-size: 26px;
4144
}
45+
4246
nav {
4347
display: flex;
4448
flex-wrap: wrap;
4549
gap: 1rem;
4650
}
51+
4752
main {
4853
padding: 0 2rem;
4954
max-width: 100vw;
5055
overflow-x: hidden;
5156
min-height: calc(100vh - 90px - 90px);
5257
}
58+
5359
footer {
5460
display: flex;
5561
flex-direction: column;
@@ -60,47 +66,56 @@ footer {
6066
height: 90px;
6167
padding: 1rem 2rem;
6268
}
69+
6370
footer .name {
6471
font-size: 26px;
6572
}
73+
6674
footer span {
6775
font-size: 14px;
6876
margin-left: 0.75rem;
6977
opacity: 0.7;
7078
}
7179

72-
main > div {
80+
main>div {
7381
display: grid;
7482
grid-template-columns: 1fr 140px;
7583
min-height: 60px;
7684
align-items: center;
7785
width: 1024px;
7886
}
87+
7988
.container {
8089
position: relative;
8190
margin-top: 0.2rem;
8291
margin-bottom: 0.8rem;
8392
}
93+
8494
.fps-container {
8595
position: relative;
8696
transform: translate(4px, 13px);
8797
}
88-
.fps-container > div {
98+
99+
.fps-container>div {
89100
height: 40px !important;
90101
border-radius: 6px;
91102
}
103+
92104
.container span {
93105
font-size: 0.9rem;
94106
}
95-
.count-container > div {
107+
108+
.count-container>div {
96109
margin-top: 0.1rem;
97110
}
111+
98112
.count-container a:last-of-type:not(.active) {
99113
pointer-events: none;
100114
opacity: 0.7;
101115
border-bottom: 1px solid transparent;
102116
filter: grayscale(1);
103117
}
118+
104119
.container a {
105120
position: relative;
106121
display: inline-block;
@@ -115,13 +130,16 @@ main > div {
115130
border-color: #9c64ff;
116131
transition: border-color 0.2s, color 0.2s;
117132
}
133+
118134
.container a.active {
119135
border-color: #fff;
120136
border-bottom-color: #fff;
121137
}
138+
122139
.count-container a:last-of-type {
123140
border-color: transparent;
124141
}
142+
125143
.container a::before {
126144
content: '';
127145
position: absolute;
@@ -137,6 +155,7 @@ main > div {
137155
color: white;
138156
pointer-events: none;
139157
}
158+
140159
a.active {
141160
border-bottom: 1px solid transparent;
142161
}
@@ -146,10 +165,12 @@ a.active {
146165
border: 1px solid white;
147166
border-radius: 50%;
148167
}
168+
149169
.particle.fill {
150170
background-color: white;
151171
border: 1px solid black;
152172
}
173+
153174
.particle.sprite {
154175
border: initial;
155176
border-radius: initial;
@@ -179,10 +200,12 @@ button {
179200
cursor: pointer;
180201
transition: border-color 0.25s;
181202
}
203+
182204
button:hover {
183205
border-color: #9c64ff;
184206
}
207+
185208
button:focus,
186209
button:focus-visible {
187210
outline: 4px auto -webkit-focus-ring-color;
188-
}
211+
}

‎src/scripts/babylon.js‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@ import * as BABYLON from 'babylonjs';
22
import Engine from './engine.js';
33

44
class BabylonEngine extends Engine {
5-
constructor() {
6-
super();
7-
}
85
init() {
96
super.init();
107

@@ -38,7 +35,7 @@ class BabylonEngine extends Engine {
3835
// Target the camera to scene origin
3936
camera.setTarget(BABYLON.Vector3.Zero());
4037

41-
var light0 = new BABYLON.HemisphericLight(
38+
const light0 = new BABYLON.HemisphericLight(
4239
'Hemi0',
4340
new BABYLON.Vector3(0, 0, 0),
4441
this.scene
@@ -47,7 +44,7 @@ class BabylonEngine extends Engine {
4744
light0.specular = new BABYLON.Color3(1, 1, 1);
4845
light0.groundColor = new BABYLON.Color3(1, 1, 1);
4946

50-
let optimizerOptions = new BABYLON.SceneOptimizerOptions(60, 500);
47+
const optimizerOptions = new BABYLON.SceneOptimizerOptions(60, 500);
5148
optimizerOptions.addOptimization(
5249
new BABYLON.HardwareScalingOptimization(0, 1)
5350
);

‎src/scripts/canvas.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import Engine from './engine.js';
22

33
class CanvasEngine extends Engine {
4-
constructor() {
5-
super();
6-
}
74
init() {
85
super.init();
96

@@ -59,7 +56,7 @@ class CanvasEngine extends Engine {
5956
this.ctx.beginPath();
6057
this.ctx.arc(r.x, r.y, r.size, 0, 2 * Math.PI);
6158
if (this.type === 'fill') this.ctx.fill();
62-
if (this.type != 'sprite') this.ctx.stroke();
59+
if (this.type !== 'sprite') this.ctx.stroke();
6360
}
6461
}
6562

‎src/scripts/dom.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import Engine from './engine.js';
22

33
class DOMEngine extends Engine {
4-
constructor() {
5-
super();
6-
}
74
init() {
85
super.init();
96

@@ -32,11 +29,11 @@ class DOMEngine extends Engine {
3229
particle = document.createElement('div');
3330
if (this.type === 'stroke') particle.className = 'particle';
3431
else if (this.type === 'fill') particle.className = 'particle fill';
35-
particle.style.width = size + 'px';
36-
particle.style.height = size + 'px';
32+
particle.style.width = `${size}px`;
33+
particle.style.height = `${size}px`;
3734
}
38-
particle.style.left = x + 'px';
39-
particle.style.top = y + 'px';
35+
particle.style.left = `${x}px`;
36+
particle.style.top = `${y}px`;
4037
this.canvas.appendChild(particle);
4138
particles[i] = { x, y, size: size, dx, dy, el: particle };
4239
}
@@ -53,8 +50,8 @@ class DOMEngine extends Engine {
5350
else if (r.y + r.size < 0) r.dy *= -1;
5451
if (r.x > this.width) r.dx *= -1;
5552
else if (r.y > this.height) r.dy *= -1;
56-
r.el.style.left = r.x + 'px';
57-
r.el.style.top = r.y + 'px';
53+
r.el.style.left = `${r.x}px`;
54+
r.el.style.top = `${r.y}px`;
5855
}
5956

6057
this.fpsmeter.tick();

‎src/scripts/engine.js‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const getCount = (search) =>
55
.substring(1)
66
.split('&')
77
.filter((s) => s.startsWith('count='))
8-
.map((s) => parseInt(s.split('=')[1]))[0];
8+
.map((s) => Number.parseInt(s.split('=')[1]))[0];
99

1010
const getType = (search) =>
1111
search
@@ -46,10 +46,10 @@ class Engine {
4646

4747
initCountLink() {
4848
const toggleCountLinks = (count) => {
49-
this.countLinks.forEach((link) => {
49+
for (const link of this.countLinks) {
5050
link.classList.toggle('active', false);
51-
});
52-
const link = [...this.countLinks].filter((l) => l.innerText == count)[0];
51+
}
52+
const link = [...this.countLinks].filter((l) => l.innerText === count)[0];
5353
if (link) {
5454
link.classList.toggle('active', true);
5555
this.count = count;
@@ -67,7 +67,7 @@ class Engine {
6767
link.addEventListener('click', (event) => {
6868
event.preventDefault();
6969
event.stopPropagation();
70-
const count = parseInt(link.innerText);
70+
const count = Number.parseInt(link.innerText);
7171
const type = getType(search) || this.type;
7272
if (count) {
7373
if (type)
@@ -87,12 +87,10 @@ class Engine {
8787

8888
initTypeLink() {
8989
const toggleTypeLinks = (type) => {
90-
this.typeLinks.forEach((link) => {
90+
for (const link of this.typeLinks) {
9191
link.classList.toggle('active', false);
92-
});
93-
const link = [...this.typeLinks].filter(
94-
(l) => l.innerText.toLowerCase() == type
95-
)[0];
92+
}
93+
const link = [...this.typeLinks].filter((l) => l.innerText.toLowerCase() === type)[0];
9694
if (link) {
9795
link.classList.toggle('active', true);
9896
this.type = type;
@@ -134,7 +132,7 @@ class Engine {
134132
const navLinks = document.querySelectorAll('header > nav > a');
135133
const { search, pathname } = window.location;
136134

137-
[...navLinks].forEach((ml) => {
135+
for (const ml of [...navLinks]) {
138136
if (ml.pathname === pathname) ml.classList.add('active');
139137
ml.addEventListener('click', (event) => {
140138
event.preventDefault();
@@ -145,15 +143,15 @@ class Engine {
145143
if (type) href += `${count ? '&' : '?'}type=${type}`;
146144
window.location.href = href;
147145
});
148-
});
146+
}
149147
}
150148

151149
init() {
152150
this.initFpsmeter();
153151
this.initNavLink();
154152
}
155153

156-
render() {}
154+
render() { }
157155
}
158156

159157
export default Engine;

‎src/scripts/hilo.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,14 @@ import Hilo from 'hilojs';
22
import Engine from './engine.js';
33

44
class HiloEngine extends Engine {
5-
constructor() {
6-
super();
7-
}
85
init() {
96
const GraphicScene = Hilo.Class.create({
107
Extends: Hilo.Container,
118
constructor: function (properties) {
129
GraphicScene.superclass.constructor.call(this, properties);
1310
this.init(properties);
1411
},
15-
init: function (_properties) {
12+
init: (_properties) => {
1613
return;
1714
},
1815
onUpdate: function (_properties) {

0 commit comments

Comments
 (0)