refactor: renamed primary-font to font-primary

client/src/assets/css/components.scss

@@ -1,4 +1,4 @@
 @import './colors.scss';
 
-$primary-font: 'Wendy One';
-$secondary-font: 'Dosis';
+$font-primary: 'Wendy One';
+$font-secondary: 'Dosis';

client/src/components/Button.vue

@@ -31,7 +31,7 @@ defineProps({
     background-color: inherit;
     color: $text-secondary-color;
     text-align: center;
-    font-family: $secondary-font;
+    font-family: $font-secondary;
     font-weight: bold;
     font-size: 24px;
     border: none;

client/src/components/LoginBox.vue

@@ -52,7 +52,7 @@ const login = (): void => {
     border: none;
     border-bottom: $box-primary-border;
     color: $text-primary-color;
-    font-family: $secondary-font;
+    font-family: font-secondary;
     font-weight: 800;
     font-size: 24px;
     outline: none;

client/src/components/TitleBox.vue

@@ -56,7 +56,7 @@
 
   &__title {
     font-size: 64px;
-    font-family: $primary-font;
+    font-family: $font-primary;
     color: $box-primary-text-color;
     text-align: center;
   }

client/src/components/TopBar.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="topbar__separator" />
     <div class="topbar__actionbar">
-      Topbar
+      {{ userInfo.role }}
     </div>
     <div class="topbar__separator" />
     <div class="topbar__logout-button-container">
@@ -38,6 +38,9 @@ const actionLogout = async () => {
     height: 64px;
     align-items: center;
     background-color: $topbar-background-color;
+    font-size: 16px;
+    font-family: $font-primary;
+    font-weight: bold;
   }
 
   &__username,
@@ -47,6 +50,7 @@ const actionLogout = async () => {
     text-align: center;
     color: $text-primary-color;
   }
+
   &__actionbar {
     flex-grow: 1;
   }
@@ -61,6 +65,7 @@ const actionLogout = async () => {
   &__logout-button {
     color: $text-primary-color;
     font-size: 16px;
+    font-family: $font-primary;
 
     &:hover {
       color: $text-primary-hover-color;

client/src/layouts/default.vue

@@ -21,7 +21,7 @@ body,
 
 body {
   background-color: $background-primary-color;
-  font-family: $primary-font;
+  font-family: $font-primary;
 }
 
 a {

client/src/stores/UserinfoStore.ts

@@ -6,6 +6,14 @@ export const useUserinfoStore = defineStore('UserinfoStore', {
       userInfo: null,
     }
   },
+  getters: {
+    isAdmin(): boolean {
+      return this.userInfo && this.userInfo.role === 'admin'
+    },
+    isGamemaster(): boolean {
+      return this.userInfo && ( this.userInfo.role === 'gamemaster' || this.userInfo.role === 'admin' )
+    },
+  },
   actions: {
     setUserInfo(userInfo: unknown): void {
      this.userInfo = userInfo