color picker

src/client/canvas.ts

@@ -359,6 +359,7 @@ export class ViewCanvas {
         this._getPlacerFn(x, y).then((placer) => {
           if (placer && this._placerRequestTime === order) {
             this._showPlacerTag(placer);
+            this.picker.setPickColor(placer.color);
           }
         });
       }
@@ -386,6 +387,7 @@ export class ViewCanvas {
 
   private _resetPlacerTag(): void {
     this._placerRequestTime = 0;
+    this.picker.setPickColor(null);
     if (this._placerTag) {
       this._cursor.removeChild(this._placerTag);
       this._placerTag = null;

src/client/picker.ts

@@ -5,6 +5,7 @@ import { $ } from './utils/dom';
 export class Picker {
   private _fn?: (color: number) => void;
   private _color: number = 0x000000;
+  private _pickerColor: number | null = null;
   private _colorHistory: number[] = [];
 
   private _wrapper = $('<div class="controls__wrapper">');
@@ -16,6 +17,7 @@ export class Picker {
   private _placebtn = $('<button class="btn btn-primary btn-place">');
   private _palettebtn = $('<button class="btn btn-palette">');
   private _clearbtn = $('<button class="btn btn-palette">');
+  private _pickbtn = $('<button class="btn btn-palette">');
 
   get element() {
     return this._wrapper;
@@ -38,14 +40,17 @@ export class Picker {
     this._placebtn.innerText = 'Log in to place';
     this._palettebtn.innerText = '>>';
     this._clearbtn.innerText = 'Clear';
+    this._pickbtn.innerText = 'Pick';
     this._wrapper.append(this._content);
     this._content.append(this._colorsEl);
     this._colorsEl.append(this._colorInput);
     this._colorsEl.append(this._palettebtn);
     this._colorsEl.append(this._colorHistoryEl);
     this._colorsEl.append(this._clearbtn);
+    this._colorsEl.append(this._pickbtn);
     this._content.append(this._placebtn);
 
+    this._pickbtn.setAttribute('disabled', 'true');
     this._placebtn.setAttribute('disabled', 'true');
     this._placebtn.addEventListener('click', (ev) => {
       ev.preventDefault();
@@ -66,6 +71,13 @@ export class Picker {
       this._preserveHistory();
     });
 
+    this._pickbtn.addEventListener('click', () => {
+      if (this._pickerColor) {
+        this._setColor(this._pickerColor);
+        this._storeColor(this._pickerColor);
+      }
+    });
+
     this._colorHistory = this._getHistory();
     if (this._colorHistory.length) {
       this._setColor(this._colorHistory[0]);
@@ -86,6 +98,20 @@ export class Picker {
     this._fn = fn;
   }
 
+  public setPickColor(pickColor: number | null) {
+    if (pickColor !== null) {
+      this._pickbtn.removeAttribute('disabled');
+      this._pickbtn.classList.add('pickable');
+      this._pickbtn.style.setProperty('--pick-color', hexToString(pickColor));
+    } else if (this._pickerColor !== null && pickColor === null) {
+      console.log('aa');
+      this._pickbtn.setAttribute('disabled', 'true');
+      this._pickbtn.classList.remove('pickable');
+      this._pickbtn.style.removeProperty('--pick-color');
+    }
+    this._pickerColor = pickColor;
+  }
+
   private _setColor(color: number): void {
     this._color = color;
     this._colorInput.value = hexToString(color);

src/client/scss/index.scss

@@ -165,4 +165,16 @@ body {
     font-size: 1.4rem;
     padding: 0.5rem 1.25rem;
   }
+
+  .btn-palette.pickable {
+    &::after {
+      content: '';
+      width: 10px;
+      height: 10px;
+      margin-left: 4px;
+      margin-bottom: -1px;
+      display: inline-block;
+      background-color: var(--pick-color);
+    }
+  }
 }