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 3 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 />

132
pages/index.js
Unescape View File

@ -3,59 +3,109 @@ 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>
<title>Trick - Index</title> <title>Trick - Index</title>
</Head> </Head>
<Header /> <Header />
<div className="container"> <div className="container">
<article className="content"> <article className="content">
<section className="card"> <div>
<div className={styles.avatar}> <TwitchPopup show={twitch_online} />
<div className={styles.icon}>
<img src="/trickwow.png"></img> <section className="card">
<div className={styles.avatar}>
<div>
<img src="/trickwow.png"></img>
</div>
<div>
<h1>Hi, I'm Trick!</h1>
<h4>{motto}</h4>
</div>
</div> </div>
<div> <div>
<h1>Hi, I'm Trick!</h1> <h3>About me</h3>
<h4><RandomMotto /></h4> <div className="flex">
<p>
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,
oh and I play dnd... And that's just about me in a nutshell.
</p>
</div>
</div> </div>
</div> </section>
</div>
<div>
<h3>About me</h3>
<p>
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,
oh and I play dnd... And that's just about me in a nutshell.
</p>
</div>
</section>
<Socials /> <Socials />
</article> </article>
</div> </div>
<Footer />
</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'];
}
<Footer /> 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;
}
</div> 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