2 files changed, 88 insertions, 0 deletions
diff --git a/js/name-gen/app.js b/js/name-gen/app.js
new file mode 100644
index 0000000..b658147
--- /dev/null
+++ b/js/name-gen/app.js
@@ -0,0 +1,51 @@
+const canvas = document.getElementById('canvas');
+const ctx = canvas.getContext('2d');
+
+const syllables = ["fro", "gan", "ar", "leg", "gim", "bil", "sam", "pip", "mer", "bor", "do", "dalf", "gorn", "olas", "li", "bo", "wise", "pin", "ry", "omir"];
+
+const colors = {};
+syllables.forEach(syllable => {
+    const firstLetter = syllable.charAt(0).toLowerCase();
+    const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
+    colors[firstLetter] = randomColor;
+});
+
+const generateName = () => {
+    const nameLength = Math.floor(Math.random() * 3) + 2;
+    const nameSyllables = Array.from({ length: nameLength }, () => syllables[Math.floor(Math.random() * syllables.length)]);
+    const name = nameSyllables.join('').charAt(0).toUpperCase() + nameSyllables.join('').slice(1);
+    return { name, nameSyllables };
+};
+
+const drawName = (nameSyllables) => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const shapeColorMap = {};
+    nameSyllables.forEach((syllable, i) => {
+        let color = shapeColorMap[syllable] || (shapeColorMap[syllable] = colors[syllable.charAt(0).toLowerCase()] || 'black');
+        ctx.fillStyle = color;
+        const sides = Math.floor(Math.random() * 6) + 3;
+        const centerX = i * 70 + 50;
+        const centerY = canvas.height / 2;
+        const radius = 20;
+        const angle = (Math.PI * 2) / sides;
+        ctx.beginPath();
+        ctx.moveTo(centerX + radius * Math.cos(0), centerY + radius * Math.sin(0));
+        Array.from({ length: sides }, (_, j) => {
+            const x = centerX + radius * Math.cos(angle * (j + 1));
+            const y = centerY + radius * Math.sin(angle * (j + 1));
+            ctx.lineTo(x, y);
+        });
+        ctx.closePath();
+        ctx.fill();
+    });
+};
+
+const updateName = () => {
+    const { name, nameSyllables } = generateName();
+    document.getElementById('name').textContent = name;
+    drawName(nameSyllables);
+};
+
+document.getElementById('generate').addEventListener('click', updateName);
+
+updateName();
\ No newline at end of file
diff --git a/js/name-gen/index.html b/js/name-gen/index.html
new file mode 100644
index 0000000..d709709
--- /dev/null
+++ b/js/name-gen/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Name Generator</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        body {
+            padding: 2em;
+            font-family: sans-serif;
+            text-align: center;
+        }
+        h1 {
+            font-size: 2em;
+            margin: 0.5em 0;
+        }
+        h2 {
+            font-size: 1.5em;
+            margin: 0.5em 0;
+        }
+        button {
+            font-size: 1.5em;
+            margin: 0.5em 0;
+        }
+        canvas {
+            margin: 0.5em 0;
+        }
+    </style>
+</head>
+<body>
+    <h1>Name Generator</h1>
+    <button id="generate">Call upon a new hero</button>
+    <h2 id="name"></h2>
+    <canvas id="canvas" width="500" height="50"></canvas>
+    <script src="app.js"></script>
+</body>
+</html>
\ No newline at end of file