From 60b29d0893f0df88e65368b4f34bfeae9a91c2d7 Mon Sep 17 00:00:00 2001
From: Manuel Thalmann <m@nuth.ch>
Date: Mon, 5 Dec 2022 18:47:05 +0100
Subject: [PATCH] Add template files

---
 .eslintrc.cjs  |  1 +
 src/index.html | 78 +++++++++++++++++++++++++++++++++++++++++---------
 src/js/elt.js  | 39 +++++++++++++++++++++++++
 src/js/main.js |  3 ++
 4 files changed, 108 insertions(+), 13 deletions(-)
 create mode 100644 src/js/elt.js

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 04ef7eb..a31d111 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -7,6 +7,7 @@ module.exports = {
     ],
     env: {
         node: true,
+        web: true,
         es6: true
     },
     parserOptions: {
diff --git a/src/index.html b/src/index.html
index 085e960..9227ccb 100644
--- a/src/index.html
+++ b/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>
\ No newline at end of file
diff --git a/src/js/elt.js b/src/js/elt.js
new file mode 100644
index 0000000..a8cc1d1
--- /dev/null
+++ b/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;
+}
diff --git a/src/js/main.js b/src/js/main.js
index e69de29..97e3c49 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -0,0 +1,3 @@
+import { elt } from "./elt.js";
+
+elt("a", { href: "https://startpage.com/" }, "This is a test");