so://phie

blob: 0289078add768c76a2f3d6d6918fe8096455a138 (2332 bytes)[doc][blame][raw]

 1<div id="app"></div>
 2
 3<script type="module">
 4
 5  import {useState, createElement} from 'https://cdn.skypack.dev/react';
 6  import {render} from 'https://cdn.skypack.dev/react-dom';
 7  import {figure, html, css} from '../lib.js';
 8
 9  const Range = ({index, value, setValue}) => {
10    const style = css`
11      .range input[type=range] {
12        width: 100%;
13        -webkit-appearance: none;
14      }
15
16      .range.v-${index}-${value} input[type=range]::-webkit-slider-runnable-track {
17        background-color: rgb(${Array.from([0, 0, 0], (item, i) => i === index ? value : item).join(', ')});
18        width: 100%;
19        height: 12px;
20      }
21  
22      .range input[type=range]::-webkit-slider-thumb {
23        background-color: #CCC;
24        width: 12px;
25        height: 12px;
26        -webkit-appearance: none;
27        cursor: pointer;
28      }
29    `;
30
31    return html`
32      <div class="range v-${index}-${value}">
33        ${style}
34        <input
35          type="range"
36          @change="${(event) => setValue(Number(event.target.value))}"
37          min="0"
38          max="255"
39          value="${value}"
40        >
41      </div>
42    `;
43  }
44
45  const Picker = () => {
46    const [red, setRed] = useState(255);
47    const [green, setGreen] = useState(65);
48    const [blue, setBlue] = useState(155);
49
50    const style = css`
51      .picker {
52        display: inline-flex;
53        flex-direction: column;
54        gap: 10px;
55        padding: 50px;
56      }
57  
58      .picker .preview {
59        width: 200px;
60        height: 200px;
61        background-color: rgb(${red}, ${green}, ${blue});
62      }
63  
64      .picker p {
65        margin: 0px;
66        text-align: center;
67        font-family: monospace;
68        font-size: 16px;
69      }
70    `;
71
72    const hex = (dec) => dec.toString(16).toUpperCase().padStart(2, '0');
73
74    return html`
75      <div class="picker">
76        ${style}
77        <div class="preview"></div>
78        <p>rgb(${red}, ${green}, ${blue})</p>
79        <p>#${hex(red)}${hex(green)}${hex(blue)}</p>
80        ${Range({ index: 0, value: red, setValue: setRed })}
81        ${Range({ index: 1, value: green, setValue: setGreen })}
82        ${Range({ index: 2, value: blue, setValue: setBlue })}
83      </div>
84    `;
85  }
86  
87  const app = document.querySelector('#app');
88  figure({createElement});
89  render(createElement(Picker), app);
90
91</script>