[FEAT] Add the API to update the background color of a square on TypeScript challenge (#13)

Author: csouchet

README.md

@@ -62,13 +62,6 @@ If it's necessary (because the exercise is too long), no need to implement all t
     <img title="Token" src="images/token.png">
   </p>
 
-- Add a new api method that updates the background color of a square, without redrawing all the grid. \
-  It should be called with: `<library object>.updateBackgroundColor(“16”, “Pink”);` \
-  The result should be something like this:
-  <p align="center">
-    <img title="Background color" src="images/background-color.png">
-  </p>
-
 - Add a new api method that adds a handler on click on square. \
   It should be called with: `<library object>.addHandler(squareLabel, (event) => {....});`
 

images/background-color.png

@@ -22,6 +22,15 @@ The result should be something like this:
     <img title="Grid" src="../../images/grid.png">
   </p>
 
+### Update the background color of a square, without redrawing all the grid
+```javascript
+    bingo.updateBackgroundColor('36', 'Pink');
+```
+The result should be something like this:
+  <p align="center">
+    <img title="Grid" src="../../images/background-color.png">
+  </p>
+
 ## Technical part
 
 The project is configured with Jest for the tests, Playwright & Jest-image-snapshot for the visual tests, ESLint for the code formatting.

images/start_library_rendering.png

@@ -12,8 +12,13 @@ <h2>Fun starts here</h2>
 
 <section class="flex-column-container">
     <div>
-        <div id="controls-panel">
+        <div id="controls-panel" class="flex-row-container">
             <input id="btn-new-grid" type="button" title="Generate new Grid" value="New Grid" class="button"/>
+
+            <div class="flex-column-container">
+                <label id="background" for="field-update-bckgd">Update the background of this square</label>
+                <input id="field-update-bckgd" type="text" maxLength="3" placeholder="put square number"/>
+            </div>
         </div>
 
         <!-- container used to display the BINGO -->

library/ts-rollup/README.md

@@ -11,6 +11,16 @@ function startBingoApp(): Bingo {
 
 const bingo = startBingoApp();
 
+// reset grid
 document.getElementById('btn-new-grid').addEventListener('click', () => {
   bingo.resetGrid();
 });
+
+// update background
+const updateBackground = document.getElementById(
+  'field-update-bckgd',
+) as HTMLInputElement;
+updateBackground.onchange = () => {
+  bingo.updateBackgroundColor(updateBackground.value, 'Pink');
+  updateBackground.value = ''; // reset
+};

library/ts-rollup/dev/index.html

@@ -8,11 +8,16 @@
     margin-top: 75px;
 }
 
+.flex-row-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
 .info-centered {
     margin: 0 auto;
     width: 100%;
     text-align: center;
-    font-family: monospace;
 }
 
 #controls-panel {
@@ -32,8 +37,13 @@
     background-color: LightGreen;
     color: #121e12;
     font-size: small;
+    font-family: monospace;
+}
+
+body {
+    font-family: monospace;
 }
 
 label {
-    font-size: 0.65em;
+    font-size: small;
 }

library/ts-rollup/dev/index.ts

@@ -1,4 +1,5 @@
 import { BingoGraph } from './graph';
+import { mxgraph } from './initializer';
 
 const titleHeight = 70;
 
@@ -58,10 +59,11 @@ export class Bingo {
           columnsCount < columnNumber;
           columnsCount++
         ) {
+          const randomInteger = getRandomInteger();
           this.graph.insertVertex(
             grid,
-            null,
-            `${getRandomInteger()}`,
+            convertLabelToCellId(randomInteger),
+            `${randomInteger}`,
             columnsCount * columnWidth,
             (rowsCount + 1) * rowHeight - (rowHeight - titleHeight),
             columnWidth,
@@ -74,11 +76,26 @@ export class Bingo {
       this.graph.getModel().endUpdate();
     }
   }
+
+  public updateBackgroundColor(label: string, fillColor: string): void {
+    const cell = this.graph.getModel().getCell(convertLabelToCellId(label));
+    if (!cell) {
+      return;
+    }
+
+    const style = cell.getStyle();
+    const newStyle = `${style};${mxgraph.mxConstants.STYLE_FILLCOLOR}=${fillColor}`;
+    this.graph.getModel().setStyle(cell, newStyle);
+  }
 }
 
 // naive implementation, doesn't prevent duplicates in grid
-export function getRandomInteger(): number {
+function getRandomInteger(): number {
   const min = 1;
   const max = 90;
   return Math.floor(Math.random() * (max - min + 1)) + min;
 }
+
+function convertLabelToCellId(label: string | number): string {
+  return `number_${label}`;
+}