Skip to content

Commit a17d1cb

Browse files
Joko-26Joko-26
committed
✨ finished shop (for now)
1 parent a9b1fa7 commit a17d1cb

4 files changed

Lines changed: 105 additions & 36 deletions

File tree

‎media/stylesheet.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1035,6 +1035,34 @@ button.button-disabled,
10351035
opacity: 0.9;
10361036
}
10371037

1038+
.shop-price-summary-box {
1039+
display: flex;
1040+
flex-direction: column;
1041+
width: 100%;
1042+
margin: 0 auto;
1043+
margin-top: 10px;
1044+
text-align: center;
1045+
box-sizing: border-box;
1046+
border-color: var(--border);
1047+
padding: 10px;
1048+
border-radius: 10px;
1049+
border-width: 5px;
1050+
border-style: solid;
1051+
background-color: var(--textbox-background);
1052+
background-origin: padding-box;
1053+
background-clip: padding-box;
1054+
align-items: center;
1055+
justify-content: center;
1056+
}
1057+
1058+
.shop-price-summary-item-box {
1059+
background-color: var(--border);
1060+
text-align: left;
1061+
border-radius: 7px;
1062+
border-style: none;
1063+
width: fit-content;
1064+
}
1065+
10381066
.goal-item {
10391067
z-index: 1;
10401068
width: min(100%, 460px);

‎src/apiCalls.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -819,6 +819,7 @@ export async function getGoals(givenApiKey: string) {
819819
});
820820

821821
if (!res.ok) {
822+
vscode.window.showErrorMessage(`Failed to get goals: ${res.status} ${await res.text()}`);
822823
throw new Error(
823824
`Failed to get goals: ${res.status} ${await res.text()}`,
824825
);
@@ -850,6 +851,7 @@ export async function postGoals(givenApiKey: string, givenGoals: number[]) {
850851
});
851852

