From 01ef6534873b4457d8a1c38ca5f6e4f981a323c1 Mon Sep 17 00:00:00 2001 From: Gnitoon <80431627+Gnitoon@users.noreply.github.com> Date: Thu, 18 Mar 2021 23:51:04 -0300 Subject: [PATCH] v1.0.1 - Now with 30% more artificial sugar! + Added news announcement card! + Hotkeys: (can be disabled in options) 'Esc' to close popups (options and news) 'o' to show/hide options 'c' to connect/disconnect 'h' to show/hide connection info 'n' to show/hide news announcement card + Added version meta tag + Saving the date and time when an option is changed + Some more comments in the code, might help if want to know how it works -> Added webmanifest and Open Graph meta tags (enable search engines and social media to display a preview with title, image, description...), basically SEO ~ fixed some issues in CSS with help of devTools/Edge issues + updated some elements to complain with lighthouse report: https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fpp-show.vercel.app%2F&strategy=desktop ~ changed some elements to , does not exists and i don't want to mess with CSS now ~ changed color #616161 to hsl(0deg,0,50%) and hsl(0deg 0% 16%) for dark and light themes to get better contrast --- index.html | 3166 ++++++++++++++++++++++++++------------------------- ppShow.html | 158 ++- 2 files changed, 1766 insertions(+), 1558 deletions(-) diff --git a/index.html b/index.html index b2bbd56..0f1e4a0 100644 --- a/index.html +++ b/index.html @@ -1,1531 +1,1635 @@ - - - - - - ppShow - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
- - -
-
-
- Hi -
- this is a simple site/page to show most used emote in a channel from twitch.tv -
- credits to twitch.tv/omeiaum for the idea, i just coded it -
-
- 'dvd mode' may now work properly in Firefox, please prefer chromium based browsers (like Chrome) -
TY <3 -
- - -
-
- Options - -
- - -
- options are saved in browser localStorage -
- please read the notice by scrolling down -
-
- -
- - -
- Only change the displayed emote if have more than X mentions -
- -1 to always use top one -
- - -
- - -
- this will help to use only most recent ones -
- -1 to not zero -
- - -
- -
- -
- Be careful if you are in the dark, this will suddlenly change to white -
- - -
- -
- -
- - -
- - -
- channel must be setted once or add #channel_name on URL -
- - -
- - -
- - -
- speeds: X and Y -
- - -
- RNG multiplier: Multiplied by a random number to change the direction a bit -
- -
- make it like a good ol' dvd -
- - - -
- - -
- use keyboard to make some things easier! -
- Full list at the very bottom, scroll it down... -
- only applies if NO INPUT IS FOCUSED (text fields, checkbox...) -
- - -
- - -
- print messages and useful things on devTools console (press F12 key) -
- - - - - -
IMPORTANT NOTICE: -
Both 'zero after messages' and 'min. mentions' affect how often they will - appear on screen keeping low values (ex: -1 and 5) in both will make it - change faster. - This will depend on chat speed, the ammount of messages -
-
- For most cases 5~ and 20~ will be good for 'emote bursts' -
- That is, zero the count every 20 messages and if have more than 5 mentions show it -
- - - -
-
- LICENSE: MIT - -
-
- Credits: -
oMeiaUm -
Vue.js framework -
tmijs package (to connect with twitch chat) -
BetterTTV (emotes and APIs) -
FrankerFaceZ (channel info) -
developpaper.com('dvd mode' code base) -
Icon (favicon) by me, based on a random emote from "ppS" bttv search, made with random pixelArt online tool - -
-
- BASIC USAGE: -
- Connect: -
- -> Type the twitch channel name in the top-right input field and click connect. -
-
- Emotes not changing/appearing or it's too slow/fast?
- -> Click on options and change 'minimal aount os mentions' and 'Zero the count...' to lower/higher numbers - -
-
- 'DVD Mode'? -
- -> Bounce the image on screen sides, just like the dvd logo, but with emotes -
- -> Click on options and mark the "DVD Stant-by bouncing" to enable -
- -> Mark "Don't clear canvas" to keep the path as the image moves - - -
-
- Hotkeys -
- -> Esc to close Update messsage card and options -
- -> 'o' to show/hide options -
- -> 'h' to show/hide connection info and message -
- -> 'c' to connect/disconnect -
- you will be propted to comfirm disconnect - -
-
- - - -
-
- Updated to version {{version.v}}! - -
-
- {{version.date}} -
-
- {{version.title}} -
-
- Changes -

