drawing lines (shift to draw multiple)

README.md

@@ -1,15 +1,22 @@
-Template Webpack Starting Project
+# Template Webpack Starting Project
 
-Will (eventually) include support for
+Includes Support For
 - [x] HTML
 - [x] Module Imports
 - [x] TypeScript
 - [x] SASS
 - [x] SASS Imports
-- [ ] React
+- [x] Image Imports
+- [x] React
 
-# Getting Started Webpack Guide:
+## Getting Started Webpack Guide:
 https://webpack.js.org/guides/getting-started/
 
-# Development Server
+## Installation
-`python -m http.server 8700`
+`npm install`
+
+## Launch Scripts
+See `makefile`
+
+## Compilation
+`make build` will compile to `dist/`

image.d.ts

@@ -0,0 +1,20 @@
+declare module '*.png' {
+    const content: string;
+    export default content;
+}
+declare module '*.svg' {
+    const content: string;
+    export default content;
+}
+declare module '*.jpg' {
+    const content: string;
+    export default content;
+}
+declare module '*.jpeg' {
+    const content: string;
+    export default content;
+}
+declare module '*.gif' {
+    const content: string;
+    export default content;
+}

package-lock.json

@@ -8,9 +8,21 @@
             "name": "test-webpack",
             "version": "1.0.0",
             "license": "ISC",
+            "dependencies": {
+                "@uidotdev/usehooks": "^2.4.1",
+                "lodash": "^4.17.21",
+                "react": "^18.2.0",
+                "react-dom": "^18.2.0"
+            },
             "devDependencies": {
+                "@types/lodash": "^4.14.202",
+                "@types/react": "^18.0.26",
+                "@types/react-dom": "^18.0.10",
                 "css-loader": "^6.7.3",
+                "file-loader": "^6.2.0",
                 "html-webpack-plugin": "^5.5.0",
+                "prettier": "^2.8.2",
+                "prettier-plugin-organize-imports": "^3.2.1",
                 "sass": "^1.57.1",
                 "sass-loader": "^13.2.0",
                 "style-loader": "^3.3.1",
@@ -202,6 +214,12 @@
             "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
             "dev": true
         },
+        "node_modules/@types/lodash": {
+            "version": "4.14.202",
+            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+            "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+            "dev": true
+        },
         "node_modules/@types/mime": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -214,6 +232,12 @@
             "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
             "dev": true
         },
+        "node_modules/@types/prop-types": {
+            "version": "15.7.5",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+            "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+            "dev": true
+        },
         "node_modules/@types/qs": {
             "version": "6.9.7",
             "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -226,12 +250,38 @@
             "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
             "dev": true
         },
+        "node_modules/@types/react": {
+            "version": "18.0.26",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
+            "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
+            "dev": true,
+            "dependencies": {
+                "@types/prop-types": "*",
+                "@types/scheduler": "*",
+                "csstype": "^3.0.2"
+            }
+        },
+        "node_modules/@types/react-dom": {
+            "version": "18.0.10",
+            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
+            "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
+            "dev": true,
+            "dependencies": {
+                "@types/react": "*"
+            }
+        },
         "node_modules/@types/retry": {
             "version": "0.12.0",
             "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
             "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
             "dev": true
         },
+        "node_modules/@types/scheduler": {
+            "version": "0.16.2",
+            "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+            "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+            "dev": true
+        },
         "node_modules/@types/serve-index": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -269,6 +319,18 @@
                 "@types/node": "*"
             }
         },
+        "node_modules/@uidotdev/usehooks": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/@uidotdev/usehooks/-/usehooks-2.4.1.tgz",
+            "integrity": "sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==",
+            "engines": {
+                "node": ">=16"
+            },
+            "peerDependencies": {
+                "react": ">=18.0.0",
+                "react-dom": ">=18.0.0"
+            }
+        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.11.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -636,6 +698,15 @@
             "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
             "dev": true
         },
+        "node_modules/big.js": {
+            "version": "5.2.2",
+            "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+            "dev": true,
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/binary-extensions": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1093,6 +1164,12 @@
                 "node": ">=4"
             }
         },
+        "node_modules/csstype": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+            "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+            "dev": true
+        },
         "node_modules/debug": {
             "version": "2.6.9",
             "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1252,6 +1329,15 @@
             "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==",
             "dev": true
         },
+        "node_modules/emojis-list": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+            "dev": true,
+            "engines": {
+                "node": ">= 4"
+            }
+        },
         "node_modules/encodeurl": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -1487,6 +1573,26 @@
                 "node": ">=0.8.0"
             }
         },
