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 d7b25a32ad3ee01d180298d5ffcce81ab3fe31e4..593d828b2c573746abc4b8befe3af759027f42f4 100644 (file)
--- 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 72510ab0486fba7fefe939046558839948a36131..3555e472556b70767a0d8f1b6e04f3b65e3b0053 100644 (file)
--- 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 8ca2ab640be3df4b1399a11355183bf552f41d8c..15b1993020820a38369485ea12b69bc12db1034f 100644 (file)
Binary files a/media/products/0.png and b/media/products/0.png differ