Add template files

2022-12-05 18:47:05 +01:00 · 2022-12-05 18:47:05 +01:00 · 60b29d0893
parent 411c8b3741
commit 60b29d0893
4 changed files with 108 additions and 13 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@ -7,6 +7,7 @@ module.exports = {
    ],
    env: {
        node: true,
+        web: true,
        es6: true
    },
    parserOptions: {
--- 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>
+<!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>
--- a/src/js/elt.js
+++ 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;
+}
--- 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");