diff --git a/src/script/public/App/GameLog.js b/src/script/public/App/GameLog.js index eb14df9..13bcae5 100644 --- a/src/script/public/App/GameLog.js +++ b/src/script/public/App/GameLog.js @@ -252,7 +252,8 @@ class gameLogEntry { gameEntry_playerPoints_el.textContent = ` ${this.entry_handler.opponent_data_cache[entry.p1_id].player_name} : ${entry.p1_points}, ${p2_final_name} : ${entry.p2_points} `; - gameEntry_blockerUsed_el.textContent = `${entry.p3_id == -1 ? "nope" : await this.player3_name_display(entry.p3_id)}`; + + gameEntry_blockerUsed_el.textContent = `${entry.p3_id == -1 && entry.blocker_name.length <= 1 ? "nope" : await this.player3_name_display(entry.p3_id) || entry.blocker_name}`; chat_scroll_to_top("instant", gameEntry_details_list); }; @@ -264,6 +265,8 @@ class gameLogEntry { close_all_scenes(); + gameLog_popUp.style.display = 'none'; + DarkLayerAnimation(GameField, gameModeCards_Div); initializeGame(null, null, null, null, null, null, null, null, null, null, null, null, true, entry); @@ -272,14 +275,19 @@ class gameLogEntry { 2: entry.p2_id, 3: entry.p3_id }; - - gameLog_popUp.style.display = 'none'; }; async player3_name_display(p3_id) { if (!this.entry_handler.opponent_data_cache[p3_id]) { - let data = await this.entry_handler.get_data_from_opponent(p3_id); - return data.player_name; + + try { + let data = await this.entry_handler.get_data_from_opponent(p3_id); + return data.player_name; + + } catch (error) { + console.log(error); + return false; + }; }; return this.entry_handler.opponent_data_cache[p3_id].player_name; diff --git a/src/script/public/Game/CellGenerator.js b/src/script/public/Game/CellGenerator.js index 0dfafac..811d1a1 100644 --- a/src/script/public/Game/CellGenerator.js +++ b/src/script/public/Game/CellGenerator.js @@ -164,13 +164,15 @@ function Start_Blocker(onlineGame) { // Anzahl der Elemente, die schwarz gefärbt werden sollen for (i = 0; i < result.length; i++) { let RIndex = Math.floor(Math.random() * result[i].length); - let Index = result[i][RIndex] + let Index = result[i][RIndex]; // Zufälliges Kind-Element auswählen und Hintergrundfarbe auf Schwarz setzen Grid[Index].style.backgroundColor = "var(--font-color)"; Grid[Index].classList = "cell death-cell"; Grid[Index].removeEventListener('click', cellCicked); + boneyard_array.push(Index); + setTimeout(() => { Grid[Index].textContent = null; }, 100); diff --git a/src/script/public/Game/Game.js b/src/script/public/Game/Game.js index 2031697..b598562 100644 --- a/src/script/public/Game/Game.js +++ b/src/script/public/Game/Game.js @@ -146,6 +146,8 @@ let curr_music_name; let review_mode_handler; +let boneyard_array = []; + // 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, @@ -172,6 +174,8 @@ function initializeGame(field, onlineGame, OnlineGameDataArray, Allowed_Patterns player2_lastBarRelation = 0; player1_lastBarRelation = 0; + boneyard_array = []; + CreativeLevel_from_onlineMode_costumPatterns_globalVar = CreativeLevel_from_onlineMode_costumPatterns; OnlinePlayerIDs = { @@ -2534,6 +2538,7 @@ class reviewModeHandler { this.cells = [...cellGrid.children]; this.blocker = null; + this.total_moves_length = this.moves.length + entry.cells_blocked_by_blocker.length }; init() { @@ -2555,11 +2560,13 @@ class reviewModeHandler { review_mode_back_btn.addEventListener('click', review_mode_back_btn.ev = () => { this.curr_move_idx > 0 && this.curr_move_idx--; this.current_move(this.entry); + centerCurrentMove((window.innerHeight / 17) / -1); }); review_mode_forth_btn.addEventListener('click', review_mode_forth_btn.ev = () => { - this.curr_move_idx < this.moves.length - 1 && this.curr_move_idx++; + this.curr_move_idx < this.total_moves_length - 1 && this.curr_move_idx++; this.current_move(this.entry); + centerCurrentMove(window.innerHeight / 17); }); review_moves_wrapper.addEventListener('keydown', (e) => { @@ -2595,6 +2602,13 @@ class reviewModeHandler { review_mode_game_footer.style.display = 'flex'; statusText.style.display = 'flex'; + setTimeout(() => { + review_mode_handler.list.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }, 600); + gameLog_btn.classList.remove('blured'); player1_score_bar_wrapper.style.background = `linear-gradient(105deg, #3f51b5 ${0}%, transparent ${5}%)`; @@ -2676,50 +2690,184 @@ class reviewModeHandler { cell.style.height = `${cellWidth}px`; }); }, 500); + + if (entry.field_mode == 'Boneyard') { + entry.boneyard_arr.map((index, i) => { + this.cells[index].style.background = 'white'; + }); + }; }; init_moves_list(entry, moves) { this.list.textContent = null; - moves.map((move, i) => { - let player_x_move = i % 2 == 0 ? entry.p1_name : entry.p2_name; + let j = 0; + let k = 0; + let move_lenght_sum = moves.length + entry.cells_blocked_by_blocker.length; - let item = document.createElement('li'); - item.textContent = `${i + 1}: ${player_x_move} | idx: ${move}`; + for (let i = 0; i < move_lenght_sum; i++) { + let move = moves[k]; - this.list.append(item); - }); + let player_index = i % 3; + let normal_player_index = i % 2; + let player_x_move; + let move_idx; + + if (entry.field_mode === 'Blocker Combat') { + + if (player_index === 0) { + player_x_move = entry.p1_name; + move_idx = move; + k++; + + } else if (player_index === 1) { + player_x_move = entry.p2_name; + move_idx = move; + k++; + + } else if (player_index === 2) { + player_x_move = entry.blocker_name; + move_idx = entry.cells_blocked_by_blocker[j]; + j++; + }; + + } else { + player_x_move = normal_player_index == 0 ? entry.p1_name : entry.p2_name; + move_idx = move; + k++; + }; + + this.create_list_item(i, player_x_move, move_idx); + }; + }; + + create_list_item(i, player_x_move, move) { + let item = document.createElement('li'); + item.textContent = `${i + 1}: ${player_x_move} | idx: ${move}`; + + player_x_move != this.entry.p1_name && player_x_move != this.entry.p2_name && item.classList.add('bot_move_entry'); + + this.list.append(item); }; current_move(entry) { this.curr_move_val = this.moves[this.curr_move_idx]; this.moves.map((move, i) => { - this.list.children[i].style.borderLeft = `none`; this.cells[move].textContent = null; this.cells[move].className = 'cell'; this.cells[move].style.color = 'white'; }); + this.entry.cells_blocked_by_blocker.map((move, i) => { + !entry.boneyard_arr.includes(move) && (this.cells[move].style.background = 'unset'); + }); + + [...this.list.children].forEach(el => { + el.style.borderLeft = `none`; + el.setAttribute("current", "true"); + }); + [...this.list.children][this.curr_move_idx].style.borderLeft = `0.3vh solid #009fff`; + [...this.list.children][this.curr_move_idx].setAttribute("current", "true"); - this.moves.map((move, i) => { + let j = 0; + let k = 0; + let move_lenght_sum = this.moves.length + entry.cells_blocked_by_blocker.length; + + for (let i = 0; i < move_lenght_sum; i++) { if (i > this.curr_move_idx) return; - let player_x_name = i % 2 == 0 ? entry.p1_name : entry.p2_name; - let player_x_move = i % 2 == 0 ? entry.p1_icon : entry.p2_icon; - let player_x_color = i % 2 == 0 ? entry.p1_color : entry.p2_color; + let move = this.moves[k]; + + let player_index = i % 3; + let normal_player_index = i % 2; + let player_x_move; + let player_x_color; + let player_x_name; + let move_idx; + + if (entry.field_mode === 'Blocker Combat') { + + if (player_index === 0) { + player_x_move = entry.p1_icon; + player_x_color = entry.p1_color; + player_x_name = entry.p1_name; + move_idx = move; + k++; + + } else if (player_index === 1) { + player_x_move = entry.p2_icon; + player_x_color = entry.p2_color; + player_x_name = entry.p2_name; + move_idx = move; + k++; + + } else if (player_index === 2) { + this.cells[entry.cells_blocked_by_blocker[j]].style.background = 'white'; + j++; + + statusText.textContent = `${entry.blocker_name} blocks`; + continue; + }; + + } else { + player_x_move = normal_player_index == 0 ? entry.p1_icon : entry.p2_icon; + player_x_color = normal_player_index == 0 ? entry.p1_color : entry.p1_color; + player_x_name = normal_player_index == 0 ? entry.p1_name : entry.p2_name; + + move_idx = move; + k++; + }; statusText.textContent = `${player_x_name}'s turn`; if (player_x_move.length > 1) { - DisplayPlayerIcon_at_el(this.cells[move], player_x_move, player_x_color, player_x_move); - this.cells[move].classList.add('cell'); + DisplayPlayerIcon_at_el(this.cells[move_idx], player_x_move, player_x_color, player_x_move); + this.cells[move_idx].classList.add('cell'); } else { - this.cells[move].textContent = player_x_move; - this.cells[move].style.color = player_x_color; + this.cells[move_idx].textContent = player_x_move; + this.cells[move_idx].style.color = player_x_color; }; - }); + }; + + // this.moves.map((move, i) => { + // if (i > this.curr_move_idx) return; + + // let blocker_exists = entry.blocker == 0 ? false : true; + // let blocker_index = i % 3 === 2; + // let modulator_numb = blocker_exists ? 3 : 2; + + // let player_x_name = i % modulator_numb == 0 ? entry.p1_name : entry.p2_name; + // let player_x_move = i % modulator_numb == 0 ? entry.p1_icon : entry.p2_icon; + // let player_x_color = i % modulator_numb == 0 ? entry.p1_color : entry.p2_color; + + // statusText.textContent = `${player_x_name}'s turn`; + + // if (blocker_index && blocker_exists) { + // this.cells[entry.cells_blocked_by_blocker[j]].style.background = 'white'; + // j++; + + // statusText.textContent = `${entry.blocker_name} blocks`; + // return; + // }; + + // if (player_x_move.length > 1) { + // DisplayPlayerIcon_at_el(this.cells[move], player_x_move, player_x_color, player_x_move); + // this.cells[move].classList.add('cell'); + + // } else { + // this.cells[move].textContent = player_x_move; + // this.cells[move].style.color = player_x_color; + // }; + // }); }; +}; + +function centerCurrentMove(numb) { + review_mode_handler.list.scrollTo({ + top: review_mode_handler.list.scrollTop + numb, + behavior: 'smooth' + }); }; \ No newline at end of file diff --git a/src/script/public/Game/processWinner.js b/src/script/public/Game/processWinner.js index a65f7db..0136538 100644 --- a/src/script/public/Game/processWinner.js +++ b/src/script/public/Game/processWinner.js @@ -1068,8 +1068,8 @@ function UltimateGameWin(player1_won, player2_won, WinCombination, UserGivesUp) PlayerData[2].AdvancedSkin == "cell empty" ? PlayerData[2].PlayerForm : PlayerData[2].AdvancedSkin.replace('cell', ''), // player 2 icon score_Player1_numb, // p1 points score_Player2_numb, // p2 points - curr_innerGameMode == GameMode[2] ? true : false, // blocker boolean - curr_innerGameMode == GameMode[2] ? 'bot' : ' ', // blocker name + GameData.InnerGameMode == 'Blocker Combat' ? true : false, // blocker boolean + GameData.InnerGameMode == 'Blocker Combat' ? 'bot' : ' ', // blocker name JSON.stringify(cell_indexes_blocked_by_blocker), // cells blocked by blocker JSON.stringify(patterns_used), // patterns used JSON.stringify([xCell_Amount, yCell_Amount]), // x and y: field_size @@ -1088,6 +1088,7 @@ function UltimateGameWin(player1_won, player2_won, WinCombination, UserGivesUp) -1, Number(fieldIndex), curr_music_name.id, + JSON.stringify(boneyard_array) ]; game_log_handler.load_to_server(all_game_data_for_log); @@ -1275,7 +1276,8 @@ socket.on('global_UltimateWin', (player1_won, player2_won, WinCombination, playe !max_amount_of_moves ? -1 : max_amount_of_moves, // max amount of moves OnlinePlayerIDs[3] ? OnlinePlayerIDs[3] : -1, Number(fieldIndex), - curr_music_name.id + curr_music_name.id, + JSON.stringify(boneyard_array) ]; socket.emit("update_gameLog", all_game_data_for_log, cb => { diff --git a/src/script/public/index.css b/src/script/public/index.css index fc2c32b..c3a24a6 100644 --- a/src/script/public/index.css +++ b/src/script/public/index.css @@ -835,6 +835,10 @@ p#name-player1 { padding: 0 0 0 0.5vw; } +.review_moves_list li.bot_move_entry { + color: slategray; +} + .review_moves_list li:nth-child(even) { background-color: var(--bg-app-color2); }