Colors work properly

Author: tapted

package.json

@@ -1,18 +1,18 @@
 {
-  "name": "newsightwords",
+  "name": "colourgrid",
   "version": "1.0.0",
-  "description": "Sight Words",
+  "description": "Colour Grid",
   "main": "index.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/tapted/newsightwords.git"
+    "url": "git+https://github.com/tapted/colourgrid.git"
   },
   "author": "",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/tapted/newsightwords/issues"
+    "url": "https://github.com/tapted/colourgrid/issues"
   },
-  "homepage": "https://github.com/tapted/newsightwords#readme",
+  "homepage": "https://github.com/tapted/colourgrid#readme",
   "dependencies": {
     "lit": "^2.7.3",
     "lit-element": "^3.3.2",

src/elements/board.ts

@@ -22,8 +22,10 @@ export class EBoard extends LitElement {
       }
       fieldset {
         border: none;
-        display: flex;
-        width: 90vw;
+        display: grid;
+        min-width: 80%;
+        max-width: 100%;
+        grid-template-columns: repeat(6, minmax(0, 1fr));
       }
       e-slider {
         width: 80vw;
@@ -40,15 +42,16 @@ export class EBoard extends LitElement {
         display: inline-block;
         background: #ddd;
         border-radius: 1em;
-        border: 1px solid grey;
+        border: 1px solid #bbb;
         border-bottom: solid 4px #bbb;
         padding: 10px;
         margin-top: 0;
         vertical-align: bottom;
         cursor: pointer;
         font-family: sans-serif;
         text-overflow: ellipsis;
-        font-size: 12px;
+        font-size: 14px;
+        font-weight: 800;
         overflow: hidden;
         whitespace: nowrap;
         margin: 4px;
@@ -68,13 +71,21 @@ export class EBoard extends LitElement {
     this.grid.size = this.slider.value;
   }
 
-  private renderColorButton(color: string) {
+  private onColorChange(color: string) {
+    this.grid.color = color;
+  }
+
+  private renderColorButton(color: string, textColor = 'black') {
     const style = {
       backgroundColor: color,
+      color: textColor,
     };
     return html`
       <label class="e-button">
-        <input type="radio" name="color-button">
+        <input
+            @change=${() => this.onColorChange(color)}
+            type="radio"
+            name="color-button">
         <span class="button-label" style=${styleMap(style)}>
           ${color}
         </span>
@@ -86,7 +97,7 @@ export class EBoard extends LitElement {
       <e-slider min=1 max=30 value=10 @slider-input=${this.onSizeChange}>
       </e-slider>
       <fieldset>
-        ${COLORS.map((c) => this.renderColorButton(c))}
+        ${COLORS.map((c) => this.renderColorButton(...c))}
       </fieldset>
       <e-grid></e-grid>
     `;

src/elements/grid.ts

@@ -3,22 +3,24 @@ import {customElement, property} from 'lit/decorators.js';
 import {html} from 'lit-html';
 import {styleMap} from 'lit-html/directives/style-map.js';
 
-export const COLORS = [
-  'white',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-  'blue',
-  'indigo',
-  'violet',
-  'grey',
-  'black',
-  'lightgrey',
+export const COLORS: Array<[string, string]> = [
+  ['white', 'black'],
+  ['red', 'black'],
+  ['orange', 'black'],
+  ['yellow', 'black'],
+  ['green', 'black'],
+  ['blue', 'black'],
+  ['indigo', 'white'],
+  ['violet', 'black'],
+  ['grey', 'black'],
+  ['black', 'white'],
+  ['lightgrey', 'black'],
+  ['cyan', 'black'],
 ];
 
 @customElement('e-grid')
 export class EGrid extends LitElement {
+  @property({attribute: false}) color = '';
   @property({attribute: false})
   get size(): number {
     return Number(this.style.getPropertyValue('--size')) || 8;
@@ -31,6 +33,8 @@ export class EGrid extends LitElement {
 
   colors: number[] = [];
 
+  private lastMoveIndex = -1;
+
   constructor() {
     super();
     this.size = 5;
@@ -43,6 +47,7 @@ export class EGrid extends LitElement {
       column-count: var(--size, 8);
       column-gap: 0;
       border: 1px solid black;
+      user-select: none;
     }
     div {
       border: 1px solid black;
@@ -53,20 +58,40 @@ export class EGrid extends LitElement {
     `;
   }
 
+  private getColorIndex(index: number): number {
+    const colorIndex = COLORS.findIndex(([c,]) => this.color == c);
+    if (colorIndex >= 0) {
+      return colorIndex;
+    }
+    return ((this.colors[index] ?? 0) + 1) % COLORS.length;
+  }
+
+  private onCellMove(event: PointerEvent, index: number) {
+    if (!event.isPrimary || index === this.lastMoveIndex) {
+      return;
+    }
+    if (event.pointerType === 'mouse' && event.buttons === 0) {
+      return;
+    }
+    this.lastMoveIndex = index;
+    this.onCellClick(index);
+  }
+
   private onCellClick(index: number) {
-    const value = ((this.colors[index] ?? 0) + 1) % COLORS.length;
-    this.colors[index] = value;
+    this.colors[index] = this.getColorIndex(index);
     this.requestUpdate();
   }
 
   private renderCell(index: number, colorIndex: number) {
     const style = {
-      backgroundColor: COLORS[colorIndex],
+      backgroundColor: COLORS[colorIndex][0],
     };
     return html`
       <div
+          @pointermove=${(e: PointerEvent) => this.onCellMove(e, index)}
           @click=${() => this.onCellClick(index)}
-          style=${styleMap(style)}></div>`;
+          style=${styleMap(style)}
+          draggable="false"></div>`;
   }
 
   override render() {