From 02309c1399af12ff0b93891acb07156237766efe Mon Sep 17 00:00:00 2001 From: midblep Date: Thu, 24 Jun 2021 02:07:25 +0200 Subject: [PATCH] added twitch notification on homepage when live --- components/twitchpopup.js | 18 +++ package.json | 1 + pages/commissions.js | 2 +- pages/index.js | 140 +++++++++++++++-------- styles/Index.module.css | 26 +++-- styles/components/Socials.module.css | 6 +- styles/components/TwitchPopup.module.css | 3 + styles/globals.css | 6 + 8 files changed, 146 insertions(+), 56 deletions(-) create mode 100644 components/twitchpopup.js create mode 100644 styles/components/TwitchPopup.module.css diff --git a/components/twitchpopup.js b/components/twitchpopup.js new file mode 100644 index 0000000..82afded --- /dev/null +++ b/components/twitchpopup.js @@ -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 ( +
+

I'm currently live on Twitch!

+ +
+ ) + } else { + return ( ) + } +} \ No newline at end of file diff --git a/package.json b/package.json index e9a216b..74ee6b3 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/pages/commissions.js b/pages/commissions.js index 4adfd26..49a78b4 100644 --- a/pages/commissions.js +++ b/pages/commissions.js @@ -19,7 +19,7 @@ export default function Commissions() {

Commission sheet

-

Contact me for more information.

+

Contact me for more information.

diff --git a/pages/index.js b/pages/index.js index 1e6c299..a4f8682 100644 --- a/pages/index.js +++ b/pages/index.js @@ -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 {Mottos[randomNumber]}; - } - -export default function Index() { - return ( -
- - Trick - Index - - -
+const client_id = "edpx4oisrkpnrlx47b7a2p3govy6qm"; +const client_secret = "dqr2glvdhr7uyn3bf3biu48977rfwo"; -
-
+export default function Index({ motto, twitch_online }) { + return ( +
+ + Trick - Index + + +
+ +
+
+ +
+ -
-
-
- +
+
+
+ +
+
+

Hi, I'm Trick!

+

{motto}

+
+
-

Hi, I'm Trick!

-

+

About me

+
+

+ 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. +

+
-
- -
-

About me

-

- 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. -

-
-
- + +
+ + +
+
+ +
+ + +
+ ) +} -
-
+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; -
- ) +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() + } + }; } + diff --git a/styles/Index.module.css b/styles/Index.module.css index 5699a86..10a4090 100644 --- a/styles/Index.module.css +++ b/styles/Index.module.css @@ -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 { diff --git a/styles/components/Socials.module.css b/styles/components/Socials.module.css index 32b97b8..d1bc94d 100644 --- a/styles/components/Socials.module.css +++ b/styles/components/Socials.module.css @@ -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%; } -} \ No newline at end of file +} */ \ No newline at end of file diff --git a/styles/components/TwitchPopup.module.css b/styles/components/TwitchPopup.module.css new file mode 100644 index 0000000..d724268 --- /dev/null +++ b/styles/components/TwitchPopup.module.css @@ -0,0 +1,3 @@ +.h1 { + text-align: center; +} \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index b671ddf..65c7a1c 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -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 {