Mid
/
trickthefox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added twitch notification on homepage when live

Browse Source
main
Midnight 4 years ago
parent d1948c5fe9
commit 02309c1399
8 changed files with 146 additions and 56 deletions
Show Stats Download Patch File Download Diff File

18
components/twitchpopup.js
Unescape View File

@ -0,0 +1,18 @@
import styles from '../styles/components/TwitchPopup.module.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { TwitchEmbed } from 'react-twitch-embed';
export default function TwitchPopup({ show }) {
if(show == true) {
return (
<div className="card" style={{ backgroundColor: "rgba(79,79,255,1)", marginBottom: "1em" }}>
<h1 className={styles.h1}>I'm currently live on Twitch!</h1>
<TwitchEmbed id="trick_the_fox" channel="trick_the_fox" theme="dark" autoplay="true" width="100%" withChat={false} />
</div>
)
} else {
return ( <span></span> )
}
}

1
package.json
Unescape View File

@ -18,6 +18,7 @@
"next-images": "^1.8.1", "next-images": "^1.8.1",
"react": "17.x", "react": "17.x",
"react-dom": "17.x", "react-dom": "17.x",
"react-twitch-embed": "^2.1.0",
"typescript": "^4.3.4" "typescript": "^4.3.4"
}, },
"devDependencies": { "devDependencies": {

2
pages/commissions.js
Unescape View File

@ -19,7 +19,7 @@ export default function Commissions() {
<div className="card"> <div className="card">
<h1 className="h-unset">Commission sheet</h1> <h1 className="h-unset">Commission sheet</h1>
<h4 className="h-unset"><a href="/contact">Contact me</a> for more information.</h4> <h4 className="h-unset"><a href="/contact" className="link">Contact me</a> for more information.</h4>
<hr /> <hr />

76
pages/index.js
Unescape View File

@ -3,19 +3,12 @@ import styles from '../styles/Index.module.css'
import Header from '../components/header'; import Header from '../components/header';
import Footer from '../components/footer'; import Footer from '../components/footer';
import Socials from '../components/socials'; import Socials from '../components/socials';
import TwitchPopup from '../components/twitchpopup';
function RandomMotto(props) { const client_id = "edpx4oisrkpnrlx47b7a2p3govy6qm";
const Mottos = [ const client_secret = "dqr2glvdhr7uyn3bf3biu48977rfwo";
"Yesterday is history, tomorrow is a mystery and today is a gift that's why it's called the present",
"Just have fun!",
"Live and let go",
"Keep calm and carry on"
];
const randomNumber = Math.floor(Math.random() * Mottos.length);
return <span>{Mottos[randomNumber]}</span>;
}
export default function Index() { export default function Index({ motto, twitch_online }) {
return ( return (
<div className="page"> <div className="page">
<Head> <Head>
@ -27,26 +20,32 @@ export default function Index() {
<div className="container"> <div className="container">
<article className="content"> <article className="content">
<div>
<TwitchPopup show={twitch_online} />
<section className="card"> <section className="card">
<div className={styles.avatar}> <div className={styles.avatar}>
<div className={styles.icon}> <div>
<img src="/trickwow.png"></img> <img src="/trickwow.png"></img>
</div> </div>
<div> <div>
<h1>Hi, I'm Trick!</h1> <h1>Hi, I'm Trick!</h1>
<h4><RandomMotto /></h4> <h4>{motto}</h4>
</div> </div>
</div> </div>
<div> <div>
<h3>About me</h3> <h3>About me</h3>
<div className="flex">
<p> <p>
I'm a gay femboy nurse fox who likes figure skating, running and dancing, I'm a gay femboy nurse fox who likes figure skating, running and dancing,
addicted to vr and video making and I'm always listening to music, addicted to vr and video making and I'm always listening to music,
oh and I play dnd... And that's just about me in a nutshell. oh and I play dnd... And that's just about me in a nutshell.
</p> </p>
</div> </div>
</div>
</section> </section>
</div>
<Socials /> <Socials />
@ -59,3 +58,54 @@ export default function Index() {
</div> </div>
) )
} }
async function getAccessToken() {
const req = await fetch("https://id.twitch.tv/oauth2/token?client_id=" + client_id + "&client_secret=" + client_secret + "&grant_type=client_credentials", {
method: "POST",
headers: {
'Content-Type': 'application/json'
}
})
const data = await req.json();
return data['access_token'];
}
async function getIsUserLive() {
const access_token = await getAccessToken();
let userId = 268280947; // trick_the_fox;
const req = await fetch("https://api.twitch.tv/helix/streams?user_id=" + userId, {
method: "GET",
headers: {
'Content-Type': 'application/json',
"Authorization": "Bearer " + access_token,
"Client-ID": client_id,
}
});
const data = await req.json();
if(data['data'].length > 0) {
return true;
}
return false;
}
function RandomMotto() {
const Mottos = [
"Yesterday is history, tomorrow is a mystery and today is a gift that's why it's called the present",
"Just have fun!",
"Live and let go",
"Keep calm and carry on"
];
const randomNumber = Math.floor(Math.random() * Mottos.length);
return Mottos[randomNumber];
}
export async function getServerSideProps() {
return {
props: {
motto: RandomMotto(),
twitch_online: await getIsUserLive()
}
};
}

26
styles/Index.module.css
Unescape View File

@ -1,9 +1,20 @@
.avatar { .avatar {
height: 200px;
display: flex; display: flex;
gap: 2em; gap: 2em;
} }
.avatar div:last-child {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.5em;
width: 90%;
}
.avatar div:last-child > * {
margin: unset;
}
.avatar h1 { .avatar h1 {
font-size: 2em; font-size: 2em;
} }
@ -12,17 +23,18 @@
font-weight: normal; font-weight: normal;
} }
.avatar > .icon { .avatar > div:first-child {
width: 25%; min-width: 100px;
max-width: 200px;
transition-duration: 0.3s; transition-duration: 0.3s;
} }
.avatar > .icon > img { .avatar > div:first-child > img {
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
border-radius: 100%; border-radius: 100%;
} }
.avatar > .icon:hover { .avatar > div:first-child:hover {
transition-duration: 0.3s; transition-duration: 0.3s;
transform: scale(1.1) rotate(-20deg); transform: scale(1.1) rotate(-20deg);
} }
@ -37,8 +49,8 @@
gap: unset; gap: unset;
} }
.avatar > .icon { .avatar > div:first-child {
width: 100%; margin: auto;
} }
.avatar h1 { .avatar h1 {

6
styles/components/Socials.module.css
Unescape View File

@ -17,7 +17,7 @@
color: white; color: white;
transition-duration: 0.1s; transition-duration: 0.1s;
font-family: 'Dela Gothic One', cursive; font-family: 'Dela Gothic One', cursive;
width: 300px; width: 100%;
} }
.buttons > a:hover { .buttons > a:hover {
@ -26,8 +26,8 @@
} }
/* mobile */ /* mobile */
@media(max-aspect-ratio: 4/3) { /* @media(max-aspect-ratio: 4/3) {
.buttons > a { .buttons > a {
width: 100%; width: 100%;
} }
} } */

3
styles/components/TwitchPopup.module.css
Unescape View File

@ -0,0 +1,3 @@
.h1 {
text-align: center;
}

6
styles/globals.css
Unescape View File

@ -34,6 +34,7 @@ h1, h2, h3 {
img { img {
max-width: 100%; max-width: 100%;
border-radius: 10px;
} }
hr { hr {
@ -66,6 +67,11 @@ hr {
flex-direction: row; flex-direction: row;
} }
.flex {
display: flex;
gap: 1em;
}
/* page elements */ /* page elements */
.card { .card {

Write Preview
Loading…
Cancel
Save