feat: Update intro and placeholder
- Change intro from njk to liquid - New svg content for brand shortcode - New style for brand in ui
This commit is contained in:
parent
9b44963ba2
commit
6ae411c83b
5 changed files with 181 additions and 169 deletions
52
.eleventy.js
52
.eleventy.js
|
|
@ -60,27 +60,39 @@ export default async function (eleventyConfig) {
|
||||||
eleventyConfig.addPairedShortcode("brand", function (content, attrClass = 'brand', direction = 'first') {
|
eleventyConfig.addPairedShortcode("brand", function (content, attrClass = 'brand', direction = 'first') {
|
||||||
const logo = `
|
const logo = `
|
||||||
<svg
|
<svg
|
||||||
width="128"
|
width="100%"
|
||||||
height="128"
|
height="100%"
|
||||||
viewBox="0 0 128 128"
|
viewBox="0 0 512 512"
|
||||||
preserveAspectRatio="xMidYMid meet">
|
preserveAspectRatio="xMidYMid meet">
|
||||||
<g>
|
<defs
|
||||||
<rect
|
id="defs1" />
|
||||||
style="display:inline;fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-dasharray:none"
|
<g
|
||||||
width="126"
|
id="layer1">
|
||||||
height="126"
|
<g
|
||||||
x="1"
|
id="g2"
|
||||||
y="1"/>
|
transform="matrix(0.984375,0,0,0.984375,4,4)"
|
||||||
<circle
|
style="stroke-width:1.01587">
|
||||||
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
|
<rect
|
||||||
cx="64"
|
style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||||
cy="64"
|
id="rect1"
|
||||||
r="63"/>
|
width="512"
|
||||||
<path
|
height="512"
|
||||||
style="fill:none;stroke:#ffffff;stroke-width:2;stroke-linecap:round;stroke-linejoin:bevel;stroke-dasharray:none"
|
x="0"
|
||||||
d="m 9.3926879,32.472455 109.2146221,-2e-6 -54.607309,94.582637 z"/>
|
y="0" />
|
||||||
</g>
|
<circle
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:square;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||||
|
id="path1"
|
||||||
|
cx="256"
|
||||||
|
cy="256"
|
||||||
|
r="256" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:8.12698;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||||
|
id="path2"
|
||||||
|
d="M 477.7025,128 256,512 34.297496,128 Z"
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
`;
|
`;
|
||||||
let output = '';
|
let output = '';
|
||||||
switch (direction) {
|
switch (direction) {
|
||||||
|
|
|
||||||
138
source/screens/demo/examples/game/intro.liquid
Normal file
138
source/screens/demo/examples/game/intro.liquid
Normal file
|
|
@ -0,0 +1,138 @@
|
||||||
|
---
|
||||||
|
title: Intro
|
||||||
|
tags:
|
||||||
|
- game
|
||||||
|
---
|
||||||
|
|
||||||
|
{% assign pageId = "init" %}
|
||||||
|
{% assign bodyClass = 'body_intro' -%}
|
||||||
|
{% layout 'hippie/app.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div id="loader" class="step op_show">
|
||||||
|
<div id="bar">
|
||||||
|
<div id="spinner">
|
||||||
|
<span>I</span>
|
||||||
|
</div>
|
||||||
|
<div id="wrap">
|
||||||
|
<div id="progress"></div>
|
||||||
|
</div>
|
||||||
|
<div id="status">0%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="intro" class="step op_hide">
|
||||||
|
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
|
||||||
|
<p>Hold
|
||||||
|
<kbd>space</kbd>
|
||||||
|
to skip.</p>
|
||||||
|
</div>
|
||||||
|
{% brand 'brand' %}
|
||||||
|
<h1>Marke</h1>
|
||||||
|
{% endbrand %}
|
||||||
|
<p>Powered by</p>
|
||||||
|
<ul class="tech-stack">
|
||||||
|
<li>Vendor</li>
|
||||||
|
<li>IDE</li>
|
||||||
|
<li>Engine</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div id="agreement" class="step op_hide">
|
||||||
|
<h1>Agreement</h1>
|
||||||
|
<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
|
||||||
|
</div>
|
||||||
|
<div id="idle" class="step op_hide">
|
||||||
|
<div class="mouse-overlay"></div>
|
||||||
|
<div class="hello">Hello World!</div>
|
||||||
|
<p class="hello">Only left mouse click or any key</p>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<script src="/js/intro.js"></script>
|
||||||
|
<script>
|
||||||
|
//let intro = new Intro('Intro');
|
||||||
|
//intro.init();
|
||||||
|
|
||||||
|
//const ui = new UI();
|
||||||
|
//ui
|
||||||
|
// .init()
|
||||||
|
// .then(() => ui.showIntro())
|
||||||
|
// .then(() => ui.showHint())
|
||||||
|
// .then(() => ui.showIdle())
|
||||||
|
// .catch((error) => console.error(error));
|
||||||
|
|
||||||
|
let introDelay = 6;
|
||||||
|
let hintDelay = 1;
|
||||||
|
let cycleDelay = 2;
|
||||||
|
let isAgree = false;
|
||||||
|
const steps = {
|
||||||
|
agreement: {
|
||||||
|
element: document.getElementById('agreement'),
|
||||||
|
msgIn: 'Agreement shown.',
|
||||||
|
msgOut: 'Agreement accepted.',
|
||||||
|
msgNo: 'No agreement today.'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const intro = document.getElementById('intro');
|
||||||
|
const agreement = steps.agreement.element;
|
||||||
|
const hint = {
|
||||||
|
element: document.getElementById('hint'),
|
||||||
|
delay: hintDelay * 1000,
|
||||||
|
show() {
|
||||||
|
if (typeof this.timeoutId === 'number') {
|
||||||
|
this.cancel();
|
||||||
|
}
|
||||||
|
this
|
||||||
|
.element
|
||||||
|
.classList
|
||||||
|
.remove('di_none');
|
||||||
|
this.timeoutId = setTimeout(() => {
|
||||||
|
this.dismiss();
|
||||||
|
}, this.delay);
|
||||||
|
},
|
||||||
|
dismiss() {
|
||||||
|
this
|
||||||
|
.element
|
||||||
|
.classList
|
||||||
|
.add('di_none');
|
||||||
|
this.timeoutId = undefined;
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
clearTimeout(this.timeoutId);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const loader = document.getElementById('loader');
|
||||||
|
const idle = {
|
||||||
|
element: document.getElementById('idle'),
|
||||||
|
delay: cycleDelay * 1000,
|
||||||
|
position: 0,
|
||||||
|
cycle() {
|
||||||
|
if (typeof this.intervalId === 'number') {
|
||||||
|
this.cancel();
|
||||||
|
}
|
||||||
|
this.intervalId = setInterval(() => {
|
||||||
|
this.position++;
|
||||||
|
if (this.position >= flagColors.length) {
|
||||||
|
this.position = 0;
|
||||||
|
}
|
||||||
|
this.element.style.backgroundColor = '#' + flagColors[this.position];
|
||||||
|
}, this.delay);
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
this.intervalId && clearInterval(this.intervalId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
init()
|
||||||
|
.then(loadCore)
|
||||||
|
.then(showIntro)
|
||||||
|
.catch(er => console.error(er))
|
||||||
|
.then(showAgreement)
|
||||||
|
.then(showIdle)
|
||||||
|
.catch(er => console.error(er))
|
||||||
|
.finally(() => {
|
||||||
|
console.debug('Init end.', isAgree);
|
||||||
|
// location = 'demo/examples/ui/new.html';
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -1,138 +0,0 @@
|
||||||
---
|
|
||||||
title: Intro
|
|
||||||
tags:
|
|
||||||
- game
|
|
||||||
---
|
|
||||||
|
|
||||||
{% set pageId = "init" %}
|
|
||||||
{% set bodyClass = "body_intro" %}
|
|
||||||
|
|
||||||
{% extends "hippie/_app_frame.njk" %}
|
|
||||||
{% import "hippie/macros/_placeholder.njk" as ph %}
|
|
||||||
|
|
||||||
{% block body %}
|
|
||||||
<div id="loader" class="step op_show">
|
|
||||||
<div id="bar">
|
|
||||||
<div id="spinner">
|
|
||||||
<span>I</span>
|
|
||||||
</div>
|
|
||||||
<div id="wrap">
|
|
||||||
<div id="progress"></div>
|
|
||||||
</div>
|
|
||||||
<div id="status">0%</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="intro" class="step op_hide">
|
|
||||||
<div id="hint" class="toast di_none" role="alert" aria-live="assertive" aria-atomic="true">
|
|
||||||
<p>Hold
|
|
||||||
<kbd>space</kbd>
|
|
||||||
to skip.</p>
|
|
||||||
</div>
|
|
||||||
{{ ph.brand('brand') }}
|
|
||||||
<p>Powered by</p>
|
|
||||||
<ul class="tech-stack">
|
|
||||||
<li>Vendor</li>
|
|
||||||
<li>IDE</li>
|
|
||||||
<li>Engine</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="agreement" class="step op_hide">
|
|
||||||
<h1>Agreement</h1>
|
|
||||||
<p>This needs to be seen and acknowledged.<br>So an interaction must be made to continue.</p>
|
|
||||||
</div>
|
|
||||||
<div id="idle" class="step op_hide">
|
|
||||||
<div class="mouse-overlay"></div>
|
|
||||||
<div class="hello">Hello World!</div>
|
|
||||||
<p class="hello">Only left mouse click or any key</p>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{%- block script %}
|
|
||||||
{{ super() }}
|
|
||||||
<script src="{{ pageBase }}js/intro.js"></script>
|
|
||||||
<script>
|
|
||||||
//let intro = new Intro('Intro');
|
|
||||||
//intro.init();
|
|
||||||
|
|
||||||
//const ui = new UI();
|
|
||||||
//ui
|
|
||||||
// .init()
|
|
||||||
// .then(() => ui.showIntro())
|
|
||||||
// .then(() => ui.showHint())
|
|
||||||
// .then(() => ui.showIdle())
|
|
||||||
// .catch((error) => console.error(error));
|
|
||||||
|
|
||||||
let introDelay = 6;
|
|
||||||
let hintDelay = 1;
|
|
||||||
let cycleDelay = 2;
|
|
||||||
let isAgree = false;
|
|
||||||
const steps = {
|
|
||||||
agreement: {
|
|
||||||
element: document.getElementById('agreement'),
|
|
||||||
msgIn: 'Agreement shown.',
|
|
||||||
msgOut: 'Agreement accepted.',
|
|
||||||
msgNo: 'No agreement today.'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const intro = document.getElementById('intro');
|
|
||||||
const agreement = steps.agreement.element;
|
|
||||||
const hint = {
|
|
||||||
element: document.getElementById('hint'),
|
|
||||||
delay: hintDelay * 1000,
|
|
||||||
show() {
|
|
||||||
if (typeof this.timeoutId === 'number') {
|
|
||||||
this.cancel();
|
|
||||||
}
|
|
||||||
this
|
|
||||||
.element
|
|
||||||
.classList
|
|
||||||
.remove('di_none');
|
|
||||||
this.timeoutId = setTimeout(() => {
|
|
||||||
this.dismiss();
|
|
||||||
}, this.delay);
|
|
||||||
},
|
|
||||||
dismiss() {
|
|
||||||
this
|
|
||||||
.element
|
|
||||||
.classList
|
|
||||||
.add('di_none');
|
|
||||||
this.timeoutId = undefined;
|
|
||||||
},
|
|
||||||
cancel() {
|
|
||||||
clearTimeout(this.timeoutId);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const loader = document.getElementById('loader');
|
|
||||||
const idle = {
|
|
||||||
element: document.getElementById('idle'),
|
|
||||||
delay: cycleDelay * 1000,
|
|
||||||
position: 0,
|
|
||||||
cycle() {
|
|
||||||
if (typeof this.intervalId === 'number') {
|
|
||||||
this.cancel();
|
|
||||||
}
|
|
||||||
this.intervalId = setInterval(() => {
|
|
||||||
this.position++;
|
|
||||||
if (this.position >= flagColors.length) {
|
|
||||||
this.position = 0;
|
|
||||||
}
|
|
||||||
this.element.style.backgroundColor = '#' + flagColors[this.position];
|
|
||||||
}, this.delay);
|
|
||||||
},
|
|
||||||
cancel() {
|
|
||||||
this.intervalId && clearInterval(this.intervalId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
init()
|
|
||||||
.then(loadCore)
|
|
||||||
.then(showIntro)
|
|
||||||
.catch(er => console.error(er))
|
|
||||||
.then(showAgreement)
|
|
||||||
.then(showIdle)
|
|
||||||
.catch(er => console.error(er))
|
|
||||||
.finally(() => {
|
|
||||||
console.debug('Init end.', isAgree);
|
|
||||||
// location = 'demo/examples/ui/new.html';
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
@ -21,16 +21,7 @@
|
||||||
& > svg {
|
& > svg {
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
|
|
||||||
rect, circle, path {
|
|
||||||
stroke: black !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
|
||||||
|
|
||||||
}
|
|
||||||
;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -124,6 +124,15 @@ $space_gui_half: hippie.$space_half;
|
||||||
.brand {
|
.brand {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 128px;
|
||||||
|
width: 128px;
|
||||||
|
|
||||||
|
rect, circle, path {
|
||||||
|
stroke: white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 128px;
|
width: 128px;
|
||||||
|
|
@ -131,7 +140,7 @@ $space_gui_half: hippie.$space_half;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
*+h1 {
|
* + h1 {
|
||||||
margin-top: hippie.$space_small;
|
margin-top: hippie.$space_small;
|
||||||
margin-bottom: hippie.$space_large;
|
margin-bottom: hippie.$space_large;
|
||||||
}
|
}
|
||||||
|
|
@ -170,7 +179,7 @@ $space_gui_half: hippie.$space_half;
|
||||||
background-color: hippie.$color_back_basic;
|
background-color: hippie.$color_back_basic;
|
||||||
transition: background-color 4s;
|
transition: background-color 4s;
|
||||||
|
|
||||||
&:hover>.mouse-overlay {
|
&:hover > .mouse-overlay {
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
|
transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue