Skip to content

Commit 937bf05

Browse files
bennadelbennadel
committed
WIP pixel art.
1 parent c8c3282 commit 937bf05

File tree

4 files changed

+627
-0
lines changed

4 files changed

+627
-0
lines changed

‎demos/uint8-colors/index.htm‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>
7+
Colors....
8+
</title>
9+
<link rel="stylesheet" type="text/css" href="./main.css">
10+
<script type="text/javascript" src="./palette.js" defer></script>
11+
<script type="text/javascript" src="./main.js" defer></script>
12+
<script type="text/javascript" src="../../vendor/alpine/3.13.5/alpine.3.13.5.min.js" defer></script>
13+
</head>
14+
<body>
15+
16+
<main x-data="Demo">
17+
18+
<h1>
19+
Colors....
20+
</h1>
21+
22+
<div x-ref="grid" @mouseup.window="stopDrawing()" class="grid">
23+
<template x-for="row in canvasHeight">
24+
<div class="grid-row">
25+
<template x-for="column in canvasWidth">
26+
<button
27+
:data-x="column"
28+
:data-y="row"
29+
@mousedown="startDrawing( $event )"
30+
@mouseenter="enterPixel( $event )"
31+
class="grid-pixel">
32+
</button>
33+
</template>
34+
</div>
35+
</template>
36+
</div>
37+
38+
<div class="palette">
39+
<template x-for="option in palette.swatches">
40+
<button
41+
@click="setSwatch( option )"
42+
:title="option.name"
43+
:style="{ backgroundColor: option.hex }"
44+
:class="{ 'isSelected': ( option === swatch ) }">
45+
<span x-text="option.name"></span>
46+
</button>
47+
</template>
48+
</div>
49+
50+
<dl class="selected">
51+
<div>
52+
<dt>Name:</dt>
53+
<dd x-text="swatch.name"></dd>
54+
</div>
55+
<div>
56+
<dt>Hex:</dt>
57+
<dd x-text="swatch.hex"></dd>
58+
</div>
59+
</dl>
60+
61+
<div class="tools">
62+
<button @click="clear()">
63+
Clear
64+
</button>
65+
<button @click="fill()">
66+
Fill
67+
</button>
68+
</div>
69+
70+
<div class="tuggers">
71+
<button @click="pullLeft()">
72+
Left
73+
</button>
74+
<button @click="pullRight()">
75+
Right
76+
</button>
77+
<button @click="pullUp()">
78+
Up
79+
</button>
80+
<button @click="pullDown()">
81+
Down
82+
</button>
83+
</div>
84+
85+
</main>
86+
87+
</body>
88+
</html>

‎demos/uint8-colors/main.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
*,
2+
*:before,
3+
*:after {
4+
box-sizing: border-box ;
5+
}
6+
7+
body {
8+
font-family: monospace ;
9+
font-size: 16px ;
10+
line-height: 1.4 ;
11+
}
12+
13+
main {
14+
display: flex ;
15+
flex-direction: column ;
16+
align-items: center ;
17+
gap: 30px ;
18+
}
19+
20+
.grid {
21+
background-color: #eaeaea ;
22+
display: inline-flex ;
23+
flex-direction: column ;
24+
user-select: none ;
25+
}
26+
.grid div {
27+
display: flex ;
28+
}
29+
.grid button {
30+
background-color: #fafafa ;
31+
border: 1px solid #eaeaea ;
32+
border-width: 0 1px 1px 0 ;
33+
box-sizing: content-box ;
34+
height: 26px ;
35+
margin: 0 ;
36+
padding: 0 ;
37+
width: 26px ;
38+
}
39+
.grid button:first-of-type {
40+
border-left-width: 1px ;
41+
}
42+
.grid div:first-of-type button {
43+
border-top-width: 1px ;
44+
}
45+
46+
.palette {
47+
display: flex ;
48+
flex-wrap: wrap ;
49+
width: 650px ;
50+
}
51+
.palette button {
52+
box-shadow: 0 0 1px #000000 ;
53+
border: none ;
54+
flex: 1 1 auto ;
55+
height: 30px ;
56+
width: 30px ;
57+
}
58+
.palette button.isSelected {
59+
box-shadow: 0 0 3px 5px #000000 ;
60+
outline: 2px solid #ffffff ;
61+
z-index: 2 ;
62+
}
63+
.palette button span {
64+
display: none ;
65+
}
66+
67+
.selected {
68+
display: flex ;
69+
font-size: 20px ;
70+
margin: 0 ;
71+
gap: 30px ;
72+
}
73+
.selected div {
74+
display: flex ;
75+
gap: 10px ;
76+
}
77+
.selected dt {
78+
font-weight: 700 ;
79+
margin: 0 ;
80+
}
81+
.selected dd {
82+
margin: 0 ;
83+
}
84+
85+
.tools {
86+
display: flex ;
87+
font-size: 20px ;
88+
gap: 10px ;
89+
}
90+
.tools button {
91+
background-color: #333 ;
92+
border: none ;
93+
color: #ffffff ;
94+
font: inherit ;
95+
padding: 10px 20px ;
96+
}

0 commit comments

Comments
 (0)