Add titlebar and first theme support (#74)

* refactor: Moved titlebar logo to div

* feat: Added global font setting

* bug: Removed misplaced question mark

* feat: First titlebar implementation

* feat: Lowered near clipping value

* feat: first titlebar and theme implementation

* feat: Increased theme support

* bugfix: added overscroll-behavior

Co-authored-by: Samuel Höra <[email protected]>

src/_themes.scss

@@ -0,0 +1,37 @@
+// Variables for color schemes
+@mixin theme-light {
+    --theme-font-color: hsl(0,0%,13%);
+    --theme-main-bg-color: hsl(0,0%,100%);
+    --theme-titlebar-bg-color: hsl(0,0%,100%);
+    --theme-titlebar-bg-highlight: hsl(0,0%,85%);
+    --theme-titlebar-bg-logo: linear-gradient(to top right, hsl(304, 100%, 32%), hsl(0, 87%, 69%));
+}
+
+@mixin theme-dark {
+    --theme-font-color: hsla(0,0%,95%) ;
+    --theme-main-bg-color: hsl(0,0%,10%);
+    --theme-titlebar-bg-color: hsl(0,0%,15%);
+    --theme-titlebar-bg-highlight: hsl(0,0%,25%);
+    --theme-titlebar-bg-logo: linear-gradient(to top right, hsl(304, 100%, 27%), hsl(0, 87%, 64%));
+}
+
+@mixin theme-midnight{
+    --theme-font-color: #hsla(0,0%,95%) ;
+    --theme-main-bg-color: hsl(0,0%,5%);
+    --theme-titlebar-bg-color: hsl(0,0%,5%);
+    --theme-titlebar-bg-highlight: hsl(0,0%,10%);
+    --theme-titlebar-bg-logo: linear-gradient(to top right, hsl(304, 100%, 32%), hsl(0, 87%, 69%));
+}
+
+@mixin bg-color-transition{
+    transition: background-color 0.5s ease-in-out;
+}
+@mixin bg-highlight-color-transition{
+    transition: background-color 0.05s ease-in-out;
+}
+@mixin bg-img-transition{
+    transition: background-image 2s ease-in-out;
+}
+@mixin color-transition{
+    transition: color 0.5s ease-in-out;
+}

src/app/app.component.scss

@@ -1,3 +1,5 @@
+@use "../themes" as themes;
+
 .split-container {
   display: flex;
   /* Misc */
@@ -38,11 +40,14 @@ app-gameboard {
 }
 
 app-titlebar {
-  display: block;
-  height: 32px;
-  box-shadow: 0px 2px 4px grey;
+  display: flex;
+  height: 2rem;
+  background-color: var(--theme-titlebar-bg-color);
+  box-shadow: 0px 2px 6px hsla(0,0%,0%, 0.35);
   position: relative;
   z-index: 10;
+  align-items:center;
+  @include themes.bg-color-transition;
 }
 
 .touch-border {

src/app/gameboard/gameboard-controls/gameboard-controls.component.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .separator {
   background-color: slategray;
   width: 2px;
@@ -14,6 +16,17 @@ img {
   margin: 0.5rem;
 }
 
+button {
+  border: 0rem;
+  min-height: math.div(3rem, 16);
+  border-radius: math.div(4rem, 16);
+  background-color: white;
+}
+
+button:hover {
+  box-shadow: 0 0 2px 2px lightgray;
+}
+
 .controls {
   flex: 1;
   display: flex;

src/app/gameboard/gameboard-view/gameboard-view.component.ts

@@ -54,7 +54,7 @@ export class GameboardViewComponent implements AfterViewInit {
     this.camera = new PerspectiveCamera(
       45,
       this.gameboard.clientWidth / this.gameboard.clientHeight,
-      1,
+      0.1,
       10000
     );
     this.camera.position.set(500, 800, 1300);

src/app/titlebar/titlebar.component.html

@@ -1 +1,12 @@
-<img src="assets/logo_monochrome_white.svg" class="app-titlebar-logo" height="32px"  draggable="false"/>
+<div class="app-titlebar-logo-area">
+    <input type="image" src="assets/logo_monochrome_white.svg" class="app-titlebar-logo" disabled=True />
+</div>
+
+<div class="app-titlebar-button-container">
+    <button class="app-titelbar-button">Datei</button>
+    <button class="app-titelbar-button">Bearbeiten</button>
+    <button class="app-titelbar-button">Ausführen</button>
+    <button class="app-titelbar-button">Editor</button>
+    <button class="app-titelbar-button">Welt</button>
+    <button class="app-titelbar-button">Hilfe</button>
+</div>

src/app/titlebar/titlebar.component.scss

@@ -1,6 +1,42 @@
-.app-titlebar-logo {
-    padding: 6px 16px 6px 16px;
-    border-radius: 0 5px 5px 0;
-    background-image: linear-gradient(to top right, #A20098, #F56B6B);
+@use "sass:math";
+@use "../../themes" as themes;
+
+.app-titlebar-logo-area {
+    width: 3.5rem;
+    height: inherit;
+    text-align: center;
+    border-radius: 0 math.div(5rem, 16) math.div(5rem, 16) 0;
+    background-image: var(--theme-titlebar-bg-logo);
     box-shadow: 0 0 5px rgba(0,0,0,0.5);
+    @include themes.bg-img-transition;
+}
+
+.app-titlebar-logo {
+    height: inherit;
+    padding: 0.4rem;
+    user-select: none;
+    cursor: default;
+}
+
+.app-titlebar-button-container{
+    height: inherit;
+    display: grid;
+    grid-template-columns: repeat(6, [col-start] auto [col-end]);
+    margin: 0 0 0 0.75rem;
+}
+
+.app-titelbar-button{
+    color: var(--theme-font-color);
+    height: inherit;
+    border-color: transparent;
+    background-color: transparent;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    border-radius: 0.25rem;
+
+    @include themes.bg-highlight-color-transition;
+}
+
+.app-titelbar-button:hover{
+    background-color: var(--theme-titlebar-bg-highlight);
 }

src/styles.scss

@@ -1,8 +1,35 @@
+@use "themes" as themes;
 @import "~ngx-toastr/toastr";
 
+// Theme loading
+@media (prefers-color-scheme: light) {
+  html[light-color-scheme="light"] {
+    @include themes.theme-light;
+  }
+  html[light-color-scheme="dark"] {
+    @include themes.theme-dark;
+  }
+  html[light-color-scheme="midnight"] {
+    @include themes.theme-midnight;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  html[dark-color-scheme="light"] {
+    @include themes.theme-light;
+  }
+  html[dark-color-scheme="dark"] {
+    @include themes.theme-dark;
+  }
+  html[dark-color-scheme="midnight"] {
+    @include themes.theme-midnight;
+  }
+}
+
 html {
   height: 100%;
   box-sizing: border-box;
+  font-family: Arial, Helvetica, sans-serif;
 }
 *,
 *:before,
@@ -14,6 +41,8 @@ body {
   height: 100%;
   margin: 0;
   overscroll-behavior: none;
+  background-color: var(--theme-main-bg-color);
+  @include themes.bg-color-transition;
 }
 
 app-root {