[ADD] chaos map

README.md

@@ -22,3 +22,5 @@ The source files for the <https://chaoszone.cz> website.
   - game of live
   - raindrop: https://experiments.p5aholic.me/day/005/
   - pong: https://designs.events.ccc.de/GPN8/GPN8-Visual.png
+  - poly play: https://www.gugeli.de/2025/08/12/poly-play-der-einzige-arcade-automat-der-ddr-und-wie-man-ihn-heute-emuliert/
+- matrix link im footer zu eigener unterseite mit beschreibung

content/_index.md

@@ -1,5 +1,5 @@
 +++
-title = 'ChaosZone'
+title = 'About'
 date = 2025-06-01T22:39:26+02:00
 draft = true
 +++

content/news/20221219_36c3.md

@@ -0,0 +1,4 @@
++++
+title = 'ChaosZone at 36C3'
+date = 2023-12-19T22:39:26+02:00
++++

content/news/20231219_37c3.md

@@ -0,0 +1,4 @@
++++
+title = 'ChaosZone goes 37c3 ~ Kombinate aller Länder vereinigt euch! ~'
+date = 2023-12-19T22:39:26+02:00
++++

content/news/20250415_Geekend.md

@@ -0,0 +1,4 @@
++++
+title = 'Halle Geekend Weekend 2025 - Review'
+date = 2025-04-15T22:39:26+02:00
++++

themes/zone3/layouts/baseof.html

@@ -14,6 +14,8 @@
     
     {{ partial "footer.html" . }}
 
+    <script src="./js/pong-game.js"></script>
+    <script src="./js/map.js"></script>
     <script src="./js/script.js"></script>
   </body>
 </html>

themes/zone3/layouts/index.html

@@ -15,8 +15,24 @@
 
 <section class="container">
   <h1>News</h1>
-  ...
+  {{ $subpage := site.GetPage "news" }}
+  {{ with $subpage.Pages }}
+  <ul class="news-list">
+    {{ range . }}
+      <li>
+        <a href="{{ .RelPermalink }}">
+          <span>{{ .Date.Format "2006-01-02" }}</span>
+          {{ .Title }}</a>
+      </li>
+    {{ end }}
+  </ul>
+  {{ end }}
 
+  <a href="#">news archiv >>></a>
+</section>
+
+<section>
+  <chaos-map></chaos-map>
 </section>
 
 {{ end }}

themes/zone3/static/css/style.css

@@ -4,7 +4,8 @@
 	--menu-font-color: white;
 	--font-color: #430C08;
 	--box-bg: #ece2d5;
