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",
"react": "17.x",
"react-dom": "17.x",
"react-twitch-embed": "^2.1.0",
"typescript": "^4.3.4"
},
"devDependencies": {

2
pages/commissions.js
Unescape View File

@ -19,7 +19,7 @@ export default function Commissions() {
<div className="card">
<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 />

132
pages/index.js
Unescape View File

@ -3,59 +3,109 @@ import styles from '../styles/Index.module.css'
import Header from '../components/header';
import Footer from '../components/footer';
import Socials from '../components/socials';
import TwitchPopup from '../components/twitchpopup';
function RandomMotto(props) {
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 <span>{Mottos[randomNumber]}</span>;
}
const client_id = "edpx4oisrkpnrlx47b7a2p3govy6qm";
const client_secret = "dqr2glvdhr7uyn3bf3biu48977rfwo";
export default function Index() {
return (
<div className="page">
<Head>
<title>Trick - Index</title>
</Head>
export default function Index({ motto, twitch_online }) {
return (
<div className="page">
<Head>
<title>Trick - Index</title>
</Head>
<Header />
<Header />
<div className="container">
<article className="content">
<div className="container">
<article className="content">
<section className="card">
<div className={styles.avatar}>
<div className={styles.icon}>
<img src="/trickwow.png"></img>
<div>
<TwitchPopup show={twitch_online} />
<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>
<h1>Hi, I'm Trick!</h1>
<h4><RandomMotto /></h4>
<h3>About me</h3>
<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>
<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>
</section>
</div>
<Socials />
</article>
</div>
</article>
</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 {
height: 200px;
display: flex;
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 {
font-size: 2em;
}
@ -12,17 +23,18 @@
font-weight: normal;
}
.avatar > .icon {
width: 25%;
.avatar > div:first-child {
min-width: 100px;
max-width: 200px;
transition-duration: 0.3s;
}
.avatar > .icon > img {
.avatar > div:first-child > img {
box-shadow: var(--box-shadow);
border-radius: 100%;
}
.avatar > .icon:hover {
.avatar > div:first-child:hover {
transition-duration: 0.3s;
transform: scale(1.1) rotate(-20deg);
}
@ -37,8 +49,8 @@
gap: unset;
}
.avatar > .icon {
width: 100%;
.avatar > div:first-child {
margin: auto;
}
.avatar h1 {

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

@ -17,7 +17,7 @@
color: white;
transition-duration: 0.1s;
font-family: 'Dela Gothic One', cursive;
width: 300px;
width: 100%;
}
.buttons > a:hover {
@ -26,8 +26,8 @@
}
/* mobile */
@media(max-aspect-ratio: 4/3) {
/* @media(max-aspect-ratio: 4/3) {
.buttons > a {
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 {
max-width: 100%;
border-radius: 10px;
}
hr {
@ -66,6 +67,11 @@ hr {
flex-direction: row;
}
.flex {
display: flex;
gap: 1em;
}
/* page elements */
.card {

Write Preview
Loading…
Cancel
Save