Archive/opengoal-launcher
1
0
Fork 0
mirror of https://github.com/open-goal/launcher.git synced 2024-10-20 04:57:38 -04:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

changing backgrounds based on game selected

Browse source
This commit is contained in:
trippjoe 2022-03-27 19:38:32 -04:00
parent 10c3d5178c
commit a806b18ba9
4 changed files with 71 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/images/settings.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 396 KiB

3
src/css/index.css
View file

@ -64,14 +64,12 @@ nav {
}
.game-bg{
position:fixed;
width: 110%;
-webkit-user-drag: none;
z-index: -2;
}
.model {
position: fixed;
height: 80%;
right: 155px;
top: 170px;
@ -79,7 +77,6 @@ nav {
}
.game-logo {
position: fixed;
width: 40%;
padding: 10px 15px;
z-index: -1;

19
src/html/index.html
View file

@ -18,12 +18,13 @@
<div class="row">
<div class="p-0">
<img class="game-bg" src="../assets/images/jak1-bg.png" alt="Rock Village">
<img class="model" src="../assets/images/jak1-model.png" alt="Jak">
<img class="game-logo" src="../assets/images/jak1-logo.png" alt="Jak & Daxter: The Precursor Legacy">
<img id="background" class="game-bg position-fixed" src="../assets/images/jak1-bg.png" alt="Rock Village">
<img id="model" class="model position-fixed" src="../assets/images/jak1-model.png" alt="Jak">
<img id="logo" class="game-logo position-fixed" src="../assets/images/jak1-logo.png"
alt="Jak & Daxter: The Precursor Legacy">
<div class="game-box">
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#sidebar" role="button"
aria-controls="offcanvasExample">
aria-controls="offcanvasExample" onclick="openNav()">
>
</a>
<button type="button" class="btn btn-success btn-play">PLAY</button>
@ -36,17 +37,19 @@
<div class="offcanvas offcanvas-start" id="sidebar" aria-labelledby="sidebar-label">
<div class="offcanvas-body">
<a class="nav-link active" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
title="Jak & Daxter: The Precursor Legacy">
title="Jak & Daxter: The Precursor Legacy" onclick="navBarClick('jak1')">
<img src="../assets/images/jak-tpl.png" class="nav-img">
</a>
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 2">
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 2"
onclick="navBarClick('jak2')">
<img src="../assets/images/jak-2.png" class="nav-img">
</a>
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 3">
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 3"
onclick="navBarClick('jak3')">
<img src="../assets/images/jak-3.png" class="nav-img">
</a>
<a class="nav-link settings" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
title="Settings">
title="Settings" onclick="navBarClick('settings')">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-sliders"
viewBox="0 0 16 16">
<path fill-rule="evenodd"

61
src/js/render.js
View file

@ -1,4 +1,63 @@
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
});
});
const body = document.querySelector('body');
const container = document.querySelector('.container');
const offcanvas = document.querySelector(".offcanvas-start");
let backdrop = document.querySelector('.offcanvas-backdrop');
const background = document.querySelector('#background');
const model = document.querySelector('#model');
const logo = document.querySelector('#logo');
function openNav() {
container.style.marginLeft = "100px";
offcanvas.classList.add("show");
backdrop = document.querySelector('.offcanvas-backdrop');
}
function closeNav() {
container.style.marginLeft = "0";
offcanvas.classList.remove("show");
offcanvas.style.visibility = "hidden";
offcanvas.ariaHidden = "true";
offcanvas.ariaModal = "false";
backdrop.classList.remove('show');
body.style.removeProperty('overflow');
body.style.removeProperty('padding');
}
function navBarClick(target) {
closeNav();
if (target.includes("settings")) {
console.log(target);
} else {
changeGame(target);
}
}
function changeGame(game) {
switch (game) {
case "jak1":
background.src = "../assets/images/jak1-bg.png";
model.src = "../assets/images/jak1-model.png";
logo.src = "../assets/images/jak1-logo.png";
break;
case "jak2":
background.src = "../assets/images/jak2-bg.png";
model.src = "../assets/images/jak2-model.png";
logo.src = "../assets/images/jak-2.png";
break;
case "jak3":
background.src = "../assets/images/jak3-bg.png";
model.src = "../assets/images/jak3-model.png";
logo.src = "../assets/images/jak-3.png";
break;
default:
background.src = "../assets/images/jak1-bg.png";
model.src = "../assets/images/jak1-model.png";
logo.src = "../assets/images/jak1-logo.png";
break;
}
}