-	--main-font: 'Cubellan';
+	--main-font: Arial, Helvetica, sans-serif;
+	--highlight-font: 'Cubellan';
 }
 
 @font-face {
@@ -41,7 +42,17 @@ section.red {
 }
 
 main {
-	font-size: 1.2rem;
+	font-size: clamp(1rem, 2vw, 1.2rem);
+}
+
+h1, h2, h3, h4, h5 {
+	font-family: var(--highlight-font);
+}
+
+h1 {
+	font-size: clamp(2rem, 5vw, 3.5rem);
+	margin-bottom: 0.5rem;
+	margin-top: 1rem;
 }
 
 /** Header and Navigation ###################################################### **/
@@ -49,6 +60,7 @@ main {
 header {
 	background-color: var(--bg-color);
 	border-bottom: 1px solid var(--box-bg);
+	font-family: var(--highlight-font);
 }
 
 header .container {
@@ -81,7 +93,7 @@ header .site-nav {
 }
 
 .logo img {
-	height: 3rem;
+	height: clamp(1.5rem, 4vw, 3rem);
 	margin: .5rem;
 }
 
@@ -176,4 +188,30 @@ pong-game {
 	display: block;
 }
 
+.news-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	text-decoration: none;
+}
+
+.news-list li a {
+	display: block;
+	margin-bottom: 0.5rem;
+	background-color: var(--hl-color);
+	color: var(--menu-font-color);
+	text-decoration: none;
+	padding: 0.5rem;
+}
+
+.news-list li a:hover {
+	background-color: var(--bg-color);
+}
+
+.news-list li a span {
+	display: block;
+	font-size: 0.7em;
+	margin-bottom: 0.3em;
+}
+
 

themes/zone3/static/js/map.js

@@ -0,0 +1,176 @@
+async function initMap(containerId, mapStyleUrl) {
+  return new Promise((resolve, reject) => {
+    const map = new maplibregl.Map({
+      style: mapStyleUrl,
+      center: [12.318427099380749, 51.323676093687546],
+      zoom: 7,
+      container: containerId,
+    });
+    map.on("load", () => {
+      addImages(map);
+      addEvents(map);
+      resolve(map);
+    });
+  });
+}
+
+
+async function displaySpacesLayer(spaces, map) {
+  const spaceFeatures = [];
+  const bounds = new maplibregl.LngLatBounds();
+
+  spaces.forEach((space, idx) => {
+    if (
+      !space.data ||
+      !space.data.ext_habitat ||
+      space.data.ext_habitat.toLowerCase() != "chaoszone"
+    ) {
+      return;
+    }
+
+    const open = space.data.state && space.data.state.open;
+
+    spaceFeatures.push({
+      type: "Feature",
+      properties: {
+        space: space.data,
+        icon: "custom-marker" + (open ? "-green" : ""),
+      },
+      geometry: {
+        type: "Point",
+        coordinates: [space.data.location.lon, space.data.location.lat],
+      },
+    });
+
+    bounds.extend(
+      new maplibregl.LngLat(space.data.location.lon, space.data.location.lat)
+    );
+  });
+
+  map.addSource("points", {
+    type: "geojson",
+    data: {
+      type: "FeatureCollection",
+      features: spaceFeatures,
+    },
+  });
+
+  // Add a symbol layer
+  map.addLayer({
+    id: "symbols",
+    type: "symbol",
+    source: "points",
+    filter: ["!", ["has", "point_count"]],
+    layout: {
+      "icon-image": "{icon}",
+      "icon-size": 0.4,
+      "icon-allow-overlap": true,
+    },
+  });
+
+  map.fitBounds(bounds, { padding: 100, animate: false });
+
+  map.getCanvas().style.cursor = "default";
+
+  map.scrollZoom.disable();
+}
+
+
+async function addImages(map) {
+  map
+    .loadImage("./img/marker_small_white.png?l=1")
+    .then((image) => map.addImage("custom-marker", image.data));
+  map
+    .loadImage("./img/marker_small_green.png?l=1")
+    .then((image) => map.addImage("custom-marker-green", image.data));
+}
+
+
+function addEvents(map) {
+  map.on("mouseenter", "symbols", () => {
+    map.getCanvas().style.cursor = "pointer";
+  });
+
+  map.on("mouseleave", "symbols", () => {
+    map.getCanvas().style.cursor = "default";
+  });
+
+   map.on("click", "symbols", (e) => {
+    const coordinates = e.features[0].geometry.coordinates.slice();
+    const space = JSON.parse(e.features[0].properties.space);
+    console.log(e.features[0]);
+
+    // Ensure that if the map is zoomed out such that multiple
+    // copies of the feature are visible, the popup appears
+    // over the copy being pointed to.
+    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+      coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+    }
+
+    const open = space.state && space.state.open;
+
+    let stateHtml = space.state
+      ? `<div>${open ? "geöffnet" : "gerade geschlossen"}</div>`
+      : "";
+
+    let html = `<div>
+              <div><strong>${space.space}</strong></div>
+              ${stateHtml}
+              <div><a href="${space.url}" target='_blank'>${space.url}</a></div>
+            </div>`;
+
+    new maplibregl.Popup().setLngLat(coordinates).setHTML(html).addTo(map);
+  });
+}
+
+class ChaosMap extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <link rel="stylesheet" href="https://map.chaoszone.cz/proxy/maplibre-gl/dist/maplibre-gl.css">
+            <script src="https://map.chaoszone.cz/proxy/maplibre-gl/dist/maplibre-gl.js"></script>
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    height: max(400px, 50vh);
+                    margin: 0;
+                }
+
+                #map {
+                    width: 100%;
+                    height: 100%;
+                }
+            </style>
+            <div id="map"></div>
+        `;
+
+        setTimeout(() => {
+            this.initMap();
+        }, 500);
+    }
+
+    async initMap() {
+        const map = await initMap(this.shadowRoot.getElementById('map'), './js/mapstyle.json');
+
+        // Fetch spaces data from the API
+        const response = await fetch('https://map.chaoszone.cz/spaceapi');
+        const data = await response.json();
+
+        await displaySpacesLayer(data, map);
+    }
+}
+
+const script = document.createElement('script');
+script.src = 'https://map.chaoszone.cz/proxy/maplibre-gl/dist/maplibre-gl.js';
+document.body.appendChild(script);
+
+customElements.define('chaos-map', ChaosMap);

themes/zone3/static/js/pong-game.js

@@ -0,0 +1,134 @@
+const chaoszoneArray = [
+  // Zeile 1: " ######  ##     ##    ###     #######   ######  ########  #######  ##    ## ######## "
+  [0,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1],
+  
+  // Zeile 2: "##    ## ##     ##   ## ##   ##     ## ##    ##      ##  ##     ## ###   ## ##       "
+  [1,1,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,0,0,1,1,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,1,0,0,0,0,0,1,1,0,1,1,1,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0],
+  
+  // Zeile 3: "##       ##     ##  ##   ##  ##     ## ##           ##   ##     ## ####  ## ##       "
+  [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,0,1,1,0,0,0,1,1,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,1,1,0,0,1,1,0,1,1,0,0,0,0,0,0,0],
+  
+  // Zeile 4: "##       ######### ##     ## ##     ##  ######     ##    ##     ## ## ## ## ######   "
+  [1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,0,1,1,1,1,1,1,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,0,0,0],
+  
+  // Zeile 5: "##       ##     ## ######### ##     ##       ##   ##     ##     ## ##  #### ##       "
+  [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,1,1,1,1,0,1,1,0,0,0,0,0,0,0],
+  
+  // Zeile 6: "##    ## ##     ## ##     ## ##     ## ##    ##  ##      ##     ## ##   ### ##       "
+  [1,1,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,1,1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,1,1,1,0,1,1,0,0,0,0,0,0,0],
+  
+  // Zeile 7: " ######  ##     ## ##     ##  #######   ######  ########  #######  ##    ## ######## "
+  [0,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,0,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1]
+];
+
+//register custom element
+class PongGame extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    --canvas-bg: inherit;
+                    --text-color: #ece2d5;
+                    --ball-color: #ece2d5;
+                    display: block;
+                    text-align: center;
+                    margin: 1rem 0;
+                }
+
+                :root {
+                --text-color: #ece2d5;
+                }
+
+                canvas {
+                    width: 100%;
+                    height: auto;
+                }
+            </style>
+            <canvas id="pongCanvas"></canvas>
+        `;
+
+        this.initGame();
+    }
+
+    initGame() {
+        const canvas = this.shadowRoot.getElementById('pongCanvas');
+        const ctx = canvas.getContext('2d');
+
+        console.log('Initializing Pong Game');
+
+        // set cancan inner dimanesion
+        canvas.width = 520;
+        canvas.height = 100;
+
+        // Game variables
+        let ballRadius = 2;
+        let x = canvas.width / 2;
+        let y = canvas.height - 30;
+        let dx = 2;
+        let dy = -2;
+
+        // Draw the ball
+        function draw() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.beginPath();
+            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+            ctx.fillStyle = 'var(--ball-color)';
+            ctx.fill();
+            ctx.closePath();
+
+            // Draw the ASCII art
+            ctx.font = '10px monospace';
+            ctx.fillStyle = '#ece2d5';
+            //set text color
+            for (let row = 0; row < chaoszoneArray.length; row++) {
+                for (let col = 0; col < chaoszoneArray[row].length; col++) {
+                    if (chaoszoneArray[row][col] === 1) {
+                        ctx.fillText('#', col * 6 + 10, row * 12 + 20);
+                    }
+                }
+            }
+        }
+
+        // Update the game state
+        function update() {
+            draw();
+
+            // Move the ball
+            x += dx;
+            y += dy;
+
+            // Bounce off walls
+            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
+                dx = -dx;
+            }
+            if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
+                dy = -dy;
+            }
+
+            //detect collision with ASCII art and remove part of it
+            let col = Math.floor((x - 10) / 6);
+            let row = Math.floor((y - 20) / 12);
+            if (row >= 0 && row < chaoszoneArray.length && col >= 0 && col < chaoszoneArray[row].length) {
+                if (chaoszoneArray[row][col] === 1) {
+                    chaoszoneArray[row][col] = 0;
+                    dy = -dy; //bounce the ball
+                }
+            }
+
+            requestAnimationFrame(update);
+        }
+
+        update();
+    }
+}
+
+customElements.define('pong-game', PongGame);

