Skip to content

Commit 62336cf

Browse files
532910532910
committed
add navigation
1 parent 969efea commit 62336cf

File tree

3 files changed

+96
-8
lines changed

3 files changed

+96
-8
lines changed

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@
1919
</head>
2020
<body>
2121
<canvas id="canvas"></canvas>
22+
<div class="select" id="colors"></div>
23+
<div class="select" id="tiles"></div>
2224
<script type="module" src="tile.js"></script>
2325
</body>
2426
</html>

‎main.css‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,53 @@ canvas {
3030
height: 100vh;
3131
width: 100vw;
3232
}
33+
34+
.select {
35+
position: fixed;
36+
background-color: black;
37+
/* border-radius: 32px;
38+
corner-shape: squircle;*/
39+
padding: 24px;
40+
display: flex;
41+
flex-wrap: wrap;
42+
justify-content: center;
43+
box-shadow: 0 0 16px 16px black;
44+
}
45+
46+
input[type="radio"] {
47+
appearance: none;
48+
display: inline-block;
49+
width: 8mm;
50+
height: 8mm;
51+
border: .4mm solid #aaa;
52+
border-radius: 32%;
53+
corner-shape: squircle;
54+
55+
margin-block: 0;
56+
margin-inline: 0;
57+
padding-block: 0;
58+
padding-inline: 0;
59+
margin: 8px;
60+
61+
transition:
62+
transform .5s ease-in-out,
63+
filter 1s ease-in-out;
64+
filter: brightness(60%) sepia(.4);
65+
}
66+
input[type="radio"]:checked {
67+
transform: scale(1.6);
68+
filter: unset;
69+
}
70+
71+
#tiles { top: 10%; }
72+
#colors { bottom: 10%; }
73+
74+
/* small screen */
75+
@media screen and (max-width: 15cm) {
76+
.select { width: 90%; }
77+
}
78+
79+
/* big screen */
80+
@media screen and (min-width: 15cm) {
81+
.select { width: 50%; }
82+
}

‎tile.js‎

Lines changed: 44 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@ import * as tiles from './tiles.js';
44
const tileNames = Object.keys(tiles).sort().reverse();
55
let tileIndex = 0;
66

7-
const colors = [
8-
[255,255,255], // White
9-
[255,0,0], [0,255,0], [0,0,255], // R G B
10-
[255,255,0], [255,0,255], [0,255,255], // C M Y
11-
[0,0,0] // Black
12-
];
7+
const colors = {
8+
'white': [255,255,255],
9+
'red': [255,0,0],
10+
'green': [0,255,0],
11+
'blue': [0,0,255],
12+
'cyan': [0,255,255],
13+
'magenta': [255,0,255],
14+
'yellow': [255,255,0],
15+
'black': [0,0,0],
16+
};
1317
let colorIndex = 0;
1418

1519

@@ -45,11 +49,25 @@ async function Update( tile, canvas ){
4549
canvas.width = canvas.getBoundingClientRect().width * dpr;
4650
canvas.height = canvas.getBoundingClientRect().height * dpr;
4751

48-
const bitmap = await createImageBitmap( TileToImageData( tiles[tile], colors[colorIndex] ) );
52+
const bitmap = await createImageBitmap( TileToImageData( tiles[tile], Object.values(colors)[colorIndex] ) );
4953
ctx.fillStyle = ctx.createPattern( bitmap, 'repeat' );
5054
ctx.fillRect( 0, 0, canvas.offsetWidth * dpr, canvas.offsetHeight * dpr );
5155
}
5256

57+
function fillRadios( parent, name, items, checked ){
58+
for( const i of items ){
59+
const input = document.createElement( 'input' );
60+
Object.assign( input, { type: 'radio', name: name, id: i, value: i });
61+
input.addEventListener( 'change', (e) => RadioHandler(e) );
62+
if( name === 'color' ){
63+
input.style.backgroundColor = i;
64+
} else if( name === 'tile'){
65+
}
66+
parent.appendChild( input );
67+
}
68+
document.getElementById( checked ).checked = true;
69+
}
70+
5371
let touchStart = { X: 0, Y: 0 };
5472

5573
addOnLoad( ()=>{
@@ -67,14 +85,19 @@ addOnLoad( ()=>{
6785
window.addEventListener( 'touchstart', EventHandler );
6886
window.addEventListener( 'touchend', EventHandler );
6987
window.addEventListener( 'contextmenu', EventHandler );
88+
89+
fillRadios( document.getElementById( 'colors' ), 'color', Object.keys(colors), 'white' );
90+
fillRadios( document.getElementById( 'tiles' ), 'tile', tileNames, 'tileX9' );
7091
})
7192

7293
function Color( x ){
73-
colorIndex = ( colorIndex + x + colors.length ) % colors.length;
94+
colorIndex = ( colorIndex + x + Object.values(colors).length ) % Object.values(colors).length;
95+
document.getElementById( Object.keys(colors)[colorIndex] ).checked = true;
7496
Redraw();
7597
}
7698
function Pattern( x ){
7799
tileIndex = ( tileIndex + x + tileNames.length) % tileNames.length;
100+
document.getElementById( tileNames[tileIndex] ).checked = true;
78101
Redraw();
79102
}
80103

@@ -91,6 +114,19 @@ function ToggleFullscreen(){
91114
}
92115
}
93116

117+
function RadioHandler( e ){
118+
switch( e.target.name ){
119+
case 'color':
120+
colorIndex = Object.keys(colors).indexOf( e.target.id );
121+
break;
122+
case 'tile':
123+
tileIndex = tileNames.indexOf( e.target.id );
124+
break;
125+
}
126+
const canvas = document.getElementById( 'canvas' );
127+
Update( tileNames[tileIndex], canvas );
128+
}
129+
94130
function EventHandler( e ){
95131
switch( e.type ){
96132
case 'keydown':

0 commit comments

Comments
 (0)