feat: ✨ added cookie prompt component not yet functional

removed js files from missconfigured typescript project

web/src/App.vue

@@ -2,9 +2,10 @@
 import {defineComponent, Ref, ref, SetupContext} from 'vue';
 import DebugLog from "./classes/debugger";
 import Settings from "./components/Settings.vue";
+import cookiePrompt from "./components/cookiePrompt.vue";
 
 export default defineComponent({
-  components: {Settings, GameInput, AttemptList},
+  components: {Settings, cookiePrompt},
   setup() {
     var showSettings:Ref<boolean> = ref(false);
 
@@ -35,7 +36,7 @@ export default defineComponent({
 
     const attemptList = ref<InstanceType<typeof AttemptList> | null>(null);
 
-    return { showSettings, toggleSettings, attemptList };
+    return { showSettings, toggleSettings };
   },
 });
 </script>
@@ -48,6 +49,7 @@ export default defineComponent({
       </svg>
     </button>
     <Settings v-if="showSettings" @close="toggleSettings"/>
+    <cookiePrompt></cookiePrompt>
   </div>
 </template>
 

web/src/classes/debugger.js

@@ -1,16 +0,0 @@
-/**
- * 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/language.js

@@ -1,31 +0,0 @@
-/**
- * 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/settings.ts

@@ -7,9 +7,9 @@ enum SettingNodes {
 /**
  * class which handles reading and writing settings
  */
-class SettingsHandler {
+class SettingsHandler implements ISettings{
 
-    settings:Map<string,string>
+    settings:Map<SettingNodes, any>
     constructor() {
         this.settings = new Map<SettingNodes, any>();
         // TODO: load settings from localstorage if any present
@@ -20,7 +20,7 @@ class SettingsHandler {
      * @param name the settings name
      * @param value
      */
-    writeSetting(name:SettingNodes, value:any):boolean {
+    WriteSetting(name:SettingNodes, value:any):boolean {
         return false
     }
 
@@ -28,7 +28,7 @@ class SettingsHandler {
      * fetches settings from the localstorage and handles errors
      * @param name the requested setting
      */
-    fetchSettings(name:SettingNodes):any {
+    FetchSetting(name:SettingNodes):any {
         return ""
     }
 }

web/src/components/cookiePrompt.vue

@@ -0,0 +1,57 @@
+<script lang="ts">
+import {defineComponent, SetupContext, ref, Ref} from 'vue';
+import GetLocalizedText from "../classes/language";
+import SettingsHandler from "../classes/settings";
+import ISettings from "../interfaces/ISettings"
+
+export default defineComponent({
+    emits: ['close'],
+    name: 'cookiePrompt',
+    setup(_, { emit }: SetupContext) {
+
+        var settings:ISettings = new SettingsHandler();
+
+        function acceptCookies(){
+
+        }
+
+        function rejectCookies(){
+
+        }
+
+        return { 
+            acceptCookies, rejectCookies
+        };
+    },
+});
+</script>
+
+<template>
+    <div style="display: flexbox; width: 100%;">
+        <div class="hero bg-base-200 cardBody">
+            <div class="hero-content flex-col lg:flex-row">
+                <img src="/cookie.svg"  class="max-w-sm rounded-lg shadow-2xl" />
+                <div>
+                    <h1 class="text-5xl font-bold">Diese Seite nutzt Cookies</h1>
+                    <p class="py-6">
+                        Um richtig zu arbeiten verwendet diese Seite cookies.
+                        <br>
+                        <br>
+                        Ein cookie welcher die entscheidung speichert wird immer gesetzt
+                    </p>
+                    <div class="divider"></div>
+                    <button class="btn btn-success">Cookies zulassen</button>
+                    <button class="btn btn-error" style="margin-left: 15px;">Cookies verbieten</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .cardBody {
+        align-items: center;
+        justify-content: center;
+        width: fit-content;
+    }
+</style>

web/src/interfaces/ISettings.ts

@@ -0,0 +1,4 @@
+interface ISettings {
+    WriteSetting: (name:SettingNodes, value:any) => boolean;
+    FetchSetting: (name:SettingNodes) => any;
+}

web/src/main.js

@@ -1,7 +0,0 @@
-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