Updated code review

.github/workflows/deploy-development-docker-image.yml

@@ -12,7 +12,7 @@ env:
 
 jobs:
   build-and-push-image:
-    runs-on: self-hosted
+    runs-on: ubuntu-latest
     permissions:
       contents: read
       packages: write

.github/workflows/deploy-docker-image-on-release.yml

@@ -19,7 +19,7 @@ jobs:
     uses: ./.github/workflows/test.yml
 
   build-and-push-image:
-    runs-on: self-hosted
+    runs-on: ubuntu-latest
     needs: [test]
     permissions:
       contents: read

.github/workflows/test.yml

@@ -11,7 +11,7 @@ on:
 
 jobs:
   test:
-    runs-on: self-hosted
+    runs-on: ubuntu-latest
 
     steps:
     - name: Checkout repository

src/App.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+/**
+ * Manages game views (home, game, finish) and controls background music and sound effects.
+ */
+
 import { ref, onMounted, onUnmounted } from 'vue';
 import HomeView from '@/views/HomeView.vue';
 import GameView from '@/views/GameView.vue';
@@ -30,9 +34,18 @@ enum views {
 }
 const actualView = ref(views.home);
 
+/**
+ * Changes the current view of the application.
+ *
+ * @param {views} newView - The new view to switch to.
+ */
 function changeView(newView: views) {
   actualView.value = newView;
 }
+
+/**
+ * Closes the game and sends a close signal to the parent window.
+ */
 function closeGame() {
   window.parent.postMessage('CLOSE ME');
 }
@@ -41,6 +54,11 @@ function playClickSound(){
   clickSound.play();
 }
 
