diff --git a/src/index.js b/src/index.js index 28d0187..c79b708 100644 --- a/src/index.js +++ b/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 = () => { diff --git a/src/script/public/App/GameSetUp.js b/src/script/public/App/GameSetUp.js index 520edae..ef1dad1 100644 --- a/src/script/public/App/GameSetUp.js +++ b/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]); }; }; diff --git a/src/script/public/App/documents.js b/src/script/public/App/documents.js index 271b2f6..c391a4c 100644 --- a/src/script/public/App/documents.js +++ b/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'); diff --git a/src/script/public/App/script.js b/src/script/public/App/script.js index 0c424a8..949876a 100644 --- a/src/script/public/App/script.js +++ b/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 diff --git a/src/script/public/Game/CreateGameLibrary/UserCostumStuff.js b/src/script/public/Game/CreateGameLibrary/UserCostumStuff.js index 09d0108..9bdbf4b 100644 --- a/src/script/public/Game/CreateGameLibrary/UserCostumStuff.js +++ b/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"); diff --git a/src/script/public/Game/Game.js b/src/script/public/Game/Game.js index fa8214d..58499af 100644 --- a/src/script/public/Game/Game.js +++ b/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; diff --git a/src/script/public/Game/OfflineArena/BotArena.js b/src/script/public/Game/OfflineArena/BotArena.js index d97f5c9..53e41b2 100644 --- a/src/script/public/Game/OfflineArena/BotArena.js +++ b/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); + }; }); \ No newline at end of file diff --git a/src/script/public/assets/game/coliseum.svg b/src/script/public/assets/game/coliseum.svg new file mode 100644 index 0000000..87adc52 --- /dev/null +++ b/src/script/public/assets/game/coliseum.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/script/public/assets/game/piercing-sword copy 2.svg b/src/script/public/assets/game/piercing-sword copy 2.svg new file mode 100644 index 0000000..f744380 --- /dev/null +++ b/src/script/public/assets/game/piercing-sword copy 2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/script/public/index.css b/src/script/public/index.css index 5797dc6..e01dae7 100644 --- a/src/script/public/index.css +++ b/src/script/public/index.css @@ -1487,8 +1487,13 @@ ol.UserInfo-list img { border: 0.7vh solid white; cursor: pointer; transition: transform 0.15s ease-in-out; - background: repeating-linear-gradient(45deg, var(--bg-app-color), var(--bg-app-color2) 31vw); + background: repeating-linear-gradient(45deg, var(--bg-app-color), var(--bg-app-color2) 51vw); background-size: 200% 200%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 10vh 0 0 0; } .TrainingArenaDifficultyModeCard:hover { @@ -1506,11 +1511,11 @@ ol.UserInfo-list img { } .TrainingArenaDifficultyModeCard:hover { - animation: shiny-card-ani 0.3s linear forwards; + animation: shiny-card-ani 0.2s linear forwards; } .TrainingArenaDifficultyModeCard:not(:hover) { - animation: shiny-card-reverse-ani 0.3s linear forwards; + animation: shiny-card-reverse-ani 0.2s linear forwards; } @keyframes shiny-card-ani { @@ -1518,13 +1523,13 @@ ol.UserInfo-list img { background-size: 200% 200%; } to { - background-size: 190% 190%; + background-size: 210% 210%; } } @keyframes shiny-card-reverse-ani { from { - background-size: 190% 190%; + background-size: 210% 210%; } to { background-size: 200% 200%; @@ -1532,12 +1537,22 @@ ol.UserInfo-list img { } .TA_DifficultyModeCard_header { - width: 100%; - height: 7.5%; + width: 9vw; + height: 5vw; display: flex; align-items: center; - justify-content: space-between; + justify-content: center; flex-direction: row; + border: 0.7vh solid white; + border-top: none; + border-bottom-left-radius: 100%; + border-bottom-right-radius: 100%; +} + +.TA_DifficultyModeCard_header img { + width: 5vw; + height: 5vw; + transform: scale(0.9) rotate(136deg); } .TA_DifficultyModeCard_main { @@ -1575,6 +1590,41 @@ ol.UserInfo-list img { color: #c91313; } +.TrainingArenaDifficultyModeCard[mode="normal"] { + border-color: #1a9b1a; +} + +.TrainingArenaDifficultyModeCard[mode="medium"] { + border-color: #cbb127; +} + +.TrainingArenaDifficultyModeCard[mode="hard"] { + border-color: #c91313; +} + +.TrainingArenaDifficultyModeCard[mode="normal"] .TA_DifficultyModeCard_header { + border-color: #1a9b1a; +} + +.TrainingArenaDifficultyModeCard[mode="medium"] .TA_DifficultyModeCard_header { + border-color: #cbb127; +} + +.TrainingArenaDifficultyModeCard[mode="hard"] .TA_DifficultyModeCard_header { + border-color: #c91313; +} + +.TA_title { + position: absolute; + inset: 0; + bottom: 65vh; + margin: auto; + font-size: 3vw; + font-weight: 500; + width: max-content; + height: max-content; +} + .secondTierModesCaret { position: absolute; top: 0; @@ -2875,7 +2925,7 @@ label h3 { } .GameInfo-AllowedPatterns { - width: auto; + width: 90%; height: 100%; font-size: 3vh; } @@ -2931,6 +2981,7 @@ label h3 { font-size: 3vh; padding: 1vh 0 2vh 0; border-bottom: 0.4vh solid var(--font-color); + border-radius: 6%; } @@ -8917,6 +8968,15 @@ p.createCostumField_yInput { overflow-y: auto; } +.WinPatternsOverviewWrapper>div { + align-items: center; + justify-content: center; +} + +.WinPatternsOverviewWrapper>div>div.small_createCostumField_Field { + width: min-content; +} + .officialWinPatternsOpenBtn { padding: 10px; background: var(--bg-app-color2); @@ -10711,8 +10771,8 @@ p.createCostumField_yInput { align-items: flex-start; justify-content: center; grid-template-columns: repeat(auto-fill, 25vh); - column-gap: 2em; - row-gap: 2em; + column-gap: 2vw; + row-gap: 1vh; overflow-y: auto; justify-content: center; } @@ -12429,8 +12489,10 @@ ul.default_sb_list.best_players_list div:first-child { display: flex; flex-direction: row; justify-content: center; + align-items: center; gap: 4vw; position: absolute; + text-wrap: nowrap; } .GameStartAnimationPlayerBar[player_x_bar="1"] { @@ -12448,6 +12510,7 @@ ul.default_sb_list.best_players_list div:first-child { .GameStartAnimationPlayerBar[player_x_bar="1"]>div { bottom: 40%; + left: 25%; } .GameStartAnimationPlayerBar[player_x_bar="1"]>img { @@ -12475,6 +12538,7 @@ ul.default_sb_list.best_players_list div:first-child { .GameStartAnimationPlayerBar[player_x_bar="2"]>div { top: 50%; + right: 10%; } .GameStartAnimationPlayerBar[player_x_bar="2"]>img { @@ -12584,6 +12648,12 @@ ul.default_sb_list.best_players_list div:first-child { align-items: center; } +.TrainingArenaDifficutlyModeGameDisplay { + display: flex; + position: absolute; + bottom: 10vh; +} + /* Animations */ diff --git a/src/script/public/index.html b/src/script/public/index.html index 79c8a58..94e3c37 100644 --- a/src/script/public/index.html +++ b/src/script/public/index.html @@ -766,13 +766,16 @@

