initial commit

web/src/App.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+import {defineComponent, Ref, ref, SetupContext} from 'vue';
+import DebugLog from "./classes/debugger";
+import Settings from "./components/Settings.vue";
+
+export default defineComponent({
+  components: {Settings, GameInput, AttemptList},
+  setup() {
+    var showSettings:Ref<boolean> = ref(false);
+
+    // check if data storage was allowed and if check for localstorage settings
+    if (localStorage.getItem("allow-data-storage") !== null) {
+
+      if (localStorage.getItem("theme") !== null) {
+        document.documentElement.setAttribute('data-theme', localStorage.getItem("theme") ?? "dark");
+      }
+
+    } else {
+      // if data collection isn't allowed set the default values
+      document.documentElement.setAttribute('data-theme', "dark");
+    }
+
+    var debugInputs = [
+      {logText: "httpAttr: theme", logValue: document.documentElement.getAttribute('data-theme')}, 
+      {logText: "storage: allow-data-storage", logValue:localStorage.getItem("allow-data-storage")},
+      {logText: "storage theme", logValue: localStorage.getItem("theme")},
+    ]
+    DebugLog(debugInputs);
+
+    const toggleSettings = () => {
+      showSettings.value = !showSettings.value;
+    }
+
+
+
+    const attemptList = ref<InstanceType<typeof AttemptList> | null>(null);
+
+    return { showSettings, toggleSettings, attemptList };
+  },
+});
+</script>
+
+<template>
+  <div class="container">
+    <button class="btn btn-primary round" style="float: right" @click="toggleSettings">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
+        <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
+      </svg>
+    </button>
+    <Settings v-if="showSettings" @close="toggleSettings"/>
+  </div>
+  <GameInput @attemptUpdate="attemptList?.addAttempt"></GameInput>
+  <AttemptList ref="attemptList"/>
+</template>
+
+<style scoped>
+  .container {
+    margin: 10%;
+  }
+</style>

web/src/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

web/src/assets/lang.json

@@ -0,0 +1,12 @@
+{
+    "en_mode_colorblind": "Mode for colorblind",
+    "ger_mode_colorblind": "Modus für Farbenblinde",
+    "en_theme":"Theme",
+    "ger_theme": "Darstellung",
+    "en_settings": "Settings",
+    "ger_settings": "Einstellungen",
+    "en_audio_feedback": "Audio Feedack",
+    "ger_audio_feedback": "Ton Wiedergabe",
+    "en_language": "Language",
+    "ger_language": "Sprache"
+}

web/src/assets/language.json

@@ -0,0 +1,8 @@
+{
+    "en_theme":"Theme",
+    "ger_theme":"Darstellung",
+    "en_mode_color_blindness":"Mode for Color blindness",
+    "ger_mode_color_blindness":"Modus für Farbenblinde",
+    "en_lang":"Language",
+    "ger_lang":"Sprache"
+}

web/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

web/src/classes/debugger.js

@@ -0,0 +1,16 @@
+/**
+ * Used to log values given as parameter
+ * Function triggers when debug is set to true in local storage
+ * @param debugLogs An array of type debugInput logged
+ */
+function DebugLog(debugLogs) {
+    if (localStorage.getItem("debug") === "true") {
+        console.log("========================== [ fetched settings values from document ] ==========================");
+        debugLogs.forEach((log) => {
+            console.log(log.logText, log.logValue);
+        });
+        console.log("===============================================================================================");
+    }
+}
+export default DebugLog;
+//# sourceMappingURL=debugger.js.map

web/src/classes/debugger.ts

@@ -0,0 +1,21 @@
+type DebugInput = {
+    logText: string;
+    logValue: any;
+};
+
+/**
+ * Used to log values given as parameter
+ * Function triggers when debug is set to true in local storage
+ * @param debugLogs An array of type debugInput logged
+ */
+function DebugLog(debugLogs: DebugInput[]): void {
+    if (localStorage.getItem("debug") === "true") {
+        console.log("========================== [ fetched settings values from document ] ==========================");
+        debugLogs.forEach((log) => {
+            console.log(log.logText, log.logValue);
+        });
+        console.log("===============================================================================================");
+    }
+}
+
+export default DebugLog;

web/src/classes/language.js

@@ -0,0 +1,31 @@
+/**
+ * Handles getting the correct localized string for the requested key
+ * @param textKey The key for which text should be fetched
+ * @returns The localized text as a string
+ */
+async function GetLocalizedText(textKey) {
+    try {
+        // Dynamically import the JSON data and cast it to LocalizationData
+        const jsonData = (await import("../assets/language.json")).default;
+        // Return a new Promise
+        return new Promise((resolve, reject) => {
+            // Get the language from the 'data-language' attribute, default to "en"
+            const lang = document.documentElement.getAttribute("data-language") ?? "en";
+            // Construct the key based on the language and textKey
+            const localizedText = jsonData[`${lang}_${textKey}`];
+            // Check if the localized text exists
+            if (localizedText) {
+                resolve(localizedText); // Resolve with the localized text
+            }
+            else {
+                reject(`No localized text found for key: ${lang}_${textKey}`); // Reject if not found
+            }
+        });
+    }
+    catch (error) {
+        // Handle any errors from importing the JSON file
+        return Promise.reject(`Failed to load localization with error: ${error}`);
+    }
+}
+export default GetLocalizedText;
+//# sourceMappingURL=language.js.map

web/src/classes/language.ts

