Adding games

iiDk-the-actual · Nov 14, 2024 · f30386c · f30386c
1 parent d3be2d2
commit f30386c
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 2 deletions.
diff --git a/css/style.css b/css/style.css
@@ -27,6 +27,35 @@ body {
     margin-top: 10px; /* Adds 10px space above the container */
 }
 
+.inner-container {
+    background-color: #bb4e00; /* Darker orange background */
+    border: 3px solid #9D4300; /* Orange outline */
+    border-radius: 10px; /* Rounded corners */
+    padding: 3px 3px; /* Thinner padding on the X-axis */
+    text-align: center;
+    width: 100px; /* Set a width for the container */
+    height: auto;
+    margin-bottom: 10px;
+}
+
+.inner-container img {
+    height: auto; /* Set image height */
+    width: 90%; /* Maintain aspect ratio */
+}
+
+.grid { /* Need a pull to center these damn grid elements :(( */
+    margin-top: 5px;
+    align-items: center;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 110px);
+    justify-content: space-evenly;
+    justify-items: center;
+    align-content: space-evenly;
+    align-items: center;
+    gap: 10px;
+    margin: auto;
+}
+
 .header-container {
     display: flex; /* Use flexbox for horizontal alignment */
     align-items: center; /* Vertically align the image and h1 in the center */
@@ -71,13 +100,36 @@ p {
     margin-bottom: 3px; /* Reduced bottom margin */
 }
 
+a.no-style {
+    text-decoration: none; /* If not already specified in global CSS */
+    color: inherit;        /* Inherit color */
+    font-weight: normal;   /* Remove bold */
+    font-size: inherit;    /* Inherit font size */
+    margin: 0;             /* Remove any margin */
+}
+
+a:hover.no-style {
+    text-decoration: none; /* If not already specified in global CSS */
+    color: inherit;        /* Inherit color */
+    font-weight: normal;   /* Remove bold */
+    font-size: inherit;    /* Inherit font size */
+    margin: 0;             /* Remove any margin */
+}
+
+a:visited.no-style {
+    text-decoration: none; /* If not already specified in global CSS */
+    color: inherit;        /* Inherit color */
+    font-weight: normal;   /* Remove bold */
+    font-size: inherit;    /* Inherit font size */
+    margin: 0;             /* Remove any margin */
+}
+
 /* Style links */
 a {
     text-decoration: none;  /* Remove underline */
     color: white;           /* Set link color to white */
     font-weight: bold;      /* Make the font bold */
     font-size: 1.5em;       /* Set font size to 1.5mm */
-    margin-bottom: 3px; /* Reduced bottom margin */
 }
 
 /* Style for when the link is hovered over */

diff --git a/data/games.json b/data/games.json
@@ -0,0 +1,13 @@
+[
+    {
+      "name": "World's Hardest Game",
+      "icon": "/data/icon.png",
+      "link": "/games/swf"
+    },
+    {
+      "name": "Game 2",
+      "icon": "/data/icon.png",
+      "link": "/game/nonexistent"
+    }
+  ]
+
diff --git a/data/games/swf/whg.swf b/data/games/swf/whg.swf
diff --git a/games/index.html b/games/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>iidk.dev</title>
+    <link rel="icon" type="image/png" href="/data/icon.png">
+    <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+    <script src="/js/header.js"></script>
+    <script src="/js/games.js"></script>
+    <div class="container" style="width: 95%;">
+        <p>Games</p>
+        <div class="grid"> </div>
+    </div>
+</body>
+</html>
diff --git a/games/swf/index.html b/games/swf/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>iidk.dev</title>
+    <link rel="icon" type="image/png" href="/data/icon.png">
+    <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+    <script src="/js/header.js"></script>
+    <div class="container" style="width: 95%;">
+        <p>World's Hardest Game</p>
+        <script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
+<object><param name="movie" value="Worlds Hardest Game.swf"><embed src="/data/games/swf/whg.swf" width="100%" height="100%"/></object>
+    </div>
+</body>
+</html>
diff --git a/js/games.js b/js/games.js
@@ -0,0 +1,30 @@
+document.addEventListener("DOMContentLoaded", function() {
+    fetch('/data/games.json')
+        .then(response => response.json())
+        .then(data => {
+            const grid = document.querySelector('.grid');
+
+            data.forEach(game => {
+                const gameElement = document.createElement('a');
+                gameElement.href = game.link;
+                gameElement.classList.add('no-style');
+
+                const innerContainer = document.createElement('div');
+                innerContainer.classList.add('inner-container');
+
+                document.createElement('br');
+
+                const img = document.createElement('img');
+                img.src = game.icon;
+                innerContainer.appendChild(img);
+
+                const gameName = document.createElement('gameTitle');
+                gameName.textContent = game.name;
+                innerContainer.appendChild(gameName);
+
+                gameElement.appendChild(innerContainer);
+                grid.appendChild(gameElement);
+            });
+        })
+        .catch(error => console.error('Error loading games:', error));
+});
diff --git a/js/header.js b/js/header.js
@@ -9,7 +9,7 @@ window.addEventListener('DOMContentLoaded', function () {
 
   // Create the image element
   var img = document.createElement('img');
-  img.src = '/images/icon.png';
+  img.src = '/data/icon.png';
   img.style.height = '50px';
 
   // Create the h1 element

diff --git a/js/ruffle.js b/js/ruffle.js