diff --git a/README.md b/README.md index 17c09d3..911841f 100644 --- a/README.md +++ b/README.md @@ -21,4 +21,6 @@ The source files for the website. - play section - game of live - raindrop: https://experiments.p5aholic.me/day/005/ - - pong: https://designs.events.ccc.de/GPN8/GPN8-Visual.png \ No newline at end of file + - 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 \ No newline at end of file diff --git a/content/_index.md b/content/_index.md index b7b40de..195b0e3 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,5 +1,5 @@ +++ -title = 'ChaosZone' +title = 'About' date = 2025-06-01T22:39:26+02:00 draft = true +++ diff --git a/content/news/20221219_36c3.md b/content/news/20221219_36c3.md new file mode 100644 index 0000000..517c74f --- /dev/null +++ b/content/news/20221219_36c3.md @@ -0,0 +1,4 @@ ++++ +title = 'ChaosZone at 36C3' +date = 2023-12-19T22:39:26+02:00 ++++ \ No newline at end of file diff --git a/content/news/20231219_37c3.md b/content/news/20231219_37c3.md new file mode 100644 index 0000000..35dd45f --- /dev/null +++ b/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 ++++ \ No newline at end of file diff --git a/content/news/20250415_Geekend.md b/content/news/20250415_Geekend.md new file mode 100644 index 0000000..f938845 --- /dev/null +++ b/content/news/20250415_Geekend.md @@ -0,0 +1,4 @@ ++++ +title = 'Halle Geekend Weekend 2025 - Review' +date = 2025-04-15T22:39:26+02:00 ++++ \ No newline at end of file diff --git a/themes/zone3/layouts/baseof.html b/themes/zone3/layouts/baseof.html index 2fc4e29..d32f029 100644 --- a/themes/zone3/layouts/baseof.html +++ b/themes/zone3/layouts/baseof.html @@ -11,9 +11,11 @@
{{ block "main" . }}{{ end }}
- + {{ partial "footer.html" . }} + + \ No newline at end of file diff --git a/themes/zone3/layouts/index.html b/themes/zone3/layouts/index.html index 0aa8967..1c6506c 100644 --- a/themes/zone3/layouts/index.html +++ b/themes/zone3/layouts/index.html @@ -15,8 +15,24 @@

News