{{infoLine}}

- -
-
- see more @ releases on github -
- found a bug or want to send feedback? reach out and open an issue on github! -
- -
- -
-
- - - - - -
- - -
- {{infoHidden ? "SHOW" : "HIDE"}} -
- -
- -
- {{this.status}} -
- total: {{messageCount}} -
- emotes: {{emotes.keys.length}}, - - top: {{emotes.top.code}} -
- - -
- {{lastMessage.user}}: {{lastMessage.msg}} -
-
-
- - -
- - - - -
- {{err.msg}} -
- - -
- -
- - - -
- - - - - - + + + + + + ppShow + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + +
+
+
+ Hi +
+ this is a simple site/page to show most used emote in a channel from twitch.tv +
+ credits to twitch.tv/omeiaum for the idea, i just coded it +
+
+ 'dvd mode' may now work properly in Firefox, please prefer chromium based browsers (like Chrome) +
TY <3 +
+ + +
+
+ Options + +
+ + +
+ options are saved in browser localStorage +
+ please read the notice by scrolling down +
+
+ +
+ + +
+ Only change the displayed emote if have more than X mentions +
+ -1 to always use top one +
+ + +
+ + +
+ this will help to use only most recent ones +
+ -1 to not zero +
+ + +
+ +
+ +
+ Be careful if you are in the dark, this will suddlenly change to white +
+ + +
+ +
+ +
+ + +
+ + +
+ channel must be setted once or add #channel_name on URL +
+ + +
+ + +
+ + +
+ speeds: X and Y +
+ + +
+ RNG multiplier: Multiplied by a random number to change the direction a bit +
+ +
+ make it like a good ol' dvd +
+ + + +
+ + +
+ use keyboard to make some things easier! +
+ Full list at the very bottom, scroll it down... +
+ only applies if NO INPUT IS FOCUSED (text fields, checkbox...) +
+ + +
+ + +
+ the number of mentions in a sequence (any other emote will cancel it!) +
+ + +
+ + +
+ print messages and useful things on devTools console (press F12 key) +
+ + + + + +
IMPORTANT NOTICE: +
Both 'zero after messages' and 'min. mentions' affect how often they will + appear on screen keeping low values (ex: -1 and 5) in both will make it + change faster. + This will depend on chat speed, the ammount of messages +
+
+ For most cases 5~ and 20~ will be good for 'emote bursts' +
+ That is, zero the count every 20 messages and if have more than 5 mentions show it +
+ + + +
+
+ LICENSE: MIT + +
+
+ Credits: +
oMeiaUm +
Vue.js framework +
tmijs package (to connect with twitch chat) +
BetterTTV (emotes and APIs) +
FrankerFaceZ (channel info) +
developpaper.com('dvd mode' code base) +
Icon (favicon) by me, based on a random emote from "ppS" bttv search, made with random pixelArt online tool + +
+
+ BASIC USAGE: +
+ Connect: +
+ -> Type the twitch channel name in the top-right input field and click connect. +
+
+ Emotes not changing/appearing or it's too slow/fast?
+ -> Click on options and change 'minimal aount os mentions' and 'Zero the count...' to lower/higher numbers + +
+
+ 'DVD Mode'? +
+ -> Bounce the image on screen sides, just like the dvd logo, but with emotes +
+ -> Click on options and mark the "DVD Stant-by bouncing" to enable +
+ -> Mark "Don't clear canvas" to keep the path as the image moves + + +
+
+ Hotkeys +
+ -> Esc to close Update messsage card and options +
+ -> 'o' to show/hide options +
+ -> 'h' to show/hide connection info and message +
+ -> 'c' to connect/disconnect +
+ you will be propted to comfirm disconnect + +
+
+ + + +
+
+ Updated to version {{version.v}}! + +
+
+ {{version.date}} +
+
+ {{version.title}} +
+
+ Changes +

{{infoLine}}

