From: Max Value <greenwoodw50@gmail.com>
Date: Sat, 12 Apr 2025 21:07:12 +0000 (+0100)
Subject: Pricing extension changes
X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=7d1ce321b7c7d72b17b4081fba91858e4c660824;p=shopping-channel

Pricing extension changes

+ svg sequence
~ make button event register in js
~ changed hold image
---

diff --git a/extensions/pricing.html b/extensions/pricing.html
index d7b25a3..593d828 100644
--- a/extensions/pricing.html
+++ b/extensions/pricing.html
@@ -39,12 +39,15 @@ hr {
 	padding: 0;
 	border-color: var(--dark);
 }
-img {
+#img {
 	position: fixed;
 	width: 100vw;
 	left: 0;
 	top: calc(95vh - 2em);
-
+	transition: top 2s;
+}
+#img.sold {
+	top: 101vh;
 }
 #buy {
 	position: fixed;
@@ -58,6 +61,10 @@ img {
 	line-height: 2em;
 	border: none;
 	background-color: transparent;
+	transition: bottom 2s;
+}
+#buy.sold {
+	bottom: -3em;
 }
 
 .white {
@@ -75,6 +82,21 @@ img {
     color: rgba(0,0,0,0);
 }
 
+.sigil {
+	position: fixed;
+	height: 90vh;
+	top: 50vh;
+	left: 50vw;
+	transform: translate(-50%, -50%);
+	opacity: 0;
+}
+.sigil.fade {
+	transition: opacity 5s;
+}
+.sigil.show {
+	opacity: 1;
+}
+
 		</style>
 		<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
 		<script src="./pricing.js"></script>
@@ -88,11 +110,11 @@ img {
 
 			<hr>
 
-			<h3 class="black">Now Only: <span id="price"></span></h3>
+			<h3 class="black">Now Only: <span id="price"><em>Loading...</em></span></h3>
 		</div>
 		<div>
-			<img src="https://shopping.ozva.co.uk/static/assets/fringe.svg"></img>
-			<input type="button" onclick="buy();" id="buy" value="Buy Now!"></input>
+			<img class="sold" id="img" src="https://shopping.ozva.co.uk/static/assets/fringe.svg"></img>
+			<input class="sold" type="button" id="buy" value="Click to Buy!"></input>
 		</div>
 		<img class="sigil" id="1" src="https://shopping.ozva.co.uk/static/assets/sigil1.svg">
 		<img class="sigil" id="2" src="https://shopping.ozva.co.uk/static/assets/sigil2.svg">
diff --git a/extensions/pricing.js b/extensions/pricing.js
index 72510ab..3555e47 100644
--- a/extensions/pricing.js
+++ b/extensions/pricing.js
@@ -1,7 +1,6 @@
 let pastId = 0;
 
 function update() {
-
 	// setup and hide the main element & the image element
 	const main = document.getElementById("main");
 
@@ -12,6 +11,10 @@ function update() {
 
 	const price = document.getElementById("price");
 
+	const button = document.getElementById("buy");
+	const img = document.getElementById("img");
+
+	button.onclick = function(){buy()};
 
 	fetch("https://shopping.ozva.co.uk/api/items", {cache: "default"})
 	.then(data => data.json())
@@ -26,6 +29,8 @@ function update() {
 			// change the data if the id is different
 			if (id != pastId) {
 				main.classList.add("hide");
+				button.classList.remove("sold");
+				img.classList.remove("sold");
 
 				const items = dataStatic.items;
 				const item = items[id];
@@ -62,5 +67,43 @@ function update() {
 setInterval(update, 5000);
 
 function buy() {
-	fetch("http://127.0.0.1:8000/api/buy")
+	const sigil1 = document.getElementById("1");
+	const sigil2 = document.getElementById("2");
+	const sigil3 = document.getElementById("3");
+	const sigil4 = document.getElementById("4");
+	const sigil5 = document.getElementById("5");
+
+	const speed = 100;
+
+	fetch("https://shopping.ozva.co.uk/api/buy")
+
+	document.getElementById("buy").classList.add("sold");
+	document.getElementById("img").classList.add("sold");
+	sigil5.classList.remove("fade")
+	sigil1.classList.add("show")
+	setTimeout(function () {
+		sigil1.classList.remove("show")
+		sigil2.classList.add("show")
+
+		setTimeout(function () {
+			sigil2.classList.remove("show")
+			sigil3.classList.add("show")
+
+			setTimeout(function () {
+				sigil3.classList.remove("show")
+				sigil4.classList.add("show")
+
+				setTimeout(function () {
+					sigil4.classList.remove("show")
+					sigil5.classList.add("show")
+
+					setTimeout(function () {
+						sigil5.classList.add("fade")
+						sigil5.classList.remove("show")
+
+					}, 4*speed);
+				}, speed);
+			}, speed);
+		}, speed);
+	}, speed);
 }
diff --git a/media/products/0.png b/media/products/0.png
index 8ca2ab6..15b1993 100644
Binary files a/media/products/0.png and b/media/products/0.png differ