Skip to content
Snippets Groups Projects
Commit 07a8a581 authored by Jan Bernoth's avatar Jan Bernoth
Browse files

Added a gallery for all icons

parent 5d94ebf4
No related branches found
No related tags found
No related merge requests found
Pipeline #98330 passed
Stage: build
Stage: deploy
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 2994 additions and 85 deletions
game/css/styles.css
+ 26
− 0
View file @ 07a8a581
......@@ -50,4 +50,30 @@ h1 {
.responsive-image {
max-width: 100%;
height: auto;
}
.gallery-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.svg-image {
max-width: 100px;
max-height: 100px;
}
.gallery-link {
display: block;
margin-top: 20px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: #1a1a1a;
text-decoration: none;
}
.gallery-link:hover {
color: #00a8cc;
text-decoration: underline;
}
\ No newline at end of file
game/gallery.html 0 → 100644
+ 20
− 0
View file @ 07a8a581
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav>
<a href="index.html">Zurück zur Startseite</a>
</nav>
<h1>Gallery</h1>
<div class="container">
<div id="gallery" class="gallery-container"></div>
<script src="./js/gallery.js"></script>
</div>
</body>
</html>
game/game.html
+ 3
− 0
View file @ 07a8a581
......@@ -12,6 +12,9 @@
<a href="index.html">Zurück zur Startseite</a>
</nav>
<h1>Game Seite</h1>
<!-- Link zur gallery.html Seite -->
<a href="gallery.html">Zur Galerie</a>
<div class="container">
<script src="js/game.js"></script>
......
game/icons/2023/bubble_tea.svg 0 → 100644
+ 125
− 0
View file @ 07a8a581
Source diff could not be displayed: it is too large. Options to address this: view the blob.
game/icons/2023/faultier.svg 0 → 100644
+ 719
− 0
View file @ 07a8a581
This diff is collapsed.
game/icons/2023/henry_k..svg 0 → 100644
+ 293
− 0
View file @ 07a8a581
This diff is collapsed.
game/icons/2023/kuro_servamp.svg 0 → 100644
+ 1627
− 0
View file @ 07a8a581
This diff is collapsed.
game/index.html
+ 1
− 0
View file @ 07a8a581
......@@ -26,6 +26,7 @@
<a class="year-links" href="game.html?year=2022">2022</a> |
<a class="year-links" href="game.html?year=2023">2023</a>
</div>
<a href="gallery.html" class="gallery-link">Zur Galerie</a>
</div>
</body>
</html>
game/js/gallery.js 0 → 100644
+ 72
− 0
View file @ 07a8a581
const params = new URLSearchParams(window.location.search);
const year = params.get("year");
const icons_path = './icons/'
const svgFilesByYear = [
{
year: 2022,
files: [
'bee.svg',
'bonbon.svg',
'brot.svg',
'disney_logo.svg',
'eis.svg',
'ente.svg',
'peacephin.svg',
'pilz.svg',
'spinne.svg',
],
},
{
year: 2023,
files: [
'banane_gut.svg',
'bubble_tea.svg',
'faultier.svg',
'hasi.svg',
'henry_k.svg',
'hirsch.svg',
'hugo.svg',
'kuro_servamp.svg',
'moehre_gut.svg',
'ok_i_pull_up.svg',
'pony.svg',
'schlange.svg',
'sonne.svg',
'stinky.svg',
'slay_winnie.svg',
'tommy.svg',
]
}
]
const galleryContainer = document.getElementById('gallery');
svgFilesByYear.forEach(({year, files}) => {
// Erstellen Sie eine Überschrift für das Jahr
const heading = document.createElement('h2');
heading.textContent = `SVGs aus dem Jahr ${year}`;
galleryContainer.appendChild(heading);
// Erstellen Sie einen Container für die SVGs des Jahres
const yearContainer = document.createElement('div');
yearContainer.classList.add('year-container');
galleryContainer.appendChild(yearContainer);
// Laden und Anzeigen der SVGs
files.forEach((filename) => {
fetch(icons_path + year + '/' + filename)
.then((response) => response.text())
.then((svgText) => {
const wrapper = document.createElement('div');
wrapper.innerHTML = svgText;
const svgElement = wrapper.children[0];
svgElement.classList.add('svg-image');
yearContainer.appendChild(svgElement);
})
.catch((error) => {
console.error('Fehler beim Laden des SVGs:', error);
});
});
});
\ No newline at end of file
game/js/game.js
+ 108
− 85
View file @ 07a8a581
......@@ -2,8 +2,9 @@ const params = new URLSearchParams(window.location.search);
const year = params.get("year");
const icons_path = './icons/' + year + '/'
texturePathsPerYear = {
const texturePathsPerYear = {
'2022': [
icons_path + 'bee.svg',
icons_path + 'bonbon.svg',
icons_path + 'brot.svg',
icons_path + 'disney_logo.svg',
......@@ -14,54 +15,22 @@ texturePathsPerYear = {
icons_path + 'spinne.svg',
],
'2023': [
icons_path + 'banane_gut.svg',
icons_path + 'bee.svg',
icons_path + 'hasi.svg',
// icons_path + 'banane_gut.svg',
// icons_path + 'hasi.svg',
icons_path + 'hirsch.svg',
icons_path + 'hugo.svg',
icons_path + 'moehre_gut.svg',
// icons_path + 'moehre_gut.svg',
icons_path + 'ok_i_pull_up.svg',
icons_path + 'pony.svg',
// icons_path + 'pony.svg',
icons_path + 'schlange.svg',
icons_path + 'sonne.svg',
icons_path + 'stinky.svg',
// icons_path + 'sonne.svg',
// icons_path + 'stinky.svg',
icons_path + 'slay_winnie.svg',
icons_path + 'tommy.svg',
]
}
const texturePaths = texturePathsPerYear[year];
async function checkSVGExists(filePath) {
try {
const response = await fetch(filePath, {method: 'HEAD'});
if (response.status === 200) {
console.log('SVG exists:', filePath);
return true;
} else if (response.status === 404) {
console.log('SVG not found:', filePath);
return false;
} else {
console.error('Unexpected status code:', response.status);
return false;
}
} catch (error) {
console.error('Error fetching SVG:', error);
return false;
}
}
for (let texturePath of texturePaths) {
checkSVGExists(texturePath).then((exists) => {
console.log('SVG exists:', exists);
});
}
texturePaths.forEach((texturePath) => {
})
// Modify these to create more icons or make them move faster/slower
let maxIconCount = 30;
let accelerationFactor = 1;
......@@ -127,7 +96,7 @@ let overlayIsOpen = false;
let ticker = PIXI.Ticker.shared;
ticker.autoStart = false;
ticker.add(() => {
for (i = 0; i < icons.length; i++) {
for (let i = 0; i < icons.length; i++) {
moveIcon(icons[i]);
changeIconSize(icons[i], i);
}
......@@ -142,29 +111,81 @@ ticker.add(() => {
});
// Load the textures
let textures = [];
for (let i in texturePaths) {
fetchAsync(texturePaths[i]).then(svgAsString => {
// Make white elements transparent
let svgWithTransparency = svgAsString.replaceAll('fill="#FFFFFF"', 'fill="#FFFFFF" fill-opacity="0.0"');
svgWithTransparency = svgWithTransparency.replaceAll('fill="#FFF"', 'fill="#FFF" fill-opacity="0.0"');
svgWithTransparency = svgWithTransparency.replaceAll('fill="#ffffff"', 'fill="#ffffff" fill-opacity="0.0"');
svgWithTransparency = svgWithTransparency.replaceAll('fill="#fff"', 'fill="#fff" fill-opacity="0.0"');
svgWithTransparency = svgWithTransparency.replaceAll('fill:#ffffff', 'fill:#ffffff, fill-opacity:0.0');
svgWithTransparency = svgWithTransparency.replaceAll('fill:#fff', 'fill:#fff, fill-opacity:0.0');
// Encode string as base64 svg, so that PIXI.SVGResource can load it
const b64string = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(svgWithTransparency)));
textures.push(PIXI.Texture.from(new PIXI.SVGResource(b64string, {height: 48})));
// Start the game if all textures have been loaded
if (Number(i) === (texturePaths.length - 1)) {
createSettingsOverlay();
}
function createLoadingBar() {
const progressBarWidth = app.screen.width * 0.5;
const progressBarHeight = app.screen.height * 0.05;
const progressBarHeader = new PIXI.Text('0%', {
fontFamily: 'Arial',
fontSize: 24,
fill: 'Black',
});
// Positionieren Sie das Text-Element in der Mitte über den Ladebalkens
progressBarHeader.anchor.set(0.5);
progressBarHeader.x = app.screen.width / 2;
progressBarHeader.y = app.screen.height / 2 - app.screen.height * 0.05;
app.stage.addChild(progressBarHeader);
progressBarHeader.text = 'Lade Bilder...'
const progressBarContainer = new PIXI.Container();
app.stage.addChild(progressBarContainer);
progressBarContainer.x = app.screen.width / 2 - progressBarWidth / 2;
progressBarContainer.y = app.screen.height / 2 - progressBarHeight / 2;
const background = new PIXI.Graphics();
background.beginFill(0x212121, 0.5);
background.drawRect(0, 0, progressBarWidth, progressBarHeight);
background.endFill();
progressBarContainer.addChild(background);
const progressBar = new PIXI.Graphics();
progressBar.beginFill(0xd4e7eb);
progressBar.drawRect(0, 0, 0, progressBarHeight);
progressBar.endFill();
progressBarContainer.addChild(progressBar);
return progressBar;
}
const loader = PIXI.Loader.shared;
const progressBar = createLoadingBar();
// Fügen Sie hier die Pfade zu Ihren Texturen hinzu
let sprites = [];
// Laden Sie die Texturen und verfolgen Sie den Fortschritt
loader.add(texturePaths)
loader.load((loader, resources) => {
console.log('Alle Texturen wurden geladen');
for (let i = 0; i < texturePaths.length; i++) {
if (resources.hasOwnProperty(texturePaths[i])) {
const sprite = new PIXI.Sprite(resources[texturePaths[i]].texture);
sprite.id = texturePaths[i]
sprites.push(sprite)
} else {
console.log(texturePaths[i] + ' is not loaded.')
}
}
createSettingsOverlay();
app.stage.removeChild(progressBar.parent); // Entfernen Sie den Ladebalken, nachdem alle Texturen geladen wurden
});
loader.onProgress.add((loader) => {
const progress = loader.progress / 100;
console.log(progress)
progressBar.clear();
progressBar.beginFill(0xd4e7eb);
progressBar.drawRect(0, 0, progress * progressBar.parent.width, progressBar.parent.height);
progressBar.endFill();
});
loader.onError.add((error, loader, resource) => {
console.error(`Fehler beim Laden der Ressource: ${resource.url}`);
console.error(`Fehlernachricht: ${error.message}`);
});
function createSettingSpirit() {
const settingsSprite = new PIXI.Sprite(settings_icon);
settingsSprite.scale.x *= .02;
......@@ -186,7 +207,7 @@ function startNewGame() {
iconCount = 0;
icons = [];
isIconShrinking = [];
distribution = createDistribution(textures);
distribution = createDistribution(sprites.length);
pixiContainer = new PIXI.Container();
app.stage.addChild(pixiContainer);
......@@ -199,9 +220,15 @@ function startNewGame() {
// Create a new icon with randomized properties
function addNewIcon() {
const randomNumber = randomIndex(distribution);
const icon = new PIXI.Sprite(textures[randomNumber]);
const icon = new PIXI.Sprite(sprites[randomNumber].texture);
icon.position.x = Math.random() * app.screen.width;
icon.position.y = Math.random() * app.screen.height;
const scaleFactor = 100 / icon.height;
console.log('icon: ' + icon.id + ', scaleFactor: ' + scaleFactor)
icon.scale.set(scaleFactor + scaleFactor * Math.random());
icon.speedX = (Math.random() - 0.5) * 2;
icon.speedY = (Math.random() - 0.5) * 2;
......@@ -209,7 +236,7 @@ function addNewIcon() {
icon.accY = (Math.random() - 0.5) * 0.001 * accelerationFactor;
icon.anchor.set(0.5);
icon.scale.set(0.5 + Math.random() * 0.5);
// icon.scale.set(0.5 + Math.random() * 0.5);
icon.rotation = Math.random() - 0.5;
icon.interactive = true;
......@@ -257,19 +284,18 @@ function moveIcon(icon) {
// Define growth and shrinkage of icons
function changeIconSize(icon, i) {
sizeDifference = Math.random() * 0.01;
const sizeDifference = 1;
if (isIconShrinking[i]) {
icon.scale.x -= sizeDifference;
icon.scale.y -= sizeDifference;
if (icon.scale.x < 0.5) {
icon.width -= sizeDifference;
icon.height -= sizeDifference;
if (icon.height < 50) {
isIconShrinking[i] = false;
}
} else {
icon.scale.x += sizeDifference;
icon.scale.y += sizeDifference;
icon.width += sizeDifference;
icon.height += sizeDifference;
if (icon.scale.x > 1.5) {
if (icon.height > 150) {
isIconShrinking[i] = true;
}
}
......@@ -386,9 +412,9 @@ function createSettingsOverlay() {
savedGameStatus = localStorage.getItem("gameStatus");
let gameStatus = savedGameStatus ? savedGameStatus.split(',').map(Number) : [];
for (let i = 0; i < textures.length; i++) {
for (let i = 0; i < sprites.length; i++) {
const row = new PIXI.Graphics();
const xPosition = app.screen.width / 2 - (textures.length * 48) + (i + 1) * 128 - (48);
const xPosition = app.screen.width / 2 - (sprites.length * 48) + (i + 1) * 128 - (48);
const yPosition = 64;
if (i > (gameStatus.length - 1)) {
......@@ -420,7 +446,10 @@ function createSettingsOverlay() {
});
rect.addChild(row);
const icon = new PIXI.Sprite(textures[i]);
const icon = new PIXI.Sprite(sprites[i].texture);
const desiredHeight = 64;
const scaleFactor = desiredHeight / icon.height;
icon.scale.set(scaleFactor)
row.addChild(icon);
icon.anchor.set(0.5);
icon.position.set(xPosition, yPosition);
......@@ -430,8 +459,8 @@ function createSettingsOverlay() {
}
function saveGameStatus(gameStatus) {
if (gameStatus.length > textures.length) {
gameStatus = gameStatus.slice(0, textures.length);
if (gameStatus.length > sprites.length) {
gameStatus = gameStatus.slice(0, sprites.length);
}
localStorage.setItem("gameStatus", gameStatus);
......@@ -441,13 +470,7 @@ function clearExistingOverlays() {
app.stage.removeChildren();
}
async function fetchAsync(url) {
let response = await fetch(url);
let data = await response.text();
return data;
}
function createDistribution(array) {
function createDistribution(sprite_count) {
// Creates a distribution so that shoot target spawn more often
const probabilityShootTargets = 0.7;
const probabilityPeaceTargets = 1 - probabilityShootTargets;
......@@ -459,7 +482,7 @@ function createDistribution(array) {
counts[x] = (counts[x] || 0) + 1;
});
for (i = 0; i < array.length; i++) {
for (let i = 0; i < sprite_count; i++) {
if (gameStatus[i] === 0) {
weights.push(probabilityPeaceTargets / counts[0]);
} else {
......@@ -470,7 +493,7 @@ function createDistribution(array) {
const distribution = [];
const sum = weights.reduce((a, b) => a + b);
const quant = 100 / sum;
for (let i = 0; i < array.length; ++i) {
for (let i = 0; i < sprite_count; ++i) {
const limit = quant * weights[i];
for (let j = 0; j < limit; ++j) {
distribution.push(i);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment