paint-by-numbers

commit

88eb1272011d2bef38b76df8f06832a5189de595

parent

7214c716e5c84054c99b16f4fccfaa5ef03ab713

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2023-02-12 19:16

display available colors

Diffstat

3 files changed, 48 insertions, 1 deletions

diff --git a/index.html b/index.html

@@ -10,6 +10,7 @@
   10    10 		<input type="file">
   11    11 	</div>
   12    12 	<canvas></canvas>
   -1    13 	<form class="palette"></form>
   13    14 	<script src="paint.js" type="module"></script>
   14    15 </body>
   15    16 </html>

diff --git a/paint.js b/paint.js

@@ -1,4 +1,5 @@
    1     1 var input = document.querySelector('input');
   -1     2 var palette = document.querySelector('.palette');
    2     3 
    3     4 var canvas = document.querySelector('canvas');
    4     5 var ctx = canvas.getContext('2d');
@@ -130,6 +131,26 @@ input.addEventListener('change', () => {
  130   131         octx.textAlign = 'center';
  131   132         octx.textBaseline = 'middle';
  132   133 
   -1   134         palette.innerHTML = '';
   -1   135         for (var i = 0; i < data.colors.length; i++) {
   -1   136             var label = document.createElement('label');
   -1   137             var radio = document.createElement('input');
   -1   138             radio.type = 'radio';
   -1   139             radio.name = 'pencil';
   -1   140             radio.value = i;
   -1   141             var span = document.createElement('span');
   -1   142             span.textContent = i;
   -1   143             label.append(radio);
   -1   144             label.append(span);
   -1   145             span.style.color = data.contrasts[i];
   -1   146             span.style.backgroundColor = data.colors[i];
   -1   147             palette.append(label);
   -1   148             radio.addEventListener('change', event => {
   -1   149                 pencil = parseInt(event.target.value, 10);
   -1   150             });
   -1   151         }
   -1   152         resizeCanvas();
   -1   153 
  133   154         zoom = canvas.height / offcanvas.height * 0.8;
  134   155         dx = (canvas.width - offcanvas.width * zoom) / 2;
  135   156         dy = (canvas.height - offcanvas.height * zoom) / 2;
@@ -209,8 +230,12 @@ window.addEventListener('keydown', event => {
  209   230         applySpeed();
  210   231     } else if (event.key === 'q') {
  211   232         pencil -= 1;
   -1   233         palette.pencil.value = pencil;
   -1   234         palette.querySelector(':checked').parentElement.scrollIntoView();
  212   235     } else if (event.key === 'e') {
  213   236         pencil += 1;
   -1   237         palette.pencil.value = pencil;
   -1   238         palette.querySelector(':checked').parentElement.scrollIntoView();
  214   239     }
  215   240     render();
  216   241 });

diff --git a/style.css b/style.css

@@ -6,7 +6,7 @@ body {
    6     6 
    7     7 body {
    8     8 	display: grid;
    9    -1 	grid-template-rows: min-content 1fr;
   -1     9 	grid-template-rows: min-content 1fr min-content;
   10    10 	height: 100vh;
   11    11 }
   12    12 
@@ -14,3 +14,24 @@ canvas {
   14    14 	width: 100%;
   15    15 	height: 100%;
   16    16 }
   -1    17 
   -1    18 .palette {
   -1    19 	overflow-x: auto;
   -1    20 	white-space: nowrap;
   -1    21 }
   -1    22 .palette input {
   -1    23 	clip: rect(0, 0, 0, 0);
   -1    24 	position: absolute;
   -1    25 }
   -1    26 .palette span {
   -1    27 	display: inline-block;
   -1    28 	border: 1px solid;
   -1    29 	text-align: center;
   -1    30 	min-width: 3em;
   -1    31 	line-height: 3;
   -1    32 	border-radius: 0.3em;
   -1    33 	margin: 0.2em;
   -1    34 }
   -1    35 .palette input:not(:checked) + span {
   -1    36 	opacity: 0.5;
   -1    37 }