+        "node_modules/file-loader": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+            "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+            "dev": true,
+            "dependencies": {
+                "loader-utils": "^2.0.0",
+                "schema-utils": "^3.0.0"
+            },
+            "engines": {
+                "node": ">= 10.13.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/webpack"
+            },
+            "peerDependencies": {
+                "webpack": "^4.0.0 || ^5.0.0"
+            }
+        },
         "node_modules/fill-range": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -2148,6 +2254,11 @@
                 "node": ">= 10.13.0"
             }
         },
+        "node_modules/js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+        },
         "node_modules/json-parse-even-better-errors": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -2160,6 +2271,18 @@
             "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
             "dev": true
         },
+        "node_modules/json5": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+            "dev": true,
+            "bin": {
+                "json5": "lib/cli.js"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/kind-of": {
             "version": "6.0.3",
             "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -2187,6 +2310,20 @@
                 "node": ">=6.11.5"
             }
         },
+        "node_modules/loader-utils": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+            "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+            "dev": true,
+            "dependencies": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+            },
+            "engines": {
+                "node": ">=8.9.0"
+            }
+        },
         "node_modules/locate-path": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -2202,8 +2339,18 @@
         "node_modules/lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-            "dev": true
+        },
+        "node_modules/loose-envify": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+            "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+            "dependencies": {
+                "js-tokens": "^3.0.0 || ^4.0.0"
+            },
+            "bin": {
+                "loose-envify": "cli.js"
+            }
         },
         "node_modules/lower-case": {
             "version": "2.0.2",
@@ -2771,6 +2918,41 @@
             "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
             "dev": true
         },
+        "node_modules/prettier": {
+            "version": "2.8.2",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.2.tgz",
+            "integrity": "sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==",
+            "dev": true,
+            "bin": {
+                "prettier": "bin-prettier.js"
+            },
+            "engines": {
+                "node": ">=10.13.0"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
+        "node_modules/prettier-plugin-organize-imports": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.1.tgz",
+            "integrity": "sha512-bty7C2Ecard5EOXirtzeCAqj4FU4epeuWrQt/Z+sh8UVEpBlBZ3m3KNPz2kFu7KgRTQx/C9o4/TdquPD1jOqjQ==",
+            "dev": true,
+            "peerDependencies": {
+                "@volar/vue-language-plugin-pug": "^1.0.4",
+                "@volar/vue-typescript": "^1.0.4",
+                "prettier": ">=2.0",
+                "typescript": ">=2.9"
+            },
+            "peerDependenciesMeta": {
+                "@volar/vue-language-plugin-pug": {
+                    "optional": true
+                },
+                "@volar/vue-typescript": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/pretty-error": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
@@ -2875,6 +3057,29 @@
                 "node": ">= 0.8"
             }
         },
+        "node_modules/react": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+            "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
+        "node_modules/react-dom": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+            "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+            "dependencies": {
+                "loose-envify": "^1.1.0",
+                "scheduler": "^0.23.0"
+            },
+            "peerDependencies": {
+                "react": "^18.2.0"
+            }
+        },
         "node_modules/readable-stream": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -3093,6 +3298,14 @@
                 }
             }
         },
+        "node_modules/scheduler": {
+            "version": "0.23.0",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+            "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+            "dependencies": {
+                "loose-envify": "^1.1.0"
+            }
+        },
         "node_modules/schema-utils": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
@@ -4316,6 +4529,12 @@
             "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
             "dev": true
         },
+        "@types/lodash": {
+            "version": "4.14.202",
+            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+            "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+            "dev": true
+        },
         "@types/mime": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.1.tgz",
@@ -4328,6 +4547,12 @@
             "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
             "dev": true
         },
+        "@types/prop-types": {
+            "version": "15.7.5",
+            "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+            "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
+            "dev": true
+        },
         "@types/qs": {
             "version": "6.9.7",
             "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -4340,12 +4565,38 @@
             "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
             "dev": true
         },
+        "@types/react": {
+            "version": "18.0.26",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.26.tgz",
+            "integrity": "sha512-hCR3PJQsAIXyxhTNSiDFY//LhnMZWpNNr5etoCqx/iUfGc5gXWtQR2Phl908jVR6uPXacojQWTg4qRpkxTuGug==",
+            "dev": true,
+            "requires": {
+                "@types/prop-types": "*",
+                "@types/scheduler": "*",
+                "csstype": "^3.0.2"
+            }
+        },
+        "@types/react-dom": {
+            "version": "18.0.10",
+            "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
+            "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
+            "dev": true,
+            "requires": {
+                "@types/react": "*"
+            }
+        },
         "@types/retry": {
             "version": "0.12.0",
             "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
             "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
             "dev": true
         },
