The finished source code (#6)

.github/workflows/compatibility.yml

@@ -88,6 +88,7 @@ jobs:
           git fetch origin gh-pages
           git switch gh-pages --force
           mkdir -p /home/runner/work/obhqWebsite/obhqWebsite/compatibility/_images/
+          mkdir -p /home/runner/work/obhqWebsite/obhqWebsite/download/artifacts/
           
           rm -r -f /home/runner/work/obhqWebsite/obhqWebsite/compatibility/_images/games/
           rm -r -f /home/runner/work/obhqWebsite/obhqWebsite/compatibility/_images/hb/
@@ -97,10 +98,12 @@ jobs:
           mv -f /home/runner/work/obhqWebsite/temp/updater/images/* /home/runner/work/obhqWebsite/obhqWebsite/compatibility/_images/
           mv -f /home/runner/work/obhqWebsite/temp/updater/database.json /home/runner/work/obhqWebsite/obhqWebsite/compatibility/database.json
           mv -f /home/runner/work/obhqWebsite/temp/updater/stats.json /home/runner/work/obhqWebsite/obhqWebsite/stats.json
+          mv -f /home/runner/work/obhqWebsite/temp/updater/artifacts/* /home/runner/work/obhqWebsite/obhqWebsite/download/artifacts/
           
           git add /home/runner/work/obhqWebsite/obhqWebsite/stats.json -f
           git add /home/runner/work/obhqWebsite/obhqWebsite/compatibility/database.json -f
           git add /home/runner/work/obhqWebsite/obhqWebsite/compatibility/_images/ -f
+          git add /home/runner/work/obhqWebsite/obhqWebsite/download/artifacts/ -f
           
           files_to_commit=$(git status --porcelain | grep -E 'M|A|D' | wc -l)
           if [ $files_to_commit -gt 0 ]; then

.github/workflows/public_html.yml

@@ -39,6 +39,7 @@ jobs:
           
           # restore files that dont need updating
           git restore --staged --worktree wiki/
+          git restore --staged --worktree download/artifacts/
           git restore --staged --worktree compatibility/_images/games/
           git restore --staged --worktree compatibility/_images/hb/
           git restore --staged --worktree compatibility/database.json

CHANGELOG.md

@@ -5,7 +5,19 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-### [v0.3.1] (unreleased)
+### [v1.0.0]
+
+#### Added
+- Added automatic artifact downloading to the rust updater script
+- Added the Downloads page
+
+
+#### Changed
+- Fixed the amount of skeletonCards in the comp page from 20 to 10.
+- Modified workflow files for the new Downloads page
+- Modified the `status.json` file to include more values for the download page.
+
+### [v0.3.1]
 - Put the tmdb hex into the config, instead of a secret variable
 - Added CSP to the `_errorPages` and some other small fixes
 

public_html/_errorPages/errapp.js

@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', async function () {
     // required.js
     adjustScreenSize(700)
-    
+
     await init();
     adjustScreenSize(700);
 

public_html/app.js

@@ -1,7 +1,7 @@
 document.addEventListener('DOMContentLoaded', async function () {
     // required.js
-    adjustScreenSize(); // might not change the top image for on mobile
 
+    adjustScreenSize(); // might not change the top image for on mobile
     await init();
     adjustScreenSize(700); // ensure change of top image
     headerShadow();
@@ -13,7 +13,7 @@ document.addEventListener('DOMContentLoaded', async function () {
     window.addEventListener("scroll", headerShadow);
 
 
-    await fetch('stats.json').then(response => response.json()).then(jsonData => {
+    await fetch('/stats.json').then(response => response.json()).then(jsonData => {
         countingAnimation(jsonData.stars, document.getElementById("starsNumber"));
         countingAnimation(jsonData.issues, document.getElementById("issuesNumber"));
         countingAnimation(jsonData.devbuilds, document.getElementById("devbuildsNumber"));

public_html/compatibility/app.js

@@ -1,15 +1,14 @@
 let databaseJsonData; // :3
-let totalPages; // is this needed? like genuinely?
+let totalPages;
 let currentPage = 1; // starts from 1, NOT 0
 let tagFilter = [];
 let justUpdated;
 let issuesPerPage = 10;
 let issuesCount;
-// let Timer;
 const codeRegex = /[a-zA-Z]{4}[0-9]{5}/;
 
 document.addEventListener('DOMContentLoaded', async function () {
-    let startTime = performance.now()
+    let startTime = performance.now();
 
     // required.js
     adjustScreenSize(610); // might not change the top image for on mobile

public_html/compatibility/index.html

@@ -100,16 +100,6 @@
         <div class="gameCard skeletonLoading"></div>
         <div class="gameCard skeletonLoading"></div>
         <div class="gameCard skeletonLoading"></div>
-        <div class="gameCard skeletonLoading"></div>
-        <div class="gameCard skeletonLoading"></div>
-        <div class="gameCard skeletonLoading"></div>
-        <div class="gameCard skeletonLoading"></div>
-        <div class="gameCard skeletonLoading"></div>
-        <div class="gameCard skeletonLoading"></div>
-        <div class="gameCard skeletonLoading"></div>
-        <div class="gameCard skeletonLoading"></div>
-        <div class="gameCard skeletonLoading"></div>
-        <div class="gameCard skeletonLoading"></div>
         <div class="gameCardE skeletonLoading"></div>
     </div>
 

public_html/compatibility/styles.css

@@ -53,47 +53,6 @@ body {
 }
 
 
-.backgroundPlane1, .backgroundPlane2 {
-    position: fixed;
-    transition: margin 0.5s ease;
-    width: 160rem;
-    height: 140rem;
-    margin-left: 22rem;
-    margin-top: -16rem;
-    transform-origin: 50% 48%;
-    border-radius: 43%;
-    top: 3%;
-    left: 10%;
-}
-
-.backgroundPlane1 {
-    animation: rotate1 21000ms infinite linear;
-    background: var(--main1);
-}
-
-.backgroundPlane2 {
-    animation: rotate2 21000ms infinite linear;
-    background: var(--main2);
-}
-
-@keyframes rotate1 {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes rotate2 {
-    from {
-        transform: rotate(30deg);
-    }
-    to {
-        transform: rotate(390deg);
-    }
-}
-
 .compMenu {
     width: 37.5rem;
     height: 30.6rem;
@@ -509,7 +468,13 @@ body {
 
 
 @media screen and (max-width: 1150px) {
-    .mainBackground1, .mainBackground2 {
+    .content {
+        width: 800px;
+    }
+}
+
+@media screen and (max-width: 1150px) {
+    .backgroundPlane1, .backgroundPlane2 {
         margin-left: 32rem;
     }
 }
@@ -523,7 +488,7 @@ body {
 
 
 @media screen and (max-width: 600px) {
-    .mainBackground1, .mainBackground2 {
+    .backgroundPlane1, .backgroundPlane2 {
         margin-left: 50rem;
     }
 }

public_html/download/app.js

@@ -0,0 +1,55 @@
+document.addEventListener('DOMContentLoaded', async function () {
+
+    // required.js
+    adjustScreenSize(610); // might not change the top image for on mobile
+    await init();
+    adjustScreenSize(610); // ensure change of top image
+    headerShadow();
+
+    window.addEventListener('resize', () => {
+        adjustScreenSize(570);
+    });
+    window.addEventListener("scroll", headerShadow);
+
+    // add the button events
+    document.querySelectorAll(".downloadListItem").forEach((item) => {
+        item.addEventListener('click', function() {
+
+            if (item === document.querySelector(".downloadList").children.item(0)) {
+                document.querySelector(".downloadContentList").style.transform = `translateX(0)`; // could just leave it empty but this makes it look nicer in inspect element :D
+
+            } else if (item === document.querySelector(".downloadList").children.item(1)) {
+                document.querySelector(".downloadContentList").style.transform = `translateX(-100%)`;
+
+            } else if (item === document.querySelector(".downloadList").children.item(2)) {
+                document.querySelector(".downloadContentList").style.transform = `translateX(-200%)`;
+
+            } else {
+                console.error("Uh oh, it seems the html is modified!");
+            }
+
+            document.querySelector(".downloadListItemSelected").classList.remove("downloadListItemSelected");
+            item.classList.add("downloadListItemSelected");
+        })
+    });
+
+    await fetch('/stats.json').then(response => response.json()).then(jsonData => {
+
+        document.getElementById("githubBuildNumber").textContent =  "#" +  jsonData.devbuilds;
+        document.getElementById("githubBuildNumber").href = jsonData.build_link;
+
+        document.getElementById("githubBuildDate").textContent = new Date(jsonData.build_date).toLocaleDateString();
+        document.getElementById("githubBuildDate").href = jsonData.build_link;
+
+        document.getElementById("githubUserContainer").href = "https://github.com/" +  jsonData.commiter_name
+        document.getElementById("githubAvatar").src = jsonData.commiter_avatar;
+        document.getElementById("githubUsername").textContent = jsonData.commiter_name;
+
+        setTimeout(function() {
+            document.getElementById("infoContainer").classList.remove("skeletonLoading")
+            document.querySelectorAll(".infoSub").forEach(( element) => element.style.opacity = "1");
+        }, 200);
+    });
+});
+
+