continued working on level overview feature + other small things

src/script/public/App/booting.js

@@ -103,6 +103,11 @@ function checkLoadingProgress() {
 
         ToS(); // terms of service pop up the user must agree on the first time he joins the game
 
+        roll_animation(comments_header_sword, comments_header_sword);
+        roll_animation(document.querySelector("#gameMode-KI-card"), document.querySelectorAll(".BotIcon")[0]);
+        roll_animation(document.querySelector("#gameMode-TwoPlayerOnline-card"), document.querySelectorAll(".BotIcon")[1]);
+        roll_animation(document.querySelector("#gameMode-OneVsOne-card"), document.querySelectorAll(".BotIcon")[2]);
+
     } else {
         setTimeout(() => {
             checkLoadingProgress();

src/script/public/App/documents.js

@@ -640,6 +640,10 @@ let comments_submit_btn = document.querySelector(".comments_submit_btn");
 let comments_submit_input = document.querySelector(".comments_submit_input");
 let comments_close_btn = document.querySelector(".comments_close_btn");
 let comments_list = document.querySelector(".comments_list");
+let comments_header_sword = document.querySelector(".comments_header_sword");
+let level_scene_best_time = document.querySelector(".level_scene_best_time");
+let PreviewLevelBtn = document.querySelector(".PreviewLevelBtn");
+let level_likes_text = document.querySelector(".level_likes_text");
 
 // Search Player elements
 let SearchPlayerPopUp = document.querySelector('.SearchPlayerPopUp');

src/script/public/App/script.js

@@ -1203,11 +1203,14 @@ gameInfo_btn.addEventListener('click', () => {
     DarkLayer.style.display = 'flex';
     DisplayPopUp_PopAnimation(GameInfoPopUp, "flex", true);
 
-    if (!NewCreativeLevel) {
+    if (!NewCreativeLevel && !inPlayerLevelsScene) {
         GameInfo_HeaderTitle.textContent = `${curr_field} - Game Info`;
 
     } else if (NewCreativeLevel || PlayingInCreatedLevel_AsGuest) {
         GameInfo_HeaderTitle.textContent = `${curr_field} - Game Info`;
+
+    } else if (inPlayerLevelsScene) {
+        GameInfo_HeaderTitle.textContent = `${player_levels_handler.online_level_overview_handler.level.level_name} - Game Info`;
     };
 
     // not in advanture mode
@@ -2038,4 +2041,12 @@ SearchLevelInput.addEventListener("keyup", (e) => {
         e.preventDefault();
         player_levels_handler.RequestLevelSearchResults(SearchLevelInput.value);
     };
+});
+
+document.querySelector('.level_scene_start_btn').addEventListener('mouseover', () => {
+    document.querySelector('.level_scene_grid').style.transform = 'scale(1.05)';
+});
+
+document.querySelector('.level_scene_start_btn').addEventListener('mouseout', () => {
+    document.querySelector('.level_scene_grid').style.transform = 'scale(1)';
 });

src/script/public/App/scripts/functions.js

@@ -248,4 +248,16 @@ function formatDate(dateString) {
 
     const formattedDate = `${month} ${day}, ${year}, ${hours}:${minutes} ${ampm}`;
     return formattedDate;
+};
+
+const roll_animation = (item, class_item) => {
+    item.addEventListener('mouseenter', () => {
+        class_item.classList.remove('unroll');
+        class_item.classList.add('roll');
+    });
+
+    item.addEventListener('mouseleave', () => {
+        class_item.classList.remove('roll');
+        class_item.classList.add('unroll');
+    });
 }

src/script/public/App/social_stuff/online_level_overview.js

@@ -7,14 +7,15 @@ class onlineLevelOverviewHandler {
         this.comments_handler = new level_comments_handler(this);
     };
 
-    init() {
-        this.events();
+    async init() {
+        console.log(this.level);
+
         this.init_DOM();
         this.init_grid();
-        this.init_personal_data_for_level();
-        this.comments_handler.events();
+        await this.init_personal_data_for_level();
+        this.events();
 
-        console.log(this.level);
+        this.comments_handler.events();
     };
 
     abort(err) {
@@ -25,25 +26,41 @@ class onlineLevelOverviewHandler {
 
     events() {
         level_scene_back_btn.removeEventListener("click", level_scene_back_btn.click);
+
         level_scene_back_btn.addEventListener("click", level_scene_back_btn.click = () => {
-            DarkLayerAnimation(multiple_use_scene, online_level_scene).then(() => {
+            if (!NewCreativeLevel) {
+                DarkLayerAnimation(multiple_use_scene, online_level_scene).then(() => {
 
-                Lobby.style.background = ``;
-                theme.start();
-            });
+                    Lobby.style.background = ``;
+                    theme.start();
+                });
+
+            } else {
+                DarkLayerAnimation(CreateLevelScene, online_level_scene).then(() => {
+                    sceneMode.full();
+                    Lobby.style.background = ``;
+                    theme.start();
+                });
+            };
         });
 
-        level_scene_start_btn.addEventListener("click", () => {
+        level_scene_start_btn.removeEventListener("click", level_scene_start_btn.ev);
+
+        level_scene_start_btn.addEventListener("click", level_scene_start_btn.ev = () => {
             DisplayPopUp_PopAnimation(ChooseBetweenModesPopUp, "flex", true);
         });
 
-        level_scene_comments_btn.addEventListener("click", () => {
+        level_scene_comments_btn.removeEventListener("click", level_scene_comments_btn.ev);
+
+        level_scene_comments_btn.addEventListener("click", level_scene_comments_btn.ev = () => {
             this.comments_handler.open();
         });
 
         comments_close_btn.addEventListener("click", () => {
             this.comments_handler.close();
         });
+
+        level_scene_likes_btn.removeEventListener("click", level_scene_likes_btn.ev);
     };
 
     init_DOM() {
@@ -67,21 +84,75 @@ class onlineLevelOverviewHandler {
         player_levels_handler.GenerateField(xy, xy, level_scene_grid);
     };
 
-    init_personal_data_for_level() {
+    async init_personal_data_for_level() {
         try {
-            socket.emit("check_personal_data_for_level_x", Number(localStorage.getItem("PlayerID")), this.level["id"], cb => {
+            await socket.emit("check_personal_data_for_level_x", Number(localStorage.getItem("PlayerID")), this.level["id"], (cb, level_data) => {
                 console.log(cb);
+                this.fetch_reaction();
 
-                if (!cb) return;
+                level_likes_text.textContent = !level_data["likes"] ? "0" : level_data["likes"];
+
+                if (!cb["points_made"]) {
+                    this.placeholder_data_text();
+                    return;
+                };
+
+                let points_made = cb["points_made"];
+                let points_required = this.level["required_points"];
+                let progress = (points_made / points_required) * 100;
 
                 this.personal_data_for_level = cb;
-                level_scene_progress_text.textContent = `${cb[this.level["id"]]["points_made"]} / ${this.level["required_points"]} Points`;
+                level_scene_progress_text.textContent = `${points_made} / ${points_required} Points`;
+                level_scene_progress_bar.style.background = `linear-gradient(90deg, white ${progress}%, transparent 0%)`;
+                level_scene_best_time.textContent = `best time: ${cb["best_time"]} seconds`;
             });
 
         } catch (error) {
             this.abort(error);
         };
     };
+
+    placeholder_data_text() {
+        level_scene_progress_text.textContent = `0 / ${this.level["required_points"]} Points`;
+        level_scene_progress_bar.style.background = `linear-gradient(90deg, white 0%, transparent 0%)`;
+        level_scene_best_time.textContent = `best time: 0 seconds`;
+    };
+
+    async fetch_reaction() {
+        try {
+            await socket.emit("fetch_users_level_reaction", this.level["id"], Number(localStorage.getItem("PlayerID")), cb => {
+
+                if (cb.reaction == 1) {
+                    level_scene_likes_btn.classList.add("active_like_btn");
+                    level_scene_likes_btn.setAttribute("like_level_btn_is_active", "true");
+
+                } else {
+                    level_scene_likes_btn.classList.remove("active_like_btn");
+                    level_scene_likes_btn.setAttribute("like_level_btn_is_active", null);
+
+                    level_scene_likes_btn.addEventListener("click", level_scene_likes_btn.ev = () => {
+                        this.like_level();
+                    });
+                };
+            });
+
+        } catch (error) {
+            console.log(error);
+        };
+    };
+
+    like_level() {
+        try {
+            socket.emit("like_level", this.level["id"], Number(localStorage.getItem("PlayerID")), cb => {
+                level_scene_likes_btn.setAttribute("like_level_btn_is_active", "true");
+                level_scene_likes_btn.classList.add("active_like_btn");
+                level_likes_text.textContent = cb;
+            });
+
+        } catch (error) {
+            console.log(error);
+        };
+    };
 };
 
 // comments
@@ -318,9 +389,9 @@ chooseModeCloseBtn.addEventListener("click", () => {
 });
 
 OnlineModeBtn.addEventListener("click", () => {
-    player_levels_handler.startGame(1);
+    !NewCreativeLevel ? player_levels_handler.startGame(1) : NewCreativeLevel.startGame(1);
 });
 
 OfflineModeBtn.addEventListener("click", () => {
-    player_levels_handler.startGame(0);
+    !NewCreativeLevel ? player_levels_handler.startGame(0) : NewCreativeLevel.startGame(0);
 });

src/script/public/App/social_stuff/social_scene.js

@@ -21,6 +21,9 @@ class social_scene_class {
         social_stuff_cards[0].addEventListener("click", () => {
             if (localStorage.getItem("UserName")) {
                 curr_mode = GameMode[4].opponent;
+                inPlayerLevelsScene = false;
+
+                sceneMode.full();
 
                 // pause music in create level mode
                 PauseMusic();
@@ -634,6 +637,8 @@ class create_clan_handler {
 class player_levels_handler_wrapper extends NewLevel {
     constructor() {
         super();
+
+        this.online_level_overview_handler = null;
     };
 
     init() {
@@ -762,8 +767,8 @@ class player_levels_handler_wrapper extends NewLevel {
                 ];
 
 
-                let online_level_overview_handler = new onlineLevelOverviewHandler(level);
-                online_level_overview_handler.init();
+                this.online_level_overview_handler = new onlineLevelOverviewHandler(level);
+                this.online_level_overview_handler.init();
             });
         });
 

src/script/public/Game/CreateGame.js

@@ -258,9 +258,6 @@ class NewLevel {
         SearchLevelInputWrapper.style.display = "none";
         CreateLevel_Title.style.display = "block";
 
-        PlayLevelBtn.style.display = "none";
-
-        this.CloseSearch(false);
 
         if (this.CurrentSelectedSetting.id == 0) {
             workbench_levelID_display.textContent = "ID none";
@@ -340,6 +337,7 @@ class NewLevel {
 
         PublishLevelBtn.style.display = "none";
         unpublishLevelBtn.style.display = "none";
+        PreviewLevelBtn.style.display = "none";
 
         if (this.selectedLevel == undefined) {
             CurrentSelectedLevel_Display.textContent = "selected level: ";
@@ -465,9 +463,12 @@ class NewLevel {
 
                     EditLevelBtn_ListBtn.style.display = "block";
                     RemoveLevelBtn.style.display = "block";
+                    PreviewLevelBtn.style.display = "none";
+
                 } else {
                     PublishLevelBtn.style.display = "none";
                     unpublishLevelBtn.style.display = "none";
+                    PreviewLevelBtn.style.display = "none";
                 };
 
                 LevelList_PublishStatusDisplay.textContent = "unpublished";
@@ -478,9 +479,12 @@ class NewLevel {
                 if (!this.Searching) {
                     PublishLevelBtn.style.display = "none";
                     unpublishLevelBtn.style.display = "block";
+                    PreviewLevelBtn.style.display = "block";
+
                 } else {
                     PublishLevelBtn.style.display = "none";
                     unpublishLevelBtn.style.display = "none";
+                    PreviewLevelBtn.style.display = "none";
                 };
 
                 EditLevelBtn_ListBtn.style.display = "none";
@@ -794,6 +798,7 @@ class NewLevel {
     startGame = (mode) => {
         let FieldSize = `${this.Settings.cellgrid[this.selectedLevel[7]]}x${this.Settings.cellgrid[this.selectedLevel[7]]}`;
         var user_unlocked_Advanced_fields_online = true;
+
         // If player haven't unlocked advanced fields but the level is an advanced field, unlock it and delete it later after level creation
         if (DataFields[FieldSize] == undefined) {
             DataFields['25x25'] = document.querySelector('#twentyfivextwentyfive');
@@ -1083,14 +1088,17 @@ class NewLevel {
 
 // add user costum pattern to win conditions
 const NewCreativeLevel_GenerateCostumPatterns = (costumPatternsFromThirdParty, costumXCoordFromThirdParty) => { // costumPatternsFromThirdParty : from database for online game
-    // console.log(costumPatternsFromThirdParty, NewCreativeLevel);
+    console.log(costumPatternsFromThirdParty, NewCreativeLevel, costumXCoordFromThirdParty);
 
     let patterns;
     if (NewCreativeLevel) {
         patterns = NewCreativeLevel.selectedLevel[15];
 
-    } else {
+    } else if (!NewCreativeLevel && !inPlayerLevelsScene) {
         patterns = costumPatternsFromThirdParty;
+
+    } else if (inPlayerLevelsScene) {
+        patterns = JSON.parse(player_levels_handler.online_level_overview_handler.level["costum_patterns"]);
     };
 
     if (patterns && NewCreativeLevel) {
@@ -1135,8 +1143,11 @@ const NewCreativeLevel_DisplayCostumPatternsInGamePopUp = () => {
     if (NewCreativeLevel) {
         patterns = NewCreativeLevel.selectedLevel[15];
 
-    } else {
-        patterns = creativeLevel_online_costumPatterns;
+    } else if (!NewCreativeLevel && !inPlayerLevelsScene) {
+        patterns = costumPatternsFromThirdParty;
+
+    } else if (inPlayerLevelsScene) {
+        patterns = JSON.parse(player_levels_handler.online_level_overview_handler.level["costum_patterns"]);
     };
 
     // delete previous costum user cell grids 
@@ -1285,6 +1296,28 @@ const InitCreateLevelScene = () => {
         };
     });
 
+    PreviewLevelBtn.addEventListener("click", () => {
+        if (NewCreativeLevel.selectedLevel == undefined) {
+
+            AlertText.textContent = "select a level to preview it";
+            DisplayPopUp_PopAnimation(alertPopUp, "flex", true);
+
+        } else {
+            DarkLayerAnimation(online_level_scene, multiple_use_scene).then(async() => {
+
+                await socket.emit("request_level_for_id", NewCreativeLevel.selectedLevel[11], (level) => {
+
+                    player_levels_handler.online_level_overview_handler = new onlineLevelOverviewHandler();
+                    player_levels_handler.online_level_overview_handler.level = level;
+                    player_levels_handler.online_level_overview_handler.init();
+
+                    CreateLevelScene.style.display = "none";
+                    sceneMode.default();
+                });
+            });
+        };
+    });
+
     CreateLevel_leaveSceneBtn.addEventListener('click', () => {
         if (Object.keys(NewCreativeLevel.history).length <= 0) {
             LeaveCreateLevelScene();