Toggle for Themes with Animated Backgrounds

This commit is contained in:
Ikerstreamer 2019-06-27 13:47:22 -07:00
parent 2662303205
commit c5e23a6f58
7 changed files with 34 additions and 11 deletions

BIN
images/s6-bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 256 KiB

View File

@ -35,7 +35,6 @@
</script>
</head>
<img id="loading" src="images/Loading.png">
<div id="snow" style="display: none; "></div>
<body>
<div id="ui" style="height: 100%; width: 100%;">
<link :disabled="!$viewModel.newUI" id="new-ui" rel="stylesheet" type="text/css" href="stylesheets/new-ui-styles.css">
@ -342,10 +341,13 @@
</div>
<div v-if="!newUI" id="notification-container" class="l-notification-container"></div>
</body>
<div class="videocontainer">
<video autoplay muted loop id="stars">
<source src="images/s6-bg.webm" type="video/webm">
</video>
<div id="background-animations">
<div class="videocontainer">
<video autoplay muted loop id="stars">
<source src="images/s6-bg.webm" type="video/webm">
</video>
</div>
<div id="snow" style="display: none; "></div>
</div>
<div class="videocontainer">
<video preload muted id="realityanimbg" style="opacity: 0; display: none; ">

View File

@ -13,5 +13,10 @@ Vue.component("modal-animation-options", {
<on-off-button v-if="bigCrunchUnlocked" v-model="options.bigCrunch" text="Big crunch:"/>
<on-off-button v-if="dilationUnlocked" v-model="options.tachyonParticles" text="Tachyon particles:"/>
<on-off-button v-if="realityUnlocked" v-model="options.reality" text="Reality:"/>
<on-off-button
v-if="animatedThemeUnlocked"
v-model="options.background"
onclick="Themes.find(player.options.theme).set();"
text="Background:"/>
</modal-options>`
});

View File

@ -14,7 +14,8 @@ const modalOptionsMixin = {
bigCrunchUnlocked: false,
eternityUnlocked: false,
realityUnlocked: false,
dilationUnlocked: false
dilationUnlocked: false,
animatedThemeUnlocked: false
};
},
methods: {
@ -24,6 +25,7 @@ const modalOptionsMixin = {
this.eternityUnlocked = progress.isEternityUnlocked;
this.realityUnlocked = progress.isRealityUnlocked;
this.dilationUnlocked = progress.isRealityUnlocked || player.dilation.tachyonParticles.neq(0);
this.animatedThemeUnlocked = Themes.find("S1").isAvailable() || Themes.find("S6").isAvailable();
}
},
components: {

View File

@ -16,6 +16,11 @@ const Theme = function Theme(name, colors) {
return player.secretUnlocks.themes.countWhere(theme => theme.includes(name)) !== 0;
};
this.isAnimated = function() {
const list = ["S1", "S6"];
return list.includes(this.name);
};
this.displayName = function() {
if (!this.isSecret()) return name;
if (!this.isAvailable()) {
@ -35,6 +40,11 @@ const Theme = function Theme(name, colors) {
if (!this.isDefault()) {
document.body.classList.add(this.cssClass());
}
if (this.isAnimated() && player.options.animations.background) {
document.getElementById("background-animations").style.display = "block";
} else {
document.getElementById("background-animations").style.display = "none";
}
player.options.theme = name;
ui.view.theme = name;

View File

@ -203,10 +203,10 @@ let player = {
},
upgradeBits: 0,
upgReqs: [null, true, true, true, true, true,
false, false, false, false, false,
false, false, false, false, false,
false, false, false, false, false,
false, false, false, false, false,
false, false, false, false, false,
false, false, false, false, false,
false, false, false, false, false,
false, false, false, false, false,
false, false, false, false, false],
upgReqChecks: [false],
automatorOn: false,
@ -358,7 +358,8 @@ let player = {
bigCrunch: true,
eternity: true,
tachyonParticles: true,
reality: true
reality: true,
background: true
},
confirmations: {
sacrifice: true,

View File

@ -19,6 +19,9 @@
body.t-s6 {
background: black;
background-image: url('../images/s6-bg.png');
background-size: 100%;
background-position: center;
}
.t-s6 .popup {