initial commit

2024-07-05 01:19:43 +02:00
commit 733ac3891f
43 changed files with 3660 additions and 0 deletions
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Domino Tiles</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="domino" data-top="1" data-bottom="5">
+    <div class="half top"></div>
+    <div class="half bottom"></div>
+  </div>
+
+  <div class="domino" data-top="1" data-bottom="5">
+    <div class="half top"></div>
+    <div class="half bottom"></div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
--- a/public/script.js
+++ b/public/script.js
@ -0,0 +1,35 @@
+document.querySelectorAll('.domino').forEach(domino => {
+  const topValue = domino.getAttribute('data-top');
+  const bottomValue = domino.getAttribute('data-bottom');
+
+  addPips(domino.querySelector('.top'), topValue);
+  addPips(domino.querySelector('.bottom'), bottomValue);
+});
+
+function addPips(half, value) {
+  const pipPositions = getPipPositions(value);
+  pipPositions.forEach(pos => {
+    const pip = document.createElement('div');
+    pip.className = 'pip';
+    pip.style.left = pos[0];
+    pip.style.top = pos[1];
+    half.appendChild(pip);
+  });
+}
+
+function getPipPositions(value) {
+  const p1 = '17%';
+  const p2 = '42%';
+  const p3 = '67%';
+
+  const positions = {
+    0: [],
+    1: [[p2, p2]],
+    2: [[p1, p1], [p3, p3]],
+    3: [[p1, p1], [p2, p2], [p3, p3]],
+    4: [[p1, p1], [p1, p3], [p3, p1], [p3, p3]],
+    5: [[p1, p1], [p1, p3], [p2, p2], [p3, p1], [p3, p3]],
+    6: [[p1, p1], [p1, p3], [p2, p1], [p2, p3], [p3, p1], [p3, p3]],
+  };
+  return positions[value];
+}
--- a/public/styles.css
+++ b/public/styles.css
@ -0,0 +1,77 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background: #f0f0f0;
+  font-family: Arial, sans-serif;
+}
+
+.domino {
+  width: 100px;
+  height: 200px;
+  background: white;
+  border: 2px solid black;
+  border-radius: 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.half {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.top {
+  border-bottom: 2px solid black;
+}
+
+.pip {
+  width: 15px;
+  height: 15px;
+  background: black;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.pip[data-number="1"] {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.pip[data-number="2"] {
+  left: 25%;
+  top: 25%;
+}
+
+.pip[data-number="3"] {
+  right: 25%;
+  top: 25%;
+}
+
+.pip[data-number="4"] {
+  left: 25%;
+  bottom: 25%;
+}
+
+.pip[data-number="5"] {
+  right: 25%;
+  bottom: 25%;
+}
+
+.pip[data-number="6"] {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.pip[data-number="7"] {
+  right: 50%;
+  top: 50%;
+  transform: translate(50%, -50%);
+}