@@ -0,0 +1,37 @@
+/**
+ * Handles getting the correct localized string for the requested key
+ * @param textKey The key for which text should be fetched
+ * @returns The localized text as a string
+ */
+async function GetLocalizedText(textKey: string): Promise<string> {
+    try {
+        // Define the type of the JSON data
+        interface LocalizationData {
+            [key: string]: string;
+        }
+
+        // Dynamically import the JSON data and cast it to LocalizationData
+        const jsonData = (await import("../assets/language.json")).default as LocalizationData;
+
+        // Return a new Promise
+        return new Promise<string>((resolve, reject) => {
+            // Get the language from the 'data-language' attribute, default to "en"
+            const lang: string = document.documentElement.getAttribute("data-language") ?? "en";
+
+            // Construct the key based on the language and textKey
+            const localizedText = jsonData[`${lang}_${textKey}`];
+
+            // Check if the localized text exists
+            if (localizedText) {
+                resolve(localizedText); // Resolve with the localized text
+            } else {
+                reject(`No localized text found for key: ${lang}_${textKey}`); // Reject if not found
+            }
+        });
+    } catch (error) {
+        // Handle any errors from importing the JSON file
+        return Promise.reject(`Failed to load localization with error: ${error}`);
+    }
+}
+
+export default GetLocalizedText;

web/src/classes/settings.ts

@@ -0,0 +1,34 @@
+enum SettingNodes {
+    allowDateCollect,
+    theme,
+    language,
+}
+
+/**
+ * class which handles reading and writing settings
+ */
+class SettingsHandler {
+
+    settings:Map<string,string>
+    constructor() {
+        this.settings = new Map<SettingNodes, any>();
+        // TODO: load settings from localstorage if any present
+    }
+
+    /**
+     * writes settings to the localstorage and handles errors
+     * @param name the settings name
+     * @param value
+     */
+    writeSetting(name:SettingNodes, value:any):boolean {
+        return false
+    }
+
+    /**
+     * fetches settings from the localstorage and handles errors
+     * @param name the requested setting
+     */
+    fetchSettings(name:SettingNodes):any {
+        return ""
+    }
+}

web/src/components/Settings.vue

@@ -0,0 +1,100 @@
+<script lang="ts">
+import {defineComponent, SetupContext, ref, Ref} from 'vue';
+import GetLocalizedText from "../classes/language";
+
+export default defineComponent({
+  emits: ['close'],
+  name: 'settings',
+  setup(_, { emit }: SetupContext) {
+    var attributeTheme:Ref<string> = ref(document.documentElement.getAttribute("data-theme") ?? "dark")
+    var attributeLang:Ref<string> = ref(document.documentElement.getAttribute("data-language") ?? "english")
+
+    // localized text
+    var settingsThemeLocalized:Ref<string> = ref("");
+    var settingsLangLocalized:Ref<string> = ref("");
+    async function getLocalization() {
+      settingsThemeLocalized.value = await GetLocalizedText("theme")
+      settingsLangLocalized.value = await GetLocalizedText("lang")
+    }
+
+    const changeTheme = (theme:string) => {
+
+          document.documentElement.setAttribute('data-theme', theme);
+          if (localStorage.getItem("allow-data-storage") == "true") {
+            localStorage.setItem("theme", theme)
+          }
+
+    }
+
+    const changeLang = (lang:string) => {
+      document.documentElement.setAttribute('data-language', lang);
+      if (localStorage.getItem("allow-data-storage") == "true") {
+        localStorage.setItem("lang", lang)
+      }
+    }
+
+    getLocalization()
+    const close = () => {
+      emit("close");
+    };
+
+    return { 
+      close, 
+      changeTheme, 
+      changeLang,
+      settingsThemeLocalized,
+      settingsLangLocalized,
+      attributeTheme, 
+      attributeLang
+    };
+  },
+});
+</script>
+
+
+<template>
+  <div class="card bg-base-100 w-full shadow-xl">
+    <div class="card-body">
+
+      <h2 class="card-title">Settings</h2>
+
+      <button class="btn btn-error close round" @click="close()">
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed">
+          <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
+        </svg>
+      </button>
+
+      <div class="w-full">
+        {{ settingsLangLocalized }}:
+        <div class="dropdown dropdown-bottom">
+          <div tabindex="0" role="button" class="btn m-1"> {{ attributeLang }}</div>
+          <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-fill p-2 shadow">
+            <li @click="changeLang('ger')"><a>Deutsch</a></li>
+            <li @click="changeLang('en')"><a>English</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="w-full">
+        {{ settingsThemeLocalized }}:
+        <div class="dropdown dropdown-bottom">
+          <div tabindex="0" role="button" class="btn m-1"> {{ attributeTheme }}</div>
+          <ul tabindex="0" class="dropdown-content menu bg-base-100 rounded-box z-[1] w-fill p-2 shadow">
+            <li @click="changeTheme('dark')"><a>Dark</a></li>
+            <li @click="changeTheme('light')"><a>Light</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+  .btn.close {
+    position: absolute;
+    right: 30px;
+    top: 30px;
+    margin: 0;
+  }
+</style>

web/src/main.d.ts

@@ -0,0 +1 @@
+import './style.css';

web/src/main.js

@@ -0,0 +1,7 @@
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
+const app = createApp(App);
+// Mount the app
+app.mount('#app');
+//# sourceMappingURL=main.js.map

web/src/main.ts

@@ -0,0 +1,11 @@
+import { createApp } from 'vue';
+import './style.css';
+import App from './App.vue';
+
+// @ts-ignore
+import { createThemeManager } from 'vue-daisyui-theme-manager';
+
+const app = createApp(App);
+
+// Mount the app
+app.mount('#app');

web/src/style.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.btn.round{
+    height: 55px;
+    width: auto;
+    font-size: 12pt;
+    border-radius: 100%;
+}

web/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />