Skip to content

Commit

Permalink
Merge branch 'next' of github.com:DarkIntaqt/challenges into next
Browse files Browse the repository at this point in the history
  • Loading branch information
BlossomiShymae committed Feb 15, 2023
2 parents 101c046 + 41bba98 commit ff3512f
Show file tree
Hide file tree
Showing 8 changed files with 202 additions and 25 deletions.
10 changes: 10 additions & 0 deletions components/Loader.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import css from "challenges/styles/loader.module.scss";

/**
* Simple Loading component which can be styled afterwards
* @param {props} props
* @returns Loader Component
*/
export default function Loader(props) {
return <div {...props} className={css.loader}></div>;
}
82 changes: 67 additions & 15 deletions layouts/Header.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Component, createRef } from "react";
import { withRouter } from "next/router";
import Link from "next/link";

import css from "challenges/styles/header.module.scss";

import Link from "next/link";
import Logo from "challenges/assets/logo.svg";


Expand All @@ -18,21 +20,25 @@ import {
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";


export class Header extends Component {
constructor() {
super();
class Header extends Component {
constructor(props) {
super(props);

this.props = props;

this.header = createRef(null);
this.headerPlaceholder = createRef(null);
this.buttonText = createRef(null);

this.toggleWidth = this.toggleWidth.bind(this);

/**
* true = expanded
* false = collapsed
*/
*/
this.width = true;


this.toggleWidth = this.toggleWidth.bind(this);
this.highlightActiveLink = this.highlightActiveLink.bind(this);
}


Expand All @@ -57,56 +63,100 @@ export class Header extends Component {
}


/**
* Highlights the current route by adding a the
* css.active class
*/
highlightActiveLink() {

const pathname = this.props.router.asPath;

const results = document.querySelectorAll(`.${css.scrollSection} a[href="${pathname}"]`);
const oldRouteElements = document.querySelectorAll(`.${css.scrollSection} a.${css.active}`);

for (let i = 0; i < oldRouteElements.length; i++) {
const old = oldRouteElements[i];
old.classList.remove(css.active);

}

for (let i = 0; i < results.length; i++) {
const result = results[i];
result.classList.add(css.active);
}

}


componentDidMount() {

this.props.router.events.on("routeChangeComplete", this.highlightActiveLink);
this.props.router.events.on("routeChangeError", this.highlightActiveLink);
this.highlightActiveLink();

}


componentWillUnmount() {

this.props.router.events.off("routeChangeComplete", this.highlightActiveLink);
this.props.router.events.off("routeChangeError", this.highlightActiveLink);

}


render() {

const router = this.router;

return <>
<section className={css.headerPlaceholder} ref={this.headerPlaceholder}>
<nav className={css.header} id="header" ref={this.header}>

<Link href="/" >
<Link href="/" prefetch={false}>
<Logo />
<p>Challenge Tracker</p>
</Link>

<div className={css.scrollSection}>

<Link href="/">
<Link href="/" prefetch={false}>
<FontAwesomeIcon
icon={faHouse}
/>

<p>Home</p>
</Link>

<Link href="/challenges">
<Link href="/challenges" prefetch={false}>
<FontAwesomeIcon
icon={faCompass}
/>
<p>Challenges</p>
</Link>

<Link href="/challenges/0">
<Link href="/challenges/0" prefetch={false}>
<FontAwesomeIcon
icon={faRankingStar}
/>
<p>Leaderboards</p>
</Link>

<Link href="/titles">
<Link href="/titles" prefetch={false}>
<FontAwesomeIcon
icon={faAward}
/>
<p>Titles</p>
</Link>

<Link href="/communities">
<Link href="/communities" prefetch={false}>
<FontAwesomeIcon
icon={faUserGroup}
/>
<p>Communities</p>
</Link>

<Link href="/settings">
<Link href="/settings" prefetch={false}>
<FontAwesomeIcon
icon={faGear}
/>
Expand All @@ -131,4 +181,6 @@ export class Header extends Component {
</>;

}
}
}

export default withRouter(Header);
2 changes: 1 addition & 1 deletion layouts/Layout.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Header } from "./Header";
import Header from "./Header";
import css from "challenges/styles/layout.module.scss";

export default function Layout(props) {
Expand Down
85 changes: 79 additions & 6 deletions pages/_app.js
Original file line number Diff line number Diff line change
@@ -1,33 +1,106 @@
import { Noto_Sans, Noto_Sans_JP, Noto_Sans_KR, Source_Sans_Pro } from "@next/font/google";
import Layout from "challenges/layouts/Layout";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

import "challenges/styles/global.css";

import Loader from "challenges/components/Loader";
import Layout from "challenges/layouts/Layout";


/**
* Fonts used for this Site.
*
* Noto is the default font. Additionally, notoJP and
* notoKR should cover most of the ASIA regions to
* not cause any font issues.
*
* Source Sans Pro is currently only used for the logo
*/
const noto = Noto_Sans({
weight: ["300", "400", "700"],
subsets: ["latin", "greek"],
variable: "--Noto"
});

const notoJP = Noto_Sans_JP({
weight: ["400", "700"],
subsets: ["latin"],
variable: "--NotoJP"
});

const notoKR = Noto_Sans_KR({
weight: ["400", "700"],
subsets: ["latin"],
variable: "--NotoKR"
});

const source = Source_Sans_Pro({
weight: ["700"],
subsets: ["latin"],
variable: "--Source"
});

export default function App({ Component, pageProps }) {

export default function ChallengeTracker({ Component, pageProps }) {

/**
* Handler to show a loading animation instead of a
* stuck screen when changing routes
*/
const router = useRouter();
const [lastKnownUrl, setLastKnownUrl] = useState(router.asPath);
const [loading, setLoading] = useState(false);


/**
* Handle the loading animation
*
* Set the state "loading" to true if the page is
* currently changing, and render the <Loading/>
* componen instead.
*/
useEffect(() => {
const handleStart = (url) => {
if (url === lastKnownUrl) {
return;
}
setLastKnownUrl(url);
setLoading(true);
};

const handleStop = () => {
setLoading(false);
};

router.events.on("routeChangeStart", handleStart);
router.events.on("routeChangeComplete", handleStop);
router.events.on("routeChangeError", handleStop);

return () => {
/**
* Unmount, even tho probably unnecessary as in _app
*/
router.events.off("routeChangeStart", handleStart);
router.events.off("routeChangeComplete", handleStop);
router.events.off("routeChangeError", handleStop);
};
}, [router, setLoading, lastKnownUrl, setLastKnownUrl]);


/**
* Return the app body in the <Layout/>.
* Shows a loader if(loading === true)
*/
return <Layout className={`${noto.variable} ${notoJP.variable} ${notoKR.variable} ${source.variable}`}>
<Component {...pageProps} />

{
loading
? <Loader style={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%,-50%)"
}} />
: <Component {...pageProps} />
}

</Layout>;
}
2 changes: 1 addition & 1 deletion styles/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ $selected: rgb(13, 189, 255) !default;
$light0: #fff !default;
$light1: #fff !default;
$light2: rgb(206, 206, 210) !default;
$light3: rgb(200, 200, 204) !default;
$light3: rgb(180, 180, 184) !default;

/* color variables */
$win: #4287f5 !default;
Expand Down
14 changes: 12 additions & 2 deletions styles/header.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -78,23 +78,33 @@ $width: 230px;
padding: 20px 10px;
overflow: hidden;

color: $light2;
color: $light3;
white-space: nowrap;

transition: .25s color;

&.active {

p,
svg {
color: $light0;
}
}


p {
padding: 0;
margin: 0;
flex: 1;
color: $light2;
color: $light3;
font-size: 1rem;
padding-left: 10px;

transition: .25s color;
}

svg {
color: $light3;
text-align: center;
width: 2rem;
}
Expand Down
27 changes: 27 additions & 0 deletions styles/loader.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
@import 'variables';

.loader {
height: 30px;
width: 30px;
font-size: 10px;
position: relative;
text-indent: -9999em;
box-sizing: border-box;
border-left: 3px solid $dark3;
border-right: 3px solid $dark3;
border-bottom: 3px solid $dark3;
border-top: 3px solid $selected;
transform: translateZ(0);
animation: load 1.3s infinite cubic-bezier(.35, .72, .54, .90);
border-radius: 50%;

@keyframes load {
from {
transform: rotate(0deg)
}

to {
transform: rotate(360deg)
}
}
}
5 changes: 5 additions & 0 deletions vercel.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"github": {
"silent": true
}
}

0 comments on commit ff3512f

Please sign in to comment.