Implement generator classes and perlin noise with colors

templates/map.html.twig

@@ -0,0 +1,27 @@
+<style>
+    :root {
+        --pixel-size: 9px;
+        --pixel-gap: 0px;
+        --pixel-color: #000;
+    }
+
+    .map {
+        display: grid;
+        grid-template-columns: repeat(279, var(--pixel-size));
+        grid-auto-rows: var(--pixel-size);
+        grid-gap: var(--pixel-gap);
+    }
+
+    .map > div {
+        width: var(--pixel-size);
+        height: 100%;
+        grid-area: var(--y) / var(--x) / var(--y) / var(--x);
+        background-color: var(--pixel-color);
+    }
+</style>
+
+<div class="map">
+    {% for pixel in pixels %}
+        {{ pixel|raw }}
+    {% endfor %}
+</div>

templates/pixel.html.twig

@@ -0,0 +1 @@
+<div style="--x: {{ x }}; --y: {{ y }}; background: {{ color.code }}"></div>