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' %}
|
||||
|
||||
{% block body %}
|
||||
<div class="sec_main_center">
|
||||
<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>
|
||||
{% render 'hippie/partials/game-menu.liquid', links: menu %}
|
||||
<footer>
|
||||
{% brand 'brand', 'last' %}
|
||||
<p>Marke</p>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
title: FPV
|
||||
title: MWO
|
||||
tags:
|
||||
- game
|
||||
---
|
||||
{% assign bodyClass = 'body_fpv' -%}
|
||||
{% layout 'hippie/simple.liquid' %}
|
||||
{% assign bodyClass = 'body_mwo' -%}
|
||||
{% layout 'hippie/game.liquid' %}
|
||||
|
||||
{% block links %}
|
||||
{{ block.super -}}
|
||||
|
|
@ -83,5 +83,4 @@ tags:
|
|||
canvas.height = window.innerHeight;
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
---
|
||||
title: TFW
|
||||
tags:
|
||||
- game
|
||||
---
|
||||
{% assign bodyClass = 'body_tfw' -%}
|
||||
{% layout 'hippie/simple.liquid' %}
|
||||
{% layout 'hippie/game.liquid' %}
|
||||
|
||||
{% block body %}
|
||||
<header class="io">
|
||||
|
|
@ -106,12 +108,6 @@ title: TFW
|
|||
</div>
|
||||
{% 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.super -}}
|
||||
<script>
|
||||
|
|
@ -3,35 +3,9 @@
|
|||
|
||||
@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 {
|
||||
@extend .h_full_view;
|
||||
background-color: hotpink;
|
||||
background-color: hippie.basic_color(delta);
|
||||
|
||||
footer {
|
||||
@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/windows_module";
|
||||
@use "modules/ui/table_module";
|
||||
@use "modules/game/mwo";
|
||||
@use "modules/game/tfw";
|
||||
|
||||
$color_gui_back: hippie.$color_dark;
|
||||
$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