🚧 stared working on goal sync

Author: Joko-26

media/stylesheet.css

@@ -760,6 +760,7 @@ button.button-disabled,
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
+
   width: auto;
   margin: 0 0 10px;
   text-align: center;
@@ -776,12 +777,40 @@ button.button-disabled,
   min-height: 100px;
 }
 
+.explore-input-box {
+  position: relative;
+}
+
 .explore-input {
   display: block;
   width: 100%;
   max-width: 100%;
   margin: 20px 0 10px;
   box-sizing: border-box;
+  padding-right: 42px;
+}
+
+.explore-clear-query {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  width: 24px;
+  height: 24px;
+  background: transparent;
+  color: var(--text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.explore-clear-query:hover {
+  background: var(--input-background-hover);
+  color: var(--text);
 }
 
 .cookie-display {
@@ -1109,6 +1138,10 @@ button.button-disabled,
   color: var(--warning);
 }
 
+.goal-toggle {
+  margin-bottom: 30px;
+}
+
 @media (max-width: 600px) {
   .goal-item {
     width: 100%;

src/apiCalls.ts

@@ -830,7 +830,7 @@ export async function getGoals(givenApiKey: string) {
   return (await res.json()) as goalsResponse;
 }
 
-export async function putGoals(givenApiKey: string, givenGoals: []) {
+export async function putGoals(givenApiKey: string, givenGoal: string) {
   // get api key
   const apiKey = resolveApiKey(givenApiKey);
 
@@ -842,7 +842,7 @@ export async function putGoals(givenApiKey: string, givenGoals: []) {
   }
 
   const body = new URLSearchParams({
-    goals: givenGoals
+    goals: givenGoal
   });
 
   const res = await fetch(`https://logpheus.gizzy.gay/api/v1/goals`, {
@@ -856,7 +856,40 @@ export async function putGoals(givenApiKey: string, givenGoals: []) {
 
   if (!res.ok) {
     throw new Error(
-      `Failed to put goals: ${res.status} ${await res.text()}`,
+      `Failed to put goal: ${res.status} ${await res.text()}`,
+    );
+  }
+
+  return (await res.json()) as goalsResponse;
+}
+
+export async function deleteGoals(givenApiKey: string, givenGoal: string) {
+  // get api key
+  const apiKey = resolveApiKey(givenApiKey);
+
+  // get project id
+  const config = vscode.workspace.getConfiguration("flavorcode");
+
+  interface goalsResponse {
+    goals: []
+  }
+
+  const body = new URLSearchParams({
+    goals: givenGoal
+  });
+
+  const res = await fetch(`https://logpheus.gizzy.gay/api/v1/goals`, {
+    method: "PUT",
+    headers: {
+      Authorization: `Bearer ${apiKey}`,
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body,
+  });
+
+  if (!res.ok) {
+    throw new Error(
+      `Failed to delete goal: ${res.status} ${await res.text()}`,
     );
   }
 

src/webviews/explore.html

@@ -37,17 +37,29 @@ <h1>Explore</h1>
 
     <div id="shop" class="explore-box">
       <div class="cookie-display">
-        <p>Current Balance: 100🍪</p>
+        <p id="cookie-display">Current Balance: 100🍪</p>
+      </div>
+      <div class="goal-toggle">
+        <button onclick="toggleGoals()">Toggle goals</button>
       </div>
       <div id="goals" class="shop-item-box goals-grid"></div>
       <div>
-        <div>
-          <input
-            type="text"
-            placeholder="search shop item"
-            class="explore-input"
-            oninput="updateQuery(this)"
-          />
+        <div class="explore-input-box">
+            <input
+              id="shop-query"
+              type="text"
+              placeholder="search shop item"
+              class="explore-input"
+              oninput="updateQuery(this)"
+            />
+          <button
+            class="explore-clear-query"
+            type="button"
+            aria-label="Clear search"
+            onclick="clearQuery()"
+          >
+            <i class="codicon codicon-close"></i>
+          </button>
         </div>
 
         <div class="explore-filters">
@@ -188,13 +200,18 @@ <h3>price history</h3>
       var chart = null;
       var goals = [];
       var goalAmounts = {};
+      var goalsHidden = false;
 
       // user
       var users = {};
 
       // project
       var projects = {};
 
+      // retrive cache
+      retriveCacheState();
+      handleShopLoad();
+
       // general functions
 
       function setTheme(theme) {
@@ -241,6 +258,19 @@ <h3>price history</h3>
         }
       }
 
+      // cache functions
+      function cacheState(state) {
+        vscode.setState({ cache: state });
+      }
+
+      function retriveCacheState() {
+        const state = vscode.getState();
+        shopItems = state?.cache?.shopItems;
+        userData = state?.cache?.userData;
+        goals = state?.cache?.goals;
+        goalsHidden = state?.cache?.goalsHidden;
+      }
+
       function escapeHtml(value) {
         if (!value) return "";
 
@@ -350,6 +380,14 @@ <h3>price history</h3>
 
       function handleShopLoad() {
         if (shopItems && goals && userData) {
+          // cache state
+          cacheState({
+            shopItems: shopItems,
+            userData: userData,
+            goals: goals,
+            goalsHidden: goalsHidden,
+          });
+
           populateShop();
           populateGoals();
         }
@@ -362,6 +400,9 @@ <h3>price history</h3>
           return item.name;
         });
 
+        document.getElementById("cookie-display").textContent =
+          `Current Balance: ${userData.cookies ?? 0}🍪`;
+
         const fuse = new Fuse(shopItemsNameArray, { includeScore: true });
 
         // Get matching names once
@@ -426,19 +467,27 @@ <h3>price history</h3>
 
           // filters display
           .filter((item) => {
+            const price =
+              item.ticket_cost?.[region] ?? item.ticket_cost?.base_cost ?? 0;
+
             if (display === "all") {
               return true;
             }
 
-            if (
-              display === "affordable" &&
-              item.ticket_cost?.[region] <= (userData.cookies ?? 0)
-            ) {
-              return true;
+            if (display === "affordable") {
+              if (price <= (userData.cookies ?? 0)) {
+                return true;
+              } else {
+                return false;
+              }
             }
 
-            if (display === "in-stock" && (item.stock ?? 0) >= 1) {
-              return true;
+            if (display === "in-stock") {
+              if ((item.stock ?? 0) >= 1 || !item.limited) {
+                return true;
+              } else {
+                return false;
+              }
             }
 
             if (display === "sale") {
@@ -701,6 +750,18 @@ <h2>${item.name}</h2>
         populateShop();
       }
 
+      function clearQuery() {
+        const input = document.getElementById("shop-query");
+        if (!input) {
+          return;
+        }
+
+        input.value = "";
+        shopQuery = "";
+        populateShop();
+        input.focus();
+      }
+
       function updateExtension(circleId, containerId, price) {
         const container = document.getElementById(
           `extension-container${containerId}`,
@@ -752,7 +813,9 @@ <h2>${item.name}</h2>
         goalContainer.innerHTML = uniqueGoals
           .map((goal) => {
             if (shopItems[goal]) {
-              const amount = goals.filter((item) => Number(item) === goal).length;
+              const amount = goals.filter(
+                (item) => Number(item) === goal,
+              ).length;
               goalAmounts[goal] = amount;
               const item = shopItems[goal];
               const price =
@@ -779,11 +842,22 @@ <h2>${item.name}</h2>
             </div>
             <button class="goal-delete-button" onclick='deleteGoal(${goal})'><i class="codicon codicon-trash"></i></button>
           </div>`;
+
             }
           })
           .join("");
       }
 
+      function toggleGoals() {
+        if (goalsHidden) {
+          goalContainer.style.display = "";
+          goalsHidden = !goalsHidden;
+        } else {
+          goalContainer.style.display = "none";
+          goalsHidden = !goalsHidden;
+        }
+      }
+
       function handleAddGoal(id) {
         const goalId = Number(id);
 
@@ -792,19 +866,17 @@ <h2>${item.name}</h2>
         }
 
         if (goals.includes(goalId)) {
-          goals = goals.filter((goal) => Number(goal) !== goalId);
           document.getElementById(`favourite-${id}`).className = "favourite";
           document.getElementById(`favourite-icon-${id}`).className =
             "codicon codicon-star-empty";
         } else {
-          goals.push(goalId);
           document.getElementById(`favourite-${id}`).className =
             "favourite-active favourite";
           document.getElementById(`favourite-icon-${id}`).className =
             "codicon codicon-star-full";
         }
 
-        vscode.postMessage({ command: "put-goal", value: goals });
+        vscode.postMessage({ command: "put-goal", value:  });
         populateGoals();
       }
 
@@ -919,6 +991,7 @@ <h2>${item.name}</h2>
           }
           case "user-data": {
             userData = message.value;
+            handleShopLoad();
             break;
           }
           case "goals": {