Choose a field!

-
-
+

Training Arena

+
+
+
- + +
@@ -780,13 +783,14 @@

Choose a field!

-
+
- +
- + +
@@ -794,13 +798,15 @@

Choose a field!

-
+
+
- + +
@@ -2361,6 +2367,7 @@

Merciful slaughter

join nice lobby watch a game user created + Help
@@ -2444,6 +2451,8 @@

Merciful slaughter

You are watching a game + Difficulty:

NORMAL

 +
diff --git a/src/script/public/serverHandler.js b/src/script/public/serverHandler.js index a36bf90..56b7794 100644 --- a/src/script/public/serverHandler.js +++ b/src/script/public/serverHandler.js @@ -324,6 +324,8 @@ const CloseSetGameDataPopUp = () => { ConfirmName_Btn.style.height = '45%'; SetPlayerNames_Header.style.height = '21%'; + arena_mode = false; + if (personal_GameData.EnterOnlineGame) { socket.emit('user_left_lobby', personal_GameData.role, personal_GameData.currGameID, message => { // Do things after room was killed @@ -412,15 +414,22 @@ const DarkLayerAfterGameAnimation = (advantureModelevelIndex, UserWonAdvantureMo CreateLevelScene.style.display = "flex" sceneMode.full(); - } else { + } else if (!arena_mode) { if (inPlayerLevelsScene) { online_level_scene.style.display = "flex"; + sceneMode.default(); } else { gameModeFields_Div.style.display = 'flex' + sceneMode.full(); }; }; + if (arena_mode) { + arena_mode = false; + gameMode_OneVsOne_card.click(); + }; + } else { AdvantureMap.style.display = 'flex'; }; @@ -493,7 +502,7 @@ const UserLeftGameInOfflineMode = (userWonInAdvantureMode, LevelIndex_AdvantureM // bug fix setTimeout(() => { if (inAdvantureMode) { - lobbyHeader.style.borderBottom = '3px solid var(--font-color)'; + lobbyHeader.style.borderBottom = '0.4vh solid var(--font-color)'; }; // user won a level in advanture mode @@ -590,6 +599,7 @@ function UserleavesGame(userWonInAdvantureMode, LevelIndex_AdvantureMode, from_c } else { gameModeFields_Div.style.display = 'flex'; + sceneMode.full(); }; GameField.style.display = "none"; @@ -1408,6 +1418,7 @@ socket.on('INFORM_blocker_left_game', () => { } else { gameModeFields_Div.style.display = 'flex'; + sceneMode.full(); }; OnlineGame_Lobby.style.display = 'flex'; @@ -1458,6 +1469,7 @@ socket.on('INFORM_admin_left_room', () => { } else { gameModeFields_Div.style.display = 'flex'; + sceneMode.full(); }; SetPlayerNamesPopUp.style.display = 'none';