Skip to content
This repository has been archived by the owner on Mar 18, 2024. It is now read-only.

Commit

Permalink
Bits integration
Browse files Browse the repository at this point in the history
  • Loading branch information
rcwdev committed Jan 4, 2023
1 parent dcacf79 commit 31bb012
Show file tree
Hide file tree
Showing 9 changed files with 221 additions and 58 deletions.
1 change: 0 additions & 1 deletion config/assets/js/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ function getFromElements() {
style: {
accentColor: document.getElementById("accentColor").value,
backgroundColor: document.getElementById("backgroundColor").value,
headerFontColor: document.getElementById("headerFontColor").value,
fontColor: document.getElementById("fontColor").value
},
settings: {
Expand Down
5 changes: 2 additions & 3 deletions config/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ <h5 class="mb-0">Style</h5>
<div class="card-body">
<div class="input-group mb-3"><span class="input-group-text">Accent Color</span><input id="accentColor" type="color" class="form-control" placeholder="HEX Color" style="height: auto;"></div>
<div class="input-group mb-3"><span class="input-group-text">Background Color</span><input id="backgroundColor" type="color" class="form-control" placeholder="HEX Color" style="height: auto;"></div>
<div class="input-group mb-3"><span class="input-group-text">Header Font Color</span><input id="headerFontColor" type="color" class="form-control" placeholder="HEX Color" style="height: auto;"></div>
<div class="input-group mb-3"><span class="input-group-text">Font Color</span><input id="fontColor" type="color" class="form-control" placeholder="HEX Color" style="height: auto;"></div>
</div>
</div>
Expand All @@ -83,10 +82,10 @@ <h5 class="mb-0">Changelog</h5>
<div class="card-body">
<p><strong>Updates for v1.3.0:</strong></p>
<ul>
<li>Finally added the ability to separate channel emotes based on type.</li>
<li>Added the ability to separate channel emotes based on type.</li>
<li>Added a drop-shadow to all images.</li>
<li>Updated the 7TV logo to it's rebranded version.</li>
<sub><em>Thank you for patience regarding extension updates, life happens.</em></sub>
<li>Removed header font color setting - it was redundant.</li>
</ul>
</div>
</div>
Expand Down
28 changes: 22 additions & 6 deletions panel/css/panel.css
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,22 @@
@font-face { font-family: "Inter"; src: url(../../shared/fonts/Inter.ttf); } @font-face { font-family: "Roobert"; src: url(../../shared/fonts/Roobert-Regular.otf); } @font-face { font-family: "Montserrat"; src: url(../../shared/fonts/Montserrat.ttf); }
@font-face {
font-family: "Inter";
src: url(../../shared/fonts/Inter.ttf);
}

@font-face {
font-family: "Roobert";
src: url(../../shared/fonts/Roobert-Regular.otf);
}

@font-face {
font-family: "Montserrat";
src: url(../../shared/fonts/Montserrat.ttf);
}

:root {
--accent-color: #ff3b3e;
--background-color: #1F1F1F;
--font-color: #F1F1F1;
--header-font-color: #FFFFFF;
}

html {
Expand Down Expand Up @@ -38,12 +50,16 @@ h2 {
}

h3 {
width: fit-content;
margin: auto;
margin-bottom: 10px;
color: var(--font-color);
font-size: 4vw;
padding: 2vw;
font-family: 'Montserrat', serif;
font-weight: 600;
border-bottom: 0.75vw solid var(--accent-color);
font-weight: 300;
background: var(--accent-color);
border-radius: 10vw;
padding: 5px 10px;
}

a.button {
Expand Down Expand Up @@ -79,7 +95,7 @@ a.button {
padding-bottom: 20px;
box-shadow: 0px 2px 8px rgb(0,0,0,0.5);
background: var(--accent-color);
color: var(--header-font-color);
color: var(--font-color);
}

#channelInfo h1 {
Expand Down
80 changes: 58 additions & 22 deletions panel/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
</head>

<body>
<!-- Emote Details Popup -->
<div id="emoteDetails" class="hidden">
<div id="detailsText">
<h1 id="detailsEmoteName"></h1>
Expand All @@ -21,40 +22,75 @@ <h2 id="detailsCreatorName"></h2>
</div>
<a style="z-index: 2" id="detailsButton" target="_blank" class="button">Subscribe for Emote</a>
</div>
<!-- Header Bar -->
<div id="channelInfo">
<img id="channelHeaderPFP">
<h1 id="channelHeaderText">My Emotes</h1>
</div>
<!-- Emote List Starts Here -->
<div id="emoteList">
<!-- Twitch Emote Elements -->
<div id="twitch" class="hidden">
<div id="twitch-bar" class="bar">
<img id="channelPFP" class="category_icon">
<img id="channelSubBadge" class="category_icon sub_badge">
<h2 style="margin: 0;">Channel Emotes</h2>
<div id="twitch-collapse" class="collapse"></div>
</div>
<div id="twitchEmotes">
<!-- If enabled, channel emotes will be seperated by type here -->
<div id="twitchFollowerEmotes" class="innerList hidden">
<h3>Follower Emotes</h3>
</div>
<div id="twitchT1Emotes" class="innerList hidden">
<h3>Tier 1 Subscriber Emotes</h3>
</div>
<div id="twitchT2Emotes" class="innerList hidden">
<h3>Tier 2 Subscriber Emotes</h3>
</div>
<div id="twitchT3Emotes" class="innerList hidden">
<h3>Tier 3 Subscriber Emotes</h3>
</div>
<div id="twitchBitsEmotes" class="innerList hidden">
<h3>Bits Reward Emotes</h3>
</div>
<div id="twitchAnimatedEmotes" class="innerList hidden">
<h3>Animated Emotes</h3>
</div>
<!-- If not, they will all appear sorted, but not seperated here. -->
<div id="twitchEmotes"></div>
</div>
<!-- Twitch Follower Emotes -->
<div id="twitch-follower" class="hidden">
<div id="twitch-follower-bar" class="bar">
<img id="channelSubBadge" class="category_icon sub_badge">
<h2 style="margin: 0;">Follower Emotes</h2>
<div id="twitch-follower-collapse" class="collapse"></div>
</div>
<div id="twitchFollowerEmotes"></div>
</div>
<!-- Twitch Tier 1 Emotes -->
<div id="twitch-tier-1" class="hidden">
<div id="twitch-tier-1-bar" class="bar">
<img id="channelSubBadge" class="category_icon sub_badge">
<h2 style="margin: 0;">Tier 1 Emotes</h2>
<div id="twitch-tier-1-collapse" class="collapse"></div>
</div>
<div id="twitchT1Emotes"></div>
</div>
<!-- Twitch Tier 2 Emotes -->
<div id="twitch-tier-2" class="hidden">
<div id="twitch-tier-2-bar" class="bar">
<img id="channelSubBadge" class="category_icon sub_badge">
<h2 style="margin: 0;">Tier 2 Emotes</h2>
<div id="twitch-tier-2-collapse" class="collapse"></div>
</div>
<div id="twitchT2Emotes"></div>
</div>
<!-- Twitch Tier 3 Emotes -->
<div id="twitch-tier-3" class="hidden">
<div id="twitch-tier-3-bar" class="bar">
<img id="channelSubBadge" class="category_icon sub_badge">
<h2 style="margin: 0;">Tier 3 Emotes</h2>
<div id="twitch-tier-3-collapse" class="collapse"></div>
</div>
<div id="twitchT3Emotes"></div>
</div>
<!-- Twitch Bits Emotes -->
<div id="twitch-bits" class="hidden">
<div id="twitch-bits-bar" class="bar">
<img id="channelSubBadge" class="category_icon sub_badge">
<h2 style="margin: 0;">Bits Reward Emotes</h2>
<div id="twitch-bits-collapse" class="collapse"></div>
</div>
<div id="twitchBitsEmotes"></div>
</div>
<!-- Twitch Animated Emotes -->
<div id="twitch-animated" class="hidden">
<div id="twitch-animated-bar" class="bar">
<img id="channelSubBadge" class="category_icon sub_badge">
<h2 style="margin: 0;">Animated Emotes</h2>
<div id="twitch-animated-collapse" class="collapse"></div>
</div>
<div id="twitchAnimatedEmotes"></div>
</div>
<!-- BTTV Emote Elements -->
<div id="bttv" class="hidden">
Expand Down
11 changes: 10 additions & 1 deletion panel/js/elements.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function createEmote(name, src, target, tooltip) {
return mainElement;
}

function showEmoteDetails(name, src, buttonText, buttonLink, isFollow, creatorText) {
function showEmoteDetails(name, src, buttonText, buttonLink, creatorText, isFollow, isUseBits) {
// Set text for detailed emote popup.
document.getElementById('detailsEmoteName').innerText = name;
document.getElementById('detailsCreatorName').innerText = creatorText;
Expand All @@ -33,6 +33,15 @@ function showEmoteDetails(name, src, buttonText, buttonLink, isFollow, creatorTe
document.getElementById('detailsButton').addEventListener('click', () => {
window.Twitch.ext.actions.followChannel(displayname)
})
// If the emote is a bits reward emote
} else if (isUseBits) {
// Remove any previous "href" tag and use Twitch's follow feature
document.getElementById('detailsButton').removeAttribute('href');
document.getElementById('detailsButton').addEventListener('click', () => {
if (window.Twitch.ext.features.isBitsEnabled) {
window.Twitch.ext.bits.useBits("spend-500-bits")
}
})
// If the emote is not a follower emote
} else {
// Set the "href" tag to specified link if one exists.
Expand Down
Loading

0 comments on commit 31bb012

Please sign in to comment.