Safari improvements; april fools version + small changes
diff --git a/Components/Header.js b/Components/Header.js
index f526591..7d7a1c7 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -107,11 +107,13 @@
}
return (
- <div className={Styles.header} style={{
+ <div className={Styles.header} style={{
margin: "0",
minHeight: props.fullscreen ? "calc(100vh - 42px)" : "calc(100vh - (4 * max(2em, 4vw)) - 1em)",
+ transform: props.season.season === "aprilFools" ? "rotate(2.5deg)" : "none",
+ transition: "transform 1s cubic-bezier(.47,1.64,.41,.8), background-color 0.3s ease-in-out"
}} id={props.id ? props.id : null}>
- <div className={Styles.container} style={{minHeight: props.fullscreen ? "calc(100vh - 42px)" : "calc(100vh - (4 * max(2em, 4vw)) - 1em)",}}>
+ <div className={Styles.container} style={{minHeight: props.fullscreen ? "calc(100vh - 42px)" : "calc(100vh - (4 * max(2em, 4vw)) - 1em)"}}>
{imagesPreloaded}
<div className={Styles.backgroundGradient} style={{
backgroundImage: `linear-gradient(69.44deg, #${props.gradient[0]} 0%, #${props.gradient[1]} 100%)`,
diff --git a/Components/Panels.js b/Components/Panels.js
index 7aaa658..b700cf7 100644
--- a/Components/Panels.js
+++ b/Components/Panels.js
@@ -6,6 +6,7 @@
class PanelClass extends Component {
constructor(props) {
super(props);
+ this.panel = react.createRef();
}
getStyle() {
@@ -16,12 +17,20 @@
}
render() {
- return <div className={Styles.panel} style={this.getStyle()} id={this.props.id} tabIndex={0}>
- {
- react.Children.toArray(this.props.children).map((child, index) => {
- return child;
- })
- }
+ let style = this.getStyle();
+ if (this.props.forceStyle) {
+ style = {...style, ...this.props.forceStyle};
+ if (this.props.forceStyle.transform) {
+ style = {...this.getStyle(), transition: "transform ease-in-out 0.5s"};
+ style.transform += " " + this.props.forceStyle.transform;
+ }
+ }
+ return <div className={Styles.panel} style={style} id={this.props.id} tabIndex={0}>
+ {
+ react.Children.toArray(this.props.children).map((child, index) => {
+ return child;
+ })
+ }
</div>
}
}
@@ -30,13 +39,12 @@
class AutoLayout extends Component {
constructor(props) {
super(props);
- this.children = react.Children.toArray(this.props.children)
this.validity = []
this.calculateValidity()
}
calculateValidity() {
- this.children.map((item, index) => {
+ react.Children.toArray(this.props.children).map((item, index) => {
if ( index > 0 && item.props.halfSize && this.validity[index - 1] === 'half1' ) {
this.validity[index] = 'half2';
} else if ( index > 0 && !item.props.halfSize && this.validity[index - 1] === 'half1' ) {
@@ -56,16 +64,17 @@
}
render() {
+ const children = react.Children.toArray(this.props.children)
return (
- <div className={Styles.container}>
+ <div className={Styles.container} ref={this.props.forwardedRef}>
{
- this.children.map((item, index) => {
+ children.map((item, index) => {
if ( this.validity[index] === 'full' ) {
- return this.children[index]
+ return children[index]
} else if ( this.validity[index] === 'half1' ) {
return <div key={index} className={Styles.doublePanel}>
- {this.children[index]}
- {this.children[index + 1]}
+ {children[index]}
+ {children[index + 1]}
</div>
}
})
diff --git a/package.json b/package.json
index 400bd8d..a6512ff 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
"react-fade-in": "^2.0.1",
"react-fast-marquee": "^1.3.1",
"react-hcaptcha": "^0.1.1",
- "react-in-viewport": "^1.0.0-alpha.20",
+ "react-in-viewport": "^1.0.0-alpha.29",
"react-indiana-drag-scroll": "^2.1.0",
"react-redux": "^7.2.4",
"react-rewards": "^2.0.3",
diff --git a/pages/01189998819991197253.js b/pages/01189998819991197253.js
index 88b3f13..768763f 100644
--- a/pages/01189998819991197253.js
+++ b/pages/01189998819991197253.js
@@ -28,6 +28,7 @@
props.showMessage(quotes[Math.floor(Math.random() * quotes.length)])
})}]}
fullscreen={true}
+ season={props.season}
/>
</>
)
diff --git a/pages/403.js b/pages/403.js
index ca404b1..cb2127f 100644
--- a/pages/403.js
+++ b/pages/403.js
@@ -6,7 +6,6 @@
super(props);
}
-
render() {
return (
<>
@@ -17,6 +16,7 @@
wave="web/waves/header/rsm"
buttons={[{color: "F27878", buttonText: "ffffff", text: "Go Home", link: "/#"}]}
fullscreen={true}
+ season={this.props.season}
/>
</>
)
diff --git a/pages/404.js b/pages/404.js
index a9bdce5..9e62237 100644
--- a/pages/404.js
+++ b/pages/404.js
@@ -6,7 +6,6 @@
super(props);
}
-
render() {
return (
<>
@@ -22,6 +21,7 @@
target: true
}]}
fullscreen={true}
+ season={this.props.season}
/>
</>
)
diff --git a/pages/418.js b/pages/418.js
index 68daf86..c240c21 100644
--- a/pages/418.js
+++ b/pages/418.js
@@ -6,7 +6,6 @@
super(props);
}
-
render() {
return (
<>
@@ -17,6 +16,7 @@
wave="web/waves/header/rsm"
buttons={[{color: "F27878", buttonText: "ffffff", text: "Go Home", link: "/#"}]}
fullscreen={true}
+ season={this.props.season}
/>
</>
)
diff --git a/pages/500.js b/pages/500.js
index f0c12ef..7ec247d 100644
--- a/pages/500.js
+++ b/pages/500.js
@@ -6,7 +6,6 @@
super(props);
}
-
render() {
return (
<>
@@ -22,6 +21,7 @@
target: true
}]}
fullscreen={true}
+ season={this.props.season}
/>
</>
)
diff --git a/pages/_app.js b/pages/_app.js
index 2b1dbad..64771a9 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -2,8 +2,8 @@
import NavBar from '../Components/NavBar';
import { ThemeProvider } from 'theme-ui';
import React, {useEffect} from 'react';
+import { useRouter } from 'next/router';
import Styles from '../styles/globals.module.css';
-import { getSeason } from './api/season';
import Christmas from '../Components/overlays/christmas';
const theme = {
@@ -55,12 +55,21 @@
const [subBar, setSubBar] = React.useState(false);
const [currentElement, setElement] = React.useState(<></>);
+ const router = useRouter();
const [season, setSeason] = React.useState({ season: "normal", filePath: "normal" });
useEffect(() => async () => {
- let season = await (await fetch("/api/season")).json();
- setSeason(season);
- }, [season])
+ // const params = router.query["theme"];
+ // console.log(router.query["theme"])
+ // if (params) {
+ // setSeason({season: params, filePath: "seasonal/" + params});
+ // return;
+ // }
+ let newSeason = await (await fetch("/api/season")).json();
+ // newSeason = {season: "trans", filePath: "seasonal/trans"}
+ setSeason({...newSeason });
+ console.log("theme is now " + newSeason.season)
+ }, [season.season, router])
const showSubBar = (element, timeout, positioning="left") => {
setSubBar(true);
@@ -70,7 +79,7 @@
setElement(element);
if (timeout) {
setTimeout(() => {
- setSubBar(false);
+ setSubBar(false);
setTimeout(() => {
setElement(<></>);
}, 0.31 * 1000)
@@ -114,10 +123,11 @@
/>
<div className={Styles.container} style={{
pointerEvents: "none",
+ height: "1000vh"
}}>{Overlay}</div>
<div className={Styles.container} />
</ThemeProvider>
</>
}
-export default App
+export default App;
diff --git a/pages/castaway.js b/pages/castaway.js
index 9ad8ca8..370156d 100644
--- a/pages/castaway.js
+++ b/pages/castaway.js
@@ -1,7 +1,7 @@
import Header from '../Components/Header'
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
-export default function Home() {
+export default function Home(props) {
return (
<>
<Header
@@ -12,6 +12,7 @@
buttons={[
{color: "78ECF2", buttonText: "000000", link: "#timeline", text: "Timeline"}
]}
+ season={props.season}
/>
<AutoLayout>
<Panel halfSize={false} id="timeline">
diff --git a/pages/clicksforms.js b/pages/clicksforms.js
index 155d605..ebf9a09 100644
--- a/pages/clicksforms.js
+++ b/pages/clicksforms.js
@@ -33,6 +33,7 @@
{id: "invite", color: "775EBF", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
]}
callback={() => this.highlightSection()}
+ season={this.props.season}
/>
<AutoLayout>
<Panel halfSize={true} id="commands">
diff --git a/pages/clicksforms/error/deleted.js b/pages/clicksforms/error/deleted.js
index 0d7a49b..8d78a9f 100644
--- a/pages/clicksforms/error/deleted.js
+++ b/pages/clicksforms/error/deleted.js
@@ -15,6 +15,7 @@
wave="web/waves/header/rsm"
buttons={[]}
fullscreen={true}
+ season={this.props.season}
/>
)
}
diff --git a/pages/clicksforms/error/nocode.js b/pages/clicksforms/error/nocode.js
index dfb7b6e..f8955ec 100644
--- a/pages/clicksforms/error/nocode.js
+++ b/pages/clicksforms/error/nocode.js
@@ -15,6 +15,7 @@
wave="web/waves/header/rsm"
buttons={[]}
fullscreen={true}
+ season={this.props.season}
/>
)
}
diff --git a/pages/clicksforms/error/unknown.js b/pages/clicksforms/error/unknown.js
index e3ab125..4cd1e9c 100644
--- a/pages/clicksforms/error/unknown.js
+++ b/pages/clicksforms/error/unknown.js
@@ -15,6 +15,7 @@
wave="web/waves/header/rsm"
buttons={[]}
fullscreen={true}
+ season={this.props.season}
/>
)
}
diff --git a/pages/clicksforms/form.js b/pages/clicksforms/form.js
index aa1b032..38cfcb5 100644
--- a/pages/clicksforms/form.js
+++ b/pages/clicksforms/form.js
@@ -6,7 +6,7 @@
export default class Form extends Component {
constructor(props) {
super(props);
-}
+ }
render() {
return (
@@ -17,6 +17,7 @@
gradient={["71AFE5", "6576CC"]}
wave="web/waves/header/clicksforms"
buttons={[]}
+ season={this.props.season}
/>
<div className={Styles.form}>
<div className={Styles.header}>
diff --git a/pages/cpm.js b/pages/cpm.js
index 97bffee..a016676 100644
--- a/pages/cpm.js
+++ b/pages/cpm.js
@@ -4,7 +4,7 @@
import Header from '../Components/Header';
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
-export default function Home() {
+export default function Home(props) {
return (
<>
<Header
@@ -13,6 +13,10 @@
gradient={["6576CC", "4B5899"]}
wave="web/waves/header/cmp"
buttons={[]}
+ index={true}
+ fullscreen={true}
+ showSubBar={props.showSubBar}
+ season={props.season}
/>
<AutoLayout>
<Panel halfSize={false}>
@@ -103,7 +107,7 @@
<Text>Your parents were right, this place is terrifying</Text>
<CardRow>
<Card
- wave="discord" title="Discord" subtext="No, dat cord sorry for the confusion"
+ wave="discord" title="This cord" subtext="No, dat cord sorry for the confusion"
icon="web/icons/discord"
buttons={[
{color: "404EED", link: "https://discord.gg/bPaNnxe", text: "Join"}
diff --git a/pages/gps.js b/pages/gps.js
index 8b2e194..0e64c39 100644
--- a/pages/gps.js
+++ b/pages/gps.js
@@ -3,7 +3,7 @@
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
import { List, ListItem, Code } from '../Components/Texttools';
-export default function Home() {
+export default function Home(props) {
return (
<>
<Header
@@ -16,6 +16,7 @@
{color: "71AFE5", buttonText: "FFFFFF", link: "#commands", text: "Commands"},
{color: "6576CC", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
]}
+ season={props.season}
/>
<AutoLayout>
<Panel halfSize={false} id="features">
diff --git a/pages/hooky.js b/pages/hooky.js
index b204daf..921dde1 100644
--- a/pages/hooky.js
+++ b/pages/hooky.js
@@ -2,7 +2,7 @@
import Header from '../Components/Header'
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
-export default function Home() {
+export default function Home(props) {
return (
<>
<Header
@@ -13,6 +13,7 @@
buttons={[
{color: "EDC575", buttonText: "000000", link: "#invite", text: "Invite"}
]}
+ season={props.season}
/>
<AutoLayout>
<Panel halfSize={false} id="invite">
diff --git a/pages/index.js b/pages/index.js
index d2b689f..894aca3 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -18,6 +18,9 @@
subtext = "Creating projects that click"
}
}
+ const aprilFoolsStyle = props.season.season === "aprilFools" ? {
+ transform: props.season.season === "aprilFools" ? "rotate(1deg)" : "none"
+ } : {};
return (
<>
@@ -32,9 +35,10 @@
index={true}
fullscreen={true}
showSubBar={props.showSubBar}
+ season={props.season}
/>
<AutoLayout>
- <Panel halfSize={false}>
+ <Panel halfSize={false} forceStyle={aprilFoolsStyle}>
<Title>Projects</Title>
<Divider />
<Text>{"Here's things we've released and are in the making"}</Text>
@@ -101,7 +105,7 @@
/>
</CardRow>
</Panel>
- <Panel halfSize={true}>
+ <Panel halfSize={true} forceStyle={aprilFoolsStyle}>
<Title>Code Bases</Title>
<Divider />
<Text>We release open source projects in a few different places depending on the language and purpose</Text>
@@ -126,7 +130,7 @@
/>
</CardRow>
</Panel>
- <Panel halfSize={true}>
+ <Panel halfSize={true} forceStyle={aprilFoolsStyle}>
<Title>Socials</Title>
<Divider />
<Text>{"We've got Discord, feel free to ask us anything"}</Text>
diff --git a/pages/nucleus.js b/pages/nucleus.js
index 5155597..c287d0f 100644
--- a/pages/nucleus.js
+++ b/pages/nucleus.js
@@ -4,7 +4,7 @@
import { List, ListItem, Code } from '../Components/Texttools';
import { useColorMode } from 'theme-ui';
-export default function Home() {
+export default function Home(props) {
const [theme, setTheme] = useColorMode()
return (
@@ -22,6 +22,7 @@
{color: "424242", buttonText: "FFFFFF", link: "#privacy", text: "Privacy"},
{color: "F27878", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
]}
+ season={props.season}
/>
<AutoLayout>
<Panel halfSize={true} id="commands">
diff --git a/pages/nucleus/verify/about.js b/pages/nucleus/verify/about.js
index 08e7f00..b827bac 100644
--- a/pages/nucleus/verify/about.js
+++ b/pages/nucleus/verify/about.js
@@ -28,6 +28,7 @@
{color: "424242", buttonText: "FFFFFF", link: "#privacy", text: "Privacy"},
{color: "F27878", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
]}
+ season={props.season}
/>
<AutoLayout>
<Panel halfSize={false} id="about">
diff --git a/pages/nucleus/verify/alreadyVerified.js b/pages/nucleus/verify/alreadyVerified.js
index c31290a..4a49571 100644
--- a/pages/nucleus/verify/alreadyVerified.js
+++ b/pages/nucleus/verify/alreadyVerified.js
@@ -15,6 +15,7 @@
wave="web/waves/header/nucleus"
buttons={[]}
fullscreen={true}
+ season={this.props.season}
/>
)
}
diff --git a/pages/nucleus/verify/failure.js b/pages/nucleus/verify/failure.js
index 61b58d0..8581c18 100644
--- a/pages/nucleus/verify/failure.js
+++ b/pages/nucleus/verify/failure.js
@@ -15,6 +15,7 @@
wave="web/waves/header/nucleus"
buttons={[]}
fullscreen={true}
+ season={this.props.season}
/>
)
}
diff --git a/pages/nucleus/verify/index.js b/pages/nucleus/verify/index.js
index 38a3aea..05a9dec 100644
--- a/pages/nucleus/verify/index.js
+++ b/pages/nucleus/verify/index.js
@@ -49,6 +49,7 @@
gradient={["F27878", "D96B6B"]}
wave="web/waves/header/nucleus"
buttons={[]}
+ season={props.season}
/>
<AutoLayout>
<Panel>
diff --git a/pages/nucleus/verify/success.js b/pages/nucleus/verify/success.js
index e5def5d..cc6e010 100644
--- a/pages/nucleus/verify/success.js
+++ b/pages/nucleus/verify/success.js
@@ -22,6 +22,7 @@
}
]}
fullscreen={true}
+ season={this.props.season}
/>
)
}
diff --git a/pages/nucleus/verify/testing.js b/pages/nucleus/verify/testing.js
index 42ac53d..e441110 100644
--- a/pages/nucleus/verify/testing.js
+++ b/pages/nucleus/verify/testing.js
@@ -50,6 +50,7 @@
gradient={["F27878", "D96B6B"]}
wave="web/waves/header/nucleus"
buttons={[]}
+ season={props.season}
/>
<AutoLayout>
<Panel>
diff --git a/pages/privacy.js b/pages/privacy.js
index 1652796..4f5f365 100644
--- a/pages/privacy.js
+++ b/pages/privacy.js
@@ -3,7 +3,7 @@
import { List, ListItem, Code } from '../Components/Texttools';
-export default function Home() {
+export default function Home(props) {
return (
<>
<Header
@@ -12,6 +12,7 @@
gradient={["71AFE5", "6576CC"]}
wave="web/waves/header/clicksforms"
buttons={[]}
+ season={props.season}
/>
<AutoLayout>
<Panel halfSize={true}>
diff --git a/pages/rsm.js b/pages/rsm.js
index b1e9233..2d0771f 100644
--- a/pages/rsm.js
+++ b/pages/rsm.js
@@ -14,7 +14,7 @@
// import FeatureStatistics from '../public/Features/RSM/Statistics.svg';
// import FeatureTags from '../public/Features/RSM/Tags.svg';
-export default function Home() {
+export default function Home(props) {
return (
<>
<Header
@@ -28,6 +28,7 @@
{color: "424242", buttonText: "FFFFFF", link: "#privacy", text: "Privacy"},
{color: "F27878", buttonText: "FFFFFF", link: "#invite", text: "Invite"}
]}
+ season={props.season}
/>
<AutoLayout>
<Panel halfSize={true} id="commands">
diff --git a/pages/rsmv/failure.js b/pages/rsmv/failure.js
index f3b0feb..5508d8e 100644
--- a/pages/rsmv/failure.js
+++ b/pages/rsmv/failure.js
@@ -15,6 +15,7 @@
wave="web/waves/header/rsm"
buttons={[]}
fullscreen={true}
+ season={this.props.season}
/>
)
}
diff --git a/pages/rsmv/index.js b/pages/rsmv/index.js
index 231bcc5..5740f6d 100644
--- a/pages/rsmv/index.js
+++ b/pages/rsmv/index.js
@@ -70,6 +70,7 @@
gradient={["F27878", "D96B6B"]}
wave="web/waves/header/rsm"
buttons={[]}
+ season={this.props.season}
/>
<AutoLayout>
<Panel>
diff --git a/pages/rsmv/rsmvtesting.js b/pages/rsmv/rsmvtesting.js
index e37f1f0..6410f25 100644
--- a/pages/rsmv/rsmvtesting.js
+++ b/pages/rsmv/rsmvtesting.js
@@ -66,6 +66,7 @@
gradient={["F27878", "D96B6B"]}
wave="web/waves/header/rsm"
buttons={[]}
+ season={this.props.season}
/>
<AutoLayout>
<Panel>
diff --git a/pages/rsmv/success.js b/pages/rsmv/success.js
index 3cf1e4f..8d0b1ea 100644
--- a/pages/rsmv/success.js
+++ b/pages/rsmv/success.js
@@ -15,6 +15,7 @@
wave="web/waves/header/rsm"
buttons={[]}
fullscreen={true}
+ season={this.props.season}
/>
)
}
diff --git a/pages/support.js b/pages/support.js
index 1c35a68..831ce5a 100644
--- a/pages/support.js
+++ b/pages/support.js
@@ -2,7 +2,7 @@
import { AutoLayout, Panel, Title, Subtitle, Text, Divider } from '../Components/Panels';
import { List, ListItem, Code } from '../Components/Texttools';
-export default function Home() {
+export default function Home(props) {
return (
<>
<Header
@@ -11,6 +11,7 @@
gradient={["71AFE5", "6576CC"]}
wave="web/waves/header/clicksforms"
buttons={[]}
+ season={props.season}
/>
<AutoLayout>
<Panel halfSize={true}>
diff --git a/pages/supporters.js b/pages/supporters.js
index ac5c1b7..bd5305e 100644
--- a/pages/supporters.js
+++ b/pages/supporters.js
@@ -49,7 +49,7 @@
-export default function Home() {
+export default function Home(props) {
const groups = [
{ // Devs and testers
"TheCodedProf": "Programmer",
@@ -87,6 +87,7 @@
gradient={["71AFE5", "6576CC"]}
wave="web/waves/header/clicksforms"
buttons={[]}
+ season={props.season}
/>
<AutoLayout>
<Panel halfSize={false}>
diff --git a/yarn.lock b/yarn.lock
index 76b9242..0bbad86 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4543,10 +4543,10 @@
resolved "https://registry.yarnpkg.com/react-hcaptcha/-/react-hcaptcha-0.1.1.tgz#da21311166f0153054624caf5784cfd977ef31f5"
integrity sha512-p0s7uDOZAh28dbcmP2bXsox2NmIwQ6OtDTgjCYwfe49kHeCU67Omma1DhzYiGWQJRC6eTUZEikjsm+WT7bmy2g==
-react-in-viewport@^1.0.0-alpha.20:
- version "1.0.0-alpha.28"
- resolved "https://registry.yarnpkg.com/react-in-viewport/-/react-in-viewport-1.0.0-alpha.28.tgz#3957cb7931ec26582497acd14f7c3941f020fe75"
- integrity sha512-SjBVCPUIRfJb516BUev1u/dejBfI5jIcskDz4Irq2RezNG7D199eER8reRzZX+w/FLxz21rpdqRbJbagv5n37Q==
+react-in-viewport@^1.0.0-alpha.29:
+ version "1.0.0-alpha.29"
+ resolved "https://registry.yarnpkg.com/react-in-viewport/-/react-in-viewport-1.0.0-alpha.29.tgz#7550692dddbc2f129774d1cb3db40be7b27b9438"
+ integrity sha512-48woFq8EUWl3WWAPeyPu5T5KR26G3q8Gs64YXMRQq7aIP5YBzHIN2GvoFwdXDhT19pwcOPmlkSAYWMt0+d3ydw==
dependencies:
hoist-non-react-statics "^3.0.0"