initial commit

2022-11-24 11:10:59 +01:00
commit ef9451f59a
5 changed files with 295 additions and 0 deletions
@@ -0,0 +1,119 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Vier gewinnt</title>
+  <link rel="stylesheet" href="styles.css">
+  <script>
+
+/*
+ *  This solution sould be considered as a proof of concept – the code 
+ *  definitely needs some cleanup and documentation
+ */
+ 
+let state = {
+  board: [
+    [ '', '', '', '', '', '', '' ],
+    [ '', '', '', '', '', '', '' ],
+    [ '', '', '', '', '', '', '' ],
+    [ '', '', '', '', '', '', '' ],
+    [ '', '', '', '', '', '', '' ],
+    [ '', '', '', '', '', '', '' ]
+  ],
+  next: 'b'
+}
+
+const SERVICE = "http://localhost:3000/api/data/c4state?api-key=c4game"
+
+
+//  Initialize game
+//
+function initGame () {
+  let board = showBoard()
+  attachEventHandler(board)
+}
+
+
+//  Show board
+// 
+function showBoard () {
+  let board = document.querySelector(".board")
+
+  // first remove all fields
+  while (board.firstChild) { board.removeChild(board.firstChild) }
+
+  // ...
+  // your implementation
+  // ...
+
+  return board
+}
+
+
+//  Helper function for DOM manipulation
+// 
+function elt (type, attrs, ...children) {
+  let node = document.createElement(type)
+  for (a in attrs) {
+    node.setAttribute(a, attrs[a])
+  }
+  for (let child of children) {
+    if (typeof child != "string") node.appendChild(child)
+    else node.appendChild(document.createTextNode(child))
+  }
+  return node
+}
+
+
+//  Attach event handler to board
+//
+function attachEventHandler (board) {
+  board.addEventListener("click", (e) => {
+    
+    // ...
+    // your implementation
+    // ...
+     
+    showBoard()
+  })
+}
+
+
+//  Get current state from server and re-draw board
+//
+function loadState () {
+
+  // ...
+  // your implementation
+  // ...
+
+}
+
+//  Put current state to server
+//
+function saveState () {
+
+  // ...
+  // your implementation
+  // ...
+
+}
+
+  </script>
+
+</head>
+<body>
+
+  <div class="board"></div>
+  
+  <div class="controls">
+    <button onclick="loadState()">Load</button>
+    <button onclick="saveState()">Save</button>
+  </div>
+
+  <script>
+    initGame()
+  </script>
+
+</body>
+</html>
@@ -0,0 +1,49 @@
+@charset "UTF-8";
+
+div {
+   box-sizing: border-box;
+}
+
+.board {
+  width: 84vmin;
+  margin: auto;
+  outline: 1px solid black;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.inactive {
+  background-color: #eee;
+}
+
+.board .field {
+  border: 1px solid black;
+  width: 12vmin;
+  height: 12vmin;
+}
+
+.board .field .piece {
+  width: 10vmin;
+  height: 10vmin;
+  border-radius: 50%;
+  margin: 1vmin;
+}
+.board .field .blue {
+  background-color: blue;
+}
+.board .field .red {
+  background-color: red;
+}
+
+.controls {
+  text-align: center;
+}
+.controls button {
+  font-size: 1.5rem;
+  margin-top: 1rem;
+}
+
+.message {
+  text-align: center;
+  margin-top: 2em;
+}