ChaosZone/chaoszone.cz
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[ADD] Theme3

Browse Source
This commit is contained in:
Falk Mueller
2025-10-27 22:43:17 +01:00
parent 03bcd0ad74
commit 1bbc3775b6
23 changed files with 614 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
themes/zone3/static/css/style.css Normal file
View File

@@ -0,0 +1,179 @@
:root {
--bg-color: #841205;
--hl-color: #A72119;
--menu-font-color: white;
--font-color: #430C08;
--box-bg: #ece2d5;
--main-font: 'Cubellan';
}
@font-face {
font-family: 'Cubellan';
src: url('../font/Cubellan.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
html {
font-size: 1.5rem;
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: var(--box-bg);
color: var(--font-color);
font-family: var(--main-font);
}
.container {
max-width: 60rem;
margin: 0 auto;
padding: clamp(.5rem, 2vw, 3rem);
}
section.red {
background-color: var(--bg-color);
}
main {
font-size: 1.2rem;
}
/** Header and Navigation ###################################################### **/
header {
background-color: var(--bg-color);
border-bottom: 1px solid var(--box-bg);
}
header .container {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
padding-block: clamp(.5rem, 1.5vw, 1.7rem);
}
header .logo {
flex-grow: 1;
display: block;
text-decoration: none;
font-weight: bold;
font-size: clamp(1.5rem, 4vw, 3rem);
color: var(--box-bg);
display: flex;
flex-wrap: wrap;
align-items: center;
flex-grow: 1;
justify-content: flex-start;
}
header .site-nav {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
}
.logo img {
height: 3rem;
margin: .5rem;
}
.main-menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.main-menu > li {
margin: 0;
padding: 0;
}
.main-menu > li > a {
display: block;
padding-inline: clamp(0.5em, 1.5vw, 1.5em);
padding-block: 0.2rem;
color: var(--menu-font-color);
text-decoration: none;
}
/* landscape view */
@media (orientation: portrait) {
header .logo {
justify-content:center;
}
header .site-nav {
justify-content:center;
}
}
/** footer ###################################################### **/
footer {
background-color: var(--bg-color);
color: var(--box-bg);
padding: 1rem 0;
}
footer > .container {
display: flex;
justify-content: space-between;
gap: 2rem;
}
footer > .container > div {
flex-basis: 25%;
}
footer > .container > div:last-child {
flex-basis: auto;
}
.footer-menu {
list-style: none;
margin: 0;
padding: 0;
}
.footer-menu a {
color: var(--box-bg);
text-decoration: none;
}
@media (orientation: portrait) {
footer > .container {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
}
footer > .container > div {
flex-basis: auto;
margin-bottom: 1rem;
}
}
/** other ###################################################### **/
pong-game {
width: 100%;
height: auto;
margin: 0 auto;
display: block;
}

BIN
themes/zone3/static/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
themes/zone3/static/font/Cubellan.ttf Normal file
View File

Binary file not shown.

54
themes/zone3/static/img/Chaoszone.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
themes/zone3/static/img/Chaoszone_crest.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

134
themes/zone3/static/js/script.js Normal file
View File

@@ -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);