+        "@types/scheduler": {
+            "version": "0.16.2",
+            "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+            "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+            "dev": true
+        },
         "@types/serve-index": {
             "version": "1.9.1",
             "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
@@ -4383,6 +4634,12 @@
                 "@types/node": "*"
             }
         },
+        "@uidotdev/usehooks": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/@uidotdev/usehooks/-/usehooks-2.4.1.tgz",
+            "integrity": "sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==",
+            "requires": {}
+        },
         "@webassemblyjs/ast": {
             "version": "1.11.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.1.tgz",
@@ -4682,6 +4939,12 @@
             "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==",
             "dev": true
         },
+        "big.js": {
+            "version": "5.2.2",
+            "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+            "dev": true
+        },
         "binary-extensions": {
             "version": "2.2.0",
             "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -5022,6 +5285,12 @@
             "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
             "dev": true
         },
+        "csstype": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+            "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+            "dev": true
+        },
         "debug": {
             "version": "2.6.9",
             "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -5147,6 +5416,12 @@
             "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==",
             "dev": true
         },
+        "emojis-list": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+            "dev": true
+        },
         "encodeurl": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
@@ -5335,6 +5610,16 @@
                 "websocket-driver": ">=0.5.1"
             }
         },
+        "file-loader": {
+            "version": "6.2.0",
+            "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
+            "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+            "dev": true,
+            "requires": {
+                "loader-utils": "^2.0.0",
+                "schema-utils": "^3.0.0"
+            }
+        },
         "fill-range": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -5814,6 +6099,11 @@
                 "supports-color": "^8.0.0"
             }
         },
+        "js-tokens": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+            "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+        },
         "json-parse-even-better-errors": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
@@ -5826,6 +6116,12 @@
             "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
             "dev": true
         },
+        "json5": {
+            "version": "2.2.3",
+            "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+            "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+            "dev": true
+        },
         "kind-of": {
             "version": "6.0.3",
             "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -5844,6 +6140,17 @@
             "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
             "dev": true
         },
+        "loader-utils": {
+            "version": "2.0.4",
+            "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+            "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+            "dev": true,
+            "requires": {
+                "big.js": "^5.2.2",
+                "emojis-list": "^3.0.0",
+                "json5": "^2.1.2"
+            }
+        },
         "locate-path": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -5856,8 +6163,15 @@
         "lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-            "dev": true
+        },
+        "loose-envify": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+            "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+            "requires": {
+                "js-tokens": "^3.0.0 || ^4.0.0"
+            }
         },
         "lower-case": {
             "version": "2.0.2",
@@ -6272,6 +6586,19 @@
             "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
             "dev": true
         },
+        "prettier": {
+            "version": "2.8.2",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.2.tgz",
+            "integrity": "sha512-BtRV9BcncDyI2tsuS19zzhzoxD8Dh8LiCx7j7tHzrkz8GFXAexeWFdi22mjE1d16dftH2qNaytVxqiRTGlMfpw==",
+            "dev": true
+        },
+        "prettier-plugin-organize-imports": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.1.tgz",
+            "integrity": "sha512-bty7C2Ecard5EOXirtzeCAqj4FU4epeuWrQt/Z+sh8UVEpBlBZ3m3KNPz2kFu7KgRTQx/C9o4/TdquPD1jOqjQ==",
+            "dev": true,
+            "requires": {}
+        },
         "pretty-error": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
@@ -6356,6 +6683,23 @@
                 }
             }
         },
+        "react": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+            "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+            "requires": {
+                "loose-envify": "^1.1.0"
+            }
+        },
+        "react-dom": {
+            "version": "18.2.0",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+            "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+            "requires": {
+                "loose-envify": "^1.1.0",
+                "scheduler": "^0.23.0"
+            }
+        },
         "readable-stream": {
             "version": "3.6.0",
             "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -6490,6 +6834,14 @@
                 "neo-async": "^2.6.2"
             }
         },
+        "scheduler": {
+            "version": "0.23.0",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+            "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+            "requires": {
+                "loose-envify": "^1.1.0"
+            }
+        },
         "schema-utils": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",

package.json

@@ -10,8 +10,14 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
+        "@types/lodash": "^4.14.202",
+        "@types/react": "^18.0.26",
+        "@types/react-dom": "^18.0.10",
         "css-loader": "^6.7.3",
