Compare commits
11 commits
a962046183
...
d5dfacb9a9
| Author | SHA1 | Date | |
|---|---|---|---|
| d5dfacb9a9 | |||
| 46491f8df7 | |||
| 019e25945e | |||
| ba96b889da | |||
| aa40877469 | |||
| e698161a2d | |||
| afcb06a808 | |||
| a67a36decb | |||
| 19577eca8c | |||
| a1b5aa8c59 | |||
| c518672db0 |
18 changed files with 650 additions and 152 deletions
|
|
@ -31,7 +31,8 @@ export default async function (eleventyConfig) {
|
||||||
return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
|
return (data) => `${data.page.filePathStem}.${data.page.outputFileExtension}`;
|
||||||
});
|
});
|
||||||
|
|
||||||
const demoPath = await hasFiles('source/screens') ? '/demo/' : '/';
|
// TODO: Demo entfernen
|
||||||
|
const permalinkPath = await hasFiles('source/screens') ? '/demo/' : '/';
|
||||||
|
|
||||||
eleventyConfig.addGlobalData('hippie', {
|
eleventyConfig.addGlobalData('hippie', {
|
||||||
brand: 'hippie',
|
brand: 'hippie',
|
||||||
|
|
@ -44,7 +45,7 @@ export default async function (eleventyConfig) {
|
||||||
mail: 'name@domain.tld',
|
mail: 'name@domain.tld',
|
||||||
domain: 'https://domain.tld'
|
domain: 'https://domain.tld'
|
||||||
},
|
},
|
||||||
demoPath: demoPath,
|
permalink: permalinkPath,
|
||||||
debugMode: true,
|
debugMode: true,
|
||||||
legacyMode: false
|
legacyMode: false
|
||||||
});
|
});
|
||||||
|
|
|
||||||
104
CHANGELOG.md
104
CHANGELOG.md
|
|
@ -1,52 +1,52 @@
|
||||||
| Commit | Version | Description |
|
| Commit | Version | Description |
|
||||||
| :--- | :----: | :--- |
|
|:-----------------------------------------|:-------:|:------------------------------------------------|
|
||||||
| 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again |
|
| 6095870ce33fd3775718a1de3d33f604fd0630ab | 0.4.2 | Javascript again |
|
||||||
| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content |
|
| 50a1a6d9257b272e076c2e3b5bac39c7d17b2793 | 0.5.0 | Changes to content |
|
||||||
| e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | |
|
| e2bbe9273a292a3806de1599f752258a2721d067 | 0.5.1 | |
|
||||||
| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 | 0.5.2 | |
|
| 3d4eef5eb0a1632b43e1e3372e38a70cd4b58914 | 0.5.2 | |
|
||||||
| 371cb450f81cd0d692c9005952af35ec066e01e1 | 0.6.0 | New es6 coding standard |
|
| 371cb450f81cd0d692c9005952af35ec066e01e1 | 0.6.0 | New es6 coding standard |
|
||||||
| 175816c3595d783e7d8b48f5336fbdd54dae145b | 0.6.1 | |
|
| 175816c3595d783e7d8b48f5336fbdd54dae145b | 0.6.1 | |
|
||||||
| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 | 0.6.2 | |
|
| 67e3cc1eca359bc2b927b8e971ccd7ba71f4c5a2 | 0.6.2 | |
|
||||||
| abeb843718988fab978de7c75d6d45806f5d35a7 | 0.6.3 | |
|
| abeb843718988fab978de7c75d6d45806f5d35a7 | 0.6.3 | |
|
||||||
| 4401761a6bec9db19293353942479aea7bb8ead1 | 0.6.4 | |
|
| 4401761a6bec9db19293353942479aea7bb8ead1 | 0.6.4 | |
|
||||||
| 83464a1cf4ba3efc6382eafb6f68f106c6650161 | 0.6.5 | |
|
| 83464a1cf4ba3efc6382eafb6f68f106c6650161 | 0.6.5 | |
|
||||||
| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 | 0.6.6 | |
|
| 6f95393409b502fef9ad9677b3c1ed1fe07ecc28 | 0.6.6 | |
|
||||||
| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d | 0.6.7 | |
|
| 63b54f2749ed5a4d9a7a53c27540e7d6f8dff63d | 0.6.7 | |
|
||||||
| 830037f5e5237d33ad66fe89ba45167a62d87829 | 0.6.8 | |
|
| 830037f5e5237d33ad66fe89ba45167a62d87829 | 0.6.8 | |
|
||||||
| d205031fff29ee4d48251e30b17090143ae5458c | 0.7.0 | switched to style submodule usage |
|
| d205031fff29ee4d48251e30b17090143ae5458c | 0.7.0 | switched to style submodule usage |
|
||||||
| d18254b61d87eb3d09d17b93783117dad7d13686 | 0.7.1 | |
|
| d18254b61d87eb3d09d17b93783117dad7d13686 | 0.7.1 | |
|
||||||
| 9b9b0cb1c631273f574d3cd7618bd799f561db6c | 0.7.2 | |
|
| 9b9b0cb1c631273f574d3cd7618bd799f561db6c | 0.7.2 | |
|
||||||
| 11b30671d4948dfd30b7da14fe7295f386b54257 | 0.7.3 | |
|
| 11b30671d4948dfd30b7da14fe7295f386b54257 | 0.7.3 | |
|
||||||
| 767b3024fa3bbededab2a8d665b4b35b55854a1c | 0.7.4 | |
|
| 767b3024fa3bbededab2a8d665b4b35b55854a1c | 0.7.4 | |
|
||||||
| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d | 0.8.0 | changes to license file and submodule update |
|
| 5c3cda58b147f16e1b9fdf1ed7b5499651df943d | 0.8.0 | changes to license file and submodule update |
|
||||||
| 8567604ea6b129ded8b0e6108362a30d039235a7 | 0.8.1 | |
|
| 8567604ea6b129ded8b0e6108362a30d039235a7 | 0.8.1 | |
|
||||||
| b2ea5b01aa47783b5f797310e16f1897e1839eb9 | 0.9.0 | Requirements updated and new nunjucks variables |
|
| b2ea5b01aa47783b5f797310e16f1897e1839eb9 | 0.9.0 | Requirements updated and new nunjucks variables |
|
||||||
| df064b8a942f00dd3277a9dde696e91324dfd166 | 0.9.1 | |
|
| df064b8a942f00dd3277a9dde696e91324dfd166 | 0.9.1 | |
|
||||||
| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba | 0.9.2 | |
|
| d812ed62084c90d4fac18b6c56a6dd3bf9bd7cba | 0.9.2 | |
|
||||||
| 84957f75a017d5d06a32874282d9eb9f3d537534 | 0.9.3 | |
|
| 84957f75a017d5d06a32874282d9eb9f3d537534 | 0.9.3 | |
|
||||||
| 489786aadc30bb589be769fe627389611c4f71f5 | 0.9.4 | |
|
| 489786aadc30bb589be769fe627389611c4f71f5 | 0.9.4 | |
|
||||||
| 003a1159231241140a262ae67bb1236978b22ec0 | 0.9.5 | |
|
| 003a1159231241140a262ae67bb1236978b22ec0 | 0.9.5 | |
|
||||||
| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 | 0.9.6 | |
|
| 731c19dd61215b8f373af9100ad5c23f19a4c2a3 | 0.9.6 | |
|
||||||
| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b | 0.9.7 | |
|
| dd5ff43e1695d2de0b5a0a9614c1f31ad7e7b85b | 0.9.7 | |
|
||||||
| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 | 0.9.8 | |
|
| dde26ec45eeb8d28a986093b8b5b29d8165e5a11 | 0.9.8 | |
|
||||||
| 06ba1113929183f51e8501d440c950e4b4d9f0d2 | 0.9.9 | |
|
| 06ba1113929183f51e8501d440c950e4b4d9f0d2 | 0.9.9 | |
|
||||||
| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10 | |
|
| 827e6c1cde0aa4ca65e6c170174eae91da9aa4c9 | 0.9.10 | |
|
||||||
| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11 | |
|
| 202729f9ba098b5ff07f6af43acce7a67007cd1b | 0.9.11 | |
|
||||||
| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12 | |
|
| d22828400125f8572cfbe6243e2521ffab519adf | 0.9.12 | |
|
||||||
| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13 | |
|
| bf1a6ca7421a0385f664f864a82850f0805522c0 | 0.9.13 | |
|
||||||
| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14 | |
|
| 32215de810546f6ebd7f552816fc5bf3281a0a13 | 0.9.14 | |
|
||||||
| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0 | Added card and portal modules |
|
| f7dd7c93e3a06bc430fcf4e12f4be3d3b1aa29c6 | 0.10.0 | Added card and portal modules |
|
||||||
| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1 | |
|
| f54dbe92d912b9e7553a3a2263b009ed05017b0b | 0.10.1 | |
|
||||||
| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2 | |
|
| 6b217b6ebbfcfa2f3e14bdf41e21bb36f88050a5 | 0.10.2 | |
|
||||||
| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3 | |
|
| 534115ff282de4648c294ae78fe768d79e23d379 | 0.10.3 | |
|
||||||
| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4 | |
|
| f7a5481fd2e1d1c96f7e9d82eb2c3db9483b5784 | 0.10.4 | |
|
||||||
| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5 | |
|
| 31e896462e7693a4a6ba10d52657caf919e7f482 | 0.10.5 | |
|
||||||
| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0 | logPerf without JQuery |
|
| 778d7d14d5e8d4dbcce2f9cb996afbc4d7accf27 | 0.11.0 | logPerf without JQuery |
|
||||||
| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0 | Migration to new home |
|
| 1d7f2eb839472524d73f395365ffb43e8fc5d115 | 0.12.0 | Migration to new home |
|
||||||
| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1 | |
|
| 69c04c32349d3d11820da933ed2bbd648fabb040 | 0.12.1 | |
|
||||||
| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2 | |
|
| 9415d4d9573a4f2a4e1c479c74c59abe3a69cd57 | 0.12.2 | |
|
||||||
| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3 | |
|
| 6e7615b44d9ef26ade73a00102878804272cf717 | 0.12.3 | |
|
||||||
| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4 | |
|
| b6ec313f26dde6b379da16edb65de082c6ca9b65 | 0.12.4 | |
|
||||||
| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5 | |
|
| e856e5311439d5a64478f7cda79998476ebdfe33 | 0.12.5 | |
|
||||||
| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0 | Introduced 11ty |
|
| ef9d665849f370b2284ae8d985d9625b5083fe37 | 0.13.0 | Introduced 11ty |
|
||||||
| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.1 | |
|
| 3358e1858bc764e520dad65cc614c842b4f66245 | 0.13.1 | |
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
/* jshint strict: false */
|
||||||
|
|
||||||
// TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
|
// TODO: Inhalte angleichen nach Zusammenfassung von app.js und function.js.
|
||||||
// Benennung und Beschreibungen verbessern.
|
// Benennung und Beschreibungen verbessern.
|
||||||
|
|
||||||
|
|
@ -190,13 +192,13 @@ function composeMail(tag, name, prov, suffix, text, topic) {
|
||||||
el.innerHTML = elContent + text;
|
el.innerHTML = elContent + text;
|
||||||
el.setAttribute('href', 'mailto:' + mailString + topic);
|
el.setAttribute('href', 'mailto:' + mailString + topic);
|
||||||
} else {
|
} else {
|
||||||
const els = document.getElementsByClassName(tag.slice(1));
|
const elements = document.getElementsByClassName(tag.slice(1));
|
||||||
|
|
||||||
for (let el of els) {
|
for (const element of elements) {
|
||||||
const elContent = el.innerHTML;
|
const content = element.innerHTML;
|
||||||
|
|
||||||
el.innerHTML = elContent + text;
|
element.innerHTML = content + text;
|
||||||
el.setAttribute('href', 'mailto:' + mailString + topic);
|
element.setAttribute('href', 'mailto:' + mailString + topic);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -424,10 +426,10 @@ function randomIntFrom(min, max, pos = 0) {
|
||||||
return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
|
return Math.floor((Math.random() * (max - min + 1) + min) / pos) * pos;
|
||||||
}
|
}
|
||||||
|
|
||||||
function randomFloatFrom(min, max, dec = 0) {
|
function randomFloatFrom(min, max, dec = 1) {
|
||||||
dec = Math.pow(10, dec);
|
dec = Math.pow(10, dec);
|
||||||
|
|
||||||
return Math.round((Math.random() * (max - min + 1) + min) * dec) / dec;
|
return Math.round((Math.random() * (max - min) + min) * dec) / dec;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -554,6 +556,62 @@ function zeroFill(number, width) {
|
||||||
// Retrieved 2026-03-08, License - CC BY-SA 4.0
|
// Retrieved 2026-03-08, License - CC BY-SA 4.0
|
||||||
const delay = ms => new Promise(res => setTimeout(res, ms));
|
const delay = ms => new Promise(res => setTimeout(res, ms));
|
||||||
|
|
||||||
|
class RandomPixelCanvas {
|
||||||
|
constructor(containerElement, options = {}) {
|
||||||
|
this.container = containerElement;
|
||||||
|
this.width = options.width || 400;
|
||||||
|
this.height = options.height || 300;
|
||||||
|
this.colors = options.colors || ['#000000', '#ffffff'];
|
||||||
|
this.filter = options.filter || '';
|
||||||
|
this.canvas = this.createCanvas();
|
||||||
|
|
||||||
|
this.fillWithRandomPixels();
|
||||||
|
}
|
||||||
|
|
||||||
|
createCanvas() {
|
||||||
|
const canvas = document.createElement('canvas');
|
||||||
|
canvas.width = this.width;
|
||||||
|
canvas.height = this.height;
|
||||||
|
canvas.style.filter = this.filter;
|
||||||
|
|
||||||
|
this.container.appendChild(canvas);
|
||||||
|
|
||||||
|
return canvas;
|
||||||
|
}
|
||||||
|
|
||||||
|
fillWithRandomPixels() {
|
||||||
|
const ctx = this.canvas.getContext('2d');
|
||||||
|
const imageData = ctx.createImageData(this.width, this.height);
|
||||||
|
const data = imageData.data;
|
||||||
|
|
||||||
|
for (let i = 0; i < data.length; i += 4) {
|
||||||
|
const color = this.getRandomColor();
|
||||||
|
const rgb = this.hexToRgb(color);
|
||||||
|
|
||||||
|
data[i] = rgb.r; // Red
|
||||||
|
data[i + 1] = rgb.g; // Green
|
||||||
|
data[i + 2] = rgb.b; // Blue
|
||||||
|
data[i + 3] = 255; // Alpha
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.putImageData(imageData, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
getRandomColor() {
|
||||||
|
return this.colors[Math.floor(Math.random() * this.colors.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
hexToRgb(hex) {
|
||||||
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||||
|
|
||||||
|
return result ? {
|
||||||
|
r: parseInt(result[1], 16),
|
||||||
|
g: parseInt(result[2], 16),
|
||||||
|
b: parseInt(result[3], 16)
|
||||||
|
} : {r: 0, g: 0, b: 0};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// CONCEPTS
|
// CONCEPTS
|
||||||
|
|
||||||
// NOTE: Benutzt private Zuweisungen
|
// NOTE: Benutzt private Zuweisungen
|
||||||
|
|
|
||||||
18
source/data/menu.json
Normal file
18
source/data/menu.json
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"text": "New",
|
||||||
|
"href": "#new"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Continue",
|
||||||
|
"href": "#continue"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Settings",
|
||||||
|
"href": "#options"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Leave",
|
||||||
|
"href": "/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -208,7 +208,7 @@ order: 2
|
||||||
<figure class="js_pop">
|
<figure class="js_pop">
|
||||||
<figcaption>Fahne</figcaption>
|
<figcaption>Fahne</figcaption>
|
||||||
{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %}
|
{% comment %}// TODO: Durch Platzhalter ersetzten und Prozentangaben ermöglichen{% endcomment %}
|
||||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||||
y="0px" width="10%" height="10%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
y="0px" width="10%" height="10%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
||||||
<desc>Flag</desc>
|
<desc>Flag</desc>
|
||||||
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
|
<rect id="triangle-5" y="0" fill="#273F8B" width="1920" height="1200"/>
|
||||||
|
|
@ -243,7 +243,7 @@ order: 2
|
||||||
<article>
|
<article>
|
||||||
<h1 id="textlevel">Textebene</h1>
|
<h1 id="textlevel">Textebene</h1>
|
||||||
<h2>Verweise</h2>
|
<h2>Verweise</h2>
|
||||||
<p>Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
|
<p id="links">Ein wesentlicher Bestandteil von Hypertext sind <a href="">Verweise</a>
|
||||||
<code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen
|
<code><a></code>. Sie dienen als Sprungmarken innerhalb des Netzwerks. Es kann grob zwischen internen
|
||||||
und externen Verweisen unterschieden werden.
|
und externen Verweisen unterschieden werden.
|
||||||
<a class="a_internal js_pop" href="#links">Interne Verweise</a>
|
<a class="a_internal js_pop" href="#links">Interne Verweise</a>
|
||||||
|
|
@ -948,7 +948,7 @@ order: 2
|
||||||
<div class="box_placeholder"></div>
|
<div class="box_placeholder"></div>
|
||||||
<hr class="hidden"/>
|
<hr class="hidden"/>
|
||||||
<div class="box_placeholder">
|
<div class="box_placeholder">
|
||||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||||
y="0px" width="100%" height="100%">
|
y="0px" width="100%" height="100%">
|
||||||
<line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
|
<line x1='0' y1='0' x2='100%' y2='100%' stroke='#000' stroke-width='.5'/>
|
||||||
<line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/>
|
<line x1='0' y1='100%' x2='100%' y2='0' stroke='#000' stroke-width='.5'/>
|
||||||
|
|
|
||||||
|
|
@ -3,24 +3,11 @@ title: Menu
|
||||||
tags:
|
tags:
|
||||||
- game
|
- game
|
||||||
---
|
---
|
||||||
{% assign bodyClass = 'body_game' -%}
|
{% assign bodyClass = 'body_menu' -%}
|
||||||
{% layout 'hippie/simple.liquid' %}
|
{% layout 'hippie/simple.liquid' %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<div class="sec_main_center">
|
{% render 'hippie/partials/game-menu.liquid', links: menu %}
|
||||||
<nav role="doc-toc">
|
|
||||||
<hgroup>
|
|
||||||
<h1>Game - TFW</h1>
|
|
||||||
<p>Additional name</p>
|
|
||||||
</hgroup>
|
|
||||||
<ul class="link">
|
|
||||||
<li><a href="#new">Neues Spiel</a></li>
|
|
||||||
<li><a href="#continue">Spiel fortsetzen</a></li>
|
|
||||||
<li><a href="#options">Einstellungen</a></li>
|
|
||||||
<li><a href="#quit">Spiel beenden</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
<footer>
|
<footer>
|
||||||
{% brand 'brand', 'last' %}
|
{% brand 'brand', 'last' %}
|
||||||
<p>Marke</p>
|
<p>Marke</p>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
---
|
---
|
||||||
title: FPV
|
title: MWO
|
||||||
tags:
|
tags:
|
||||||
- game
|
- game
|
||||||
---
|
---
|
||||||
{% assign bodyClass = 'body_fpv' -%}
|
{% assign bodyClass = 'body_mwo' -%}
|
||||||
{% layout 'hippie/simple.liquid' %}
|
{% layout 'hippie/game.liquid' %}
|
||||||
|
|
||||||
{% block links %}
|
{% block links %}
|
||||||
{{ block.super -}}
|
{{ block.super -}}
|
||||||
|
|
@ -83,5 +83,4 @@ tags:
|
||||||
canvas.height = window.innerHeight;
|
canvas.height = window.innerHeight;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
212
source/screens/demo/examples/game/tfw.liquid
Normal file
212
source/screens/demo/examples/game/tfw.liquid
Normal file
|
|
@ -0,0 +1,212 @@
|
||||||
|
---
|
||||||
|
title: TFW
|
||||||
|
tags:
|
||||||
|
- game
|
||||||
|
---
|
||||||
|
{% assign bodyClass = 'body_tfw' -%}
|
||||||
|
{% layout 'hippie/game.liquid' %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<header class="io">
|
||||||
|
<button data-action="escape">☰</button>
|
||||||
|
<button data-direction="previous"><</button>
|
||||||
|
<button data-view="quest">Quests</button>
|
||||||
|
<button data-view="region">Regions</button>
|
||||||
|
<button data-view="vendor">Vendors</button>
|
||||||
|
<button data-view="manufacture">Manufacture</button>
|
||||||
|
<button data-view="character">Characters</button>
|
||||||
|
<button data-view="stash">Stash</button>
|
||||||
|
<button data-view="secret">Secret Storage</button>
|
||||||
|
<button data-view="squad">Squads</button>
|
||||||
|
<button data-view="ready">Ready Room</button>
|
||||||
|
<button data-direction="next">></button>
|
||||||
|
</header>
|
||||||
|
<div id="viewQuest" class="view">
|
||||||
|
<main>
|
||||||
|
<nav>
|
||||||
|
<div class="important">Filter</div>
|
||||||
|
<input placeholder="Search" type="text">
|
||||||
|
<select name="type">
|
||||||
|
<option value="" selected>Type</option>
|
||||||
|
<option value="all">All</option>
|
||||||
|
<option value="assasin">Assasination</option>
|
||||||
|
<option value="loot">Looting</option>
|
||||||
|
<option value="extract">Extract</option>
|
||||||
|
<option value="fetch">Fetch</option>
|
||||||
|
<option value="kill">Kill</option>
|
||||||
|
</select>
|
||||||
|
</nav>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<table>
|
||||||
|
<colgroup>
|
||||||
|
<col class="l">
|
||||||
|
<col class="q">
|
||||||
|
<col class="t">
|
||||||
|
</colgroup>
|
||||||
|
<tr>
|
||||||
|
<th>Location</th>
|
||||||
|
<th>Quest</th>
|
||||||
|
<th>Type</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="background">
|
||||||
|
<span>Scorched Earth</span>
|
||||||
|
</td>
|
||||||
|
<td>...</td>
|
||||||
|
<td class="subtle">Available</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="background">
|
||||||
|
<span>Location name</span>
|
||||||
|
</td>
|
||||||
|
<td>...</td>
|
||||||
|
<td class="subtle">Available</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<table>
|
||||||
|
<colgroup>
|
||||||
|
<col class="l">
|
||||||
|
<col class="q">
|
||||||
|
<col class="s">
|
||||||
|
</colgroup>
|
||||||
|
<tr>
|
||||||
|
<th colspan="3">Active quests (Max.: 4)</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="background"></td>
|
||||||
|
<td>King Of Kings</td>
|
||||||
|
<td class="subtle">Active</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="background"></td>
|
||||||
|
<td>Garage Days Pt. 1</td>
|
||||||
|
<td class="subtle success">Complete</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="background">
|
||||||
|
<h2>King Of Kings</h2>
|
||||||
|
</div>
|
||||||
|
<p>A hijacked medium mech dubbed the "Rat King" ...</p>
|
||||||
|
<hr class="dotted">
|
||||||
|
<p>Collect Rat King residue.</p>
|
||||||
|
<hr>
|
||||||
|
<p>Multiple rig container upgrades, 5000 CR, 5000 XP, 2 days of water, + Scav faction
|
||||||
|
rating</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="io">
|
||||||
|
<button data-action="back">Back</button>
|
||||||
|
<button data-action="accept">Accept</button>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<div id="viewRegion" class="view"></div>
|
||||||
|
<div id="viewVendor" class="view"></div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<script>
|
||||||
|
const menu = document.querySelector('body > header');
|
||||||
|
const placeholder = document.querySelectorAll('.background');
|
||||||
|
|
||||||
|
class Menu {
|
||||||
|
constructor(element, options = {}) {
|
||||||
|
this._element = element;
|
||||||
|
this._siblings = element.querySelectorAll('button[data-view]');
|
||||||
|
this.default = options.default || 'quest';
|
||||||
|
|
||||||
|
element.addEventListener('click', this.onClick.bind(this)); // Bind to get the clicked element and not the DOM element of the class
|
||||||
|
|
||||||
|
this.#init();
|
||||||
|
}
|
||||||
|
|
||||||
|
escape() {
|
||||||
|
console.log('escape');
|
||||||
|
}
|
||||||
|
|
||||||
|
#init() {
|
||||||
|
const currentBtn = Array.from(this._siblings).find(
|
||||||
|
el => el.dataset.view === this.default
|
||||||
|
);
|
||||||
|
|
||||||
|
currentBtn.classList.add('active');
|
||||||
|
this.changeView(this.default);
|
||||||
|
}
|
||||||
|
|
||||||
|
changeView(type) {
|
||||||
|
console.debug(type);
|
||||||
|
const id = 'view' + capitalizeFirstLetter(type);
|
||||||
|
const views = document.querySelectorAll('.view');
|
||||||
|
|
||||||
|
for (const view of views) {
|
||||||
|
view.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById(id).style.display = 'flex';
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick(event) {
|
||||||
|
const siblings = this._siblings;
|
||||||
|
const action = event.target.dataset.action;
|
||||||
|
const view = event.target.dataset.view;
|
||||||
|
const direction = event.target.dataset.direction;
|
||||||
|
|
||||||
|
if (event.button !== 0) return;
|
||||||
|
|
||||||
|
if (direction) {
|
||||||
|
const currentBtn = this._element.querySelector('.active');
|
||||||
|
let newButton, newView = undefined;
|
||||||
|
|
||||||
|
if (currentBtn === null) return;
|
||||||
|
|
||||||
|
if (direction === 'next') {
|
||||||
|
newButton = currentBtn.nextElementSibling;
|
||||||
|
newView = currentBtn.nextElementSibling.dataset.view;
|
||||||
|
} else {
|
||||||
|
newButton = currentBtn.previousElementSibling;
|
||||||
|
newView = currentBtn.previousElementSibling.dataset.view;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!newButton.dataset.view) {
|
||||||
|
newButton = direction === 'next' ? siblings[0] : siblings[siblings.length - 1];
|
||||||
|
}
|
||||||
|
|
||||||
|
currentBtn.classList.remove('active');
|
||||||
|
newButton.classList.add('active');
|
||||||
|
this.changeView(newView);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (view) {
|
||||||
|
for (const sibling of siblings) {
|
||||||
|
sibling.classList.remove('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.changeView(view);
|
||||||
|
event.target.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (action) this[action]();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
placeholder.forEach(element => {
|
||||||
|
const hue = randomIntFrom(0, 360);
|
||||||
|
const grayscale = randomFloatFrom(0, 1);
|
||||||
|
|
||||||
|
new RandomPixelCanvas(element, {
|
||||||
|
width: Math.floor(element.parentElement.clientWidth),
|
||||||
|
height: Math.floor(element.parentElement.clientHeight),
|
||||||
|
colors: ['#fad803', '#d30a51', '#273f8b', '#b7e0f0', '#52bed1', '#0c85ff'],
|
||||||
|
filter: 'grayscale(' + grayscale + ') hue-rotate(' + hue + 'deg)'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
new Menu(menu);
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
|
|
@ -25,7 +25,7 @@ tags:
|
||||||
<i class="bi bi-hash"></i>
|
<i class="bi bi-hash"></i>
|
||||||
</button>
|
</button>
|
||||||
<div class="group_nav">
|
<div class="group_nav">
|
||||||
<select id="sltNum" name="position-number">
|
<select id="sltNum" name="position-number" aria-label="numbering">
|
||||||
<option value="" selected>None</option>
|
<option value="" selected>None</option>
|
||||||
<option value="numeric">123</option>
|
<option value="numeric">123</option>
|
||||||
<option value="latin">ABC</option>
|
<option value="latin">ABC</option>
|
||||||
|
|
@ -62,26 +62,26 @@ tags:
|
||||||
<th scope="row"></th>
|
<th scope="row"></th>
|
||||||
<td class="io">
|
<td class="io">
|
||||||
<nav>
|
<nav>
|
||||||
<input class="input_io" name="active" type="checkbox">
|
<input class="input_io" name="active" aria-label="active" type="checkbox">
|
||||||
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
||||||
</nav>
|
</nav>
|
||||||
</td>
|
</td>
|
||||||
<td class="pos-num"></td>
|
<td class="pos-num"></td>
|
||||||
<td><input class="input_io" name="number" type="text"></td>
|
<td><input class="input_io" name="number" aria-label="number" type="text"></td>
|
||||||
<td><input class="input_io" name="name" type="text"></td>
|
<td><input class="input_io" name="name" aria-label="name" type="text"></td>
|
||||||
{% comment %}<td class="ellipsis"></td>{% endcomment %}
|
{% comment %}<td class="ellipsis"></td>{% endcomment %}
|
||||||
<td>
|
<td>
|
||||||
<textarea class="fit" name="description" cols="64" rows="2"></textarea>
|
<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
|
||||||
</td>
|
</td>
|
||||||
<td><input class="input_io" name="amount" type="number"></td>
|
<td><input class="input_io" name="amount" aria-label="amount" type="number"></td>
|
||||||
<td>
|
<td>
|
||||||
<select class="io_select" name="units">
|
<select class="io_select" name="unit" aria-label="unit">
|
||||||
<option value="">None</option>
|
<option value="">None</option>
|
||||||
<option value="piece">Piece(s)</option>
|
<option value="piece">Piece(s)</option>
|
||||||
<option value="hour">Hour(s)</option>
|
<option value="hour">Hour(s)</option>
|
||||||
</select>
|
</select>
|
||||||
</td>
|
</td>
|
||||||
<td><input class="input_io" name="price" type="text"></td>
|
<td><input class="input_io" name="price" aria-label="price" type="text"></td>
|
||||||
<td class="unit"></td>
|
<td class="unit"></td>
|
||||||
<td class="io">
|
<td class="io">
|
||||||
<nav>
|
<nav>
|
||||||
|
|
@ -97,7 +97,7 @@ tags:
|
||||||
<th scope="row"></th>
|
<th scope="row"></th>
|
||||||
<td class="io">
|
<td class="io">
|
||||||
<nav>
|
<nav>
|
||||||
<input class="input_io" name="active" type="checkbox">
|
<input class="input_io" name="active" aria-label="active" type="checkbox">
|
||||||
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
||||||
</nav>
|
</nav>
|
||||||
</td>
|
</td>
|
||||||
|
|
@ -105,11 +105,11 @@ tags:
|
||||||
<td class="rigid"></td>
|
<td class="rigid"></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>
|
<td>
|
||||||
<textarea class="fit" name="description" cols="64" rows="2"></textarea>
|
<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
|
||||||
</td>
|
</td>
|
||||||
<td><input name="amount" type="number"></td>
|
<td><input name="amount" aria-label="number" type="number"></td>
|
||||||
<td>
|
<td>
|
||||||
<select name="units">
|
<select name="unit" aria-label="unit">
|
||||||
<option value="">None</option>
|
<option value="">None</option>
|
||||||
<option value="piece">Piece(s)</option>
|
<option value="piece">Piece(s)</option>
|
||||||
<option value="hour">Hour(s)</option>
|
<option value="hour">Hour(s)</option>
|
||||||
|
|
@ -131,13 +131,13 @@ tags:
|
||||||
<th scope="row"></th>
|
<th scope="row"></th>
|
||||||
<td class="io">
|
<td class="io">
|
||||||
<nav>
|
<nav>
|
||||||
<input class="input_io" name="active" type="checkbox">
|
<input class="input_io" name="active" aria-label="active" type="checkbox">
|
||||||
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
||||||
</nav>
|
</nav>
|
||||||
</td>
|
</td>
|
||||||
<td class="pos-num"></td>
|
<td class="pos-num"></td>
|
||||||
<td colspan="7">
|
<td colspan="7">
|
||||||
<textarea class="fit" name="description" cols="64" rows="2"></textarea>
|
<textarea class="fit" name="description" cols="64" rows="2" aria-label="description"></textarea>
|
||||||
</td>
|
</td>
|
||||||
<td class="io">
|
<td class="io">
|
||||||
<nav>
|
<nav>
|
||||||
|
|
@ -151,7 +151,7 @@ tags:
|
||||||
<th scope="row"></th>
|
<th scope="row"></th>
|
||||||
<td class="io">
|
<td class="io">
|
||||||
<nav>
|
<nav>
|
||||||
<input class="input_io" name="active" type="checkbox">
|
<input class="input_io" name="active" aria-label="active" type="checkbox">
|
||||||
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
<span class="a_button" data-action="drag"><i class="bi bi-grip-horizontal" title="Drag"></i></span>
|
||||||
<button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button>
|
<button name="group" title="Expand"><i class="bi bi-arrows-expand"></i></button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
@ -230,15 +230,17 @@ tags:
|
||||||
const rowTarget = event.target.closest('tr');
|
const rowTarget = event.target.closest('tr');
|
||||||
const groupTarget = event.target.closest('[name="group"]');
|
const groupTarget = event.target.closest('[name="group"]');
|
||||||
|
|
||||||
if (rowTarget && event.button === 0) {
|
if (event.button !== 0) return;
|
||||||
for (row of rows) {
|
|
||||||
|
if (rowTarget) {
|
||||||
|
for (const row of rows) {
|
||||||
row.classList.remove('active');
|
row.classList.remove('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
rowTarget.classList.add('active');
|
rowTarget.classList.add('active');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (groupTarget && event.button === 0) {
|
if (groupTarget) {
|
||||||
console.log('group');
|
console.log('group');
|
||||||
let currentRow = groupTarget.closest('tr').nextElementSibling;
|
let currentRow = groupTarget.closest('tr').nextElementSibling;
|
||||||
|
|
||||||
|
|
@ -296,7 +298,7 @@ tags:
|
||||||
const cells = content.querySelectorAll('th:first-child');
|
const cells = content.querySelectorAll('th:first-child');
|
||||||
const isHidden = cells[0].classList.contains('di_none');
|
const isHidden = cells[0].classList.contains('di_none');
|
||||||
|
|
||||||
for (cell of cells) {
|
for (const cell of cells) {
|
||||||
if (isHidden) {
|
if (isHidden) {
|
||||||
cell.classList.remove('di_none');
|
cell.classList.remove('di_none');
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -312,7 +314,7 @@ tags:
|
||||||
const clone = cloneRow();
|
const clone = cloneRow();
|
||||||
const viewportHeight = window.innerHeight;
|
const viewportHeight = window.innerHeight;
|
||||||
const elementActive = tbodyPosition.querySelector('tr.active');
|
const elementActive = tbodyPosition.querySelector('tr.active');
|
||||||
let elementNew = undefined;
|
let elementNew;
|
||||||
let elementBound = undefined;
|
let elementBound = undefined;
|
||||||
|
|
||||||
if (elementActive) {
|
if (elementActive) {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
permalink: "{{ hippie.demoPath }}"
|
permalink: "{{ hippie.permalink }}"
|
||||||
title: Index
|
title: Index
|
||||||
---
|
---
|
||||||
{% assign pageId = page.fileSlug -%}
|
{% assign pageId = page.fileSlug -%}
|
||||||
|
|
|
||||||
|
|
@ -3,35 +3,9 @@
|
||||||
|
|
||||||
@use "../hippie-style/hippie";
|
@use "../hippie-style/hippie";
|
||||||
|
|
||||||
$colors: hippie.$color_palette;
|
.body_menu {
|
||||||
$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
|
|
||||||
|
|
||||||
@function getColor($index, $colors) {
|
|
||||||
$color_keys: map.keys($colors);
|
|
||||||
$key_count: list.length($color_keys);
|
|
||||||
$cycled_index: ($index % $key_count) + 1;
|
|
||||||
$key: list.nth($color_keys, $cycled_index);
|
|
||||||
@return map.get($colors, $key);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin fadeColors($steps, $colors) {
|
|
||||||
@keyframes fadeColor {
|
|
||||||
@for $i from 1 through list.length($steps) {
|
|
||||||
$percent: list.nth($steps, $i);
|
|
||||||
$color: getColor($i - 1, $colors);
|
|
||||||
|
|
||||||
#{$percent}% {
|
|
||||||
background-color: $color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
animation: fadeColor 16s infinite linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.body_game {
|
|
||||||
@extend .h_full_view;
|
@extend .h_full_view;
|
||||||
background-color: hotpink;
|
background-color: hippie.basic_color(delta);
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
@extend .pos_abs;
|
@extend .pos_abs;
|
||||||
|
|
@ -54,21 +28,3 @@ $steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.body_fpv {
|
|
||||||
@extend .h_full_view;
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
@include fadeColors($steps, $colors);
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
cursor: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border-radius: hippie.$radius_basic;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
48
source/style/modules/game/_mwo.scss
Normal file
48
source/style/modules/game/_mwo.scss
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
@use 'sass:list';
|
||||||
|
@use "sass:map";
|
||||||
|
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
$colors: hippie.$color_palette;
|
||||||
|
$steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
|
||||||
|
|
||||||
|
@function getColor($index, $colors) {
|
||||||
|
$color_keys: map.keys($colors);
|
||||||
|
$key_count: list.length($color_keys);
|
||||||
|
$cycled_index: ($index % $key_count) + 1;
|
||||||
|
$key: list.nth($color_keys, $cycled_index);
|
||||||
|
@return map.get($colors, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin fadeColors($steps, $colors) {
|
||||||
|
@keyframes fadeColor {
|
||||||
|
@for $i from 1 through list.length($steps) {
|
||||||
|
$percent: list.nth($steps, $i);
|
||||||
|
$color: getColor($i - 1, $colors);
|
||||||
|
|
||||||
|
#{$percent}% {
|
||||||
|
background-color: $color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
animation: fadeColor 16s infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body_mwo {
|
||||||
|
@extend .h_full_view;
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
@include fadeColors($steps, $colors);
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
cursor: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
border-radius: hippie.$radius_basic;
|
||||||
|
}
|
||||||
|
}
|
||||||
185
source/style/modules/game/_tfw.scss
Normal file
185
source/style/modules/game/_tfw.scss
Normal file
|
|
@ -0,0 +1,185 @@
|
||||||
|
@use 'sass:list';
|
||||||
|
@use "sass:map";
|
||||||
|
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
.body_tfw {
|
||||||
|
@extend .h_full_view;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
|
||||||
|
th,
|
||||||
|
.important,
|
||||||
|
.subtle,
|
||||||
|
button,
|
||||||
|
input[type="text"],
|
||||||
|
select {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
.important {
|
||||||
|
color: white;
|
||||||
|
background-color: hippie.basic_color(echo);
|
||||||
|
}
|
||||||
|
|
||||||
|
.important {
|
||||||
|
padding: hippie.$space_half;
|
||||||
|
border-block: hippie.$width_border_basic solid hippie.$color_back_basic;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtle {
|
||||||
|
@extend .txt_smaller;
|
||||||
|
|
||||||
|
color: hippie.$color_darkest;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
color: hippie.basic_color(alpha);
|
||||||
|
}
|
||||||
|
|
||||||
|
.background {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
*:not(canvas) {
|
||||||
|
z-index: map.get(hippie.$z-indexes, "content-bottom");
|
||||||
|
position: relative;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
z-index: map.get(hippie.$z-indexes, "default");
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > header {
|
||||||
|
& > button.active {
|
||||||
|
border-color: hippie.$color_highlight_basic;
|
||||||
|
color: hippie.$color_highlight_basic;
|
||||||
|
background-color: hippie.$color_action_basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > button:not(:first-child, :last-child, :nth-child(2)) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.view {
|
||||||
|
flex: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
& > main {
|
||||||
|
flex: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
gap: hippie.$space_double;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
& > div:last-child {
|
||||||
|
flex: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div:nth-child(2) {
|
||||||
|
flex: 4;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
gap: hippie.$space_basic;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
div:first-child {
|
||||||
|
flex: auto;
|
||||||
|
overflow: auto;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:last-child {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
gap: hippie.$space_basic;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
input:not([type="checkbox"], [type="range"]) {
|
||||||
|
@extend .input_io;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
@extend .io_select;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
position: relative;
|
||||||
|
height: 4em;
|
||||||
|
vertical-align: top;
|
||||||
|
|
||||||
|
span {
|
||||||
|
z-index: map.get(hippie.$z-indexes, "content-bottom");
|
||||||
|
position: relative;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
canvas {
|
||||||
|
z-index: map.get(hippie.$z-indexes, "default");
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.l {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.q {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t, .s {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > footer {
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: hippie.$space_basic;
|
||||||
|
|
||||||
|
& > button:last-child {
|
||||||
|
//margin-left: auto;
|
||||||
|
padding-inline: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -9,6 +9,8 @@
|
||||||
@use "modules/ui/gallery_module";
|
@use "modules/ui/gallery_module";
|
||||||
@use "modules/ui/windows_module";
|
@use "modules/ui/windows_module";
|
||||||
@use "modules/ui/table_module";
|
@use "modules/ui/table_module";
|
||||||
|
@use "modules/game/mwo";
|
||||||
|
@use "modules/game/tfw";
|
||||||
|
|
||||||
$color_gui_back: hippie.$color_dark;
|
$color_gui_back: hippie.$color_dark;
|
||||||
$space_gui_half: hippie.$space_half;
|
$space_gui_half: hippie.$space_half;
|
||||||
|
|
|
||||||
15
source/templates/hippie/game.liquid
Normal file
15
source/templates/hippie/game.liquid
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
{% assign pageId = page.fileSlug -%}
|
||||||
|
{% layout 'hippie/default.liquid' %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{{ block.super -}}
|
||||||
|
<link href="/css/ui.css" media="all" rel="stylesheet"/>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block assets %}
|
||||||
|
<script src="/vendor/hippie-script.js"></script>
|
||||||
|
<script src="/js/globals.js"></script>
|
||||||
|
<script src="/js/app.js"></script>
|
||||||
|
{% endblock %}
|
||||||
15
source/templates/hippie/partials/game-menu.liquid
Normal file
15
source/templates/hippie/partials/game-menu.liquid
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<div class="sec_main_center">
|
||||||
|
<nav role="doc-toc">
|
||||||
|
<hgroup>
|
||||||
|
<h1>{{ title | default: 'Game title' }}</h1>
|
||||||
|
<p>{{ additional | default: 'Additional name' }}</p>
|
||||||
|
</hgroup>
|
||||||
|
<ul class="link">
|
||||||
|
{% for link in links %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ link.href }}">{{ link.text }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<ul class="portal__list">
|
<ul class="portal__list">
|
||||||
{% for link in links %}
|
{% for link in links %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16"/>{{ link.name }}</a>
|
<a href="{{ link.href }}"><img src="{{ link.img }}" width="16" height="16" alt="icon"/>{{ link.name }}</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{% assign height = width | divided_by: 1.6 %}
|
{% assign height = width | divided_by: 1.6 %}
|
||||||
|
|
||||||
{% if type == 'svg' or type == '' %}
|
{% if type == 'svg' or type == '' %}
|
||||||
<svg version="1.1" id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
<svg id="{{ id }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewbox="0 0 1920 1200" preserveaspectratio="xMinYMax slice">
|
||||||
{% comment %}<defs>
|
{% comment %}<defs>
|
||||||
<filter id="turb3">
|
<filter id="turb3">
|
||||||
<feColorMatrix type="saturate" values="1" />
|
<feColorMatrix type="saturate" values="1" />
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue