From a938178262ce1aba1b4a4b679f679660442c5fd9 Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Sun, 24 Dec 2023 22:06:40 +0800
Subject: [PATCH 01/17] Add passed status manager

---
 static/js/passedState.js | 43 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 static/js/passedState.js

diff --git a/static/js/passedState.js b/static/js/passedState.js
new file mode 100644
index 0000000..95bec9e
--- /dev/null
+++ b/static/js/passedState.js
@@ -0,0 +1,43 @@
+
+
+class PassedState {
+    constructor(initialState = {}) {
+        const currentState = localStorage.getItem('passedState');
+        // initialize the state when there is no state in the local storage.
+        if (!currentState) {
+            if (!initialState) {
+                throw new Error('initial state is required when there is no state in the local storage.');
+            }
+
+            const state = this._prepareState(initialState);
+            localStorage.setItem('passedState', JSON.stringify(state));
+            this.state = state;
+            return;
+        }
+
+        if (currentState) {
+            this.state = JSON.parse(currentState);
+        }
+    }
+
+    /**
+     * prepare the state for initialization.
+     * @param {object} rawState 
+     * @returns state - the state contains the challenge name and whether the challenge is passed.
+     */
+    _prepareState(rawState) {
+        const state = {};
+        for (const level in rawState) {
+            const challenges = [];
+            for (const challengeName of rawState[level]) {
+                challenges.push({
+                    name: challengeName,
+                    passed: false
+                });
+            }
+            state[level] = challenges;
+        }
+
+        return state;
+    }
+}
\ No newline at end of file

From 4684a29c2388ac3d9067643189fe3336e8428c9e Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Sun, 24 Dec 2023 22:44:10 +0800
Subject: [PATCH 02/17] Add basic method for passedState

---
 static/js/passedState.js | 75 +++++++++++++++++++++++++++++++++-------
 1 file changed, 62 insertions(+), 13 deletions(-)

