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");