Implemented % sold across interface and GFX

diff --git a/auth/index.php b/auth/index.php
index 259d5852f02ccd8b7145884699a17529a29748c9..9b169cfc4ea3ab5f36c8693d972b015deeb18ec5 100644 (file)
--- 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") {
 
                                        <input type='radio' id='postfix' name='prefix' value='false'<?php echo $postChecked; ?>>
                                        <input type='text' id='postfix' name='postfixString' value='<?php echo $postfix; ?>'>
-                                       <label for='postfix'> Postfix</label><br>
+                                       <label for='postfix'> Postfix</label><br><br>
+
+                                       <input type='number' name='percentLeft' id='percentLeft' value='<?php echo $data['percentLeft']; ?>'>
+                                       <label for='percentLeft'> Unsold (%)</label>
 
                                </div><div class='split'>
 
@@ -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):
                        </p>
                        <ul>
-                               <li>Make this notes section a little better? it might actually be useful during the show. Although the arrow is quite difficult to click on</li>
-                               <li>Add the controls for persentage sold and the relevant display on the GFX side of things</li>
+                               <li><s>Make this notes section a little better? it might actually be useful during the show. Although the arrow is quite difficult to click on</s></li>
+                               <li><s>Add the controls for persentage sold and the relevant display on the GFX side of things</s></li>
                                <li><s>Add 2 more timers on both the controls and the GFX page</s></li>
                                <li>Add the <s>timers and the</s> % sold to the autocue so the presenter can atually see what theyre doing</li>
                                <li>Add a clock display to the GFX page and the autocue (could just be a gereric time?)</li>
@@ -517,7 +522,7 @@ for ($i = 0; $i < 360; $i += $clockIncrement) {
                                <li>add marquee of the current buyers of the product and figure out how to do this (potentially hard?)</li>
                        </ul>
                        <p>
-                               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, <s>arrange screentest with Jack</s>.
                        </p>
                </details>
        </body>

diff --git a/autocue/index.html b/autocue/index.html
index d108174248da941b1c82ba54142dfe0c531bfed1..4d7a858c0cc77017e3ba0911594fdab9d9d3c0bc 100644 (file)
--- 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 `<s>${minutesString}:${secondsString}</s>`;
-                       }
+       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 `<s>${minutesString}:${secondsString}</s>`;
+       }
 }
 
 function frame() {

diff --git a/clock.json b/clock.json
index bc358d6b7361ec84274d23ea1b530e51505dc466..c95e641baada9bb7386102987c489fe7eab9cf5f 100755 (executable)
--- 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 6bdb3fd187ccce696783b2477cbc8eaa9684713f..bb6977af4c35049286534860e3e716a51908a3fd 100755 (executable)
--- 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 c72fbcdad9a95362b86c5c456dd59f1b48f83db4..2f1ca7f31ef09475d19e281b8dca6bad2b7f2371 100644 (file)
--- 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 = `<em>Now only:</em> ${makePrice(data[itemId].origionalPrice * discount)}`;
                        document.getElementById("monthlyPrice").innerHTML = `12 monthly payments of <b>${makePrice(discountPricePlan)}</b>`;
                        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 = `<s><em>WAS:</em> ${makePrice(data[itemId].origionalPrice)}</s>`;
                        } 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)
 
                <div class="container side show">
                        <div class="box main">
-                               <h1 id="code"></h1>
-                               <h3 id="raiting"></h3>
-                               <h2 class="feature" id="subtext"></h2>
-                               <h3 id="description"></h3>
+                               <h1 id="code">Code</h1>
+                               <h3 id="raiting">Raiting</h3>
+                               <h2 class="feature" id="subtext">Subtext</h2>
+                               <h3 id="description">Description</h3>
                                <hr>
-                               <h4 id="origionalPrice"></h4>
+                               <h4 id="origionalPrice">Origional Price</h4>
                                <div class="badgeContainer">
                                        <img class="badge" src="./star.svg"></img>
-                                       <h2 class="badge" id="badgeText">5000000000% OFF</h2>
+                                       <h2 class="badge" id="badgeText">Percent off</h2>
                                </div>
-                               <h3 id="discount"></h3>
                        </div>
                        <div class="box extra">
-                               <h2 style="margin-top: 1vh;"id="currentPrice"></h4>
-                               <p id="monthlyPrice"></p>
+                               <h2 style="margin-top: 1vh;" id="currentPrice">Current Price</h4>
+                               <p id="monthlyPrice">Monthly Price</p>
+                               <div class="soldBox">
+                                       <p style="font-size: 1.2em;">In Stock: <span style="margin-right:10px;" id="stock"></span> Sold: <span id="sold"></span></p>
+                                       <p style="font-size: 1.6em;" class="alert" id="unitsLeft"></p>
+                               </div>
                        </div>
                </div>
 

diff --git a/items.json b/items.json
index 3720d37a15b20b5cf85117c8060b29c4a62fbcd4..63f0300c04e5a007a211fe47276673ef6f2e2163 100755 (executable)
--- 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":"<p>[autocue] Showing: test product.<br>Commencing shortly.</p>"
        },
        {
@@ -17,10 +14,7 @@
                "subtext":"Gold <em>Stick-Strip</em>&#8482",
                "description":"50m shiny gold <em>Stick-Strip</em>&#8482! Origional beautiful formula! Cannot be broken! Too beautiful! Stuck!",
                "origionalPrice":500,
-               "extraInfo":{
-                       "stockCount":100,
-                       "soldCount":20
-               },
+               "stockCount":100,
                "notes":"<p>ITEM IS A REEL OF GOLDEN TAPE THAT CANNOT BE TORN</p><ul><li>EMPASIZE AS MUCH AS POSSIBLE HOW BEAUTIFUL IT IS</li></ul>"
        },
        {
@@ -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..."
        }
 ]