852853
if (!res.ok) {
854+
vscode.window.showErrorMessage(`Failed to post goals: ${res.status} ${await res.text()}`)
853855
throw new Error(
854856
`Failed to post goals: ${res.status} ${await res.text()}`,
855857
);

‎src/extension.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function activate(context: vscode.ExtensionContext) {
3535
return config.get<string>("theme");
3636
}
3737

38-
// explore
38+
// handler functions for the explore webview
3939
async function sendAllProjects(query: string) {
4040
if (!currentExploreViewPanel) {
4141
return;
@@ -97,6 +97,7 @@ export function activate(context: vscode.ExtensionContext) {
9797
});
9898
}
9999

100+
// get goals from logpheus or local
100101
async function getGoalsHandler() {
101102
if (!currentExploreViewPanel) {
102103
return;
@@ -126,6 +127,7 @@ export function activate(context: vscode.ExtensionContext) {
126127
}
127128
}
128129

130+
// send goals to logpheus or save locally
129131
async function putGoalsHandler(giveGoals: number[]) {
130132
if (!currentExploreViewPanel) {
131133
return;
@@ -203,7 +205,7 @@ export function activate(context: vscode.ExtensionContext) {
203205
await getGoalsHandler();
204206
}
205207

206-
// devlog
208+
// handler functions for the devlog webview
207209
function refreshOpenDevlogWebview() {
208210
if (!currentDevlogViewPanel) {
209211
return;
@@ -254,7 +256,7 @@ export function activate(context: vscode.ExtensionContext) {
254256
: devlog;
255257
}
256258

257-
// theme
259+
// handler functions for the them webview
258260
function refreshThemeWebview() {
259261
if (!currentThemeViewPanel) {
260262
return;
@@ -271,6 +273,8 @@ export function activate(context: vscode.ExtensionContext) {
271273
});
272274
}
273275

276+
// Commands
277+
274278
const disposable = vscode.commands.registerCommand(
275279
"flavorcode.helloWorld",
276280
async () => {
@@ -374,12 +378,10 @@ export function activate(context: vscode.ExtensionContext) {
374378
switch (message.command) {
375379
case "get-goals": {
376380
getGoalsHandler();
377-
console.log("get");
378381
break;
379382
}
380383
case "post-goals": {
381384
putGoalsHandler(message.value);
382-
console.log("post");
383385
break;
384386
}
385387
}

‎src/webviews/explore.html‎

Lines changed: 68 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,13 @@ <h1>Explore</h1>
4545
<div id="goals" class="shop-item-box goals-grid"></div>
4646
<div>
4747
<div class="explore-input-box">
48-
<input
49-
id="shop-query"
50-
type="text"
51-
placeholder="search shop item"
52-
class="explore-input"
53-
oninput="updateQuery(this)"
54-
/>
48+
<input
49+
id="shop-query"
50+
type="text"
51+
placeholder="search shop item"
52+
class="explore-input"
53+
oninput="updateQuery(this)"
54+
/>
5555
<button
5656
class="explore-clear-query"
5757
type="button"
@@ -159,7 +159,11 @@ <h3>price history</h3>
159159
<i class="codicon codicon-circle-large"></i>
160160
</div>
161161
</div>
162-
<p id="shop-price" class="opened-shop-item-price"></p>
162+
<div class="shop-price-summary-box">
163+
<p id="shop-price" class="opened-shop-item-price"></p>
164+
<div class="shop-price-summary-item-box" id="shop-price-summary"></div>
165+
<p class="opened-shop-item-price" id="shop-final-price"></p>
166+
</div>
163167
</div>
164168
<a
165169
class="link-button center text-center project-link-button opened-shop-item-buy"
@@ -619,6 +623,11 @@ <h2>${item.name}</h2>
619623
const shopItem = shopItems[id];
620624
const shopItemsArray = Object.values(shopItems);
621625

626+
const itemPrice =
627+
shopItem.ticket_cost?.[region] ??
628+
shopItem.ticket_cost?.base_cost ??
629+
0;
630+
622631
if (chart !== null) {
623632
chart.destroy();
624633
chart = null;
@@ -633,7 +642,7 @@ <h2>${item.name}</h2>
633642
});
634643

635644
currentPrice = Number(
636-
shopItem.ticket_cost?.[region] ?? shopItem.ticket_cost?.base_cost,
645+
itemPrice,
637646
);
638647

639648
if (!Number.isFinite(currentPrice)) {
@@ -664,8 +673,10 @@ <h2>${item.name}</h2>
664673
document.getElementById("shop-item-img").src = shopItem.image_url;
665674
document.getElementById("shop-item-desc").textContent =
666675
shopItem.description;
676+
document.getElementById("shop-final-price").textContent =
677+
`Final price: ${currentPrice}🍪`;
667678
document.getElementById("shop-price").textContent =
668-
`Price for selected region: ${currentPrice}🍪`;
679+
`Base price for selected region: ${itemPrice}🍪`
669680
document.getElementById("open-real-shop").href =
670681
`https://flavortown.hackclub.com/shop/order?shop_item_id=${shopItem.id}`;
671682
document.getElementById("open-real-shop").textContent = buyButtonText;
@@ -678,13 +689,15 @@ <h2>${item.name}</h2>
678689
`${line}<br>`;
679690
});
680691

692+
// render stock
681693
if (!shopItem.limited) {
682694
document.getElementById("stock").style = "display: none";
683695
} else {
684696
document.getElementById("stock").textContent =
685697
`${shopItem.stock} left`;
686698
}
687699

700+
// render chart if price history
688701
if (typeof Chart === "undefined") {
689702
document
690703
.getElementById("shop-price")
@@ -710,10 +723,11 @@ <h2>${item.name}</h2>
710723
document.getElementById("price-history").style = "display: none";
711724
}
712725

726+
// render extensions
713727
document.getElementById("shop-extensions").innerHTML = extensions
714728
.map((extension) => {
715729
return `
716-
<div onclick="updateExtension('${extension.id}', '${extension.id}', '${extension.ticket_cost.base_cost}')" id="extension-container${extension.id}" class="shop-extension-item">
730+
<div onclick="updateExtension('${extension.id}', '${extension.ticket_cost.base_cost}', '${id}')" id="extension-container${extension.id}" class="shop-extension-item">
717731
<img class="shop-extension-item-img" src="${extension.image_url}" alt="">
718732
<p >${extension.name}</p>
719733
<p>${extension.ticket_cost.base_cost}🍪</p>
@@ -722,6 +736,7 @@ <h2>${item.name}</h2>
722736
})
723737
.join("");
724738

739+
// switch to page
725740
switchMode("shop-item");
726741
}
727742

@@ -762,43 +777,62 @@ <h2>${item.name}</h2>
762777
input.focus();
763778
}
764779

765-
function updateExtension(circleId, containerId, price) {
766-
const container = document.getElementById(
767-
`extension-container${containerId}`,
768-
);
769-
const circle = document.getElementById(`extension-circle${circleId}`);
780+
function updateExtension(id, price, itemId) {
781+
const container = document.getElementById(`extension-container${id}`);
782+
const circle = document.getElementById(`extension-circle${id}`);
770783
const extensionPrice = Number(price);
771784

772785
if (!container || !circle || !Number.isFinite(extensionPrice)) {
773786
return;
774787
}
775788

789+
var buyButtonText = "";
790+
776791
const isActive = container.classList.contains(
777792
"shop-extension-item-active",
778793
);
779794

795+
const itemPrice =
796+
shopItems[itemId].ticket_cost?.[region] ??
797+
shopItems[itemId].ticket_cost?.base_cost ??
798+
0;
799+
800+
const priceSummaryElement = document.createElement("p");
801+
priceSummaryElement.id = `price-summary-${id}`;
802+
priceSummaryElement.textContent = ` + ${shopItems[id].name} (${price}🍪)`;
803+
804+
const cookies = Number(userData.cookies);
805+
const remaining = cookies - currentPrice;
806+
807+
// update price and summary elemets
780808
if (isActive) {
781809
currentPrice -= extensionPrice;
810+
document
811+
.getElementById("shop-price-summary")
812+
.removeChild(document.getElementById(`price-summary-${id}`));
782813
} else {
783814
currentPrice += extensionPrice;
815+
document
816+
.getElementById("shop-price-summary")
817+
.appendChild(priceSummaryElement);
784818
}
785819

786-
var buyButtonText = "";
787-
const cookies = Number(userData.cookies);
788-
const remaining = cookies - currentPrice;
789-
790820
if (remaining >= 0) {
791821
buyButtonText = `Buy (${remaining}🍪 remaining)`;
792822
} else {
793823
buyButtonText = `Buy (${Math.abs(remaining)}🍪 more cookies needed)`;
794824
}
795825

826+
// update all fields
796827
container.classList.toggle("shop-extension-item-active", !isActive);
797828
circle.classList.toggle("codicon-circle-large-filled", !isActive);
798829
circle.classList.toggle("codicon-circle-large", isActive);
799830

800831
document.getElementById("shop-price").textContent =
801-
`Price for selected region: ${currentPrice}🍪`;
832+
`Base price for selected region: ${itemPrice}🍪`;
833+
834+
document.getElementById("shop-final-price").textContent =
835+
`Final price: ${currentPrice}🍪`;
802836

803837
document.getElementById("open-real-shop").textContent = buyButtonText;
804838
}
@@ -814,7 +848,9 @@ <h2>${item.name}</h2>
814848
const amount = goals.filter(
815849
(item) => Number(item) === goal,
816850
).length;
851+
817852
goalAmounts[goal] = amount;
853+
818854
const item = shopItems[goal];
819855
const price =
820856
item.ticket_cost?.[region] ?? item.ticket_cost?.base_cost ?? 0;
@@ -826,19 +862,19 @@ <h2>${item.name}</h2>
826862
down = `<button id="down-${goal}" onclick="decreaseGoalAmount('${goal}')" style="display: block" class="goal-amount-button"><i class="codicon codicon-triangle-down"></i></button>`;
827863
}
828864

829-
var goalPrice = ""
830-
if (price <= userData.cookies) {
831-
goalPrice = `<p>${price}🍪 ✅</p>`
865+
var goalPrice = "";
866+
if (price <= (userData?.cookies ?? 0) * amount) {
867+
goalPrice = `<p>${price * amount}🍪 ✅</p>`;
832868
} else {
833-
goalPrice = `<p>${userData.cookies}🍪/${price}🍪</p>`
869+
goalPrice = `<p>${userData.cookies}🍪/${price * amount}🍪</p>`;
834870
}
835871

836872
return `
837873
<div class="goal-item"">
838874
<img class="goal-item-img" src="${item.image_url}" alt="" onclick="openShopItem(${goal})">
839875
<div class="goal-item-desc" onclick="openShopItem(${goal})">
840876
<p>${item.name}</p>
841-
<p>${price}🍪</p>
877+
${goalPrice}
842878
</div>
843879
<div class="goal-amount">
844880
<button id="up-${goal}" onclick="increaseGoalAmount('${goal}')" class="goal-amount-button"><i class="codicon codicon-triangle-up"></i></button>
@@ -847,7 +883,6 @@ <h2>${item.name}</h2>
847883
</div>
848884
<button class="goal-delete-button" onclick='deleteGoal(${goal})'><i class="codicon codicon-trash"></i></button>
849885
</div>`;
850-
851886
}
852887
})
853888
.join("");
@@ -883,7 +918,7 @@ <h2>${item.name}</h2>
883918
"codicon codicon-star-full";
884919
}
885920

886-
vscode.postMessage({ command: "post-goals", value: goals});
921+
syncGoalsState();
887922
}
888923

889924
function deleteGoal(id) {
@@ -894,8 +929,7 @@ <h2>${item.name}</h2>
894929
}
895930

896931
goals = goals.filter((goal) => Number(goal) !== goalId);
897-
console.log("delete")
898-
vscode.postMessage({ command: "post-goals", value: goals });
932+
syncGoalsState();
899933
}
900934

901935
function removeLastGoalOccurrence(goal) {
@@ -920,8 +954,10 @@ <h2>${item.name}</h2>
920954

921955
function syncGoalsState() {
922956
vscode.postMessage({ command: "post-goals", value: goals });
957+
handleShopLoad();
923958
}
924959

960+
// increase goal ammount
925961
function increaseGoalAmount(id) {
926962
const goalId = Number(id);
927963

@@ -935,9 +971,10 @@ <h2>${item.name}</h2>
935971
}
936972

937973
goals.push(goalId);
938-
syncGoalsState()
974+
syncGoalsState();
939975
}
940976

977+
// decrease goal amount
941978
function decreaseGoalAmount(id) {
942979
const goalId = Number(id);
943980

0 commit comments

Comments
 (0)