+        "file-loader": "^6.2.0",
         "html-webpack-plugin": "^5.5.0",
+        "prettier": "^2.8.2",
+        "prettier-plugin-organize-imports": "^3.2.1",
         "sass": "^1.57.1",
         "sass-loader": "^13.2.0",
         "style-loader": "^3.3.1",
@@ -20,5 +26,11 @@
         "webpack": "^5.75.0",
         "webpack-cli": "^5.0.1",
         "webpack-dev-server": "^4.11.1"
+    },
+    "dependencies": {
+        "@uidotdev/usehooks": "^2.4.1",
+        "lodash": "^4.17.21",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
     }
 }

src/components/app/index.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import Grid from '../grid/grid';
+
+const App: FC = () => {
+    return <Grid />;
+};
+
+export default App;

src/components/grid/grid.scss

@@ -0,0 +1,8 @@
+svg.grid {
+    font-family: monospace;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+}

src/components/grid/grid.tsx

@@ -0,0 +1,188 @@
+import { useMouse, useWindowSize } from '@uidotdev/usehooks';
+import { FC, MouseEvent, useCallback, useMemo, useState } from 'react';
+
+import './grid.scss';
+
+import * as lodash from 'lodash';
+
+interface Point {
+    x: number;
+    y: number;
+}
+
+interface Range {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+}
+
+function pointsToRange(p0: Point, p1: Point): Range {
+    return { x0: p0.x, y0: p0.y, x1: p1.x, y1: p1.y };
+}
+
+function snapToGrid(p: Point, gap: number): Point {
+    // snap a point to a grid
+    return {
+        x: gap * Math.round(p.x / gap),
+        y: gap * Math.round(p.y / gap),
+    };
+}
+
+const ORIGIN: Point = { x: 0, y: 0 };
+
+function useWindowSizeCustom() {
+    const sizeRaw = useWindowSize();
+    const size = useMemo(() => {
+        if (sizeRaw.width === null || sizeRaw.height === null) return null;
+        return { width: sizeRaw.width, height: sizeRaw.height };
+    }, [sizeRaw]);
+    return size;
+}
+
+function useRange(offset: Point): Range {
+    const windowSize = useWindowSizeCustom();
+    const range = useMemo(
+        () => ({
+            x0: offset.x,
+            y0: offset.y,
+            x1: offset.x + (windowSize?.width || 0),
+            y1: offset.y + (windowSize?.height || 0),
+        }),
+        [windowSize, offset]
+    );
+    return range;
+}
+
+function useMouseInRange(range: Range): Point {
+    const [mouse, _] = useMouse();
+    return { x: mouse.x + range.x0, y: mouse.y + range.y0 };
+}
+
+const Grid: FC = () => {
+    const [offset, setOffset] = useState<Point>(ORIGIN);
+    const range = useRange(offset);
+    const mousePoint = useMouseInRange(range);
+
+    const GAP = 20;
+
+    const gridLines = useMemo(() => {
+        const lines = [];
+        for (let x = range.x0; x <= range.x1; x += GAP) {
+            lines.push({ ...range, x0: x, x1: x });
+        }
+        for (let y = range.y0; y <= range.y1; y += GAP) {
+            lines.push({ ...range, y0: y, y1: y });
+        }
+
+        return lines;
+    }, [range, GAP]);
+
+    const [userLines, setUserLines] = useState<Range[]>([]);
+    const [userStartPoint, setUserStartPoint] = useState<Point | null>(null);
+
+    const gridLineElements = useMemo(() => {
+        return gridLines.map((line, idx) => (
+            <line
+                key={idx}
+                className="grid-line"
+                x1={line.x0}
+                y1={line.y0}
+                x2={line.x1}
+                y2={line.y1}
+                stroke="#123456"
+                strokeWidth="2"
+            />
+        ));
+    }, [gridLines]);
+
+    const userLineIndicatorElement = useMemo(() => {
+        if (lodash.isNull(userStartPoint)) return null;
+        const point = snapToGrid(mousePoint, GAP);
+        return (
+            <line
+                x1={userStartPoint.x}
+                y1={userStartPoint.y}
+                x2={point.x}
+                y2={point.y}
+                stroke="#ff0000"
+                strokeWidth="2"
+            />
+        );
+    }, [userStartPoint, mousePoint]);
+    const userPointIndicatorElement = useMemo(() => {
+        const point = snapToGrid(mousePoint, GAP);
+        return (
+            <circle
+                className="node"
+                cx={point.x}
+                cy={point.y}
+                r="3"
+                fill="#ff0000"
+            />
+        );
+    }, [userStartPoint, mousePoint]);
+
+    const userLineElements = useMemo(() => {
+        return userLines.map((line, idx) => (
+            <line
+                key={idx}
+                className="grid-line"
+                x1={line.x0}
+                y1={line.y0}
+                x2={line.x1}
+                y2={line.y1}
+                stroke="#ff0000"
+                strokeWidth="2"
+            />
+        ));
+    }, [userLines]);
+
+    const onGridClick = useCallback(
+        (event: MouseEvent<SVGSVGElement>) => {
+            console.log('grid click', event);
+            const pointRaw = { x: event.clientX, y: event.clientY };
+            const point = snapToGrid(pointRaw, GAP);
+
+            if (lodash.isEqual(userStartPoint, point)) return;
+            if (lodash.isNull(userStartPoint)) {
+                setUserStartPoint(point);
+                return;
+            }
+
+            const line = pointsToRange(userStartPoint, point);
+            setUserLines([...userLines, line]);
+
+            if (event.shiftKey == false) {
+                setUserStartPoint(null);
+            } else {
+                setUserStartPoint(point);
+            }
+        },
+        [userStartPoint, setUserStartPoint, setUserLines, GAP]
+    );
+
+    return (
+        <svg
+            className="grid"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox={`${range.x0} ${range.y0} ${range.x1} ${range.y1}`}
+            onClick={onGridClick}
+        >
+            {gridLineElements}
+            {userLineElements}
+            {userLineIndicatorElement}
+            {userPointIndicatorElement}
+            <text
+                x={range.x0 + 20}
+                y={range.y0 + 60} // of baseline
+                fill="#ffffff"
+                fontSize="40px"
+            >
+                GRID
+            </text>
+        </svg>
+    );
+};
+
+export default Grid;

