manuth/ConnectForce
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Add template files

Browse source
This commit is contained in:
Manuel Thalmann 2022-12-05 18:47:05 +01:00
parent 411c8b3741
commit 60b29d0893
4 changed files with 108 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.eslintrc.cjs
View file

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

76
src/index.html
View file

@ -1,13 +1,65 @@
<!DOCTYPE html> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="UTF-8">
<title>Connect Four</title> <title>Vier gewinnt</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <style>
<link rel="stylesheet" type="text/css" href="./styles/style.css"> div {
<script src="./js/main.js"></script> box-sizing: border-box;
</head> }
<body>
<h1>Welcome to ConnectForce</h1> .board {
</body> 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> </html>

39
src/js/elt.js Normal file
View file

@ -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;
}

3
src/js/main.js
View file

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