Skip to content

Commit

Permalink
Fixed the YT studio animation (for real this time)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RandomPerson3465
RandomPerson3465 committed Jan 18, 2024
1 parent aeb06da commit 73157d6
Show file tree
Hide file tree
Showing 5 changed files with 227 additions and 10 deletions.
42 changes: 40 additions & 2 deletions studio/dark.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,53 @@ body {
overflow-y: hidden;
}

#count {
#odo1a,
#odo2a,
#odo3a,
#odo4a,
#odo5a,
#odo6a,
#odo7a,
#odo8a,
#odo9a,
#odo10a,
#odo11a,
#odo12a{
font-family: Roboto;
font-size: 72px;
display: block;
width: 38px;
height: 74px;
line-height: 100%;
font-weight: 700;
}

#comma1a,
#comma2a,
#comma3a {
font-family: Roboto;
font-size: 72px;
display: inline-block;
vertical-align: middle;
width: 12px;
height: 74px;
line-height: 100%;
font-weight: 700;
}

#comma1a,
#comma2a,
#odo2a,
#odo3a,
#odo4a,
#odo5a,
#odo6a,
#odo7a,
#odo8a,
#odo9a {
display: none;
}

.header {
display: grid;
grid-template-columns: repeat(3, 1fr);
Expand Down Expand Up @@ -311,7 +349,7 @@ hr {
border: solid #000000;
width: 25%;
height: 100%;
margin-top: -100vh;
margin-top: -48%;
background-color: #cccccc;
color: #000;
font-family: Arial, Helvetica, sans-serif;
Expand Down
21 changes: 18 additions & 3 deletions studio/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,22 @@ <h4 class="live">Updating live</h4>
<p id="name">Livecountsedit</p>
<div class="main">
<div class="counter">
<div id="count" class="odometer">0
<div id="count">
<div id="odo1a" class="odometer">0</div>
<div id="odo2a" class="odometer">0</div>
<div id="odo3a" class="odometer">0</div>
<div id="comma1a">,</div>
<div id="odo4a" class="odometer">0</div>
<div id="odo5a" class="odometer">0</div>
<div id="odo6a" class="odometer">0</div>
<div id="comma2a">,</div>
<div id="odo7a" class="odometer">0</div>
<div id="odo8a" class="odometer">0</div>
<div id="odo9a" class="odometer">0</div>
<div id="comma3a">,</div>
<div id="odo10a" class="odometer">0</div>
<div id="odo11a" class="odometer">0</div>
<div id="odo12a" class="odometer">0</div>
</div>
<p class="label" id="footer">Subscribers</p>
</div>
Expand Down Expand Up @@ -143,8 +158,8 @@ <h1>Settings</h1>
</div>
<br>
<div class="option">
<label>Counter value (integers only)</label><br>
<input type="text" placeholder="Channel Subscribers" id="subscribers_input" autocomplete="off">
<label>Counter value (whole numbers only)</label><br>
<input type="number" placeholder="Channel Subscribers" id="subscribers_input" autocomplete="off">
<input type="checkbox" id="enabled" autocomplete="off" checked>
</div>
<br>
Expand Down
18 changes: 16 additions & 2 deletions studio/odometer.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
let gain = 0;
(function() {
var COUNT_FRAMERATE, COUNT_MS_PER_FRAME, DIGIT_FORMAT, DIGIT_HTML, DIGIT_SPEEDBOOST, DURATION, FORMAT_MARK_HTML, FORMAT_PARSER, FRAMERATE, FRAMES_PER_VALUE, MS_PER_FRAME, MutationObserver, Odometer, RIBBON_HTML, TRANSITION_END_EVENTS, TRANSITION_SUPPORT, VALUE_HTML, addClass, createFromHTML, fractionalPart, now, removeClass, requestAnimationFrame, round, transitionCheckStyles, trigger, truncate, wrapJQuery, _jQueryWrapped, _old, _ref, _ref1,
__slice = [].slice;
Expand Down Expand Up @@ -355,7 +356,7 @@
return;
}
removeClass(this.el, 'odometer-animating-up odometer-animating-down odometer-animating');
if (diff > 0) {
if (gain > 0) {
addClass(this.el, 'odometer-animating-up');
} else {
addClass(this.el, 'odometer-animating-down');
Expand Down Expand Up @@ -559,7 +560,20 @@
_base[i] = this.digits[i].querySelector('.odometer-ribbon-inner');
}
this.ribbons[i].innerHTML = '';
if (diff < 0) {
if (gain > 0 && newValue < oldValue) {
frames = [];
for (d = oldValue; d < newValue+11; d++) {
frames.push(d % 10);
}
//frames = frames.reverse();
}
if (gain < 0 && newValue > oldValue) {
frames = [];
for (d = oldValue+10; d > newValue-1; d--) {
frames.push(d % 10);
}
}
if (gain < 0) {
frames = frames.reverse();
}
for (j = _m = 0, _len2 = frames.length; _m < _len2; j = ++_m) {
Expand Down
116 changes: 114 additions & 2 deletions studio/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
let cmm = 0;
let raw = 0;
let m = "100b";
let saveInterval;
Expand Down Expand Up @@ -53,6 +54,11 @@ if (user.graphType == "live") {
graphData = chartData
}

function spl(n) {
n = '' + n + ''
return n.split('', 12)
}

const chart = new Highcharts.chart({
chart: {
renderTo: "chart",
Expand Down Expand Up @@ -370,7 +376,109 @@ function settype(n) {
}

function render() {
document.getElementById('count').innerText = Math.round(user.count);
settype(raw)
if (m == '100b') {
odo1a.innerHTML = cmm[0]
odo2a.innerHTML = cmm[1]
odo3a.innerHTML = cmm[2]
odo4a.innerHTML = cmm[3]
odo5a.innerHTML = cmm[4]
odo6a.innerHTML = cmm[5]
odo7a.innerHTML = cmm[6]
odo8a.innerHTML = cmm[7]
odo9a.innerHTML = cmm[8]
odo10a.innerHTML = cmm[9]
odo11a.innerHTML = cmm[10]
odo12a.innerHTML = cmm[11]
}
if (m == '10b') {
odo2a.innerHTML = cmm[0]
odo3a.innerHTML = cmm[1]
odo4a.innerHTML = cmm[2]
odo5a.innerHTML = cmm[3]
odo6a.innerHTML = cmm[4]
odo7a.innerHTML = cmm[5]
odo8a.innerHTML = cmm[6]
odo9a.innerHTML = cmm[7]
odo10a.innerHTML = cmm[8]
odo11a.innerHTML = cmm[9]
odo12a.innerHTML = cmm[10]
}
if (m == '1b') {
odo3a.innerHTML = cmm[0]
odo4a.innerHTML = cmm[1]
odo5a.innerHTML = cmm[2]
odo6a.innerHTML = cmm[3]
odo7a.innerHTML = cmm[4]
odo8a.innerHTML = cmm[5]
odo9a.innerHTML = cmm[6]
odo10a.innerHTML = cmm[7]
odo11a.innerHTML = cmm[8]
odo12a.innerHTML = cmm[9]
}
if (m == '100m') {
odo4a.innerHTML = cmm[0]
odo5a.innerHTML = cmm[1]
odo6a.innerHTML = cmm[2]
odo7a.innerHTML = cmm[3]
odo8a.innerHTML = cmm[4]
odo9a.innerHTML = cmm[5]
odo10a.innerHTML = cmm[6]
odo11a.innerHTML = cmm[7]
odo12a.innerHTML = cmm[8]
}
if (m == '10m') {
odo5a.innerHTML = cmm[0]
odo6a.innerHTML = cmm[1]
odo7a.innerHTML = cmm[2]
odo8a.innerHTML = cmm[3]
odo9a.innerHTML = cmm[4]
odo10a.innerHTML = cmm[5]
odo11a.innerHTML = cmm[6]
odo12a.innerHTML = cmm[7]
}
if (m == '1m') {
odo6a.innerHTML = cmm[0]
odo7a.innerHTML = cmm[1]
odo8a.innerHTML = cmm[2]
odo9a.innerHTML = cmm[3]
odo10a.innerHTML = cmm[4]
odo11a.innerHTML = cmm[5]
odo12a.innerHTML = cmm[6]
}
if (m == '100k') {
odo7a.innerHTML = cmm[0]
odo8a.innerHTML = cmm[1]
odo9a.innerHTML = cmm[2]
odo10a.innerHTML = cmm[3]
odo11a.innerHTML = cmm[4]
odo12a.innerHTML = cmm[5]
}
if (m == '10k') {
odo8a.innerHTML = cmm[0]
odo9a.innerHTML = cmm[1]
odo10a.innerHTML = cmm[2]
odo11a.innerHTML = cmm[3]
odo12a.innerHTML = cmm[4]
}
if (m == '1k') {
odo9a.innerHTML = cmm[0]
odo10a.innerHTML = cmm[1]
odo11a.innerHTML = cmm[2]
odo12a.innerHTML = cmm[3]
}
if (m == '100') {
odo10a.innerHTML = cmm[0]
odo11a.innerHTML = cmm[1]
odo12a.innerHTML = cmm[2]
}
if (m == '10') {
odo11a.innerHTML = cmm[0]
odo12a.innerHTML = cmm[1]
}
if (m == '1') {
odo12a.innerHTML = cmm[0]
}
}

function openmenu() {
Expand All @@ -388,8 +496,11 @@ document.getElementById('close').onclick = function () {
function submit() {
if (document.getElementById('enabled').checked) {
if (!(document.getElementById('subscribers_input').value == "")) {
let prevCount = user.count
user.count = parseFloat(document.getElementById('subscribers_input').value)
cmm = spl(user.count)
raw = user.count
gain = user.count - prevCount
render()
}
}
Expand All @@ -414,8 +525,9 @@ function submit() {
let interval;

function update() {
let gain = random(user.min_gain, user.max_gain)
gain = random(user.min_gain, user.max_gain)
user.count += gain
cmm = spl(user.count)
raw = user.count
if (user.graphType == "live") {
if (chart.series[0].data.length > user.maxPoints) {
Expand Down
40 changes: 39 additions & 1 deletion studio/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,53 @@ body {
overflow-y: hidden;
}

#count {
#odo1a,
#odo2a,
#odo3a,
#odo4a,
#odo5a,
#odo6a,
#odo7a,
#odo8a,
#odo9a,
#odo10a,
#odo11a,
#odo12a{
font-family: Roboto;
font-size: 72px;
display: block;
width: 38px;
height: 74px;
line-height: 100%;
font-weight: 700;
}

#comma1a,
#comma2a,
#comma3a {
font-family: Roboto;
font-size: 72px;
display: inline-block;
vertical-align: middle;
width: 12px;
height: 74px;
line-height: 100%;
font-weight: 700;
}

#comma1a,
#comma2a,
#odo2a,
#odo3a,
#odo4a,
#odo5a,
#odo6a,
#odo7a,
#odo8a,
#odo9a {
display: none;
}

.header {
display: grid;
grid-template-columns: repeat(3, 1fr);
Expand Down

0 comments on commit 73157d6

Please sign in to comment.