themes/zone3/static/js/script.js

@@ -1,134 +0,0 @@
-const chaoszoneArray = [
-  // Zeile 1: " ######  ##     ##    ###     #######   ######  ########  #######  ##    ## ######## "
-  [0,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1],
-  
-  // Zeile 2: "##    ## ##     ##   ## ##   ##     ## ##    ##      ##  ##     ## ###   ## ##       "
-  [1,1,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,0,0,1,1,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,1,1,0,0,0,0,0,0,1,1,0,0,1,1,0,0,0,0,0,1,1,0,1,1,1,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0],
-  
-  // Zeile 3: "##       ##     ##  ##   ##  ##     ## ##           ##   ##     ## ####  ## ##       "
-  [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,0,1,1,0,0,0,1,1,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,1,1,0,0,1,1,0,1,1,0,0,0,0,0,0,0],
-  
-  // Zeile 4: "##       ######### ##     ## ##     ##  ######     ##    ##     ## ## ## ## ######   "
-  [1,1,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,0,1,1,1,1,1,1,0,0,0,0,0,1,1,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,1,1,1,0,0,0],
-  
-  // Zeile 5: "##       ##     ## ######### ##     ##       ##   ##     ##     ## ##  #### ##       "
-  [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,1,0,0,0,1,1,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,1,1,1,1,0,1,1,0,0,0,0,0,0,0],
-  
-  // Zeile 6: "##    ## ##     ## ##     ## ##     ## ##    ##  ##      ##     ## ##   ### ##       "
-  [1,1,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,1,1,0,0,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,1,1,1,0,1,1,0,0,0,0,0,0,0],
-  
-  // Zeile 7: " ######  ##     ## ##     ##  #######   ######  ########  #######  ##    ## ######## "
-  [0,1,1,1,1,1,1,0,0,1,1,0,0,0,0,0,1,1,0,1,1,0,0,0,0,0,1,1,0,0,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,0,0,1,1,0,0,0,0,1,1,0,1,1,1,1,1,1,1,1]
-];
-
-//register custom element
-class PongGame extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-    }
-
-    connectedCallback() {
-        this.render();
-    }
-
-    render() {
-        this.shadowRoot.innerHTML = `
-            <style>
-                :host {
-                    --canvas-bg: inherit;
-                    --text-color: #ece2d5;
-                    --ball-color: #ece2d5;
-                    display: block;
-                    text-align: center;
-                    margin: 1rem 0;
-                }
-
-                :root {
-                --text-color: #ece2d5;
-                }
-
-                canvas {
-                    width: 100%;
-                    height: auto;
-                }
-            </style>
-            <canvas id="pongCanvas"></canvas>
-        `;
-
-        this.initGame();
-    }
-
-    initGame() {
-        const canvas = this.shadowRoot.getElementById('pongCanvas');
-        const ctx = canvas.getContext('2d');
-
-        console.log('Initializing Pong Game');
-
-        // set cancan inner dimanesion
-        canvas.width = 520;
-        canvas.height = 100;
-
-        // Game variables
-        let ballRadius = 2;
-        let x = canvas.width / 2;
-        let y = canvas.height - 30;
-        let dx = 2;
-        let dy = -2;
-
-        // Draw the ball
-        function draw() {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            ctx.beginPath();
-            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
-            ctx.fillStyle = 'var(--ball-color)';
-            ctx.fill();
-            ctx.closePath();
-
-            // Draw the ASCII art
-            ctx.font = '10px monospace';
-            ctx.fillStyle = '#ece2d5';
-            //set text color
-            for (let row = 0; row < chaoszoneArray.length; row++) {
-                for (let col = 0; col < chaoszoneArray[row].length; col++) {
-                    if (chaoszoneArray[row][col] === 1) {
-                        ctx.fillText('#', col * 6 + 10, row * 12 + 20);
-                    }
-                }
-            }
-        }
-
-        // Update the game state
-        function update() {
-            draw();
-
-            // Move the ball
-            x += dx;
-            y += dy;
-
-            // Bounce off walls
-            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
-                dx = -dx;
-            }
-            if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
-                dy = -dy;
-            }
-
-            //detect collision with ASCII art and remove part of it
-            let col = Math.floor((x - 10) / 6);
-            let row = Math.floor((y - 20) / 12);
-            if (row >= 0 && row < chaoszoneArray.length && col >= 0 && col < chaoszoneArray[row].length) {
-                if (chaoszoneArray[row][col] === 1) {
-                    chaoszoneArray[row][col] = 0;
-                    dy = -dy; //bounce the ball
-                }
-            }
-
-            requestAnimationFrame(update);
-        }
-
-        update();
-    }
-}
-
-customElements.define('pong-game', PongGame);