feat: Change game structure
- New template - Rename screens - New partial for menu - New data file for menu content - Separate styles
This commit is contained in:
parent
a1b5aa8c59
commit
19577eca8c
10 changed files with 261 additions and 221 deletions
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": "/"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -7,20 +7,7 @@ tags:
|
||||||
{% 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.html">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 %}
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
---
|
---
|
||||||
title: TFW
|
title: TFW
|
||||||
|
tags:
|
||||||
|
- game
|
||||||
---
|
---
|
||||||
{% assign bodyClass = 'body_tfw' -%}
|
{% assign bodyClass = 'body_tfw' -%}
|
||||||
{% layout 'hippie/simple.liquid' %}
|
{% layout 'hippie/game.liquid' %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
<header class="io">
|
<header class="io">
|
||||||
|
|
@ -106,12 +108,6 @@ title: TFW
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block assets %}
|
|
||||||
<script src="/vendor/hippie-script.js"></script>
|
|
||||||
<script src="/js/globals.js"></script>
|
|
||||||
<script src="/js/app.js"></script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{%- block script %}
|
{%- block script %}
|
||||||
{{ block.super -}}
|
{{ block.super -}}
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -3,35 +3,9 @@
|
||||||
|
|
||||||
@use "../hippie-style/hippie";
|
@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_menu {
|
.body_menu {
|
||||||
@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,172 +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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.body_tfw {
|
|
||||||
@extend .h_full_view;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
|
|
||||||
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;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success {
|
|
||||||
color: hippie.basic_color(alpha);
|
|
||||||
}
|
|
||||||
|
|
||||||
& > 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
flex: auto;
|
|
||||||
min-height: 0;
|
|
||||||
|
|
||||||
& > main {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row nowrap;
|
|
||||||
flex: auto;
|
|
||||||
gap: hippie.$space_double;
|
|
||||||
min-height: 0;
|
|
||||||
|
|
||||||
& > div:first-child {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > 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 {
|
|
||||||
& > *:not(:last-child) {
|
|
||||||
margin-bottom: hippie.$space_basic;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type="checkbox"], [type="range"]) {
|
|
||||||
@extend .input_io;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
155
source/style/modules/game/_tfw.scss
Normal file
155
source/style/modules/game/_tfw.scss
Normal file
|
|
@ -0,0 +1,155 @@
|
||||||
|
@use 'sass:list';
|
||||||
|
@use "sass:map";
|
||||||
|
|
||||||
|
@use "../../hippie-style/hippie";
|
||||||
|
|
||||||
|
.body_tfw {
|
||||||
|
@extend .h_full_view;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
|
||||||
|
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;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.success {
|
||||||
|
color: hippie.basic_color(alpha);
|
||||||
|
}
|
||||||
|
|
||||||
|
& > 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
flex: auto;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
& > main {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
flex: auto;
|
||||||
|
gap: hippie.$space_double;
|
||||||
|
min-height: 0;
|
||||||
|
|
||||||
|
& > div:first-child {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > 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 {
|
||||||
|
& > *:not(:last-child) {
|
||||||
|
margin-bottom: hippie.$space_basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type="checkbox"], [type="range"]) {
|
||||||
|
@extend .input_io;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue