|
|
|
|
@ -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>;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function Index() {
|
|
|
|
|
return (
|
|
|
|
|
<div className="page">
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Trick - Index</title>
|
|
|
|
|
</Head>
|
|
|
|
|
|
|
|
|
|
<Header />
|
|
|
|
|
const client_id = "edpx4oisrkpnrlx47b7a2p3govy6qm";
|
|
|
|
|
const client_secret = "dqr2glvdhr7uyn3bf3biu48977rfwo";
|
|
|
|
|
|
|
|
|
|
<div className="container">
|
|
|
|
|
<article className="content">
|
|
|
|
|
export default function Index({ motto, twitch_online }) {
|
|
|
|
|
return (
|
|
|
|
|
<div className="page">
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Trick - Index</title>
|
|
|
|
|
</Head>
|
|
|
|
|
|
|
|
|
|
<Header />
|
|
|
|
|
|
|
|
|
|
<div className="container">
|
|
|
|
|
<article className="content">
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<TwitchPopup show={twitch_online} />
|
|
|
|
|
|
|
|
|
|
<section className="card">
|
|
|
|
|
<div className={styles.avatar}>
|
|
|
|
|
<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>
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<Footer />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</article>
|
|
|
|
|
</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;
|
|
|
|
|
|
|
|
|
|
<Footer />
|
|
|
|
|
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()
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
