diff --git a/src/script/public/App/script.js b/src/script/public/App/script.js index 3b764e8..ea45594 100644 --- a/src/script/public/App/script.js +++ b/src/script/public/App/script.js @@ -584,17 +584,19 @@ const toggleMainCardAnimation = (setting) => { }; }; +let review_mode = false; + // toggle field data in game const toggleFieldDataInGame = (setting) => { if (localStorage.getItem(setting) == "true") { // if setting is enabled - document.querySelector('.GameField-info-corner').style.display = "block"; + !review_mode && (document.querySelector('.GameField-info-corner').style.display = "block"); localStorage.setItem(setting, "true"); sett_ShowGameDataInGame.classList = "fa-regular fa-check-square checkBox"; sett_ShowGameDataInGame.setAttribute("marked", "true"); } else if (localStorage.getItem(setting) == "false") { - document.querySelector('.GameField-info-corner').style.display = "none"; + !review_mode && (document.querySelector('.GameField-info-corner').style.display = "none"); localStorage.setItem(setting, "false"); sett_ShowGameDataInGame.classList = "fa-regular fa-square checkBox"; diff --git a/src/script/public/Game/Game.js b/src/script/public/Game/Game.js index b598562..328186d 100644 --- a/src/script/public/Game/Game.js +++ b/src/script/public/Game/Game.js @@ -17,8 +17,6 @@ let player1_lastBarRelation = 0; let GameSeconds = 0; -let review_mode = false; - // Player 1 is always X and can start first let PlayerData = { 1: { @@ -152,8 +150,7 @@ let boneyard_array = []; // 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, CreativeLevel_from_onlineMode_costumPatterns, p1_XP, p2_XP, review_mode, review_mode_data) { - - console.log(arguments) + // console.log(arguments) sceneMode.default(); @@ -455,6 +452,7 @@ function initializeDocument(field, fieldIndex, fieldTitle, onlineMode, OnlineGam lobbyFooter.style.width = "100%"; cellGrid.style.pointerEvents = 'all'; review_mode_game_footer.style.display = 'none'; + localStorage.getItem('sett-ShowFieldData') == 'true' && (document.querySelector('.GameField-info-corner').style.display = "flex"); review_mode_action_wrapper.style.display = "none"; review_moves_wrapper.style.display = "none"; @@ -462,9 +460,13 @@ function initializeDocument(field, fieldIndex, fieldTitle, onlineMode, OnlineGam gameLog_btn.classList.add('blured'); pointsToAchieve_ScoreBar.forEach(textEl => { + textEl.style.display = 'block'; textEl.textContent = ` / ${points_to_win}`; }); + scorePlayer1.style.display = 'block'; + scorePlayer2.style.display = 'block'; + // Initialize leaderboard scores leaderboard_player1_score.textContent = "0"; leaderboard_player2_score.textContent = "0"; @@ -2539,9 +2541,16 @@ class reviewModeHandler { this.blocker = null; this.total_moves_length = this.moves.length + entry.cells_blocked_by_blocker.length + + this.board + this.bitboard = BigInt(0b0); + this.patterns = []; // patterns as bigint binarys + this.original_patterns = []; // patterns as arrays + this.win_patterns_on_nth_move = []; // associate every pattern on their move index that realised them }; init() { + this.init_patterns_list(this.entry); this.events(); this.init_doc(this.entry); @@ -2553,6 +2562,60 @@ class reviewModeHandler { this.current_move(this.entry); }; + init_patterns_list(entry) { + this.original_patterns = entry.patterns_used.map(obj => obj.indexes); + this.patterns = convertToBinary(this.original_patterns); + this.win_patterns_on_nth_move = entry.patterns_used.map(obj => obj.on_nth_move); + }; + + create_bitmap() { + let board = [...review_mode_handler.cells].map(el => el.textContent.length > 0 || el.classList.contains('fa-solid') ? 1 : 0); + + this.bitboard = BigInt(0b0); + for (const [i, val] of board.entries()) val && (this.bitboard |= (BigInt(1) << BigInt(i))); + + console.log(board, this.bitboard, this.bitboard.toString(2)); + }; + + check_winnner() { + console.log(this.patterns); + + for (const [i, pattern] of this.patterns.entries()) { + console.log(pattern, this.original_patterns[i]); + + if ((this.bitboard & pattern) == pattern) { + this.blacken_cells(this.original_patterns[i], this.win_patterns_on_nth_move[i]); + }; + }; + }; + + blacken_cells(pattern, on_nth_move) { + console.log(pattern); + + if (!this.entry.kill_cells_after_point) { // only blacken cells of pattern + + for (const i of pattern) { + this.blacken_cell(this.cells[i]); + }; + + } else { + this.moves.map((i, index) => { // blacken all cells on the field + if (index > on_nth_move) return; + + if (this.cells[i].textContent.length > 0 || this.cells[i].classList.contains('fa-solid')) { + this.blacken_cell(this.cells[i]); + }; + }); + }; + }; + + blacken_cell(cell) { + cell.style.background = `white`; + cell.style.color = `white`; + cell.textContent = ``; + cell.className = 'cell'; + }; + events() { review_mode_back_btn.removeEventListener('click', review_mode_back_btn.ev); review_mode_forth_btn.removeEventListener('click', review_mode_forth_btn.ev); @@ -2602,6 +2665,13 @@ class reviewModeHandler { review_mode_game_footer.style.display = 'flex'; statusText.style.display = 'flex'; + pointsToAchieve_ScoreBar.forEach(textEl => { + textEl.style.display = 'none'; + }); + + scorePlayer1.style.display = 'none'; + scorePlayer2.style.display = 'none'; + setTimeout(() => { review_mode_handler.list.scrollTo({ top: 0, @@ -2662,6 +2732,9 @@ class reviewModeHandler { init_player(entry) { + player1_score_bar_wrapper.style.background = `linear-gradient(105deg, #3f51b5 ${100}%, transparent ${5}%)`; + player2_score_bar_wrapper.style.background = `linear-gradient(-105deg, darkred ${100}%, transparent ${5}%)`; + // Player Name PlayerData[1].PlayerName = entry.p1_name; PlayerData[2].PlayerName = entry.p2_name; @@ -2759,8 +2832,9 @@ class reviewModeHandler { 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.cells.map((val, i, arr) => { + let move = Number(val.getAttribute('cell-index')); + !entry.boneyard_arr.includes(move) && (val.style.background = 'unset'); }); [...this.list.children].forEach(el => { @@ -2776,7 +2850,7 @@ class reviewModeHandler { 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; + if (i > this.curr_move_idx) break; let move = this.moves[k]; @@ -2832,36 +2906,8 @@ class reviewModeHandler { }; }; - // 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; - // }; - // }); + this.create_bitmap(); + this.check_winnner(); }; }; diff --git a/src/script/public/Game/KI.js b/src/script/public/Game/KI.js index 7a01a75..29c3237 100644 --- a/src/script/public/Game/KI.js +++ b/src/script/public/Game/KI.js @@ -90,13 +90,17 @@ const TMA_InitBigBoards = (opt, blocks) => { // convert win conditions for boards bigger than 32-bits function convertToBinary(winPatterns) { const binaryPatterns = []; + for (const pattern of winPatterns) { let binaryRepresentation = BigInt(0); + for (const position of pattern) { binaryRepresentation += BigInt(1) << BigInt(position) - } + }; + binaryPatterns.push(binaryRepresentation) - } + }; + return binaryPatterns; }; @@ -1099,16 +1103,16 @@ const ki_set = (index, inner_field_index) => { }; // check if player has won -function minimax_checkWinner(Player_B, winnerIcon) { // give player big bit boards (type BigInt) +function minimax_checkWinner(Player_Board, winnerIcon) { // give player big bit boards (type BigInt) let winner = null; let tie = 0; // 1 || 0 for (let i = 0; i < WinConds.length; i++) { let pattern = WinConds[i]; - if (tie == 0) tie = evaluatingTie(pattern, Player_B) + if (tie == 0) tie = evaluatingTie(pattern, Player_Board) - if ((Player_B & pattern) == pattern) { + if ((Player_Board & pattern) == pattern) { winner = winnerIcon break } diff --git a/src/script/public/Game/processWinner.js b/src/script/public/Game/processWinner.js index 0136538..267f3fe 100644 --- a/src/script/public/Game/processWinner.js +++ b/src/script/public/Game/processWinner.js @@ -237,8 +237,9 @@ function checkWinner(fromRestart, fromClick) { // the first two parameter are ju extra_points = 1; }; - patterns_used.push(pattern); - console.log(WinCombination, pattern, extra_points); + patterns_used.push({ 'pattern': pattern, 'by': Player1_won ? PlayerData[1].PlayerName : PlayerData[2].PlayerName, 'indexes': [...WinCombination].map(el => parseInt(el.getAttribute("cell-index"))), 'on_nth_move': [...all_game_moves.entries()][all_game_moves.length - 1][0] }); + + console.log(WinCombination, pattern, extra_points, winner[0], PlayerData[1].PlayerForm, all_game_moves); }; ProcessResult(Player1_won, Player2_won, roundWon, winner, WinCombination, extra_points, fromRestart, fromClick);