Move videos to static fileserver to avoid unnecessary load
This commit is contained in:
parent
3cf0cce6a6
commit
5a46ba5e31
|
@ -0,0 +1,3 @@
|
||||||
|
version https://git-lfs.github.com/spec/v1
|
||||||
|
oid sha256:db8026c2a132c9d2f016986dc7a66127254c725c068eaae60909ddff6d50a210
|
||||||
|
size 2397175
|
|
@ -0,0 +1,3 @@
|
||||||
|
version https://git-lfs.github.com/spec/v1
|
||||||
|
oid sha256:ce02cec04d080b2114822e9241a9baa073a56f38dd0c52e235373fd8ae2f856d
|
||||||
|
size 1105340
|
|
@ -0,0 +1,3 @@
|
||||||
|
version https://git-lfs.github.com/spec/v1
|
||||||
|
oid sha256:a996fc3605f4ef180a7985f2a74621510489cc88b2b8a97a9dc1bd19566383b7
|
||||||
|
size 1727787
|
Binary file not shown.
After Width: | Height: | Size: 1.9 KiB |
|
@ -17,17 +17,42 @@
|
||||||
transition-property: opacity, width;
|
transition-property: opacity, width;
|
||||||
@include S(width, 0px);
|
@include S(width, 0px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
z-index: 10;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
@include PlainText;
|
|
||||||
color: #333438;
|
color: #333438;
|
||||||
display: grid;
|
display: grid;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@include S(grid-gap, 2px);
|
@include S(grid-gap, 2px);
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@include S(margin-bottom, 3px);
|
@include S(margin-bottom, 3px);
|
||||||
|
z-index: 11;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
@include DarkThemeInvert;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
@include SuperSmallText;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
&::before {
|
||||||
|
@include S(margin-right, 4px);
|
||||||
|
content: " ";
|
||||||
|
@include S(width, 12px);
|
||||||
|
@include S(height, 12px);
|
||||||
|
display: inline-block;
|
||||||
|
background: uiResource("icons/help.png") center center / 95% no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
button.toggleHint {
|
||||||
|
@include PlainText;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button.toggleHint {
|
button.toggleHint {
|
||||||
.hide {
|
.hide {
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -40,9 +65,27 @@
|
||||||
bottom: 50%;
|
bottom: 50%;
|
||||||
transform: translate(-50%, 50%);
|
transform: translate(-50%, 50%);
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
pointer-events: all;
|
||||||
|
content: " ";
|
||||||
|
position: fixed;
|
||||||
|
top: -1000px;
|
||||||
|
left: -1000px;
|
||||||
|
right: -1000px;
|
||||||
|
bottom: -1000px;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
background: rgba(50, 60, 70, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
grid-template-columns: 1fr auto;
|
grid-template-columns: 1fr auto;
|
||||||
color: #fff;
|
> span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
button.toggleHint {
|
||||||
|
grid-column: 2 / 3;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
video {
|
video {
|
||||||
|
|
|
@ -94,7 +94,7 @@ export const globalConfig = {
|
||||||
// showChunkBorders: true,
|
// showChunkBorders: true,
|
||||||
// rewardsInstant: true,
|
// rewardsInstant: true,
|
||||||
// allBuildingsUnlocked: true,
|
// allBuildingsUnlocked: true,
|
||||||
// upgradesNoCost: true,
|
upgradesNoCost: true,
|
||||||
// disableUnlockDialog: true,
|
// disableUnlockDialog: true,
|
||||||
// disableLogicTicks: true,
|
// disableLogicTicks: true,
|
||||||
// testClipping: true,
|
// testClipping: true,
|
||||||
|
|
|
@ -5,8 +5,9 @@ import { makeDiv } from "../../../core/utils";
|
||||||
import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
|
import { KeyActionMapper, KEYMAPPINGS } from "../../key_action_mapper";
|
||||||
import { BaseHUDPart } from "../base_hud_part";
|
import { BaseHUDPart } from "../base_hud_part";
|
||||||
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
import { DynamicDomAttach } from "../dynamic_dom_attach";
|
||||||
|
import { T } from "../../../translations";
|
||||||
|
|
||||||
const maxTutorialVideo = 7;
|
const tutorialVideos = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11];
|
||||||
|
|
||||||
export class HUDPartTutorialHints extends BaseHUDPart {
|
export class HUDPartTutorialHints extends BaseHUDPart {
|
||||||
createElements(parent) {
|
createElements(parent) {
|
||||||
|
@ -16,10 +17,10 @@ export class HUDPartTutorialHints extends BaseHUDPart {
|
||||||
[],
|
[],
|
||||||
`
|
`
|
||||||
<div class="header">
|
<div class="header">
|
||||||
No idea what to do?
|
<span>${T.ingame.tutorialHints.title}</span>
|
||||||
<button class="styledButton toggleHint">
|
<button class="styledButton toggleHint">
|
||||||
<span class="show">Show hint</span>
|
<span class="show">${T.ingame.tutorialHints.showHint}</span>
|
||||||
<span class="hide">Hide hint</span>
|
<span class="hide">${T.ingame.tutorialHints.hideHint}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -56,10 +57,16 @@ export class HUDPartTutorialHints extends BaseHUDPart {
|
||||||
}
|
}
|
||||||
|
|
||||||
updateVideoUrl(level) {
|
updateVideoUrl(level) {
|
||||||
console.log("update video url.", level);
|
if (tutorialVideos.indexOf(level) < 0) {
|
||||||
this.videoElement
|
this.videoElement.querySelector("source").setAttribute("src", "");
|
||||||
.querySelector("source")
|
this.videoElement.pause();
|
||||||
.setAttribute("src", cachebust("res/videos/level_" + level + ".webm"));
|
} else {
|
||||||
|
this.videoElement
|
||||||
|
.querySelector("source")
|
||||||
|
.setAttribute("src", "https://static.shapez.io/tutorial_videos/level_" + level + ".webm");
|
||||||
|
this.videoElement.currentTime = 0;
|
||||||
|
this.videoElement.load();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
close() {
|
close() {
|
||||||
|
@ -89,7 +96,7 @@ export class HUDPartTutorialHints extends BaseHUDPart {
|
||||||
|
|
||||||
this.currentShownLevel.set(this.root.hubGoals.level);
|
this.currentShownLevel.set(this.root.hubGoals.level);
|
||||||
|
|
||||||
const tutorialVisible = this.root.hubGoals.level <= maxTutorialVideo;
|
const tutorialVisible = tutorialVideos.indexOf(this.root.hubGoals.level) >= 0;
|
||||||
this.domAttach.update(tutorialVisible);
|
this.domAttach.update(tutorialVisible);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -187,12 +187,12 @@ export class MainMenuState extends GameState {
|
||||||
this.trackClicks(qs(".mainContainer .importButton"), this.requestImportSavegame);
|
this.trackClicks(qs(".mainContainer .importButton"), this.requestImportSavegame);
|
||||||
|
|
||||||
if (G_IS_DEV && globalConfig.debug.fastGameEnter) {
|
if (G_IS_DEV && globalConfig.debug.fastGameEnter) {
|
||||||
const games = this.app.savegameMgr.getSavegamesMetaData();
|
// // const games = this.app.savegameMgr.getSavegamesMetaData();
|
||||||
if (games.length > 0) {
|
// if (games.length > 0) {
|
||||||
this.resumeGame(games[0]);
|
// this.resumeGame(games[0]);
|
||||||
} else {
|
// } else {
|
||||||
this.onPlayButtonClicked();
|
this.onPlayButtonClicked();
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize video
|
// Initialize video
|
||||||
|
|
|
@ -251,6 +251,12 @@ ingame:
|
||||||
settings: Settings
|
settings: Settings
|
||||||
menu: Return to menu
|
menu: Return to menu
|
||||||
|
|
||||||
|
# Bottom left tutorial hints
|
||||||
|
tutorialHints:
|
||||||
|
title: No idea what to do?
|
||||||
|
showHint: Show hint
|
||||||
|
hideHint: Close
|
||||||
|
|
||||||
# All shop upgrades
|
# All shop upgrades
|
||||||
shopUpgrades:
|
shopUpgrades:
|
||||||
belt:
|
belt:
|
||||||
|
|
Reference in New Issue