mirror of
https://github.com/JannisX11/blockbench.git
synced 2024-11-21 01:13:37 +08:00
Implement splash art slideshow & new splash arts
This commit is contained in:
JannisX11
parent
df37dc7bc3
commit
5d4b65df92
BIN
assets/splash_art/1.png
Normal file
BIN
assets/splash_art/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
BIN
assets/splash_art/2.png
Normal file
BIN
assets/splash_art/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
BIN
assets/splash_art/3.png
Normal file
BIN
assets/splash_art/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
BIN
assets/splash_art/4.png
Normal file
BIN
assets/splash_art/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 494 KiB |
BIN
assets/splash_art/5.png
Normal file
BIN
assets/splash_art/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
@ -213,6 +213,7 @@
|
||||
padding-right: 15px;
|
||||
padding-left: 100px;
|
||||
background: linear-gradient(90deg, rgba(3,86,112,0) 0%, rgba(0,10,22,0.63) 34%, rgba(0,9,20,0.72) 45%);
|
||||
position: absolute;
|
||||
}
|
||||
#start_screen div.start_screen_right {
|
||||
flex-grow: 1;
|
||||
@ -292,6 +293,70 @@
|
||||
}
|
||||
|
||||
|
||||
#splash_screen {
|
||||
aspect-ratio: 21/9;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
}
|
||||
#splash_screen .splash_art_slideshow_image {
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
#splash_screen .splash_art_slideshow_image.slideshow_previous {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
animation: fade_out_slideshow 500ms forwards;
|
||||
}
|
||||
@keyframes fade_out_slideshow {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.splash_art_slideshow_points {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
width: fit-content;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
transition: opacity 300ms ease-in-out;
|
||||
}
|
||||
#splash_screen:hover .splash_art_slideshow_points {
|
||||
opacity: 1;
|
||||
}
|
||||
.splash_art_slideshow_points > li {
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
.splash_art_slideshow_points > li::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
margin: auto;
|
||||
margin-top: 9px;
|
||||
background-color: var(--color-text);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.splash_art_slideshow_points > li:hover::after {
|
||||
background-color: var(--color-light);
|
||||
}
|
||||
.splash_art_slideshow_points > li.selected::after {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
|
||||
#start_files div.start_screen_left {
|
||||
width: 30%;
|
||||
|
||||
@ -129,6 +129,8 @@ function addStartScreenSection(id, data) {
|
||||
onVueSetup(function() {
|
||||
StateMemory.init('start_screen_list_type', 'string')
|
||||
|
||||
let slideshow_timer = 0;
|
||||
|
||||
StartScreen.vue = new Vue({
|
||||
el: '#start_screen',
|
||||
components: {},
|
||||
@ -144,7 +146,34 @@ onVueSetup(function() {
|
||||
isApp,
|
||||
mobile_layout: Blockbench.isMobile,
|
||||
thumbnails: {},
|
||||
getIconNode: Blockbench.getIconNode
|
||||
getIconNode: Blockbench.getIconNode,
|
||||
|
||||
slideshow: [
|
||||
{
|
||||
source: "./assets/splash_art/1.png",
|
||||
description: "Splash Art 1st Place by [NeptuneCoffee](https://twitter.com/Neptune_Coffee) & [Dankbarkeit](https://twitter.com/Dxnkbarkeit)",
|
||||
},
|
||||
{
|
||||
source: "./assets/splash_art/2.png",
|
||||
description: "Splash Art 2nd Place by [MorganFreeguy](https://morganfreeguy.artstation.com/) & [WOLLAND](https://wolland-services.com/)",
|
||||
},
|
||||
{
|
||||
source: "./assets/splash_art/3.png",
|
||||
description: "Splash Art 3rd Place by [RETENEIZER](https://twitter.com/RETENEIZER)",
|
||||
},
|
||||
{
|
||||
source: "./assets/splash_art/4.png",
|
||||
description: "Splash Art 4th Place by [KanekiAkira](https://twitter.com/kaneki_akira) & [Jumi](https://jumi-pf.com)",
|
||||
},
|
||||
{
|
||||
source: "./assets/splash_art/5.png",
|
||||
description: "Splash Art 5th Place by [Azagwen](https://twitter.com/azagwen) & [shroomy](https://twitter.com/ShroomyArts)",
|
||||
}
|
||||
],
|
||||
show_splash_screen: (Blockbench.hasFlag('after_update') || settings.always_show_splash_art.value),
|
||||
slideshow_selected: Blockbench.hasFlag('after_update') ? 0 : Math.floor(Math.random()*5),
|
||||
slideshow_last: null,
|
||||
slideshow_autoplay: true
|
||||
},
|
||||
methods: {
|
||||
getDate(p) {
|
||||
@ -266,6 +295,17 @@ onVueSetup(function() {
|
||||
if (format_entry.onStart) format_entry.onStart();
|
||||
if (typeof format_entry.new == 'function') format_entry.new();
|
||||
},
|
||||
|
||||
getBackground(url) {
|
||||
return `url("${url}")`
|
||||
},
|
||||
setSlide(index) {
|
||||
this.slideshow_last = this.slideshow_selected;
|
||||
this.slideshow_selected = index;
|
||||
setTimeout(() => this.slideshow_last = null, 500);
|
||||
slideshow_timer = 0;
|
||||
},
|
||||
|
||||
openLink(link) {
|
||||
Blockbench.openLink(link);
|
||||
},
|
||||
@ -286,10 +326,36 @@ onVueSetup(function() {
|
||||
},
|
||||
mounted() {
|
||||
this.updateThumbnails();
|
||||
|
||||
setInterval(() => {
|
||||
if (this.show_splash_screen && this.slideshow_autoplay && this.$el.checkVisibility()) {
|
||||
slideshow_timer += 1;
|
||||
|
||||
if (slideshow_timer == 24) {
|
||||
this.setSlide((this.slideshow_selected+1) % this.slideshow.length);
|
||||
}
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
if (settings.always_show_splash_art.value && !Blockbench.hasFlag('after_update') && !Blockbench.isMobile) {
|
||||
document.getElementById('start_screen').scrollTop = 100;
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div id="start_screen">
|
||||
<content>
|
||||
<section id="splash_screen" v-if="show_splash_screen">
|
||||
<div class="splash_art_slideshow_image" :style="{backgroundImage: getBackground(slideshow[slideshow_selected].source)}">
|
||||
<p v-if="slideshow[slideshow_selected].description" class="start_screen_graphic_description" v-html="pureMarked(slideshow[slideshow_selected].description)"></p>
|
||||
</div>
|
||||
<div class="splash_art_slideshow_image slideshow_previous" v-if="typeof slideshow_last == 'number'" :style="{backgroundImage: getBackground(slideshow[slideshow_last].source)}">
|
||||
</div>
|
||||
<ul class="splash_art_slideshow_points">
|
||||
<li v-for="(image, index) in slideshow" :key="index" :class="{selected: index == slideshow_selected}" @click="setSlide(index)"></li>
|
||||
</ul>
|
||||
<i class="material-icons start_screen_close_button" @click="show_splash_screen = false">clear</i>
|
||||
</section>
|
||||
|
||||
<section id="start_files">
|
||||
|
||||
<div class="start_screen_left" v-if="!(selected_format_id && mobile_layout)">
|
||||
@ -431,22 +497,6 @@ onVueSetup(function() {
|
||||
if (settings.streamer_mode.value) {
|
||||
updateStreamerModeNotification()
|
||||
}
|
||||
if (Blockbench.hasFlag('after_update') || settings.always_show_splash_art.value) {
|
||||
addStartScreenSection('splash_screen', {
|
||||
"text_color": '#000000',
|
||||
"graphic": {
|
||||
"type": "image",
|
||||
"source": "./assets/splash_art.png?46",
|
||||
"width": 1000,
|
||||
"aspect_ratio": "64/27",
|
||||
"description": "Splash Art by [Wacky](https://twitter.com/wackyblocks)",
|
||||
"text_color": '#cfcfcf'
|
||||
}
|
||||
})
|
||||
if (!Blockbench.hasFlag('after_update')) {
|
||||
document.getElementById('start_screen').scrollTop = 100;
|
||||
}
|
||||
}
|
||||
|
||||
//Backup Model
|
||||
if (localStorage.getItem('backup_model') && (!isApp || !currentwindow.webContents.second_instance) && localStorage.getItem('backup_model').length > 40) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user