- ... + {{ $subpage := site.GetPage "news" }} + {{ with $subpage.Pages }} + + {{ end }} + news archiv >>> +
+ +
+
{{ end }} diff --git a/themes/zone3/static/css/style.css b/themes/zone3/static/css/style.css index 93d2739..e296bf7 100644 --- a/themes/zone3/static/css/style.css +++ b/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; +} + diff --git a/themes/zone3/static/img/marker_cluster.png b/themes/zone3/static/img/marker_cluster.png new file mode 100644 index 0000000..b600d02 Binary files /dev/null and b/themes/zone3/static/img/marker_cluster.png differ diff --git a/themes/zone3/static/img/marker_small.png b/themes/zone3/static/img/marker_small.png new file mode 100644 index 0000000..4c1649a Binary files /dev/null and b/themes/zone3/static/img/marker_small.png differ diff --git a/themes/zone3/static/img/marker_small_green.png b/themes/zone3/static/img/marker_small_green.png new file mode 100644 index 0000000..2a0dbe6 Binary files /dev/null and b/themes/zone3/static/img/marker_small_green.png differ diff --git a/themes/zone3/static/img/marker_small_white.png b/themes/zone3/static/img/marker_small_white.png new file mode 100644 index 0000000..cabaa76 Binary files /dev/null and b/themes/zone3/static/img/marker_small_white.png differ diff --git a/themes/zone3/static/js/map.js b/themes/zone3/static/js/map.js new file mode 100644 index 0000000..c7d3f60 --- /dev/null +++ b/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 + ? `
${open ? "geöffnet" : "gerade geschlossen"}
` + : ""; + + let html = `
+
${space.space}
+ ${stateHtml} +
${space.url}
+
`; + + 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 = ` + + + +
+ `; + + 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); diff --git a/themes/zone3/static/js/mapstyle.json b/themes/zone3/static/js/mapstyle.json new file mode 100644 index 0000000..724488b --- /dev/null +++ b/themes/zone3/static/js/mapstyle.json @@ -0,0 +1,1618 @@ + +{ + "version": 8, + "metadata": {}, + "sources": { + "ne2_shaded": { + "maxzoom": 6, + "tileSize": 256, + "tiles": [ + "https://map.chaoszone.cz/proxy/tiles/natural_earth/ne2sr/{z}/{x}/{y}.png" + ], + "type": "raster" + }, + "openmaptiles": { + "type": "vector", + "url": "https://map.chaoszone.cz/proxy/tiles/planet" + } + }, + "sprite": "https://map.chaoszone.cz/proxy/tiles/sprites/ofm_f384/ofm", + "glyphs": "https://map.chaoszone.cz/proxy/tiles/fonts/{fontstack}/{range}.pbf", + "layers": [ + { + "id": "background", + "type": "background", + "paint": {"background-color": "rgba(251, 49, 49, 1)"} + }, + { + "id": "park", + "type": "fill", + "source": "openmaptiles", + "source-layer": "park", + "filter": [ + "match", + ["geometry-type"], + ["MultiPolygon", "Polygon"], + true, + false + ], + "paint": {"fill-color": "rgba(255, 73, 73, 1)"} + }, + { + "id": "water", + "type": "fill", + "source": "openmaptiles", + "source-layer": "water", + "filter": [ + "all", + ["match", ["geometry-type"], ["MultiPolygon", "Polygon"], true, false], + ["!=", ["get", "brunnel"], "tunnel"] + ], + "paint": {"fill-antialias": true, "fill-color": "rgba(71, 124, 140, 1)"} + }, + { + "id": "landcover_ice_shelf", + "type": "fill", + "source": "openmaptiles", + "source-layer": "landcover", + "maxzoom": 8, + "filter": [ + "all", + ["match", ["geometry-type"], ["MultiPolygon", "Polygon"], true, false], + ["==", ["get", "subclass"], "ice_shelf"] + ], + "paint": {"fill-color": "hsl(0,0%,98%)", "fill-opacity": 0.7} + }, + { + "id": "landcover_glacier", + "type": "fill", + "source": "openmaptiles", + "source-layer": "landcover", + "maxzoom": 8, + "filter": [ + "all", + ["match", ["geometry-type"], ["MultiPolygon", "Polygon"], true, false], + ["==", ["get", "subclass"], "glacier"] + ], + "paint": { + "fill-color": "hsl(0,0%,98%)", + "fill-opacity": ["interpolate", ["linear"], ["zoom"], 0, 1, 8, 0.5] + } + }, + { + "id": "landuse_residential", + "type": "fill", + "source": "openmaptiles", + "source-layer": "landuse", + "maxzoom": 16, + "filter": [ + "all", + ["match", ["geometry-type"], ["MultiPolygon", "Polygon"], true, false], + ["==", ["get", "class"], "residential"] + ], + "layout": {"visibility": "visible"}, + "paint": { + "fill-color": "rgba(166, 44, 44, 1)", + "fill-opacity": [ + "interpolate", + ["exponential", 0.6], + ["zoom"], + 8, + 0.8, + 9, + 0.6 + ] + } + }, + { + "id": "landcover_wood", + "type": "fill", + "source": "openmaptiles", + "source-layer": "landcover", + "minzoom": 10, + "filter": [ + "all", + ["match", ["geometry-type"], ["MultiPolygon", "Polygon"], true, false], + ["==", ["get", "class"], "wood"] + ], + "layout": {"visibility": "visible"}, + "paint": { + "fill-color": "rgba(115, 142, 115, 1)", + "fill-opacity": ["interpolate", ["linear"], ["zoom"], 8, 0, 12, 1] + } + }, + { + "id": "waterway", + "type": "line", + "source": "openmaptiles", + "source-layer": "waterway", + "filter": [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + "paint": {"line-color": "rgba(71, 124, 140, 1)"} + }, + { + "id": "building", + "type": "fill", + "source": "openmaptiles", + "source-layer": "building", + "minzoom": 12, + "paint": { + "fill-antialias": true, + "fill-color": "rgb(234, 234, 229)", + "fill-outline-color": "rgb(219, 219, 218)" + } + }, + { + "id": "tunnel_motorway_casing", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 6, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "all", + ["==", ["get", "brunnel"], "tunnel"], + ["==", ["get", "class"], "motorway"] + ] + ], + "layout": {"line-cap": "butt", "line-join": "miter"}, + "paint": { + "line-color": "rgb(213, 213, 213)", + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 1.4], + ["zoom"], + 5.8, + 0, + 6, + 3, + 20, + 40 + ] + } + }, + { + "id": "tunnel_motorway_inner", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 6, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "all", + ["==", ["get", "brunnel"], "tunnel"], + ["==", ["get", "class"], "motorway"] + ] + ], + "layout": {"line-cap": "round", "line-join": "round"}, + "paint": { + "line-color": "rgb(234,234,234)", + "line-width": [ + "interpolate", + ["exponential", 1.4], + ["zoom"], + 4, + 2, + 6, + 1.3, + 20, + 30 + ] + } + }, + { + "id": "aeroway-taxiway", + "type": "line", + "source": "openmaptiles", + "source-layer": "aeroway", + "minzoom": 12, + "filter": ["match", ["get", "class"], ["taxiway"], true, false], + "layout": {"line-cap": "round", "line-join": "round"}, + "paint": { + "line-color": "hsl(0,0%,88%)", + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 1.55], + ["zoom"], + 13, + 1.8, + 20, + 20 + ] + } + }, + { + "id": "aeroway-runway-casing", + "type": "line", + "source": "openmaptiles", + "source-layer": "aeroway", + "minzoom": 11, + "filter": ["match", ["get", "class"], ["runway"], true, false], + "layout": {"line-cap": "round", "line-join": "round"}, + "paint": { + "line-color": "hsl(0,0%,88%)", + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 11, + 6, + 17, + 55 + ] + } + }, + { + "id": "aeroway-area", + "type": "fill", + "source": "openmaptiles", + "source-layer": "aeroway", + "minzoom": 4, + "filter": [ + "all", + ["match", ["geometry-type"], ["MultiPolygon", "Polygon"], true, false], + ["match", ["get", "class"], ["runway", "taxiway"], true, false] + ], + "paint": { + "fill-color": "rgba(255, 255, 255, 1)", + "fill-opacity": ["interpolate", ["linear"], ["zoom"], 13, 0, 14, 1] + } + }, + { + "id": "aeroway-runway", + "type": "line", + "source": "openmaptiles", + "source-layer": "aeroway", + "minzoom": 11, + "filter": [ + "all", + ["match", ["get", "class"], ["runway"], true, false], + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ] + ], + "layout": {"line-cap": "round", "line-join": "round"}, + "paint": { + "line-color": "rgba(255, 255, 255, 1)", + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 1.5], + ["zoom"], + 11, + 4, + 17, + 50 + ] + } + }, + { + "id": "road_area_pier", + "type": "fill", + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + ["match", ["geometry-type"], ["MultiPolygon", "Polygon"], true, false], + ["==", ["get", "class"], "pier"] + ], + "layout": {"visibility": "visible"}, + "paint": {"fill-antialias": true, "fill-color": "rgb(242,243,240)"} + }, + { + "id": "road_pier", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + ["match", ["get", "class"], ["pier"], true, false] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "rgb(242,243,240)", + "line-width": [ + "interpolate", + ["exponential", 1.2], + ["zoom"], + 15, + 1, + 17, + 4 + ] + } + }, + { + "id": "highway_path", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + ["==", ["get", "class"], "path"] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "rgb(234, 234, 234)", + "line-opacity": 0.9, + "line-width": [ + "interpolate", + ["exponential", 1.2], + ["zoom"], + 13, + 1, + 20, + 10 + ] + } + }, + { + "id": "highway_minor", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 8, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + ["match", ["get", "class"], ["minor", "service", "track"], true, false] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "hsl(0,0%,88%)", + "line-opacity": 0.9, + "line-width": [ + "interpolate", + ["exponential", 1.55], + ["zoom"], + 13, + 1.8, + 20, + 20 + ] + } + }, + { + "id": "highway_major_casing", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 11, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "match", + ["get", "class"], + ["primary", "secondary", "tertiary", "trunk"], + true, + false + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgb(213, 213, 213)", + "line-dasharray": [12, 0], + "line-width": [ + "interpolate", + ["exponential", 1.3], + ["zoom"], + 10, + 3, + 20, + 23 + ] + } + }, + { + "id": "highway_major_inner", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 11, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "match", + ["get", "class"], + ["primary", "secondary", "tertiary", "trunk"], + true, + false + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": { + "line-color": "#fff", + "line-width": [ + "interpolate", + ["exponential", 1.3], + ["zoom"], + 10, + 2, + 20, + 20 + ] + } + }, + { + "id": "highway_major_subtle", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "maxzoom": 11, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "match", + ["get", "class"], + ["primary", "secondary", "tertiary", "trunk"], + true, + false + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "visible" + }, + "paint": {"line-color": "rgba(197, 0, 0, 0.74)", "line-width": 2} + }, + { + "id": "highway_motorway_casing", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 6, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "all", + ["match", ["get", "brunnel"], ["bridge", "tunnel"], false, true], + ["==", ["get", "class"], "motorway"] + ] + ], + "layout": { + "line-cap": "butt", + "line-join": "miter", + "visibility": "visible" + }, + "paint": { + "line-color": "rgba(197, 0, 0, 1)", + "line-dasharray": [2, 0], + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 1.4], + ["zoom"], + 5.8, + 0, + 6, + 3, + 20, + 40 + ] + } + }, + { + "id": "highway_motorway_inner", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 6, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "all", + ["match", ["get", "brunnel"], ["bridge", "tunnel"], false, true], + ["==", ["get", "class"], "motorway"] + ] + ], + "layout": { + "line-cap": "round", + "line-join": "round", + "visibility": "none" + }, + "paint": { + "line-color": [ + "interpolate", + ["linear"], + ["zoom"], + 5.8, + "rgba(197, 0, 0, 1)", + 6, + "#fff" + ], + "line-width": [ + "interpolate", + ["exponential", 1.4], + ["zoom"], + 4, + 2, + 6, + 1.3, + 20, + 30 + ] + } + }, + { + "id": "highway_motorway_subtle", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "maxzoom": 6, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + ["==", ["get", "class"], "motorway"] + ], + "layout": {"line-cap": "round", "line-join": "round"}, + "paint": { + "line-color": "hsla(0,0%,85%,0.53)", + "line-width": [ + "interpolate", + ["exponential", 1.4], + ["zoom"], + 4, + 2, + 6, + 1.3 + ] + } + }, + { + "id": "railway_transit", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 16, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "all", + ["==", ["get", "class"], "transit"], + ["match", ["get", "brunnel"], ["tunnel"], false, true] + ] + ], + "layout": {"line-join": "round"}, + "paint": {"line-color": "#dddddd", "line-width": 3} + }, + { + "id": "railway_transit_dashline", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 16, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "all", + ["==", ["get", "class"], "transit"], + ["match", ["get", "brunnel"], ["tunnel"], false, true] + ] + ], + "layout": {"line-join": "round"}, + "paint": { + "line-color": "#fafafa", + "line-dasharray": [3, 3], + "line-width": 2 + } + }, + { + "id": "railway_service", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 16, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + ["all", ["==", ["get", "class"], "rail"], ["has", "service"]] + ], + "layout": {"line-join": "round"}, + "paint": {"line-color": "#dddddd", "line-width": 3} + }, + { + "id": "railway_service_dashline", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 16, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + ["==", ["get", "class"], "rail"], + ["has", "service"] + ], + "layout": {"line-join": "round"}, + "paint": { + "line-color": "#fafafa", + "line-dasharray": [3, 3], + "line-width": 2 + } + }, + { + "id": "railway", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 13, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + ["all", ["!", ["has", "service"]], ["==", ["get", "class"], "rail"]] + ], + "layout": {"line-join": "round"}, + "paint": { + "line-color": "#dddddd", + "line-width": [ + "interpolate", + ["exponential", 1.3], + ["zoom"], + 16, + 3, + 20, + 7 + ] + } + }, + { + "id": "railway_dashline", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 13, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + ["all", ["!", ["has", "service"]], ["==", ["get", "class"], "rail"]] + ], + "layout": {"line-join": "round"}, + "paint": { + "line-color": "#fafafa", + "line-dasharray": [3, 3], + "line-width": [ + "interpolate", + ["exponential", 1.3], + ["zoom"], + 16, + 2, + 20, + 6 + ] + } + }, + { + "id": "highway_motorway_bridge_casing", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 6, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "all", + ["==", ["get", "brunnel"], "bridge"], + ["==", ["get", "class"], "motorway"] + ] + ], + "layout": {"line-cap": "butt", "line-join": "miter"}, + "paint": { + "line-color": "rgb(213, 213, 213)", + "line-dasharray": [2, 0], + "line-opacity": 1, + "line-width": [ + "interpolate", + ["exponential", 1.4], + ["zoom"], + 5.8, + 0, + 6, + 5, + 20, + 45 + ] + } + }, + { + "id": "highway_motorway_bridge_inner", + "type": "line", + "source": "openmaptiles", + "source-layer": "transportation", + "minzoom": 6, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "all", + ["==", ["get", "brunnel"], "bridge"], + ["==", ["get", "class"], "motorway"] + ] + ], + "layout": {"line-cap": "round", "line-join": "round"}, + "paint": { + "line-color": [ + "interpolate", + ["linear"], + ["zoom"], + 5.8, + "hsla(0,0%,85%,0.53)", + 6, + "#fff" + ], + "line-width": [ + "interpolate", + ["exponential", 1.4], + ["zoom"], + 4, + 2, + 6, + 1.3, + 20, + 30 + ] + } + }, + { + "id": "boundary_3", + "type": "line", + "source": "openmaptiles", + "source-layer": "boundary", + "minzoom": 0, + "filter": [ + "all", + [">=", ["get", "admin_level"], 3], + ["<=", ["get", "admin_level"], 6], + ["!=", ["get", "maritime"], 1], + ["!=", ["get", "disputed"], 1], + ["!", ["has", "claimed_by"]] + ], + "paint": { + "line-color": "hsl(0,0%,70%)", + "line-opacity": ["interpolate", ["linear"], ["zoom"], 0, 0.4, 4, 1], + "line-width": ["interpolate", ["linear"], ["zoom"], 3, 1, 5, 1.2, 12, 3] + } + }, + { + "id": "boundary_2", + "type": "line", + "source": "openmaptiles", + "source-layer": "boundary", + "filter": [ + "all", + ["==", ["get", "admin_level"], 2], + ["!=", ["get", "maritime"], 1], + ["!=", ["get", "disputed"], 1], + ["!", ["has", "claimed_by"]] + ], + "layout": {"line-cap": "round", "line-join": "round"}, + "paint": { + "line-color": "hsl(0,0%,70%)", + "line-opacity": ["interpolate", ["linear"], ["zoom"], 0, 0.4, 4, 1], + "line-width": ["interpolate", ["linear"], ["zoom"], 3, 1, 5, 6.2, 12, 3] + } + }, + { + "id": "boundary_disputed", + "type": "line", + "source": "openmaptiles", + "source-layer": "boundary", + "filter": [ + "all", + ["!=", ["get", "maritime"], 1], + ["==", ["get", "disputed"], 1] + ], + "paint": { + "line-color": "hsl(0,0%,70%)", + "line-dasharray": [1, 2], + "line-width": ["interpolate", ["linear"], ["zoom"], 3, 1, 5, 1.2, 12, 3] + } + }, + { + "id": "waterway_line_label", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "waterway", + "minzoom": 10, + "filter": [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + "layout": { + "symbol-placement": "line", + "symbol-spacing": 350, + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], " ", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Italic"], + "text-letter-spacing": 0.2, + "text-max-width": 5, + "text-size": 14 + }, + "paint": { + "text-color": "hsl(0,0%,66%)", + "text-halo-color": "rgba(255,255,255,0.7)", + "text-halo-width": 1.5 + } + }, + { + "id": "water_name_point_label", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "water_name", + "filter": [ + "match", + ["geometry-type"], + ["MultiPoint", "Point"], + true, + false + ], + "layout": { + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], "\n", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Italic"], + "text-letter-spacing": 0.2, + "text-max-width": 5, + "text-size": ["interpolate", ["linear"], ["zoom"], 0, 10, 8, 14] + }, + "paint": { + "text-color": "#495e91", + "text-halo-color": "rgba(255,255,255,0.7)", + "text-halo-width": 1.5 + } + }, + { + "id": "water_name_line_label", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "water_name", + "filter": [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + "layout": { + "symbol-placement": "line", + "symbol-spacing": 350, + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], " ", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Italic"], + "text-letter-spacing": 0.2, + "text-max-width": 5, + "text-size": 14 + }, + "paint": { + "text-color": "#495e91", + "text-halo-color": "rgba(255,255,255,0.7)", + "text-halo-width": 1.5 + } + }, + { + "id": "highway-name-path", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 15.5, + "filter": ["==", ["get", "class"], "path"], + "layout": { + "symbol-placement": "line", + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], " ", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Regular"], + "text-rotation-alignment": "map", + "text-size": ["interpolate", ["linear"], ["zoom"], 13, 12, 14, 13] + }, + "paint": { + "text-color": "hsl(30,0%,62%)", + "text-halo-color": "#f8f4f0", + "text-halo-width": 0.5 + } + }, + { + "id": "highway-name-minor", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 15, + "filter": [ + "all", + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + ["match", ["get", "class"], ["minor", "service", "track"], true, false] + ], + "layout": { + "symbol-placement": "line", + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], " ", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Regular"], + "text-rotation-alignment": "map", + "text-size": ["interpolate", ["linear"], ["zoom"], 13, 12, 14, 13] + }, + "paint": { + "text-color": "#666", + "text-halo-blur": 0.5, + "text-halo-width": 1 + } + }, + { + "id": "highway-name-major", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 12.2, + "filter": [ + "match", + ["get", "class"], + ["primary", "secondary", "tertiary", "trunk"], + true, + false + ], + "layout": { + "symbol-placement": "line", + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], " ", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Regular"], + "text-rotation-alignment": "map", + "text-size": ["interpolate", ["linear"], ["zoom"], 13, 12, 14, 13] + }, + "paint": { + "text-color": "#666", + "text-halo-blur": 0.5, + "text-halo-width": 1 + } + }, + { + "id": "highway-shield-non-us", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 11, + "filter": [ + "all", + ["<=", ["get", "ref_length"], 6], + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + [ + "match", + ["get", "network"], + ["us-highway", "us-interstate", "us-state"], + false, + true + ] + ], + "layout": { + "icon-image": ["concat", "road_", ["get", "ref_length"]], + "icon-rotation-alignment": "viewport", + "icon-size": 1, + "symbol-placement": ["step", ["zoom"], "point", 11, "line"], + "symbol-spacing": 200, + "text-field": ["to-string", ["get", "ref"]], + "text-font": ["Noto Sans Regular"], + "text-rotation-alignment": "viewport", + "text-size": 10 + } + }, + { + "id": "highway-shield-us-interstate", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 11, + "filter": [ + "all", + ["<=", ["get", "ref_length"], 6], + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + ["match", ["get", "network"], ["us-interstate"], true, false] + ], + "layout": { + "icon-image": [ + "concat", + ["get", "network"], + "_", + ["get", "ref_length"] + ], + "icon-rotation-alignment": "viewport", + "icon-size": 1, + "symbol-placement": ["step", ["zoom"], "point", 7, "line", 8, "line"], + "symbol-spacing": 200, + "text-field": ["to-string", ["get", "ref"]], + "text-font": ["Noto Sans Regular"], + "text-rotation-alignment": "viewport", + "text-size": 10 + } + }, + { + "id": "road_shield_us", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "transportation_name", + "minzoom": 12, + "filter": [ + "all", + ["<=", ["get", "ref_length"], 6], + [ + "match", + ["geometry-type"], + ["LineString", "MultiLineString"], + true, + false + ], + ["match", ["get", "network"], ["us-highway", "us-state"], true, false] + ], + "layout": { + "icon-image": [ + "concat", + ["get", "network"], + "_", + ["get", "ref_length"] + ], + "icon-rotation-alignment": "viewport", + "icon-size": 1, + "symbol-placement": ["step", ["zoom"], "point", 11, "line"], + "symbol-spacing": 200, + "text-field": ["to-string", ["get", "ref"]], + "text-font": ["Noto Sans Regular"], + "text-rotation-alignment": "viewport", + "text-size": 10 + } + }, + { + "id": "airport", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "aerodrome_label", + "minzoom": 11, + "filter": ["all", ["has", "iata"]], + "layout": { + "icon-image": "airport_11", + "icon-size": 1, + "text-anchor": "top", + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], "\n", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Regular"], + "text-max-width": 9, + "text-offset": [0, 0.6], + "text-optional": true, + "text-padding": 2, + "text-size": 12 + }, + "paint": { + "text-color": "#666", + "text-halo-blur": 0.5, + "text-halo-color": "#ffffff", + "text-halo-width": 1 + } + }, + { + "id": "label_other", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "place", + "minzoom": 8, + "filter": [ + "match", + ["get", "class"], + ["city", "continent", "country", "state", "town", "village"], + false, + true + ], + "layout": { + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], "\n", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Italic"], + "text-letter-spacing": 0.1, + "text-max-width": 9, + "text-size": ["interpolate", ["linear"], ["zoom"], 8, 9, 12, 10], + "text-transform": "uppercase", + "visibility": "visible" + }, + "paint": { + "text-color": "#333", + "text-halo-blur": 1, + "text-halo-color": "#fff", + "text-halo-width": 1 + } + }, + { + "id": "label_village", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "place", + "minzoom": 9, + "filter": ["==", ["get", "class"], "village"], + "layout": { + "icon-allow-overlap": true, + "icon-image": ["step", ["zoom"], "circle_11_black", 10, ""], + "icon-optional": false, + "icon-size": 0.2, + "text-anchor": "bottom", + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], "\n", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Regular"], + "text-max-width": 8, + "text-size": [ + "interpolate", + ["exponential", 1.2], + ["zoom"], + 7, + 10, + 11, + 12 + ], + "visibility": "visible" + }, + "paint": { + "text-color": "#000", + "text-halo-blur": 1, + "text-halo-color": "#fff", + "text-halo-width": 1 + } + }, + { + "id": "label_town", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "place", + "minzoom": 6, + "filter": ["==", ["get", "class"], "town"], + "layout": { + "icon-allow-overlap": true, + "icon-image": ["step", ["zoom"], "circle_11_black", 10, ""], + "icon-optional": false, + "icon-size": 0.2, + "text-anchor": "bottom", + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], "\n", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Regular"], + "text-max-width": 8, + "text-size": [ + "interpolate", + ["exponential", 1.2], + ["zoom"], + 7, + 12, + 11, + 14 + ], + "visibility": "visible" + }, + "paint": { + "text-color": "rgba(255, 255, 255, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(0, 0, 0, 1)", + "text-halo-width": 1 + } + }, + { + "id": "label_state", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "place", + "minzoom": 5, + "maxzoom": 8, + "filter": ["==", ["get", "class"], "state"], + "layout": { + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], "\n", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Italic"], + "text-letter-spacing": 0.2, + "text-max-width": 9, + "text-size": ["interpolate", ["linear"], ["zoom"], 5, 10, 8, 14], + "text-transform": "uppercase", + "visibility": "none" + }, + "paint": { + "text-color": "#333", + "text-halo-blur": 1, + "text-halo-color": "#fff", + "text-halo-width": 1 + } + }, + { + "id": "label_city", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "place", + "minzoom": 3, + "filter": [ + "all", + ["==", ["get", "class"], "city"], + ["!=", ["get", "capital"], 2] + ], + "layout": { + "icon-allow-overlap": true, + "icon-image": ["step", ["zoom"], "circle_11_black", 9, ""], + "icon-optional": false, + "icon-size": 0.4, + "text-anchor": "bottom", + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], "\n", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Regular"], + "text-max-width": 8, + "text-offset": [0, -0.1], + "text-size": [ + "interpolate", + ["exponential", 1.2], + ["zoom"], + 4, + 11, + 7, + 13, + 11, + 18 + ] + }, + "paint": { + "text-color": "rgba(255, 255, 255, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(2, 2, 2, 1)", + "text-halo-width": 1 + } + }, + { + "id": "label_city_capital", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "place", + "minzoom": 3, + "filter": [ + "all", + ["==", ["get", "class"], "city"], + ["==", ["get", "capital"], 2] + ], + "layout": { + "icon-allow-overlap": true, + "icon-image": ["step", ["zoom"], "circle_11_black", 9, ""], + "icon-optional": false, + "icon-size": 0.5, + "text-anchor": "bottom", + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], "\n", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Bold"], + "text-max-width": 8, + "text-offset": [0, -0.2], + "text-size": [ + "interpolate", + ["exponential", 1.2], + ["zoom"], + 4, + 12, + 7, + 14, + 11, + 20 + ], + "visibility": "visible" + }, + "paint": { + "text-color": "rgba(255, 255, 255, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(0, 0, 0, 1)", + "text-halo-width": 1 + } + }, + { + "id": "label_country_3", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "place", + "minzoom": 2, + "maxzoom": 24, + "filter": [ + "all", + ["==", ["get", "class"], "country"], + [">=", ["get", "rank"], 3] + ], + "layout": { + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], "\n", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Bold"], + "text-max-width": 6.25, + "text-size": ["interpolate", ["linear"], ["zoom"], 3, 9, 7, 17], + "visibility": "visible" + }, + "paint": { + "text-color": "#000", + "text-halo-blur": 1, + "text-halo-color": "#fff", + "text-halo-width": 1 + } + }, + { + "id": "label_country_2", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "place", + "maxzoom": 9, + "filter": [ + "all", + ["==", ["get", "class"], "country"], + ["==", ["get", "rank"], 2] + ], + "layout": { + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], "\n", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Bold"], + "text-max-width": 6.25, + "text-size": ["interpolate", ["linear"], ["zoom"], 2, 9, 5, 17], + "visibility": "visible" + }, + "paint": { + "text-color": "#000", + "text-halo-blur": 1, + "text-halo-color": "#fff", + "text-halo-width": 1 + } + }, + { + "id": "label_country_1", + "type": "symbol", + "source": "openmaptiles", + "source-layer": "place", + "maxzoom": 9, + "filter": [ + "all", + ["==", ["get", "class"], "country"], + ["==", ["get", "rank"], 1] + ], + "layout": { + "text-field": [ + "case", + ["has", "name:nonlatin"], + ["concat", ["get", "name:latin"], "\n", ["get", "name:nonlatin"]], + ["coalesce", ["get", "name_en"], ["get", "name"]] + ], + "text-font": ["Noto Sans Bold"], + "text-max-width": 6.25, + "text-size": ["interpolate", ["linear"], ["zoom"], 1, 9, 4, 17], + "visibility": "visible" + }, + "paint": { + "text-color": "rgba(255, 255, 255, 1)", + "text-halo-blur": 1, + "text-halo-color": "rgba(0, 0, 0, 1)", + "text-halo-width": 1 + } + } + ], + "id": "zquzkz0me" +} \ No newline at end of file diff --git a/themes/zone3/static/js/pong-game.js b/themes/zone3/static/js/pong-game.js new file mode 100644 index 0000000..c7709b7 --- /dev/null +++ b/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 = ` + + + `; + + 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); \ No newline at end of file diff --git a/themes/zone3/static/js/script.js b/themes/zone3/static/js/script.js index c7709b7..e69de29 100644 --- a/themes/zone3/static/js/script.js +++ b/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 = ` - - - `; - - 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); \ No newline at end of file