Merge pull request #2 from mindbox-cloud/feat/add_size_update

feat: add apply size btn

Author: alexeyKorelin

src/components/sizeUpdater.ts

@@ -0,0 +1,27 @@
+interface SizeUpdaterProps {
+    onChange: (size: number) => void
+}
+export const sizeUpdater = ({ onChange }: SizeUpdaterProps) => {
+    let size = 100
+    
+    const sizeUpdater = document.createElement('div')
+    const sizeInput = document.createElement('input')
+    sizeInput.type = 'number'
+    sizeInput.value = size.toString()
+
+    sizeInput.addEventListener('change', () => {
+        size = parseInt(sizeInput.value)
+    })
+
+    sizeUpdater.appendChild(sizeInput)
+
+    const sizeApplyButton = document.createElement('button')
+    sizeApplyButton.textContent = 'Apply size'
+    sizeUpdater.appendChild(sizeApplyButton)
+
+    sizeApplyButton.addEventListener('click', () => {
+        onChange(size)
+    })
+
+    return sizeUpdater
+}

src/main.ts

@@ -1,12 +1,11 @@
+import { sizeUpdater } from './components/sizeUpdater'
 import { Board } from "./Board/Board"
 
 const container = document.getElementById('app')
 
 if (container) {
-    const sizeInput = document.createElement('input')
-    sizeInput.type = 'number'
-    sizeInput.value = '100'
-    container.appendChild(sizeInput)
+    const sizeUpdaterElement = sizeUpdater({ onChange: console.log })
+    container.appendChild(sizeUpdaterElement)
 
     const canvas = document.createElement('canvas')
     const ctx = canvas.getContext('2d') as CanvasRenderingContext2D