+ +
+
+ see more @ releases on github +
+ found a bug or want to send feedback? reach out and open an issue on github! +
+ +
+ +
+
+ + + + + +
+ + +
+ {{infoHidden ? "SHOW" : "HIDE"}} +
+ +
+ +
+ {{this.status}} +
+ total: {{messageCount}} +
+ emotes: {{emotes.keys.length}}, + + top: {{emotes.top.code}} [{{emotes.top.count}}] +
+ + +
+ {{lastMessage.user}}: {{lastMessage.msg}} +
+
+
+ + +
+ + + + +
+ {{err.msg}} +
+
+
+ {{comboValue}} + +
+
+
+ + +
+ +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/ppShow.html b/ppShow.html index 2272a9e..0f1e4a0 100644 --- a/ppShow.html +++ b/ppShow.html @@ -11,7 +11,9 @@ - + + + @@ -62,7 +64,8 @@ --text-light: #f1f1f1; --text-dark: #222222; - --text-medium:#616161; /* its just a coincidence, really. */ + /* --text-medium:#616161; its just a coincidence, really. */ + --text-medium: hsl(0deg 0% 50%); /* but devTools complains about cotrast :/. */ --bg-input: #212121; --bg-input-border: #616161; @@ -85,8 +88,8 @@ --text-light: #222222; --text-dark: #616161; - --text-medium:#616161; - + /* --text-medium:#616161; */ + --text-medium:hsl(0deg 0% 16%); /* at least this one is ok :) */ --bg-input: #f1f1f1; --bg-input-border: #e4e4e4; @@ -123,6 +126,7 @@ margin-top: 3px; display: block; width: fit-content; + width: -moz-fit-content; } /* general - input, buttons, labels... */ @@ -195,6 +199,7 @@ position: absolute; display: block; width: fit-content; + width: -moz-fit-content; min-height: 80px; bottom: 10px; } @@ -218,6 +223,7 @@ height: fit-content; position: absolute; text-orientation: sideways; + -webkit-text-orientation: sideways; writing-mode: vertical-lr; width: 40px; height: -webkit-fill-available; @@ -303,6 +309,10 @@ .op-item input[type="checkbox"]{ min-width: 20px; min-width: fit-content; + /* min-width: -moz-fit-content; */ + /* min-width: -webkit-fill-available; */ + /* min-width: -webkit-fit-content; */ + } } @@ -344,6 +354,27 @@ font-size: 100%; } + + .combo{ + width: min-content; + font-size: 3em; + padding: 5px; + transition: none; + position: relative; + height: 50px; + } + + .combo .c-text-cont{ + position: absolute; + bottom: 0; + left: 0; + font-size: 110%; + } + #combo-value{ + font-size: 100%; + transition: all 40ms ease-out; + } + @@ -351,7 +382,7 @@
-
+
only applies if NO INPUT IS FOCUSED (text fields, checkbox...)
+ +
+ + +
+ the number of mentions in a sequence (any other emote will cancel it!) +
+

Credits: -
oMeiaUm -
Vue.js framework -
tmijs package (to connect with twitch chat) -
BetterTTV (emotes and APIs) -
FrankerFaceZ (channel info) -
developpaper.com('dvd mode' code base) +
oMeiaUm +
Vue.js framework +
tmijs package (to connect with twitch chat) +
BetterTTV (emotes and APIs) +
FrankerFaceZ (channel info) +
developpaper.com('dvd mode' code base)
Icon (favicon) by me, based on a random emote from "ppS" bttv search, made with random pixelArt online tool
@@ -677,14 +724,14 @@
- Updated to version {{version.v}}! + Updated to version {{version.v}}!
{{version.date}}

- {{version.title}} + {{version.title}}