src/components/portrait/index.tsx

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+
+interface PortraitProps {
+    src: string;
+}
+const Portrait: FC<PortraitProps> = (props: PortraitProps) => {
+    const { src } = props;
+    return (
+        <div>
+            Portrait <img src={src} />
+        </div>
+    );
+};
+
+export default Portrait;

src/index.html

@@ -5,5 +5,6 @@
         <title>Webpack Starter</title>
     </head>
     <body>
+        <main />
     </body>
 </html>

src/index.scss

@@ -1,4 +1,6 @@
 body {
+    margin: 0;
+    font-family: sans-serif;
     background-color: #000000;
     color: #ffffff;
 }

src/index.ts

@@ -1,14 +0,0 @@
-import { doWork } from './module';
-
-import './index.scss';
-
-function createComponent(): HTMLElement {
-    const elem = document.createElement('div');
-    elem.innerText = 'Hello, Webpack';
-    const num = doWork();
-    console.log('work gave', num);
-    return elem;
-}
-
-const elem = createComponent();
-document.body.appendChild(elem);

src/index.tsx

@@ -0,0 +1,12 @@
+import { createRoot } from 'react-dom/client';
+
+import App from './components/app';
+
+import './index.scss';
+
+const main = document.querySelector('main');
+if (main === null) {
+    throw new Error('unable to find main!');
+}
+const root = createRoot(main);
+root.render(<App />);

src/module.ts

@@ -1,4 +0,0 @@
-export function doWork(): number {
-    console.log('doing some major work right now B)');
-    return 4;
-}

tsconfig.json

@@ -4,7 +4,7 @@
         "module": "es6",
         "moduleResolution": "node",
         "target": "es5",
-        "jsx": "react",
+        "jsx": "react-jsx",
         "allowJs": false,
         "sourceMap": true,
         "experimentalDecorators": true,
@@ -20,5 +20,12 @@
         "useUnknownInCatchVariables": true,
         "alwaysStrict": true,
         "skipLibCheck": true
-    }
+    },
+    "exclude": [
+        "node_modules"
+    ],
+    "include": [
+        "src",
+        "image.d.ts"
+    ]
 }

webpack.config.js

@@ -9,7 +9,7 @@ module.exports = {
     // note: production disables the in-memory cache
     mode: 'development', // 'production',
     entry: {
-        index: relpath('src/index.ts'),
+        index: relpath('src/index.tsx'),
     },
     // enable source mapping (disable for much smaller files)
     devtool: 'inline-source-map',
@@ -67,8 +67,8 @@ module.exports = {
             },
             // image support with `import Image from './image.png'`
             {
-                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+                test: /\.(png|svg|jpe?g|gif)$/i,
-                type: 'asset/resource',
+                use: [{ loader: 'file-loader' }],
             },
         ],
     },