+/**
+ * Handles closing the game, includes a delay to ensure smooth operation.
+ *
+ * @returns {Promise<void>} - Returns a promise that resolves after the game is closed.
+ */
 async function handleCloseGame() {
   await playClickSound();
     setTimeout(() => {
@@ -50,18 +68,21 @@ async function handleCloseGame() {
 </script>
 
 <template>
+  <!-- The header section of the page with navigation -->
   <header>
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
       <div class="container-fluid">
         <span class="navbar-brand mb-0 h1">Bugfinder</span>
       </div>
       <div class="mr-1">
+        <!-- Close button to trigger the closeGame function -->
         <b-button variant="danger" class="nav-buttons close-button" id="close-button" v-on:click="handleCloseGame">
           <em class="bi-x"></em>
         </b-button>
       </div>
     </nav>
   </header>
+  <!-- Conditional rendering of views based on the current view -->
   <HomeView v-if="actualView === views.home" @start-game="changeView(views.game)" />
   <GameView v-else-if="actualView === views.game" @end-game="changeView(views.finish)" />
   <FinishView v-else-if="actualView === views.finish" />

src/components/ChatBox.vue

@@ -12,7 +12,11 @@ const successSound = fetchAndChangeVolumeLevel(successSoundSource);
 const errorSound = fetchAndChangeVolumeLevel(errorSoundSource);
 
 
-
+/**
+ * Watcher to observe changes in chat history.
+ * - Automatically scrolls to the newest chat message.
+ * - Plays appropriate sounds based on the sender and message color (notification, success, or error sound).
+ */
 watch(
   () => chatHistory.value,
   (newChatHistory) => {
@@ -38,14 +42,16 @@ watch(
 
 <template>
   <div id="chat-box" ref="chat-box" class="overflow-auto">
+    <!-- Loop through each chat message in chatHistory -->
     <div v-for="chatElement in chatHistory" :key="chatElement.message">
+      <!-- Message from the current user (ME) -->
       <div v-if="chatElement.from == ChatParticipant.ME" class="d-flex flex-row justify-content-start mb-4">
         <img src="../assets/avatar.svg" alt="Me" style="width: 45px; height: 100%" />
         <div class="p-3 ms-3" :class="chatElement.color" style="border-radius: 15px">
           <p class="small mb-0">{{ chatElement.message }}</p>
         </div>
       </div>
-
+      <!-- Message from another user (OTHER) -->
       <div v-else-if="chatElement.from == ChatParticipant.OTHER" class="d-flex flex-row justify-content-end mb-4">
         <div class="p-3 me-3 border" :class="chatElement.color" style="border-radius: 15px">
           <p class="small mb-0">{{ chatElement.message }}</p>

src/components/CodeBox.vue

@@ -30,7 +30,9 @@ const emptyBug = new Bug(-1, ErrorType.UNDEFINED, '');
 const currentEditingBug = ref(emptyBug);
 const showModal = ref(false);
 
-
+/**
+ * Submit the selected bugs as a solution and mark the solution as submitted.
+ */
 function submit() {
   playClickSound();
   if (!submitted.value) {
@@ -39,6 +41,9 @@ function submit() {
   }
 }
 
+/**
+ * Select a bug for a word. If a bug is already selected for the word, it will be removed.
+ */
 function selectBug(word: IWord) {
   if (submitted.value) {
     return;
@@ -56,23 +61,43 @@ function selectBug(word: IWord) {
   }
 }
 
+/**
+ * Submit a bug to the selectedBugs list.
+ * @param bug
+ */
 function submitBug(bug: IBug) {
   selectedBugs.value.push(bug);
 }
 
+/**
+ * Remove a bug from the selectedBugs list by word ID.
+ * @param wordId
+ */
 function removeBug(wordId: number | string) {
   selectedBugs.value = selectedBugs.value.filter((bug) => bug.wordId != wordId);
 }
 
+/**
+ * Check if a word has been marked with a bug.
+ * @param wordId
+ */
 function isSelectedBug(wordId: number | string) {
   return selectedBugs.value.find((bug) => bug.wordId == wordId) != null;
 }
 
+/**
+ * Check if a word is a space (non-editable).
+ * @param wordId
+ */
 function isWordSpace(wordId: number | string): boolean {
   const word = getWordById(wordId);
   return word != null && word.wordContent == space;
 }
 
+/**
+ * Get the corrected value for a word if a bug has been selected for it.
+ * @param wordId
+ */
 function getCorrectedBugValue(wordId: number | string): string | null {
   const bug = selectedBugs.value.find((searchedBug) => searchedBug.wordId == wordId);
   if (bug == null) {
@@ -81,6 +106,10 @@ function getCorrectedBugValue(wordId: number | string): string | null {
   return bug.correctValue;
 }
 
+/**
+ * Retrieve a word by its ID from the code props.
+ * @param wordId
+ */
 function getWordById(wordId: number | string): IWord | undefined {
   return props.code.words.find((word) => word.id == wordId);
 }
@@ -102,7 +131,9 @@ watch(
 </script>
 
 <template>
+  <!-- Code box that displays code lines -->
   <div class="codebox">
+    <!-- Loop through each line of code and display the words with buttons for selecting bugs -->
     <div class="code-line" v-for="line in codeLines" :key="line[0].id">
       <div class="btn-group" v-for="word in line" :key="word.id">
         <WordBox
@@ -116,8 +147,9 @@ watch(
       </div>
     </div>
   </div>
+  <!-- Submit button for submitting the selected bugs -->
   <button v-if="!submitted" class="btn btn-success float-end mx-3 my-4" @click="submit()">Submit</button>
-
+  <!-- Modal for selecting a bug for the current word -->
   <SelectBugModal
     v-model="showModal"
     :bug="currentEditingBug"

src/components/SelectBugModal.vue

@@ -22,12 +22,15 @@ watch(
 </script>
 
 <template>
+  <!-- Modal for editing a bug -->
   <b-modal title="Edit bug" id="edit-bug-modal" @ok="submitBug(editBug)">
+    <!-- Form for editing the bug. Prevents form submission with default actions. -->
     <form ref="form" v-if="editBug != undefined" @submit.stop.prevent="submitBug(editBug)">
+      <!-- Input field for fixing the error. User can input a correct value for the bug. -->
       <b-form-group label="Fix error (if possible)" label-for="error-fix">
         <b-form-input id="error-fix" v-model="editBug.correctValue"></b-form-input>
       </b-form-group>
-
+      <!-- Dropdown for selecting the error type, displayed only if showErrorTypeSelection is true. -->
       <b-form-group label="Select ErrorType" label-for="error-type" v-if="showErrorTypeSelection">
         <b-form-select id="error-type" v-model="editBug.errorType" :options="errorTypes"></b-form-select>
       </b-form-group>

src/components/WordBox.vue

@@ -17,7 +17,9 @@ const space = WordType.SPACE;
 </script>
 
 <template>
+  <!-- Render a tab space if the word is a tab -->
   <div v-if="word.word == tab" class="tab"></div>
+  <!-- Render the word as a button if it's not a tab or newline -->
   <button
     :id="'word-' + word.id"
     v-if="word.wordContent != tab && word.wordContent != newLine"
@@ -31,12 +33,15 @@ const space = WordType.SPACE;
       'selected-code': !submitted && selected,
     }"
   >
+    <!-- Show a badge for spaces that haven't been selected -->
     <b-badge v-if="word.wordContent == space && !selected" variant="success" class="code-space-badge">+</b-badge>
+    <!-- Show the word content, or the corrected bug value if the word is selected -->
     <pre
       v-else
       v-highlightjs
     ><code v-if="!selected" class="java">{{ word.wordContent }}</code><code v-else>{{ correctedBugValue }}</code></pre>
   </button>
+  <!-- Show a popover with feedback information if feedback exists for the word -->
   <b-popover
     v-if="codeFeedback.hasFeedback(word.id)"
     :target="'word-' + word.id"
@@ -55,6 +60,7 @@ const space = WordType.SPACE;
 </template>
 
 <style lang="css" scoped>
+/* Style for code words and spaces, including feedback-related styling */
 button.code-word {
   background: transparent;
   border: none !important;

src/models/chat.ts

@@ -1,3 +1,5 @@
+/* Represents a chat message with sender, content, and color. */
+
 export enum ChatParticipant {
   ME,
   OTHER,

src/models/code.ts

@@ -1,3 +1,5 @@
+/* Defines models for code, words, solutions, and bugs with related types. */
+
 export enum WordType {
   TAB = '<tab>',
   SPACE = ' ',

src/models/result.ts

@@ -1,10 +1,11 @@
+/* Represents the result of a game with submitted solutions and score details. */
+
 import { ISolution } from './code';
 
 export class Result {
   submittedSolutions: ISubmittedSolution[] = [];
 
 
-  // besteht jetzt auch score und rewards
   constructor(public configurationId: string, public score: number,
               public rewards: number) {}
 

src/services/bugfindergame.ts

@@ -5,20 +5,18 @@ import { Result } from '@/models/result';
 import axios from 'axios';
 
 export class BugFinderGame {
-  // list whether player successful solved a code or not. Empty on entry if not submitted yet.
+
   private solved: Array<boolean> = [];
 
   private currentCodeNumber: number;
   private currentCode?: ICode;
 
   private result: Result;
 
-  //score und number mit 0 initialisiert
   private score = 0;
   private rewards = 0;
 
 
-  //score und rewards im Konstruktor hier hinzugefügt
   public constructor(private configuration: string) {
     this.currentCodeNumber = 0;
     this.result = new Result(this.configuration, this.score, this.rewards);
@@ -136,7 +134,6 @@ export class BugFinderGame {
   }
 
 
-  // zurückgegebenes DTO objekt aus dem Backend in Result Objekt umwandeln und score und reward Werte setzen (versuchen die in FinishView zu benutzen)
   /**
    * sends the game results after finishing the game to the server
    */

src/services/changeVolumeLevel.ts

@@ -1,3 +1,6 @@
+/**
+ * Fetches volume configuration from the server and applies it to an audio element.
+ */
 
 import { BASE_URL } from '@/app';
 import { ref } from 'vue';