From a2d7f4ec7d6037719fd46e6a523061b62214bb82 Mon Sep 17 00:00:00 2001 From: will Date: Wed, 28 Aug 2024 15:38:59 +0100 Subject: [PATCH] Implemented % sold across interface and GFX --- auth/index.php | 13 +++++--- autocue/index.html | 28 ++++++++-------- clock.json | 2 +- data.json | 2 +- index.html | 83 +++++++++++++++++++++++++++++++++++++--------- items.json | 15 ++------- 6 files changed, 95 insertions(+), 48 deletions(-) diff --git a/auth/index.php b/auth/index.php index 259d585..9b169cf 100644 --- a/auth/index.php +++ b/auth/index.php @@ -67,6 +67,7 @@ if (!empty($_POST['update'])) { $data['timerOffset'] = (int)$_POST['timerOffset']; $data['priceChange'] = (int)$_POST['priceChange']; $data['discount'] = (int)$_POST['discount']; + $data['percentLeft'] = (int)$_POST['percentLeft']; $data['itemId'] = (int)$_POST['item']; $data['prefix'] = $_POST['prefix']; @@ -156,6 +157,7 @@ fieldtext > .split { border: 2px solid red; background-color: rgba(255, 255, 255, 0.7); } +s {color: green;} .clock { position: relative; width: 100%; @@ -264,7 +266,10 @@ if ($data['round'] == "true") { > -
+

+ + '> +
@@ -507,8 +512,8 @@ for ($i = 0; $i < 360; $i += $clockIncrement) { Still need to do plenty to both the GFX overlay and this page (and the actual clock):

- and then still to do in the admin department: Talk to Joe about the GFX system, ask Ash about the lighting desk sAcn input and to setup things, makerspace the clock, text people about things, arrange screentest with Jack. + and then still to do in the admin department: Talk to Joe about the GFX system, ask Ash about the lighting desk sAcn input and to setup things, makerspace the clock, text people about things, arrange screentest with Jack.

diff --git a/autocue/index.html b/autocue/index.html index d108174..4d7a858 100644 --- a/autocue/index.html +++ b/autocue/index.html @@ -24,21 +24,21 @@ body { var itemId = 0; function makeTime(t, o, s) { - let current = Math.round((Date.now() + o) / 1000); - var time = t - current; - if (Math.sign(time) == -1) {time = 0;} - var minutes = Math.floor(time / 60); - var seconds = (time - (minutes * 60)); + let current = Math.round((Date.now() + o) / 1000); + var time = t - current; + if (Math.sign(time) == -1) {time = 0;} + var minutes = Math.floor(time / 60); + var seconds = (time - (minutes * 60)); - var minutesString = minutes.toString(); - var secondsString = seconds.toString(); - minutesString = minutesString.padStart(2, "0"); - secondsString = secondsString.padStart(2, "0"); - if (s == "true") { - return `${minutesString}:${secondsString}`; - } else { - return `${minutesString}:${secondsString}`; - } + var minutesString = minutes.toString(); + var secondsString = seconds.toString(); + minutesString = minutesString.padStart(2, "0"); + secondsString = secondsString.padStart(2, "0"); + if (s == "true") { + return `${minutesString}:${secondsString}`; + } else { + return `${minutesString}:${secondsString}`; + } } function frame() { diff --git a/clock.json b/clock.json index bc358d6..c95e641 100755 --- a/clock.json +++ b/clock.json @@ -1 +1 @@ -{"currentPosition":0,"movementSpeed":30,"function":"ease","lightingCues":["false","true","false","false","false","true","false","true","false","true"]} \ No newline at end of file +{"currentPosition":0,"movementSpeed":30,"function":"ease","lightingCues":["false","false","true","false","false","true","false","true","false","true"]} \ No newline at end of file diff --git a/data.json b/data.json index 6bdb3fd..bb6977a 100755 --- a/data.json +++ b/data.json @@ -1 +1 @@ -{"topText":["It's here!"],"bottomText":["It's here!"],"bannerText":"It's here!","itemId":2,"currency":{"prefix":"$","postfix":" hairs"},"discount":70,"prefix":"false","round":"true","priceChange":50,"showingMain":"true","showingAll":"true","showingExtra":"true","showingTimer1":"true","showingTimer2":"true","showingTimer3":"true","timer3Main":"false","showingBanner":"true","showingSigil":["false","false","false","false"],"timer1End":1724723324,"timer2End":1724780836,"timer3End":1724781031,"timerOffset":0} \ No newline at end of file +{"topText":["It's here!"],"bottomText":["Something bright and radiant for all of you at home!","I take your life and raise you 10 over the hour!","We grab the bullion counterweight and throw ourselves down!","We have been falling for a looong time people!","Let me slip into something less spacious!","Down the side of a large golden pyramid!","So we dress ourselves in your Ballast!","I used to be so unimaginably tall!"],"bannerText":"Discounts on XMDV!","itemId":1,"currency":{"prefix":"$","postfix":" hairs"},"discount":-5000,"percentLeft":20,"prefix":"false","round":"true","priceChange":50,"showingMain":"true","showingAll":"true","showingExtra":"true","showingTimer1":"true","showingTimer2":"false","showingTimer3":"false","timer3Main":"false","showingBanner":"true","showingSigil":["false","false","false","false"],"timer1End":1724849889,"timer2End":1724848450,"timer3End":1724787297,"timerOffset":0} \ No newline at end of file diff --git a/index.html b/index.html index c72fbcd..2f1ca7f 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,21 @@ body { opacity: 0; transition: opacity 1.5s; } +.soldBox { + margin: 5px; + padding: 5px; + border-radius: 5px; + background-image: var(--background); + box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.19) 0px 1px 2px; +} +.soldBox > * { + margin: 0; + font-style: italic; +} +.soldBox > * > span { + font-weight: bold; + font-style: normal; +} #raiting { margin: 5px; margin-top: 0; @@ -93,13 +108,14 @@ body { z-index: -1; transform: translateY(-100%); padding-top: 2vh; + padding-bottom: 1px; background-image: var(--feature-gradient); transition: transform 1.5s; } .showExtra > .extra { transform: translateY(0%); } -.main > *, .extra > *, .bottom > *, .marquee > * { +.main > *, .extra > *:not(.soldBox), .bottom > *, .marquee > * { margin: 0; padding: 0.5vh 1vh; } @@ -289,6 +305,8 @@ var discount = 1; var newDiscount = 1; var priceChange = 0; +var percentLeft = 1; + var showingSigils = true; // helper function for creating price strings @@ -330,6 +348,7 @@ function makeSeconds(t, o, d) { else {return Math.round(seconds * (100 / 60))} } } + // handles all updates from the server data that are not required to be instantanious (2 times per second) function update() { fetch("./data.json", {cache: "no-store"}) @@ -337,7 +356,8 @@ function update() { .then(data => { itemId = data.itemId; - //handle all optional elements showing/hiding + // handle all optional elements showing/hiding + // All element handling const all = document.getElementById("all"); if (data.showingAll == "true") { all.classList.add("show"); @@ -345,6 +365,7 @@ function update() { all.classList.remove("show"); } + // Banner handling const banner = document.getElementsByClassName("banner")[0]; if (data.showingBanner == "true") { if (!banner.classList.contains("show")) { @@ -355,6 +376,7 @@ function update() { banner.classList.remove("show"); } + // Timer 1 const timer1 = document.getElementsByClassName("timer1")[0]; timer1.innerHTML = makeTime(data.timer1End, data.timerOffset); if (data.showingTimer1 == "true") { @@ -363,6 +385,7 @@ function update() { timer1.classList.remove("show"); } + // Timer 2 const timer2 = document.getElementsByClassName("timer2")[0]; timer2.innerHTML = makeTime(data.timer2End, data.timerOffset); if (data.showingTimer2 == "true") { @@ -374,6 +397,7 @@ function update() { var property = `conic-gradient(rgb(0,0,0,0) 0deg, rgb(0,0,0,0) ${angle}deg, var(--feature-light) ${angle}.1deg, var(--feature-light) 360deg)`; timer2.style.background = `${property}, var(--background)`; + // Timer 3 const timer3 = document.getElementsByClassName("timer3")[0]; timer3.innerHTML = makeTime(data.timer3End, data.timerOffset); if (data.showingTimer3 == "true") { @@ -390,6 +414,7 @@ function update() { var property = `linear-gradient(rgb(0,0,0,0) 0%, rgb(0,0,0,0) ${radius}%, var(--feature-light) ${radius}.1%, var(--feature-dark) 100%)`; timer3.style.background = `${property}, var(--background)`; + // Side product information const side = document.getElementsByClassName("side")[0]; if (data.showingMain == "true") { side.classList.add("show"); @@ -400,12 +425,15 @@ function update() { banner.classList.add("moved"); timer2.classList.add("moved"); } + + // Product extra information if (data.showingExtra == "true" && data.showingMain == "true") { side.classList.add("showExtra"); } else { side.classList.remove("showExtra"); } + // Discount badge const badgeContainer = document.getElementsByClassName("badgeContainer")[0]; if (discount <= 0.99) { badgeContainer.classList.add("show"); @@ -413,6 +441,7 @@ function update() { badgeContainer.classList.remove("show"); } + // Sigil handling const sigilNE = document.getElementById("sigilNE"); if (data.showingSigil[0] == "true") { sigilNE.classList.add("show"); @@ -438,6 +467,13 @@ function update() { sigilNW.classList.remove("show"); } + // Check for sigil freeze + if (data.showingSigil.every(i => i == "false")) { + showingSigils = false; + } else { + showingSigils = true; + } + // set variables for the frame process to allow it to function without requesting data 200x per second round = data.round; @@ -448,27 +484,38 @@ function update() { priceChange = data.priceChange / 100; newDiscount = data.discount / 100; - if (data.showingSigil.every(i => i == "false")) { - showingSigils = false; - } else { - showingSigils = true; - } + percentLeft = data.percentLeft /100; + }); // get the requested item data fetch("./items.json") // this is static so there is no need to request it every time .then(data => data.json()) .then(data => { + // set item properties document.getElementById("code").innerHTML = data[itemId].code; document.getElementById("raiting").innerHTML = data[itemId].rating; document.getElementById("subtext").innerHTML = data[itemId].subtext; document.getElementById("description").innerHTML = data[itemId].description; + // set discount figures let discountPricePlan = (data[itemId].origionalPrice * discount * 1.1) / 12 document.getElementById("currentPrice").innerHTML = `Now only: ${makePrice(data[itemId].origionalPrice * discount)}`; document.getElementById("monthlyPrice").innerHTML = `12 monthly payments of ${makePrice(discountPricePlan)}`; document.getElementById("badgeText").innerHTML = `${Math.round((1 - discount) * 100)}% OFF`; + document.getElementById("stock").innerHTML = `${data[itemId].stockCount} units`; + document.getElementById("sold").innerHTML = `${Math.round(data[itemId].stockCount * (1 - percentLeft))} units`; + + console.log(percentLeft); + if (percentLeft < 0.1) { descriptor = "Quick! Only"; } + else if (percentLeft < 0.25) { descriptor = "Only"; } + else if (percentLeft < 0.5) { descriptor = "Just"; } + else { descriptor = ""; } + + if (percentLeft == 0) { document.getElementById("unitsLeft").innerHTML = "Sold out!"; } + else { document.getElementById("unitsLeft").innerHTML = `${descriptor} ${Math.round(data[itemId].stockCount * (percentLeft))} left!`;} + if (discount <= 0.99) { document.getElementById("origionalPrice").innerHTML = `WAS: ${makePrice(data[itemId].origionalPrice)}`; } else { @@ -476,6 +523,7 @@ function update() { } }); } + // function handles all animated events that are required to look smooth (marquee movement / price changes) (200 times per second) function frame() { @@ -579,21 +627,24 @@ setInterval(draw, 500)
-

-

-

-

+

Code

+

Raiting

+

Subtext

+

Description

-

+

Origional Price

-

5000000000% OFF

+

Percent off

-

-

-

+

Current Price

+

Monthly Price

+
+

In Stock: Sold:

+

+
diff --git a/items.json b/items.json index 3720d37..63f0300 100755 --- a/items.json +++ b/items.json @@ -5,10 +5,7 @@ "subtext":"Test item name", "description":"Test item description", "origionalPrice":0, - "extraInfo":{ - "stockCount":0, - "soldCount":0 - }, + "stockCount":0, "notes":"

[autocue] Showing: test product.
Commencing shortly.

" }, { @@ -17,10 +14,7 @@ "subtext":"Gold Stick-Strip™", "description":"50m shiny gold Stick-Strip™! Origional beautiful formula! Cannot be broken! Too beautiful! Stuck!", "origionalPrice":500, - "extraInfo":{ - "stockCount":100, - "soldCount":20 - }, + "stockCount":100, "notes":"

ITEM IS A REEL OF GOLDEN TAPE THAT CANNOT BE TORN

" }, { @@ -29,10 +23,7 @@ "subtext":"Item subtext", "description":"Product 2 description. It's really long to see if the badge element moves down the page at all. I f**king hate CSS positioning. Oops family show.", "origionalPrice":170, - "extraInfo":{ - "stockCount":200, - "soldCount":40 - }, + "stockCount":200, "notes":"Some more notes..." } ] -- 2.39.2