diff --git a/static/js/passedState.js b/static/js/passedState.js
index 95bec9e..619c36a 100644
--- a/static/js/passedState.js
+++ b/static/js/passedState.js
@@ -1,23 +1,25 @@
 
 
 class PassedState {
+
+    _key = 'passedState';
+    state = null;
+
     constructor(initialState = {}) {
-        const currentState = localStorage.getItem('passedState');
+        const currentState = localStorage.getItem(this._key);
         // initialize the state when there is no state in the local storage.
-        if (!currentState) {
-            if (!initialState) {
-                throw new Error('initial state is required when there is no state in the local storage.');
-            }
-
-            const state = this._prepareState(initialState);
-            localStorage.setItem('passedState', JSON.stringify(state));
-            this.state = state;
-            return;
+        if (!currentState && !initialState) {
+            throw new Error('initial state is required when there is no state in the local storage.');
         }
 
-        if (currentState) {
-            this.state = JSON.parse(currentState);
-        }
+        // add passed property to the challenges in the initial state.
+        const rawState = this._prepareState(initialState);
+
+        // check new state and old state whether is undefined or not. and merge the new state to the old state.
+        const state = this._checkAndMerge(rawState, currentState);
+        this._save(state);
+        this.state = state;
+        return
     }
 
     /**
@@ -26,6 +28,10 @@ class PassedState {
      * @returns state - the state contains the challenge name and whether the challenge is passed.
      */
     _prepareState(rawState) {
+        if (!rawState) {
+            return {};
+        }
+
         const state = {};
         for (const level in rawState) {
             const challenges = [];
@@ -40,4 +46,47 @@ class PassedState {
 
         return state;
     }
+
+    get() {
+        return this.state;
+    }
+
+    _save(state) {
+        localStorage.setItem(this._key, JSON.stringify(state));
+    }
+
+    /**
+     * Set the challenge as passed in the state.
+     * @param {'basic' | 'intermediate' | 'advanced' | 'extreme'} level - the level of the challenge.
+     * @param {string} challengeName - the name of the challenge.
+     * @returns void
+     */
+    setPassed(level, challengeName) {
+        const challenges = this.state[level];
+        for (const challenge of challenges) {
+            if (challenge.name === challengeName) {
+                challenge.passed = true;
+                break;
+            }
+        }
+
+        this._save(this.state);
+    }
+
+    /**
+     * Merge the new state to the current state. this function will compare the new state with the current state and finally overwrite the current state based on the new state: 
+     * - If the old key in the current state is not in the new state, the old key will be removed from the current state. 
+     * - If the new key in the new state is not in the current state, the new key will be added to the current state.
+     * @param {object} newState 
+     */
+    _checkAndMerge(newState, oldState) {
+        if (!newState && !oldState) {
+            throw new Error('one of the new state and the old state is required.');
+        }
+
+        if (!newState) {
+            return oldState;
+        }
+        // TODO: compare the new state with the old state and merge the new state to the old state.
+    }
 }
\ No newline at end of file

From 1d0571b48b776f941c8d4be00d80422c5b89a12b Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Tue, 26 Dec 2023 20:31:37 +0800
Subject: [PATCH 03/17] Update compare logic for old and new state

---
 static/js/passedState.js | 43 ++++++++++++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/static/js/passedState.js b/static/js/passedState.js
index 619c36a..1245788 100644
--- a/static/js/passedState.js
+++ b/static/js/passedState.js
@@ -3,7 +3,7 @@
 class PassedState {
 
     _key = 'passedState';
-    state = null;
+    _state = null;
 
     constructor(initialState = {}) {
         const currentState = localStorage.getItem(this._key);
@@ -16,9 +16,9 @@ class PassedState {
         const rawState = this._prepareState(initialState);
 
         // check new state and old state whether is undefined or not. and merge the new state to the old state.
-        const state = this._checkAndMerge(rawState, currentState);
+        const state = this._checkAndMerge(currentState, rawState);
         this._save(state);
-        this.state = state;
+        this._state = state;
         return
     }
 
@@ -48,7 +48,7 @@ class PassedState {
     }
 
     get() {
-        return this.state;
+        return this._state;
     }
 
     _save(state) {
@@ -62,7 +62,7 @@ class PassedState {
      * @returns void
      */
     setPassed(level, challengeName) {
-        const challenges = this.state[level];
+        const challenges = this._state[level];
         for (const challenge of challenges) {
             if (challenge.name === challengeName) {
                 challenge.passed = true;
@@ -70,7 +70,7 @@ class PassedState {
             }
         }
 
-        this._save(this.state);
+        this._save(this._state);
     }
 
     /**
@@ -79,7 +79,7 @@ class PassedState {
      * - If the new key in the new state is not in the current state, the new key will be added to the current state.
      * @param {object} newState 
      */
-    _checkAndMerge(newState, oldState) {
+    _checkAndMerge(oldState, newState) {
         if (!newState && !oldState) {
             throw new Error('one of the new state and the old state is required.');
         }
@@ -87,6 +87,33 @@ class PassedState {
         if (!newState) {
             return oldState;
         }
-        // TODO: compare the new state with the old state and merge the new state to the old state.
+
+        let mergedState = {};
+        const levels = ['basic', 'intermediate', 'advanced', 'expert'];
+
+        for (const level of levels) {
+            // Initialize an empty array for merged challenges
+            let mergedChallenges = [];
+
+            // Create a map for quick lookup of challenges by name
+            const oldChallengesMap = new Map(oldState[level].map(challenge => [challenge.name, challenge]));
+            const newChallengesMap = new Map(newState[level].map(challenge => [challenge.name, challenge]));
+
+            // Add or update challenges from the newState
+            for (const [name, newChallenge] of newChallengesMap.entries()) {
+                mergedChallenges.push({ ...newChallenge, passed: oldChallengesMap.get(name)?.passed });
+                oldChallengesMap.delete(name); // Remove the challenge from oldChallengesMap since it's updated
+            }
+
+            // Add remaining challenges from the oldState that are not updated (not present in newState)
+            for (const oldChallenge of oldChallengesMap.values()) {
+                mergedChallenges.push(oldChallenge);
+            }
+
+            // Set the merged challenges for the current level in the mergedState
+            mergedState[level] = mergedChallenges;
+        }
+
+        return mergedState;
     }
 }
\ No newline at end of file

From 9ed7e52e3ff8155fcd8287ce0caf0878943d5c4e Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Tue, 26 Dec 2023 21:52:50 +0800
Subject: [PATCH 04/17] Fix state comparison bug

---
 static/js/passedState.js                    | 30 ++++++++++++---------
 templates/components/challenge_sidebar.html |  5 ++++
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/static/js/passedState.js b/static/js/passedState.js
index 1245788..86ff19d 100644
--- a/static/js/passedState.js
+++ b/static/js/passedState.js
@@ -5,7 +5,7 @@ class PassedState {
     _key = 'passedState';
     _state = null;
 
-    constructor(initialState = {}) {
+    init(initialState) {
         const currentState = localStorage.getItem(this._key);
         // initialize the state when there is no state in the local storage.
         if (!currentState && !initialState) {
@@ -16,12 +16,11 @@ class PassedState {
         const rawState = this._prepareState(initialState);
 
         // check new state and old state whether is undefined or not. and merge the new state to the old state.
-        const state = this._checkAndMerge(currentState, rawState);
+        const state = this._checkAndMerge(JSON.parse(currentState), rawState);
         this._save(state);
         this._state = state;
         return
     }
-
     /**
      * prepare the state for initialization.
      * @param {object} rawState 
@@ -48,6 +47,10 @@ class PassedState {
     }
 
     get() {
+        if (!this._state) {
+            const currentState = localStorage.getItem(this._key);
+            this._state = JSON.parse(currentState);
+        }
         return this._state;
     }
 
@@ -62,6 +65,10 @@ class PassedState {
      * @returns void
      */
     setPassed(level, challengeName) {
+        if (!this._state) {
+            this.get()
+        }
+
         const challenges = this._state[level];
         for (const challenge of challenges) {
             if (challenge.name === challengeName) {
@@ -84,12 +91,16 @@ class PassedState {
             throw new Error('one of the new state and the old state is required.');
         }
 
-        if (!newState) {
+        if (!oldState && newState) {
+            return newState;
+        }
+
+        if (!newState && oldState) {
             return oldState;
         }
 
         let mergedState = {};
-        const levels = ['basic', 'intermediate', 'advanced', 'expert'];
+        const levels = ['basic', 'intermediate', 'advanced', 'extreme'];
 
         for (const level of levels) {
             // Initialize an empty array for merged challenges
@@ -101,13 +112,8 @@ class PassedState {
 
             // Add or update challenges from the newState
             for (const [name, newChallenge] of newChallengesMap.entries()) {
-                mergedChallenges.push({ ...newChallenge, passed: oldChallengesMap.get(name)?.passed });
-                oldChallengesMap.delete(name); // Remove the challenge from oldChallengesMap since it's updated
-            }
-
-            // Add remaining challenges from the oldState that are not updated (not present in newState)
-            for (const oldChallenge of oldChallengesMap.values()) {
-                mergedChallenges.push(oldChallenge);
+                let hasPassed = oldChallengesMap.get(name)?.passed || newChallenge.passed;
+                mergedChallenges.push({ ...newChallenge, passed: hasPassed });
             }
 
             // Set the merged challenges for the current level in the mergedState
diff --git a/templates/components/challenge_sidebar.html b/templates/components/challenge_sidebar.html
index 0886f2e..e3f3cc2 100644
--- a/templates/components/challenge_sidebar.html
+++ b/templates/components/challenge_sidebar.html
@@ -124,6 +124,7 @@ <h5 class="challenge-level">{{ level }}</h5>
   </nav>
 </aside>
 
+<script type="text/javascript" src="{{ url_for('static', filename='js/passedState.js')}}"></script>
 <script>
   const sidebarTogglers = document.querySelectorAll('.sidebar-toggle');
   const drawer = document.querySelector('.drawer');
@@ -146,4 +147,8 @@ <h5 class="challenge-level">{{ level }}</h5>
       c.classList.remove('active-challenge');
     }
   }
+
+  const initialState = {{ challenges_groupby_level | tojson }};
+  const passedState = new PassedState();
+  passedState.init(initialState);
 </script>

From 2f357fc6f198d97198d438b5301acad5462f66fc Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Tue, 26 Dec 2023 21:59:32 +0800
Subject: [PATCH 05/17] Sync data when challenge passed

---
 templates/components/challenge_area.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/templates/components/challenge_area.html b/templates/components/challenge_area.html
index df14218..7e79715 100644
--- a/templates/components/challenge_area.html
+++ b/templates/components/challenge_area.html
@@ -108,6 +108,8 @@
           // add confetti effect when passed
           if (json.passed) {
             confetti.addConfetti()
+            // passedState has defined in challenge_sidebar.html
+            passedState.setPassed(level, name);
           }
           setTimeout(() => {
             document.getElementById('answer-link').style.display = 'block';

From da169fd8f0589d2a395b8352e05ab502e541239c Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Wed, 27 Dec 2023 23:16:11 +0800
Subject: [PATCH 06/17] Add finishment for challenges

---
 templates/components/challenge_area.html    |  5 +--
 templates/components/challenge_sidebar.html | 36 +++++++++++++++------
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/templates/components/challenge_area.html b/templates/components/challenge_area.html
index 7e79715..42ad34d 100644
--- a/templates/components/challenge_area.html
+++ b/templates/components/challenge_area.html
@@ -110,6 +110,7 @@
             confetti.addConfetti()
             // passedState has defined in challenge_sidebar.html
             passedState.setPassed(level, name);
+            document.getElementById(`${level}-${name}`).parentNode.classList.add('passed');
           }
           setTimeout(() => {
             document.getElementById('answer-link').style.display = 'block';
@@ -153,8 +154,8 @@
     }
 
     // Make sure the current challenge is visible to user.
-    activeChallengeInList = document.getElementById(`${level}-${name}`);
-    activeChallengeInList.classList.add('active-challenge');  // Highlight
+    let activeChallengeInList = document.getElementById(`${level}-${name}`);
+    activeChallengeInList.parentNode.classList.add('active-challenge');  // Highlight
   }
 
   codeUnderTest = {{code_under_test | tojson}};
diff --git a/templates/components/challenge_sidebar.html b/templates/components/challenge_sidebar.html
index e3f3cc2..25d9ca7 100644
--- a/templates/components/challenge_sidebar.html
+++ b/templates/components/challenge_sidebar.html
@@ -10,14 +10,6 @@
     flex-direction: column;
   }
 
-  .challenge-nav ul li {
-    padding: 0px 8px;
-  }
-
-  .challenge-nav ul li:not(:first-of-type) a {
-    padding: 8px 10px;
-  }
-
   .challenge-nav .challenge-level {
     width: fit-content;
     border-bottom: 1px dashed hsl(240, 2%, 90%);
@@ -36,6 +28,22 @@
     display: none;
   }
 
+  .passed {
+    position: relative;
+  }
+
+  .passed::after {
+    /* iconify: https://icon-sets.iconify.design/lets-icons/done-ring-round */
+    content: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cg fill="none" stroke="%2366ba6f" stroke-linecap="round" stroke-width="2"%3E%3Cpath d="m9 10l3.258 2.444a1 1 0 0 0 1.353-.142L20 5"%2F%3E%3Cpath d="M21 12a9 9 0 1 1-6.67-8.693"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
+    display: inline-block;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 50%;
+    right: 0;
+    transform: translate(-50%, -50%);
+    transition: all 1.5s ease-out;
+  }
 
   @media only screen and (max-width: 800px) {
     .sidebar-toggle {
@@ -141,7 +149,7 @@ <h5 class="challenge-level">{{ level }}</h5>
    * @param {Event} event - The click event.
    */
   function removeHighlight(event) {
-    previousActiveChallenges = document.getElementsByClassName("active-challenge");
+    let previousActiveChallenges = document.getElementsByClassName("active-challenge");
     for (c of previousActiveChallenges) {
       // Remove previously highlighted challenge in the list.
       c.classList.remove('active-challenge');
@@ -151,4 +159,14 @@ <h5 class="challenge-level">{{ level }}</h5>
   const initialState = {{ challenges_groupby_level | tojson }};
   const passedState = new PassedState();
   passedState.init(initialState);
+
+  // Highlight the passed challenges when the page is loaded.
+  let ids = Object.keys(passedState.get()).forEach(level => {
+    passedState.get()[level].forEach(challenge => {
+      let id = `#${level}-${challenge.name}`;
+      if (challenge.passed) {
+        document.querySelector(id).parentNode.classList.add('passed');
+      }
+    })
+  })
 </script>

From db1198a82b033acbebb59aac6701a0c5101947dc Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Thu, 28 Dec 2023 19:50:13 +0800
Subject: [PATCH 07/17] Rename the custom js file

---
 static/js/{passedState.js => passed-state.js} | 2 +-
 templates/components/challenge_sidebar.html   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename static/js/{passedState.js => passed-state.js} (99%)

diff --git a/static/js/passedState.js b/static/js/passed-state.js
similarity index 99%
rename from static/js/passedState.js
rename to static/js/passed-state.js
index 86ff19d..98926d1 100644
--- a/static/js/passedState.js
+++ b/static/js/passed-state.js
@@ -2,7 +2,7 @@
 
 class PassedState {
 
-    _key = 'passedState';
+    _key = 'python-type-challenges';
     _state = null;
 
     init(initialState) {
diff --git a/templates/components/challenge_sidebar.html b/templates/components/challenge_sidebar.html
index 25d9ca7..1b2c924 100644
--- a/templates/components/challenge_sidebar.html
+++ b/templates/components/challenge_sidebar.html
@@ -132,7 +132,7 @@ <h5 class="challenge-level">{{ level }}</h5>
   </nav>
 </aside>
 
-<script type="text/javascript" src="{{ url_for('static', filename='js/passedState.js')}}"></script>
+<script type="text/javascript" src="{{ url_for('static', filename='js/passed-state.js')}}"></script>
 <script>
   const sidebarTogglers = document.querySelectorAll('.sidebar-toggle');
   const drawer = document.querySelector('.drawer');

From 35a1d68dd35827d4a184bc8efb1fc3ad14f61561 Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Thu, 28 Dec 2023 20:06:13 +0800
Subject: [PATCH 08/17] Add docs for methods

---
 static/js/passed-state.js | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/static/js/passed-state.js b/static/js/passed-state.js
index 98926d1..be88f6a 100644
--- a/static/js/passed-state.js
+++ b/static/js/passed-state.js
@@ -5,6 +5,13 @@ class PassedState {
     _key = 'python-type-challenges';
     _state = null;
 
+    /**
+     * Initializing when there is no state in the local storage. If there is no state in the local storage, the initial state is required.
+     * this function will check the new state and the old state whether is undefined or not and updated the old state based on new state.
+     * 
+     * @param {object} initialState - the initial state of the challenges which grouped by the level.
+     * @returns void
+     */
     init(initialState) {
         const currentState = localStorage.getItem(this._key);
         // initialize the state when there is no state in the local storage.
@@ -19,10 +26,10 @@ class PassedState {
         const state = this._checkAndMerge(JSON.parse(currentState), rawState);
         this._save(state);
         this._state = state;
-        return
     }
     /**
      * prepare the state for initialization.
+     * 
      * @param {object} rawState 
      * @returns state - the state contains the challenge name and whether the challenge is passed.
      */
@@ -54,12 +61,17 @@ class PassedState {
         return this._state;
     }
 
+    /**
+     * Save the state to the local storage with JSON format.
+     * @param {object} state - the state contains the challenge name and whether the challenge is passed.
+     */
     _save(state) {
         localStorage.setItem(this._key, JSON.stringify(state));
     }
 
     /**
-     * Set the challenge as passed in the state.
+     * Set the target challenge as passed in the state.
+     * 
      * @param {'basic' | 'intermediate' | 'advanced' | 'extreme'} level - the level of the challenge.
      * @param {string} challengeName - the name of the challenge.
      * @returns void
@@ -81,10 +93,14 @@ class PassedState {
     }
 
     /**
-     * Merge the new state to the current state. this function will compare the new state with the current state and finally overwrite the current state based on the new state: 
-     * - If the old key in the current state is not in the new state, the old key will be removed from the current state. 
-     * - If the new key in the new state is not in the current state, the new key will be added to the current state.
-     * @param {object} newState 
+     * Merge the new state and the current state. 
+     * this function will compare the new state with the current state and finally overwrite the current state based on the new state: 
+     * - If the old key in the current state isn't in the new state, the old key will be removed from the current state. 
+     * - If the new key in the new state isn't in the current state, the new key will be added to the current state.
+     * 
+     * @param {object} oldState - the current state stored in the local storage.
+     * @param {object} newState - the latest state from the server.
+     * @returns mergedState - the merged state.
      */
     _checkAndMerge(oldState, newState) {
         if (!newState && !oldState) {

From 9b414ea465659fc6db1272dff61712649719c4b8 Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Thu, 28 Dec 2023 20:18:20 +0800
Subject: [PATCH 09/17] Fix sidebar item style

---
 templates/challenge.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/templates/challenge.html b/templates/challenge.html
index 7366def..7401e83 100644
--- a/templates/challenge.html
+++ b/templates/challenge.html
@@ -32,6 +32,7 @@
       overflow-y: auto;
       padding-left: 8px;
       padding-right: 8px;
+      width: 15vw;
     }
 
     .sidebar-container .sidebar-actions {
@@ -196,6 +197,7 @@
         height: 100%;
         padding-left: 0px;
         margin-right: auto;
+        width: auto;
       }
 
       .sidebar-container .sidebar-actions {
@@ -232,6 +234,7 @@
 
     .active-challenge {
       background-color: var(--primary-focus);
+      border-radius: 8px;
     }
 
     .CodeMirror {

From ca6c060125635d6bf2639fb70df988f5816831fd Mon Sep 17 00:00:00 2001
From: Xiaoyue Lin <36526527+100gle@users.noreply.github.com>
Date: Fri, 19 Jan 2024 10:34:16 +0800
Subject: [PATCH 10/17] Remove unnecessary assigment

---
 templates/components/challenge_sidebar.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/components/challenge_sidebar.html b/templates/components/challenge_sidebar.html
index 1b2c924..dac5123 100644
--- a/templates/components/challenge_sidebar.html
+++ b/templates/components/challenge_sidebar.html
@@ -161,7 +161,7 @@ <h5 class="challenge-level">{{ level }}</h5>
   passedState.init(initialState);
 
   // Highlight the passed challenges when the page is loaded.
-  let ids = Object.keys(passedState.get()).forEach(level => {
+  Object.keys(passedState.get()).forEach(level => {
     passedState.get()[level].forEach(challenge => {
       let id = `#${level}-${challenge.name}`;
       if (challenge.passed) {

From f48e964dd59779bdfa7b6d488dcf31c8afb5c8ab Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Tue, 23 Jan 2024 19:35:06 +0800
Subject: [PATCH 11/17] Fix some reviewed issues

---
 static/js/passed-state.js                | 2 --
 templates/components/challenge_area.html | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/static/js/passed-state.js b/static/js/passed-state.js
index be88f6a..ded6f23 100644
--- a/static/js/passed-state.js
+++ b/static/js/passed-state.js
@@ -1,5 +1,3 @@
-
-
 class PassedState {
 
     _key = 'python-type-challenges';
diff --git a/templates/components/challenge_area.html b/templates/components/challenge_area.html
index 42ad34d..63be9bd 100644
--- a/templates/components/challenge_area.html
+++ b/templates/components/challenge_area.html
@@ -108,7 +108,7 @@
           // add confetti effect when passed
           if (json.passed) {
             confetti.addConfetti()
-            // passedState has defined in challenge_sidebar.html
+            // passedState is defined in challenge_sidebar.html
             passedState.setPassed(level, name);
             document.getElementById(`${level}-${name}`).parentNode.classList.add('passed');
           }

From 2056f8ff9c42fb7c7da60c3fb19bc70026465cbc Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Tue, 23 Jan 2024 19:40:08 +0800
Subject: [PATCH 12/17] Comment special lines

---
 templates/components/challenge_area.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/templates/components/challenge_area.html b/templates/components/challenge_area.html
index 63be9bd..58e30a6 100644
--- a/templates/components/challenge_area.html
+++ b/templates/components/challenge_area.html
@@ -158,6 +158,8 @@
     activeChallengeInList.parentNode.classList.add('active-challenge');  // Highlight
   }
 
+  // Don't add `let` to the following variables which are handled by htmx 
+  // else some errors will be raised.
   codeUnderTest = {{code_under_test | tojson}};
   testCode = {{ test_code | tojson }};
   renderCodeArea(codeUnderTest, testCode, "{{level}}", "{{name}}");

From b0eb967339748f8324e3edc2efeb2c442c1c00f6 Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Tue, 23 Jan 2024 19:53:06 +0800
Subject: [PATCH 13/17] Restore the old padding for sidebar items

---
 templates/components/challenge_sidebar.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/templates/components/challenge_sidebar.html b/templates/components/challenge_sidebar.html
index dac5123..60abffd 100644
--- a/templates/components/challenge_sidebar.html
+++ b/templates/components/challenge_sidebar.html
@@ -10,6 +10,14 @@
     flex-direction: column;
   }
 
+  .challenge-nav ul li {
+    padding: 0px 8px;
+  }
+
+  .challenge-nav ul li:not(:first-of-type) a {
+    padding: 8px 10px;
+  }
+
   .challenge-nav .challenge-level {
     width: fit-content;
     border-bottom: 1px dashed hsl(240, 2%, 90%);

From 2e6f2068eb57f2ab167330f9cd3e26884bfc9d5e Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Tue, 23 Jan 2024 20:09:44 +0800
Subject: [PATCH 14/17] Remove internal `_state` variable

---
 static/js/passed-state.js | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/static/js/passed-state.js b/static/js/passed-state.js
index ded6f23..e9b256b 100644
--- a/static/js/passed-state.js
+++ b/static/js/passed-state.js
@@ -1,7 +1,5 @@
 class PassedState {
-
     _key = 'python-type-challenges';
-    _state = null;
 
     /**
      * Initializing when there is no state in the local storage. If there is no state in the local storage, the initial state is required.
@@ -11,7 +9,7 @@ class PassedState {
      * @returns void
      */
     init(initialState) {
-        const currentState = localStorage.getItem(this._key);
+        const currentState = this.get();
         // initialize the state when there is no state in the local storage.
         if (!currentState && !initialState) {
             throw new Error('initial state is required when there is no state in the local storage.');
@@ -21,9 +19,8 @@ class PassedState {
         const rawState = this._prepareState(initialState);
 
         // check new state and old state whether is undefined or not. and merge the new state to the old state.
-        const state = this._checkAndMerge(JSON.parse(currentState), rawState);
+        const state = this._checkAndMerge(currentState, rawState);
         this._save(state);
-        this._state = state;
     }
     /**
      * prepare the state for initialization.
@@ -52,11 +49,8 @@ class PassedState {
     }
 
     get() {
-        if (!this._state) {
-            const currentState = localStorage.getItem(this._key);
-            this._state = JSON.parse(currentState);
-        }
-        return this._state;
+        const currentState = localStorage.getItem(this._key);
+        return JSON.parse(currentState);
     }
 
     /**
@@ -75,11 +69,9 @@ class PassedState {
      * @returns void
      */
     setPassed(level, challengeName) {
-        if (!this._state) {
-            this.get()
-        }
+        let state = this.get();
 
-        const challenges = this._state[level];
+        const challenges = state[level];
         for (const challenge of challenges) {
             if (challenge.name === challengeName) {
                 challenge.passed = true;
@@ -87,7 +79,7 @@ class PassedState {
             }
         }
 
-        this._save(this._state);
+        this._save(state);
     }
 
     /**

From 4ec55c9978fd0be83decbaddddbb58cd53c096e7 Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Wed, 24 Jan 2024 00:01:12 +0800
Subject: [PATCH 15/17] Resolve reviewed issues

---
 static/js/passed-state.js                   | 62 ++++++++-------------
 templates/components/challenge_area.html    | 12 ++--
 templates/components/challenge_sidebar.html |  9 +--
 3 files changed, 35 insertions(+), 48 deletions(-)

diff --git a/static/js/passed-state.js b/static/js/passed-state.js
index e9b256b..0f832b3 100644
--- a/static/js/passed-state.js
+++ b/static/js/passed-state.js
@@ -1,52 +1,24 @@
-class PassedState {
+export default class PassedState {
     _key = 'python-type-challenges';
 
     /**
      * Initializing when there is no state in the local storage. If there is no state in the local storage, the initial state is required.
      * this function will check the new state and the old state whether is undefined or not and updated the old state based on new state.
      * 
-     * @param {object} initialState - the initial state of the challenges which grouped by the level.
+     * @param {object} newState - the initial state of the challenges which grouped by the level.
      * @returns void
      */
-    init(initialState) {
-        const currentState = this.get();
+    init(newState) {
+        const oldState = this.get();
         // initialize the state when there is no state in the local storage.
-        if (!currentState && !initialState) {
+        if (!oldState && !newState) {
             throw new Error('initial state is required when there is no state in the local storage.');
         }
 
-        // add passed property to the challenges in the initial state.
-        const rawState = this._prepareState(initialState);
-
         // check new state and old state whether is undefined or not. and merge the new state to the old state.
-        const state = this._checkAndMerge(currentState, rawState);
+        const state = this._checkAndMerge(oldState, newState);
         this._save(state);
     }
-    /**
-     * prepare the state for initialization.
-     * 
-     * @param {object} rawState 
-     * @returns state - the state contains the challenge name and whether the challenge is passed.
-     */
-    _prepareState(rawState) {
-        if (!rawState) {
-            return {};
-        }
-
-        const state = {};
-        for (const level in rawState) {
-            const challenges = [];
-            for (const challengeName of rawState[level]) {
-                challenges.push({
-                    name: challengeName,
-                    passed: false
-                });
-            }
-            state[level] = challenges;
-        }
-
-        return state;
-    }
 
     get() {
         const currentState = localStorage.getItem(this._key);
@@ -97,14 +69,26 @@ class PassedState {
             throw new Error('one of the new state and the old state is required.');
         }
 
-        if (!oldState && newState) {
-            return newState;
-        }
-
         if (!newState && oldState) {
             return oldState;
         }
 
+        const state = {};
+        for (const level in newState) {
+            const challenges = [];
+            for (const challengeName of newState[level]) {
+                challenges.push({
+                    name: challengeName,
+                    passed: false
+                });
+            }
+            state[level] = challenges;
+        }
+
+        if (!oldState && newState) {
+            return state;
+        }
+
         let mergedState = {};
         const levels = ['basic', 'intermediate', 'advanced', 'extreme'];
 
@@ -114,7 +98,7 @@ class PassedState {
 
             // Create a map for quick lookup of challenges by name
             const oldChallengesMap = new Map(oldState[level].map(challenge => [challenge.name, challenge]));
-            const newChallengesMap = new Map(newState[level].map(challenge => [challenge.name, challenge]));
+            const newChallengesMap = new Map(state[level].map(challenge => [challenge.name, challenge]));
 
             // Add or update challenges from the newState
             for (const [name, newChallenge] of newChallengesMap.entries()) {
diff --git a/templates/components/challenge_area.html b/templates/components/challenge_area.html
index 58e30a6..6784039 100644
--- a/templates/components/challenge_area.html
+++ b/templates/components/challenge_area.html
@@ -48,7 +48,11 @@
   </div>
 </div>
 
-<script type="text/javascript">
+<script type="module">
+  import PassedState from "{{ url_for('static', filename='js/passed-state.js')}}";
+
+  let passedState = new PassedState();
+
   /**
    * Render the code area with CodeMirror and Jinja2.
    *
@@ -158,9 +162,7 @@
     activeChallengeInList.parentNode.classList.add('active-challenge');  // Highlight
   }
 
-  // Don't add `let` to the following variables which are handled by htmx 
-  // else some errors will be raised.
-  codeUnderTest = {{code_under_test | tojson}};
-  testCode = {{ test_code | tojson }};
+  let codeUnderTest = {{code_under_test | tojson}};
+  let testCode = {{ test_code | tojson }};
   renderCodeArea(codeUnderTest, testCode, "{{level}}", "{{name}}");
 </script>
diff --git a/templates/components/challenge_sidebar.html b/templates/components/challenge_sidebar.html
index 60abffd..90daa4b 100644
--- a/templates/components/challenge_sidebar.html
+++ b/templates/components/challenge_sidebar.html
@@ -140,8 +140,8 @@ <h5 class="challenge-level">{{ level }}</h5>
   </nav>
 </aside>
 
-<script type="text/javascript" src="{{ url_for('static', filename='js/passed-state.js')}}"></script>
-<script>
+<script type="module">
+  import PassedState from "{{ url_for('static', filename='js/passed-state.js')}}";
   const sidebarTogglers = document.querySelectorAll('.sidebar-toggle');
   const drawer = document.querySelector('.drawer');
 
@@ -169,8 +169,9 @@ <h5 class="challenge-level">{{ level }}</h5>
   passedState.init(initialState);
 
   // Highlight the passed challenges when the page is loaded.
-  Object.keys(passedState.get()).forEach(level => {
-    passedState.get()[level].forEach(challenge => {
+  let state = passedState.get();
+  Object.keys(state).forEach(level => {
+    state[level].forEach(challenge => {
       let id = `#${level}-${challenge.name}`;
       if (challenge.passed) {
         document.querySelector(id).parentNode.classList.add('passed');

From 6146d07ee345a310e4458d87f1e8ee1deb21b381 Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Wed, 24 Jan 2024 12:40:49 +0800
Subject: [PATCH 16/17] Format and modularize `passed-state.js`

---
 static/js/passed-state.js                   | 215 ++++++++++----------
 templates/components/challenge_area.html    |   4 +-
 templates/components/challenge_sidebar.html |   3 +-
 3 files changed, 111 insertions(+), 111 deletions(-)

diff --git a/static/js/passed-state.js b/static/js/passed-state.js
index 0f832b3..f5ba9d7 100644
--- a/static/js/passed-state.js
+++ b/static/js/passed-state.js
@@ -1,115 +1,118 @@
-export default class PassedState {
-    _key = 'python-type-challenges';
-
-    /**
-     * Initializing when there is no state in the local storage. If there is no state in the local storage, the initial state is required.
-     * this function will check the new state and the old state whether is undefined or not and updated the old state based on new state.
-     * 
-     * @param {object} newState - the initial state of the challenges which grouped by the level.
-     * @returns void
-     */
-    init(newState) {
-        const oldState = this.get();
-        // initialize the state when there is no state in the local storage.
-        if (!oldState && !newState) {
-            throw new Error('initial state is required when there is no state in the local storage.');
-        }
-
-        // check new state and old state whether is undefined or not. and merge the new state to the old state.
-        const state = this._checkAndMerge(oldState, newState);
-        this._save(state);
+class PassedState {
+  _key = 'python-type-challenges';
+
+  /**
+   * Initializing when there is no state in the local storage. If there is no state in the local storage, the initial state is required.
+   * this function will check the new state and the old state whether is undefined or not and updated the old state based on new state.
+   * 
+   * @param {object} newState - the initial state of the challenges which grouped by the level.
+   * @returns void
+   */
+  init(newState) {
+    const oldState = this.get();
+    // initialize the state when there is no state in the local storage.
+    if (!oldState && !newState) {
+      throw new Error('initial state is required when there is no state in the local storage.');
     }
 
-    get() {
-        const currentState = localStorage.getItem(this._key);
-        return JSON.parse(currentState);
+    // check new state and old state whether is undefined or not. and merge the new state to the old state.
+    const state = this._checkAndMerge(oldState, newState);
+    this._save(state);
+  }
+
+  get() {
+    const currentState = localStorage.getItem(this._key);
+    return JSON.parse(currentState);
+  }
+
+  /**
+   * Save the state to the local storage with JSON format.
+   * @param {object} state - the state contains the challenge name and whether the challenge is passed.
+   */
+  _save(state) {
+    localStorage.setItem(this._key, JSON.stringify(state));
+  }
+
+  /**
+   * Set the target challenge as passed in the state.
+   * 
+   * @param {'basic' | 'intermediate' | 'advanced' | 'extreme'} level - the level of the challenge.
+   * @param {string} challengeName - the name of the challenge.
+   * @returns void
+   */
+  setPassed(level, challengeName) {
+    let state = this.get();
+
+    const challenges = state[level];
+    for (const challenge of challenges) {
+      if (challenge.name === challengeName) {
+        challenge.passed = true;
+        break;
+      }
     }
 
-    /**
-     * Save the state to the local storage with JSON format.
-     * @param {object} state - the state contains the challenge name and whether the challenge is passed.
-     */
-    _save(state) {
-        localStorage.setItem(this._key, JSON.stringify(state));
+    this._save(state);
+  }
+
+  /**
+   * Merge the new state and the current state. 
+   * this function will compare the new state with the current state and finally overwrite the current state based on the new state: 
+   * - If the old key in the current state isn't in the new state, the old key will be removed from the current state. 
+   * - If the new key in the new state isn't in the current state, the new key will be added to the current state.
+   * 
+   * @param {object} oldState - the current state stored in the local storage.
+   * @param {object} newState - the latest state from the server.
+   * @returns mergedState - the merged state.
+   */
+  _checkAndMerge(oldState, newState) {
+    if (!newState && !oldState) {
+      throw new Error('one of the new state and the old state is required.');
     }
 
-    /**
-     * Set the target challenge as passed in the state.
-     * 
-     * @param {'basic' | 'intermediate' | 'advanced' | 'extreme'} level - the level of the challenge.
-     * @param {string} challengeName - the name of the challenge.
-     * @returns void
-     */
-    setPassed(level, challengeName) {
-        let state = this.get();
-
-        const challenges = state[level];
-        for (const challenge of challenges) {
-            if (challenge.name === challengeName) {
-                challenge.passed = true;
-                break;
-            }
-        }
-
-        this._save(state);
+    if (!newState && oldState) {
+      return oldState;
     }
 
-    /**
-     * Merge the new state and the current state. 
-     * this function will compare the new state with the current state and finally overwrite the current state based on the new state: 
-     * - If the old key in the current state isn't in the new state, the old key will be removed from the current state. 
-     * - If the new key in the new state isn't in the current state, the new key will be added to the current state.
-     * 
-     * @param {object} oldState - the current state stored in the local storage.
-     * @param {object} newState - the latest state from the server.
-     * @returns mergedState - the merged state.
-     */
-    _checkAndMerge(oldState, newState) {
-        if (!newState && !oldState) {
-            throw new Error('one of the new state and the old state is required.');
-        }
-
-        if (!newState && oldState) {
-            return oldState;
-        }
-
-        const state = {};
-        for (const level in newState) {
-            const challenges = [];
-            for (const challengeName of newState[level]) {
-                challenges.push({
-                    name: challengeName,
-                    passed: false
-                });
-            }
-            state[level] = challenges;
-        }
-
-        if (!oldState && newState) {
-            return state;
-        }
-
-        let mergedState = {};
-        const levels = ['basic', 'intermediate', 'advanced', 'extreme'];
-
-        for (const level of levels) {
-            // Initialize an empty array for merged challenges
-            let mergedChallenges = [];
-
-            // Create a map for quick lookup of challenges by name
-            const oldChallengesMap = new Map(oldState[level].map(challenge => [challenge.name, challenge]));
-            const newChallengesMap = new Map(state[level].map(challenge => [challenge.name, challenge]));
-
-            // Add or update challenges from the newState
-            for (const [name, newChallenge] of newChallengesMap.entries()) {
-                let hasPassed = oldChallengesMap.get(name)?.passed || newChallenge.passed;
-                mergedChallenges.push({ ...newChallenge, passed: hasPassed });
-            }
-
-            // Set the merged challenges for the current level in the mergedState
-            mergedState[level] = mergedChallenges;
-        }
-
-        return mergedState;
+    const state = {};
+    for (const level in newState) {
+      const challenges = [];
+      for (const challengeName of newState[level]) {
+        challenges.push({
+          name: challengeName,
+          passed: false
+        });
+      }
+      state[level] = challenges;
     }
-}
\ No newline at end of file
+
+    if (!oldState && newState) {
+      return state;
+    }
+
+    let mergedState = {};
+    const levels = ['basic', 'intermediate', 'advanced', 'extreme'];
+
+    for (const level of levels) {
+      // Initialize an empty array for merged challenges
+      let mergedChallenges = [];
+
+      // Create a map for quick lookup of challenges by name
+      const oldChallengesMap = new Map(oldState[level].map(challenge => [challenge.name, challenge]));
+      const newChallengesMap = new Map(state[level].map(challenge => [challenge.name, challenge]));
+
+      // Add or update challenges from the newState
+      for (const [name, newChallenge] of newChallengesMap.entries()) {
+        let hasPassed = oldChallengesMap.get(name)?.passed || newChallenge.passed;
+        mergedChallenges.push({ ...newChallenge, passed: hasPassed });
+      }
+
+      // Set the merged challenges for the current level in the mergedState
+      mergedState[level] = mergedChallenges;
+    }
+
+    return mergedState;
+  }
+}
+
+const passedState = new PassedState();
+export default passedState;
\ No newline at end of file
diff --git a/templates/components/challenge_area.html b/templates/components/challenge_area.html
index 6784039..bc6c8da 100644
--- a/templates/components/challenge_area.html
+++ b/templates/components/challenge_area.html
@@ -49,9 +49,7 @@
 </div>
 
 <script type="module">
-  import PassedState from "{{ url_for('static', filename='js/passed-state.js')}}";
-
-  let passedState = new PassedState();
+  import passedState from "{{ url_for('static', filename='js/passed-state.js')}}";
 
   /**
    * Render the code area with CodeMirror and Jinja2.
diff --git a/templates/components/challenge_sidebar.html b/templates/components/challenge_sidebar.html
index 90daa4b..dcf120c 100644
--- a/templates/components/challenge_sidebar.html
+++ b/templates/components/challenge_sidebar.html
@@ -141,7 +141,7 @@ <h5 class="challenge-level">{{ level }}</h5>
 </aside>
 
 <script type="module">
-  import PassedState from "{{ url_for('static', filename='js/passed-state.js')}}";
+  import passedState from "{{ url_for('static', filename='js/passed-state.js')}}";
   const sidebarTogglers = document.querySelectorAll('.sidebar-toggle');
   const drawer = document.querySelector('.drawer');
 
@@ -165,7 +165,6 @@ <h5 class="challenge-level">{{ level }}</h5>
   }
 
   const initialState = {{ challenges_groupby_level | tojson }};
-  const passedState = new PassedState();
   passedState.init(initialState);
 
   // Highlight the passed challenges when the page is loaded.

From 0d1c222247bbb8fc2d33324cbcba636fccdab073 Mon Sep 17 00:00:00 2001
From: 100gle <loogle.space@gmail.com>
Date: Wed, 24 Jan 2024 14:04:46 +0800
Subject: [PATCH 17/17] Fix the active highlight bug when modularization

---
 templates/components/challenge_area.html    |  9 ++++---
 templates/components/challenge_sidebar.html | 30 +++++++++++----------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/templates/components/challenge_area.html b/templates/components/challenge_area.html
index bc6c8da..c1916c4 100644
--- a/templates/components/challenge_area.html
+++ b/templates/components/challenge_area.html
@@ -23,7 +23,10 @@
   <div class="codemirror-container">
     <div id="editor">
       <a id="playground-link" target="_blank" rel="noopener noreferrer">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4m-8-2l8-8m0 0v5m0-5h-5"/></svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+          <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4m-8-2l8-8m0 0v5m0-5h-5" />
+        </svg>
         <span>Open Pyright Playground</span>
       </a>
     </div>
@@ -161,6 +164,6 @@
   }
 
   let codeUnderTest = {{code_under_test | tojson}};
-  let testCode = {{ test_code | tojson }};
+  let testCode = {{test_code | tojson}};
   renderCodeArea(codeUnderTest, testCode, "{{level}}", "{{name}}");
-</script>
+</script>
\ No newline at end of file
diff --git a/templates/components/challenge_sidebar.html b/templates/components/challenge_sidebar.html
index dcf120c..fa50ef5 100644
--- a/templates/components/challenge_sidebar.html
+++ b/templates/components/challenge_sidebar.html
@@ -142,6 +142,22 @@ <h5 class="challenge-level">{{ level }}</h5>
 
 <script type="module">
   import passedState from "{{ url_for('static', filename='js/passed-state.js')}}";
+  const initialState = {{ challenges_groupby_level | tojson }};
+  passedState.init(initialState);
+
+  // Highlight the passed challenges when the page is loaded.
+  let state = passedState.get();
+  Object.keys(state).forEach(level => {
+    state[level].forEach(challenge => {
+      let id = `#${level}-${challenge.name}`;
+      if (challenge.passed) {
+        document.querySelector(id).parentNode.classList.add('passed');
+      }
+    })
+  })
+</script>
+
+<script type="text/javascript">
   const sidebarTogglers = document.querySelectorAll('.sidebar-toggle');
   const drawer = document.querySelector('.drawer');
 
@@ -163,18 +179,4 @@ <h5 class="challenge-level">{{ level }}</h5>
       c.classList.remove('active-challenge');
     }
   }
-
-  const initialState = {{ challenges_groupby_level | tojson }};
-  passedState.init(initialState);
-
-  // Highlight the passed challenges when the page is loaded.
-  let state = passedState.get();
-  Object.keys(state).forEach(level => {
-    state[level].forEach(challenge => {
-      let id = `#${level}-${challenge.name}`;
-      if (challenge.passed) {
-        document.querySelector(id).parentNode.classList.add('passed');
-      }
-    })
-  })
 </script>