Changes @@ -713,7 +760,7 @@ @click="infoHidden = !infoHidden" title="show/hide messages and connection info" > - {{infoHidden ? "SHOW" : "HIDE"}} + {{infoHidden ? "SHOW" : "HIDE"}}
@@ -721,11 +768,11 @@
{{this.status}}
- total: {{messageCount}} + total: {{messageCount}}
- emotes: {{emotes.keys.length}}, + emotes: {{emotes.keys.length}}, - top: {{emotes.top.code}} + top: {{emotes.top.code}} [{{emotes.top.count}}]
@@ -759,11 +806,20 @@
{{err.msg}} +
+
+
+ {{comboValue}} + +
+
-
@@ -774,7 +830,7 @@ is a pretty good way i guess --> -
+
@@ -836,20 +892,26 @@ // enable keyboard shortcuts enableHotkeys: true, + // show/hide combo + showCombo: false, }, messageCount: 0, + messageCountTrs: 0, showOptions: false, infoHidden: false, optionsDisplay: "none", status: "disconnected", + comboGrowTimer: '', + comboGrowVal: 100, + comboValue: 0, // emoteImgSrc: nothing, // new version stuff hasNews: false, version: { - v: '1.0.1', - date: '2021/Mar/17', + v: '1.0.1b', + date: '2021/Mar/18', // just for the meme idk. title: 'Now with 30% more artificial sugar!', @@ -864,10 +926,17 @@ "____ 'c' to connect/disconnect", "____ 'h' to show/hide connection info", "____ 'n' to show/hide news announcement card (this popup)", + "+ C-C-Combo! the number of mentions of the emote in a sequence but ATTENTION: the combo is cancelled if ANY other emote appear in a sequence", + "~ fixed miMentions and message zero treshold not doing what is supposed, please review your options if somethig isn't working", "+ Added version meta tag", "+ Saving the date and time when an option is changed", "+ Some more comments in the code, might help if want to know how it works", - "-> Added webmanifest and Open Graph meta tags (enable search engines and social media to display a preview with title, image, description...), basically SEO" + "-> Added webmanifest and Open Graph meta tags (enable search engines and social media to display a preview with title, image, description...), basically SEO", + "~ fixed some issues in CSS with help of devTools/Edge issues", + "+ updated some elements to complain with lighthouse report: https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fpp-show.vercel.app%2F&strategy=desktop", + "~ changed some elements to , does not exists and i don't want to mess with CSS now", + "~ changed color #616161 to hsl(0deg,0,50%) and hsl(0deg 0% 16%) for dark and light themes to get better contrast", + ], }, @@ -937,12 +1006,22 @@ id: "", imageType: "", count: 0 - } + }, + + // last top emote + last: '', + + // last emote of any message + // ATTENTION: the combo is cancelled if ANY other emote appear in a sequence + lastCode: '', }, }, computed: { + comboGrow(){ + + }, /** * @description get image from bttv cdn * @@ -950,9 +1029,16 @@ * @param {String} size image size, 1x, 2x or 3x (optional) */ emoteImgSrc(){ - let id = this.emotes.top.id || undefined; + let emote = this.emotes.top; + let id = emote.id || undefined; let size = this.options.size || "2x"; + this.comboGrowVal = 120 + emote.count + if(this.comboGrowTimer) clearTimeout(this.comboGrowTimer); + this.comboGrowTimer = setTimeout(() => { + this.comboGrowVal = '100' + }, 100); + if(size == "random"){ // random emote size size = this.enums.sizes[parseInt(Math.random() * 2)] @@ -962,13 +1048,20 @@ } if(this.options.miMentions == -1){ - return this.apisURL.bttv.imgCDN.replace('{id}', id).replace('{size}', size) + let url = this.apisURL.bttv.imgCDN.replace('{id}', id).replace('{size}', size); + this.emotes.last = emote + return url } // check if has minimal mentions, if true, create the emote image URL else if(emote.count >= this.options.miMentions){ - return this.apisURL.bttv.imgCDN.replace('{id}', id).replace('{size}', size) + let url = this.apisURL.bttv.imgCDN.replace('{id}', id).replace('{size}', size); + this.emotes.last = emote + return url; // return this.apisURL.bttv.imgCDN.replace('{id}', emote.id).replace('{size}', size) } + else { + return this.apisURL.bttv.imgCDN.replace('{id}', this.emotes.last.id).replace('{size}', size) + } }, }, created(){ @@ -1297,6 +1390,7 @@ this.client.on('message', (channelName, userInfo, msg, self) => { dbug(`[${++this.messageCount}] ${userInfo['display-name']}: ${msg}`) + this.messageCountTrs++; // prepare style for mod/sub let sumoStyle = { @@ -1343,6 +1437,13 @@ else if(count[a] < count[b]) return 1; })[0] + // check if the last emote is the same as the current and sum/reset the combo + if(topKey == this.emotes.lastCode){ + this.comboValue++ + } + else{ + this.comboValue = 0 + } // search in emoteList for the top emote this.emotes.top = emoteList.filter(el => el.code == topKey)[0] @@ -1352,16 +1453,19 @@ // zero emote count if reach the message treshold // see options in the page - if(this.options.msgTreshold != -1 && this.messageCount >= this.options.msgTreshold){ + if(this.options.msgTreshold != -1 && this.messageCountTrs >= this.options.msgTreshold){ // loop trough emote names (keys) and set the emote count to 0 // in emote count object + dbug('counter cleared') for(let i = 0; i < keys.length; i++){ count[keys[i]] = 0; } + this.messageCountTrs = 0; } // name, count dbug(count[topKey], this.emotes.top) + this.emotes.lastCode = topKey; }) this.status = "connected";