Bot Mode functionality

src/index.js

@@ -1,16 +1,19 @@
 const { app, BrowserWindow, ipcMain, Menu, webContents } = require('electron');
 const path = require('path');
 
-const steamworks = require("steamworks.js")
-const client = steamworks.init(2940750);
+let steam = false;
+if (steam) {
+    const steamworks = require("steamworks.js")
+    const client = steamworks.init(2940750);
 
-console.log("steamworks, ", steamworks)
-console.log("client", client)
-console.log(client.getName())
+    console.log("steamworks, ", steamworks)
+    console.log("client", client)
+    console.log(client.getName())
 
-app.commandLine.appendSwitch("in-process-gpu")
-app.commandLine.appendSwitch("disable-direct-composition")
-app.allowRendererProcessReuse = false
+    app.commandLine.appendSwitch("in-process-gpu")
+    app.commandLine.appendSwitch("disable-direct-composition")
+    app.allowRendererProcessReuse = false
+};
 
 let mainWindow;
 const createWindow = () => {

src/script/public/App/GameSetUp.js

@@ -226,6 +226,7 @@ const UserClicksNxNDefaultSettings = (readonly) => {
         document.querySelector(".SetPlayerNames-InputArea").style.gap = "1.3em";
         UserSetPointsToWinGameInput.style.display = "none";
         SetClockList.style.display = 'none';
+        SetPlayerNamesClockInput.style.display = 'none';
 
     } else if (readonly == undefined) {
         SetAllowedPatternsWrapper.style.display = 'flex';
@@ -239,6 +240,15 @@ const UserClicksNxNDefaultSettings = (readonly) => {
         UserSetPointsToWinGameInput.style.display = "block";
         SetClockList.style.display = 'flex';
         SetPlayerNames_AdditionalSettings.style.display = "flex";
+        SetPlayerNamesClockInput.style.display = 'flex';
+    };
+
+    if (arena_mode) {
+        SetAllowedPatternsWrapper.style.display = 'none';
+        SetPlayerNamesClockInput.style.display = 'none';
+
+    } else {
+        SetAllowedPatternsWrapper.style.display = 'flex';
     };
 };
 
@@ -739,12 +749,17 @@ function SetGameData_BotMode(Check) {
 
         let fieldIndex = curr_field_ele.getAttribute('index');
         curr_mode = GameMode[1].opponent;
-        curr_name1 = MapLevel_NameInput.value;
+        curr_name1 = Player1_NameInput.value;
         curr_name2 = 'The unknown'; // Bot
         curr_form1 = Player1_NameInput.value.toUpperCase();
         curr_form2 = 'Y'; // Bot        
         curr_innerGameMode = Check[3];
 
+        if (arena_mode) {
+            curr_name2 = 'Bob the Bot'; // Bot
+            curr_form2 = 'Y'; // Bot        
+        };
+
         // costum x and y
         let costumX;
         let costumY;
@@ -784,6 +799,8 @@ function SetGameData_BotMode(Check) {
 
         console.log(allowedPatternsFromUser);
 
+        allowedPatternsFromUser = [...Object.keys(training_arena.selected_patterns)];
+
         initializeGame(curr_field_ele, undefined, undefined, allowedPatternsFromUser, undefined, UserSetPointsToWinGameInput.value, undefined, undefined, [costumX, costumY]);
     };
 };

src/script/public/App/documents.js

@@ -756,7 +756,10 @@ let curr_selected_online_game_el = document.querySelector('.curr_selected_online
 let watching_count_el = document.querySelector('.watching_count_el');
 let allow_players_watch_el = document.querySelector('.allow_players_watch_el');
 let YouWatchGameEl = document.querySelector('.YouWatchGameEl');
+let SetPlayerNamesClockInput = document.querySelector('.SetPlayerNames-ClockInput');
 
+const TrainingArenaDifficutlyModeGameDisplay = document.querySelector('.TrainingArenaDifficutlyModeGameDisplay');
+const TrainingArenaDifficutlyModeGameDisplayText = document.querySelector('.TrainingArenaDifficutlyModeGameDisplay>p');
 const clan_info_pen = document.querySelector(".clan_info_pen");
 const clan_action_reason_pop_up = document.querySelector('.clan_action_reason_pop_up');
 const clan_reason_header = document.querySelector('.clan_reason_header');
@@ -809,6 +812,7 @@ const TA_patterns_wrapper = document.querySelector('.TA_patterns_wrapper');
 const TA_patterns_btn = document.querySelector('.TA_patterns_btn');
 const TA_patterns_closeBtn = document.querySelector('.TA_patterns_closeBtn');
 const TA_patterns_qust_btn = document.querySelector('.TA_patterns_qust_btn');
+const HelpTA_btn = document.querySelector('.HelpTA_btn');
 
 const gameEntry_gameType_el = document.querySelector('.gameEntry_gameType_el');
 const gameEntry_levelName_el = document.querySelector('.gameEntry_levelName_el');

src/script/public/App/script.js

@@ -1100,6 +1100,7 @@ gameMode_TwoPlayerOnline_card.addEventListener('click', async() => {
     SearchRandomOpponent_btn.style.display = "flex";
     WatchGame_btn.style.display = "flex";
     UserCreated_btn.style.display = "flex";
+    HelpTA_btn.style.display = 'none';
 
     firstTierModes.style.display = "flex";
     secondTierModes.style.display = "none";
@@ -1133,6 +1134,7 @@ gameMode_OneVsOne_card.addEventListener('click', async() => {
     WatchGame_btn.style.display = "none";
     UserCreated_btn.style.display = "none";
     TrainingArenaFields.style.display = 'flex';
+    HelpTA_btn.style.display = 'flex';
 
     firstTierModes.style.display = "none";
     secondTierModes.style.display = "none";
@@ -1145,7 +1147,7 @@ let training_arena;
 
 TrainingArenaDifficultyModeCards.forEach(card => {
     card.addEventListener('click', () => {
-        training_arena = new TrainingArena(card.getAttribute('mode'));
+        training_arena = new TrainingArena(card.getAttribute('mode'), card.getAttribute('mode-color'));
         training_arena.generate_patterns();
     });
 });
@@ -1267,7 +1269,7 @@ gameInfo_btn.addEventListener('click', () => {
     DarkLayer.style.display = 'flex';
     DisplayPopUp_PopAnimation(GameInfoPopUp, "flex", true);
 
-    if (!NewCreativeLevel && !inPlayerLevelsScene && !review_mode && !watch_mode) {
+    if (!NewCreativeLevel && !inPlayerLevelsScene && !review_mode && !watch_mode && !arena_mode) {
         GameInfo_HeaderTitle.textContent = `${curr_field} - Game Info`;
 
     } else if (review_mode) {
@@ -1282,6 +1284,9 @@ gameInfo_btn.addEventListener('click', () => {
     } else if (watch_mode) {
         let l = global_online_games_handler.current_selected_game_instance.game_data.fieldTitle;
         GameInfo_HeaderTitle.textContent = `${l} - Game Info`;
+
+    } else if (arena_mode) {
+        GameInfo_HeaderTitle.textContent = `Training Arena - Game Info`;
     };
 
     // not in advanture mode
@@ -1314,16 +1319,16 @@ gameInfo_btn.addEventListener('click', () => {
         });
 
         // how to win text
-        if (PlayingInCreatedLevel || PlayingInCreatedLevel_AsGuest || review_mode) {
-            NewCreativeLevel && (HowToWinText.textContent = `Get ${NewCreativeLevel.selectedLevel[2]} points or score more points than your opponent if he gives up.`);
-            !NewCreativeLevel && (HowToWinText.textContent = `Get ${points_to_win} points or score more points than your opponent if he gives up.`);
+        if (PlayingInCreatedLevel || PlayingInCreatedLevel_AsGuest || review_mode || watch_mode) {
+            NewCreativeLevel && (HowToWinText.textContent = `Get ${NewCreativeLevel.selectedLevel[2]} points.`);
+            !NewCreativeLevel && (HowToWinText.textContent = `Get ${points_to_win} points.`);
 
             setTimeout(() => {
                 NewCreativeLevel_DisplayCostumPatternsInGamePopUp();
             }, 100);
 
         } else {
-            HowToWinText.textContent = `Get ${points_to_win} points or score more points than your opponent if he gives up.`
+            HowToWinText.textContent = `Get ${points_to_win} points.`
         };
 
     } else { // in advanture mode

src/script/public/Game/CreateGameLibrary/UserCostumStuff.js

@@ -622,6 +622,8 @@ const editCostumField = (field_check, name, x, y) => {
 
 // toggle wether costum pattern should be used as pattern in new create level from user
 const toggleCustomPatternInNewLevel = (box, structure, name, value) => {
+    if (!NewCreativeLevel) return;
+
     // box logic
     if (box.getAttribute("activated") == "true") {
         box.setAttribute("activated", "false");

src/script/public/Game/Game.js

@@ -156,6 +156,8 @@ let global_creative_level_data = null;
 
 let globalLevelID = null;
 
+let arena_mode = false;
+
 // Initialize Game
 // Allowed_Patterns = array with names of the allowed patterns
 function initializeGame(field, onlineGame, OnlineGameDataArray, Allowed_Patterns, mapLevelName, required_amount_to_win, AdvantureLevel_InnerGameMode, maxAmoOfMoves, costumCoords,
@@ -208,6 +210,8 @@ function initializeGame(field, onlineGame, OnlineGameDataArray, Allowed_Patterns
 
     max_amount_of_moves = maxAmoOfMoves;
 
+    PatternGridWrapperForCostumPatterns.textContent = null;
+
     // console.log(allGameData);
 
     // Define field data for game
@@ -364,7 +368,7 @@ function initializeGame(field, onlineGame, OnlineGameDataArray, Allowed_Patterns
     // In the online game mode the curr_innerGameMode gets its right value in serverHandler.js
     GameData.InnerGameMode = curr_innerGameMode;
 
-    if (curr_mode != GameMode[1].opponent && !inAdvantureMode) { // If not in KI Mode and not in advanture mode
+    if (!inAdvantureMode) { // If not in KI Mode and not in advanture mode
         // Inner game Mode
         if (GameData.InnerGameMode == InnerGameModes[1]) { // Boneyard
             Start_Blocker(onlineGame);
@@ -460,6 +464,8 @@ function initAllPatterns(official_patterns, costum_patterns, Fieldx, Fieldy) {
     yCell_Amount = 5;
     CalculateBoundaries();
 
+    all_patterns_in_game = {};
+
     let [pattern_structures, pattern_names, pattern_values] = BindPatternsWithCostumPatternsToIndexes(official_patterns, costum_patterns, Fieldx, Fieldy);
 
     console.log(pattern_structures, pattern_names, costum_patterns, pattern_values);
@@ -686,6 +692,17 @@ function initializeDocument(field, fieldIndex, fieldTitle, onlineMode, OnlineGam
     fetch_spinner.setAttribute('in_use_in_lobby', 'false');
     Lobby_footer.querySelector('.fetch_spinner') && Lobby_footer.querySelector('.fetch_spinner').remove();
 
+    if (arena_mode) {
+        chooseWinnerWindowBtn.style.display = 'none';
+        GiveUp_btn.style.display = 'none';
+        TrainingArenaDifficutlyModeGameDisplay.style.display = 'flex';
+        TrainingArenaDifficutlyModeGameDisplayText.textContent = training_arena.mode.toUpperCase();
+        TrainingArenaDifficutlyModeGameDisplayText.style.color = training_arena.mode_color;
+
+    } else {
+        TrainingArenaDifficutlyModeGameDisplay.style.display = 'none';
+    };
+
     // Initialize players
     initializePlayers(OnlineGameDataArray);
 };
@@ -788,6 +805,10 @@ function initializePlayers(OnlineGameDataArray) {
         // set color of player icon
         namePlayer1.style.color = localStorage.getItem('userInfoColor');
         curr_mode == GameMode[1].opponent ? namePlayer2.style.color = "gold" : namePlayer2.style.color = "white";
+
+        if (arena_mode) {
+            namePlayer2.style.color = "white";
+        };
     };
 
     currentName = PlayerData[1].PlayerName;

src/script/public/Game/OfflineArena/BotArena.js

@@ -1,9 +1,13 @@
 // everything about the training arena. The players opponent is a bot
 class TrainingArena {
-    constructor(mode) {
+    constructor(mode, mode_color) {
         this.mode = mode;
+        this.mode_color = mode_color;
         this.patterns_wrapper = TA_patterns_wrapper;
         this.patterns_ok_btn = TA_patterns_btn;
+
+        this.selected_patterns = {};
+        this.selected_patterns_count = 0;
     };
 
     init() {
@@ -18,6 +22,39 @@ class TrainingArena {
             let s = GamePatternsList[n];
             createPattern_preview(n, s, this.patterns_wrapper, "toggle", undefined, 5, undefined, undefined, 5);
         });
+
+        let patterns = [...this.patterns_wrapper.children];
+
+        patterns.forEach(p => {
+            let checkbox = p.childNodes[0].childNodes[2].childNodes[0];
+
+            checkbox.removeAttribute('activated');
+            checkbox.setAttribute('TA_p_activated', 'false');
+            checkbox.className = "fa-regular fa-square item";
+
+            checkbox.addEventListener('click', (e) => {
+                switch (e.target.getAttribute('TA_p_activated')) {
+                    case 'false':
+                        if (this.selected_patterns_count >= 2) return;
+
+                        checkbox.setAttribute('TA_p_activated', 'true');
+                        checkbox.className = "fa-regular fa-square-check item";
+                        this.selected_patterns[p.getAttribute('costum_pattern_name')] = GamePatternsList[p.getAttribute('costum_pattern_name')];
+
+                        this.selected_patterns_count++;
+                        break;
+                    case 'true':
+                        checkbox.setAttribute('TA_p_activated', 'false');
+                        checkbox.className = "fa-regular fa-square item";
+                        this.selected_patterns[p.getAttribute('costum_pattern_name')] && delete this.selected_patterns[p.getAttribute('costum_pattern_name')];
+                        this.selected_patterns_count--;
+                        break;
+                };
+
+                allowedPatternsFromUser = [...Object.keys(this.selected_patterns)];
+                allowedPatterns = [...Object.keys(this.selected_patterns)];
+            });
+        });
     };
 };
 
@@ -31,7 +68,25 @@ TA_patterns_qust_btn.addEventListener('click', () => {
     qabox.open();
 });
 
+HelpTA_btn.addEventListener('click', () => {
+    const qabox = new QABOX(2, [`Here in the training arena you can improve your skills by playing against the computer.`, `Choose a difficulty level from normal to hard.`], { "normal": 'green', 'hard': 'red' }, {}, true);
+    qabox.open();
+});
+
 TA_patterns_btn.addEventListener('click', () => {
-    TrainingArena_Patterns_popUp.style.display = 'none';
-    DarkLayer.style.display = 'none';
+    if (training_arena.selected_patterns_count > 0) {
+        TrainingArena_Patterns_popUp.style.display = 'none';
+        DarkLayer.style.display = 'none';
+
+        curr_field_ele = document.querySelector('#thirtyxthirty');
+        curr_mode = GameMode[1].opponent;
+        arena_mode = true;
+        UserClicksNxNDefaultSettings(); // true: player can only change his name and icon  
+        InitGameDataForPopUp(false);
+
+    } else {
+        OpenedPopUp_WhereAlertPopUpNeeded = true;
+        AlertText.textContent = 'Select one more pattern';
+        DisplayPopUp_PopAnimation(alertPopUp, 'flex', true);
+    };
 });