q-import { dist/q-components/q-animation.qhtml }
q-import { dist/q-components/q-hud.qhtml }
q-import { dist/q-components/q-vid-player.qhtml }
q-import { dist/q-components/q-tech-button.qhtml }
q-style stageStyle {
position: absolute;
top: 20vh;
height: 40vh;
overflow: visible;
}
q-style vidStyle {
position: absolute;
left: 0vh;
top: 0vh;
width: 900px;
height: 500px;
zIndex: 1;
pointerEvents: none;
}
q-style panelStyle {
width: 50vw;
height: 1vh;
left: 10vw;
top: 16vh;
position: absolute;
zIndex: 300;
transformOrigin: center center;
}
q-style boxStyle {
width: 70vw;
height: 65vh;
top: 0vh;
color: white;
padding-top: 0vh;
padding-left: 0vw;
padding-bottom: 5vh;
padding-right: 5vh;
}
q-theme hudTheme {
#stage { stageStyle }
#vid { vidStyle }
#panel { panelStyle }
.tech-box { boxStyle }
button {
q-style {
zIndex: 400;
position: absolute;
left: 20vw;
top: 20vh;
width: 10vw;
height: 10vh;
}
}
}
q-component reveal-tech-panel {
q-property panelScale: 0
q-property panelOpacity: 0.25
q-property revealed: false
function applyRevealState() {
this.style.transform = "scaleX(" + String(this.panelScale) + ")";
this.style.opacity = String(this.panelOpacity);
}
function reveal() {
if (this.component.revealed) {
this.component.resetReveal();
}
this.component.revealed = true;
this.querySelectorAll("q-property-animation").forEach(function(anim) {
anim.start();
});
}
function resetReveal() {
this.revealed = false;
this.panelScale = 0;
this.panelOpacity = 1;
this.applyRevealState();
}
onpanelScalechanged(value) {
this.component.applyRevealState();
}
onpanelOpacitychanged(value) {
this.component.applyRevealState();
}
onready {
this.component.applyRevealState();
}
q-property-animation {
target: "#panel.panelScale"
duration: 700
steps: 100
from: 0
to: 1
running: false
}
div {
div {
borderWidth: "3px"
borderColor: "#6ee7ff"
bottomLeft: "64px"
shadowColor: "#00ff99"
topLeft: "64px"
bottomRight: "62px"
topDent: "64px"
topDentLength: "24%"
patternSize: "12px"
div.tech-box {
div {
style { padding-left: -10vw; padding-top: -10vw; width: 100%; height: 120% }
img { src: "tools/assets/datafault-logo-2.png"; width: "100%" height: "100%" }
}
}
}
}
}
q-component q-vid-animation-stage {
q-timer revealDelay {
interval: 1200
repeat: false
running: false
ontimeout {
hudPanel.reveal();
}
}
function playSequence() {
this.querySelector("q-tech-button").style.opacity = 0;
demoVid.stop();
revealDelay.restart();
demoVid.start();
}
hudTheme {
div#stage {
div#vid {
q-vid-player demoVid {
src: "tools/assets/hud-extend.qvid"
frameDuration: 20
scale: 3.2
startFrame: 0
endFrame: 125
repeat: false
reverse: false
}
}
reveal-tech-panel#panel hudPanel { }
q-tech-button {
onclick {
this.closest("q-vid-animation-stage").playSequence();
}
text { Click here }
}
}
}
}
q-vid-animation-stage { }