Make the color triangle responsive

[masakudamatsu]

Currently it's drawn as 1010px wide.

Using width: 100% in CSS does not work in this case

• The mouse position extracted as clientX and clientY will not shrink or expand

[masakudamatsu]

Idea (1): REJECTED Make the color triangle as a canvas element without rendering it Get the URL with .toDataURL method Set this URL as the srcset in <image> element.

=> No, this method doesn't work with hue changes.

[masakudamatsu]

Idea (2)

1. Store the screen width as a state & update it with the resize event
   • Use a custom hook: See https://dev.to/vitaliemaldur/resize-event-listener-using-react-hooks-1k0c
2. Pass a resolution prop to ColorTriangle component to set the image resolution
3. Change the resolution prop value by the screen width state

[masakudamatsu]

To obtain the screen width, we need to access to window.innerWidth.

But the window object is accessible only within useEffect hook in Next.js

• During SSR, it doesn't exist. It exists only on client-side rendering.

See https://stackoverflow.com/questions/55151041/window-is-not-defined-in-next-js-react-app

[masakudamatsu]

To change the resolution of the color picker by the ranges of window.innerWidth, we use the if ... else if ... else if ... pattern, not switch, for the performance reason, as described in: https://stackoverflow.com/a/12259830/11847654