Add debug settings

.eslintrc.cjs

@@ -7,6 +7,7 @@ module.exports = {
     ],
     env: {
         node: true,
+        web: true,
         es6: true
     },
     parserOptions: {

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Website in Chrome",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}/lib/static",
+            "preLaunchTask": "Build"
+        }
+    ]
+}

.vscode/settings.json

@@ -4,5 +4,9 @@
     "javascript.format.placeOpenBraceOnNewLineForFunctions": true,
     "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
     "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
-    "typescript.format.placeOpenBraceOnNewLineForFunctions": true
+    "typescript.format.placeOpenBraceOnNewLineForFunctions": true,
+    "html.format.extraLiners": "",
+    "html.format.indentInnerHtml": true,
+    "html.format.maxPreserveNewLines": 1,
+    "html.format.wrapAttributes": "preserve-aligned"
 }

.vscode/tasks.json

@@ -3,6 +3,45 @@
     // for the documentation about the tasks.json format
     "version": "2.0.0",
     "tasks": [
+        {
+            "label": "Build",
+            "type": "npm",
+            "script": "watch",
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "problemMatcher": [
+                {
+                    "owner": "gulp",
+                    "pattern": {
+                        "regexp": ""
+                    },
+                    "background": {
+                        "activeOnStart": true,
+                        "beginsPattern": {
+                            "regexp": "Starting '(?!Watch).*?'"
+                        },
+                        "endsPattern": {
+                            "regexp": "Finished '.*?'"
+                        }
+                    }
+                }
+            ],
+            "isBackground": true,
+            "presentation": {
+                "reveal": "never"
+            }
+        },
+        {
+            "label": "Rebuild",
+            "type": "npm",
+            "script": "rebuild",
+            "problemMatcher": [],
+            "presentation": {
+                "reveal": "never"
+            }
+        },
         {
             "label": "Lint",
             "type": "npm",

gulpfile.ts

@@ -3,7 +3,7 @@ import GulpClient, { TaskFunction } from "gulp";
 import path from "upath";
 import { Context } from "./gulp/Context.js";
 
-const { dest, parallel, series, src, watch } = GulpClient;
+const { dest, parallel, series, src, task, watch } = GulpClient;
 const { join } = path;
 
 const context = new Context();
@@ -119,38 +119,52 @@ function BrowserSync(syncer: BrowserSyncInstance, filePath?: string): TaskFuncti
 /**
  * Builds and watches the files for changes.
  */
-export function Watch(): void
+export let Watch: TaskFunction = async (): Promise<void> =>
 {
-    let syncer = browserSync.create();
-    Build();
+    return new Promise<void>(
+        (resolve, reject) =>
+        {
+            series(Build)(
+                (error) =>
+                {
+                    if (error)
+                    {
+                        reject(error);
+                    }
+                    else
+                    {
+                        let syncer = browserSync.create();
 
-    syncer.init({
-        open: false,
-        server: context.StaticPath(),
-        online: false
-    });
-
-    watch(
-        context.SourcePath(context.JSDirName),
-        series(
-            JavaScript,
-            BrowserSync(syncer, "*.js")));
-
-    watch(
-        context.SourcePath(context.StyleDirName, "**", "*.css"),
-        series(
-            Styles,
-            BrowserSync(syncer, "*.css")));
-
-    watch(
-        context.SourcePath(context.AssetDirName),
-        series(
-            Assets,
-            BrowserSync(syncer, join(context.AssetDirName, "**", "*"))));
-
-    watch(
-        context.SourcePath("**", "*.html"),
-        series(
-            WebPages,
-            BrowserSync(syncer, "*.html")));
+                        syncer.init({
+                            open: false,
+                            server: context.StaticPath(),
+                            online: false
+                        });
+                    
+                        watch(
+                            context.SourcePath(context.JSDirName),
+                            series(
+                                JavaScript,
+                                BrowserSync(syncer, "*.js")));
+                    
+                        watch(
+                            context.SourcePath(context.StyleDirName, "**", "*.css"),
+                            series(
+                                Styles,
+                                BrowserSync(syncer, "*.css")));
+                    
+                        watch(
+                            context.SourcePath(context.AssetDirName),
+                            series(
+                                Assets,
+                                BrowserSync(syncer, join(context.AssetDirName, "**", "*"))));
+                    
+                        watch(
+                            context.SourcePath("**", "*.html"),
+                            series(
+                                WebPages,
+                                BrowserSync(syncer, "*.html")));
+                    }
+                });
+        });
 }

src/index.html

@@ -1,13 +1,65 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Connect Four</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="./styles/style.css">
-    <script src="./js/main.js"></script>
-</head>
-<body>
-    <h1>Welcome to ConnectForce</h1>
-</body>
-</html>
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>Vier gewinnt</title>
+        <style>
+            div {
+                box-sizing: border-box;
+            }
+
+            .board {
+                width: 84vw;
+                margin: auto;
+                outline: 1px solid black;
+            }
+
+            .board .field {
+                border: 1px solid black;
+                width: 12vw;
+                height: 12vw;
+                display: none;
+            }
+
+            .board .field:first-child {
+                display: block;
+            }
+
+            .board .field .piece {
+                width: 10vw;
+                height: 10vw;
+                border-radius: 50%;
+                margin: 1vw;
+            }
+
+            .board .field .blue {
+                background-color: blue;
+            }
+
+            .board .field .red {
+                background-color: red;
+            }
+        </style>
+        <script type="module" src="./js/main.js"></script>
+    </head>
+    <body>
+        <div class="board">
+            <div class="field">
+                <div class="blue piece"></div>
+            </div>
+            <div class="field"></div>
+            <div class="field"></div>
+            <div class="field"></div>
+            <div class="field"></div>
+            <div class="field"></div>
+            <div class="field">
+                <div class="red piece"></div>
+            </div>
+            <div class="field"></div>
+            <div class="field"></div>
+            <div class="field"></div>
+            <div class="field"></div>
+            <div class="field"></div>
+        </div>
+    </body>
+</html>

src/js/elt.js

@@ -0,0 +1,39 @@
+/**
+ * Creates a new element based on the provided data.
+ *
+ * @param {string} type
+ * The type of the element to create.
+ *
+ * @param {Record<string, any>} attrs
+ * The attributes to add.
+ *
+ * @param  {...(Node | string)} children
+ * The children to add to the element.
+ *
+ * @returns {HTMLElement}
+ * The newly created element.
+ */
+export function elt(type, attrs, ...children)
+{
+    let node = document.createElement(type);
+
+    Object.keys(attrs).forEach(
+        key =>
+        {
+            node.setAttribute(key, attrs[key]);
+        });
+
+    for (let child of children)
+    {
+        if (typeof child != "string")
+        {
+            node.appendChild(child);
+        }
+        else
+        {
+            node.appendChild(document.createTextNode(child));
+        }
+    }
+
+    return node;
+}

src/js/main.js

@@ -0,0 +1,3 @@
+import { elt } from "./elt.js";
+
+elt("a", { href: "https://startpage.com/" }, "This is a test");

tsconfig.json

@@ -1,6 +1,12 @@
 {
     "extends": "./tsconfig.base.json",
     "references": [
+        {
+            "path": "./app.jsconfig.json"
+        },
+        {
+            "path": "./eslint.jsconfig.json"
+        },
         {
             "path": "./gulp.tsconfig.json"
         }