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