new card types, style changes, image preloading etc etc
diff --git a/Components/Card.js b/Components/Card.js
index e90a73f..c4a31c6 100644
--- a/Components/Card.js
+++ b/Components/Card.js
@@ -17,39 +17,99 @@
}
}
+ getButtonRow() {
+ return this.props.buttons ? this.props.buttons.map((button, i) => {
+ return <a
+ key={i}
+ className={Styles.button}
+ style={{backgroundColor:`#${button.color}`, color:`#${this.props.buttonText}`}}
+ href={button.link ? button.link : null}
+ onClick={button.onClick ? button.onClick : null}
+ target={button.newTab ? "_blank" : undefined}
+ rel="noreferrer">{button.text}
+ </a>
+ }) : null
+ }
+
+ getTitleBlock() {
+ let icons = null;
+ if (this.props.icon && this.props.icon[0].length > 1) {
+ icons = <div className={Styles.iconRow}>{this.props.icon.map((icon, i) => {
+ return <img key={i} alt={this.props.title} className={Styles.image} src={`https://assets.clicks.codes/${icon}.svg`} />
+ })}</div>
+ } else if (this.props.icon) {
+ icons = <img alt={this.props.title} className={Styles.image} src={`https://assets.clicks.codes/${this.props.icon}.svg`} />
+ } else if (this.props.wave) {
+ icons = <img alt={this.props.title} className={Styles.image} src={`https://assets.clicks.codes//${this.props.wave}.svg`} />
+ }
+ return <>{icons}</>;
+ }
+ getBand() {
+ if (this.props.band) {
+ return <div className={Styles.band} style={{
+ backgroundColor: `#${this.props.band.color ?? "F27878"}`,
+ bottom: this.props.buttons ? `calc(25% + 5px)` : "40px"
+ }}>
+ <p style={{color: "#" + (this.props.band.textColor ?? "FFFFFF")}}>{this.props.band.text ?? ""}</p>
+ </div>
+ }
+ }
+
render() {
- return (
- <div className={Styles.card + " " + (this.props.shown ? Styles.shown : null)} style={{
- margin: "0"
- }} onClick={this.handleClick}>
- <div className={Styles.backgroundGradient} style={{
- backgroundImage: `linear-gradient(69.44deg, #${this.props.gradient[0]} 0%, #${this.props.gradient[1]} 100%)`
- }} />
- <img alt="" className={Styles.backgroundImage} src={`https://assets.clicks.codes/web/waves/card/${this.props.wave}.svg`} draggable={false} />
- <div className={Styles.panel} onClick={this.handleClick}>
- <div className={Styles.titleContainer}>
- <img alt="Project icon" className={Styles.image} src={"https://assets.clicks.codes/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
- <h1 className={Styles.title}>{this.props.title}</h1>
- </div>
- <p className={Styles.subtext + " " + (this.props.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
- <div className={Styles.buttonLayout} onClick={this.showMessage}>
- {
- this.props.buttons ? this.props.buttons.map((button, i) => {
- return <a
- key={i}
- className={Styles.button}
- style={{backgroundColor:`#${button.color}`, color:`#${this.props.buttonText}`}}
- href={button.link ? button.link : null}
- onClick={button.onClick ? button.onClick : null}
- target={button.newTab ? "_blank" : undefined}
- rel="noreferrer">{button.text}
- </a>
- }) : null
- }
+ let overwriteAlign = {
+ "left": "flex-start",
+ "center": "center",
+ "right": "flex-end"
+ }[this.props.overwritePosition ?? "right"];
+ if (this.props.border) {
+ return (
+ <div className={Styles.card + " " + (this.props.shown ? Styles.shown : null) + " " + Styles.dashed} style={{
+ margin: "0", opacity: `0`, boxShadow: "none", borderColor: `#${this.props.border}`
+ }}>
+ <div className={Styles.noPanel}>
+ <div className={Styles.titleContainer}>
+ {
+ (this.props.icon || this.props.wave)
+ ? <img alt="Project icon" className={Styles.image} src={"https://assets.clicks.codes/" + (this.props.icon ? this.props.icon : this.props.wave) + ".svg"} />
+ : null
+ }
+ <h1 className={Styles.title}>{this.props.title}</h1>
+ </div>
+ <p className={Styles.subtext + " " + (this.props.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
+ {this.getBand()}
+ <div className={Styles.buttonLayout} onClick={this.showMessage} style={{
+ justifyContent: overwriteAlign
+ }}>
+ {this.getButtonRow()}
+ </div>
</div>
</div>
- </div>
- );
+ );
+ } else {
+ return (
+ <div className={Styles.card + " " + (this.props.shown ? Styles.shown : null)} style={{
+ margin: "0"
+ }} onClick={this.handleClick}>
+ <div className={Styles.backgroundGradient} style={{
+ backgroundImage: `linear-gradient(69.44deg, #${this.props.gradient[0]} 0%, #${this.props.gradient[1]} 100%)`
+ }} />
+ <img alt="" className={Styles.backgroundImage} src={`https://assets.clicks.codes/web/waves/card/${this.props.wave}.svg`} draggable={false} />
+ <div className={Styles.panel} onClick={this.handleClick}>
+ <div className={Styles.titleContainer}>
+ { this.getTitleBlock() }
+ <h1 className={Styles.title}>{this.props.title}</h1>
+ </div>
+ <p className={Styles.subtext + " " + (this.props.buttons ? null : Styles.longText)}>{this.props.subtext}</p>
+ {this.getBand()}
+ <div className={Styles.buttonLayout} onClick={this.showMessage} style={{
+ justifyContent: overwriteAlign
+ }}>
+ {this.getButtonRow()}
+ </div>
+ </div>
+ </div>
+ );
+ }
}
}
diff --git a/Components/Header.js b/Components/Header.js
index 37418c5..54c4b5c 100644
--- a/Components/Header.js
+++ b/Components/Header.js
@@ -1,11 +1,38 @@
-import React, { useRef } from "react";
+import React, { useEffect, useState } from "react";
import Styles from '../styles/Components/header.module.css';
import NavStyles from '../styles/Components/navbar.module.css';
import Head from 'next/head';
-import { useColorMode } from "theme-ui";
import { useReward } from "react-rewards";
import ScrollContainer from 'react-indiana-drag-scroll'
+const positive = [
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f389.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f388.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f973.svg",
+];
+
+const negative = [
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f614.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f61e.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f613.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f625.svg",
+ "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f623.svg",
+];
+
+function preloadImage (src) {
+ return new Promise((resolve, reject) => {
+ const img = new Image()
+ img.onload = function() {
+ resolve(img)
+ }
+ img.onerror = img.onabort = function() {
+ reject(src)
+ }
+ img.src = src
+ })
+}
+
+
function Header(props) {
const [ clickTotal, setClickTotal ] = React.useState(0);
@@ -30,6 +57,22 @@
colors: ["#E5AB71"]
});
+ const all = positive.concat(negative)
+ const [imagesPreloaded, setImagesPreloaded] = useState(false)
+ useEffect(() => {
+ let isCancelled = false
+ async function effect() {
+ if (isCancelled) { return }
+ const imagesPromiseList = []
+ for (const i of all) { imagesPromiseList.push(preloadImage(i)) }
+ await Promise.all(imagesPromiseList)
+ if (isCancelled) { return }
+ setImagesPreloaded(true)
+ };
+ effect()
+ return () => { isCancelled = true }
+ }, [all])
+
function showSubBarWithUrl(url) {
const screenWidth = window.innerWidth;
let amount = screenWidth - 50;
@@ -39,14 +82,14 @@
{
Array.from(Array(amount)).map((i, index) => {
return (
- <a className={NavStyles.icon} key={index}><img alt="Clicks" className={NavStyles.icon} src={
+ <a className={NavStyles.icon} key={index}><img alt="" className={NavStyles.icon} src={
url[Math.floor(Math.random() * url.length)]
} /></a>
)
})
}
</div>,
- 5
+ 5, "center"
);
}
@@ -54,20 +97,10 @@
if (!isAnimating && !isDisappointmentAnimating && props.index) {
setClickTotal(clickTotal + 1);
if (clickTotal > 0 && Math.floor(Math.random() * 3) === 0) {
- showSubBarWithUrl([
- "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f614.svg",
- "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f61e.svg",
- "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f613.svg",
- "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f625.svg",
- "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f623.svg",
- ]);
+ showSubBarWithUrl(negative);
disappointment();
} else {
- showSubBarWithUrl([
- "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f389.svg",
- "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f388.svg",
- "https://raw.githubusercontent.com/twitter/twemoji/master/assets/svg/1f973.svg",
- ]);
+ showSubBarWithUrl(positive);
reward();
}
}
@@ -78,6 +111,7 @@
margin: "0",
minHeight: props.fullscreen ? "calc(100vh - 42px)" : "calc(100vh - (4 * max(2em, 4vw)) - 1em)",
}} id={props.id ? props.id : null}>
+ {imagesPreloaded}
<div className={Styles.backgroundGradient} style={{
backgroundImage: `linear-gradient(69.44deg, #${props.gradient[0]} 0%, #${props.gradient[1]} 100%)`,
}} />
diff --git a/pages/_app.js b/pages/_app.js
index 59fdadb..222765c 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -53,8 +53,11 @@
const [subBar, setSubBar] = React.useState(false);
const [currentElement, setElement] = React.useState(<></>);
- const showSubBar = (element, timeout) => {
+ const showSubBar = (element, timeout, positioning="left") => {
setSubBar(true);
+ if (positioning === "center") {
+ element = <div className={Styles.centeredSubBar}>{element}</div>
+ }
setElement(element);
if (timeout) {
setTimeout(() => {
@@ -70,8 +73,8 @@
setSubBar(false);
}
- const showMessage = (text) => {
- showSubBar(<p className={Styles.message}>{text}</p>, 5);
+ const showMessage = (text, positioning="left") => {
+ showSubBar(<p className={Styles.message}>{text}</p>, 5, positioning);
}
return <>
diff --git a/pages/index.js b/pages/index.js
index 7495dff..20e6ec9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -67,7 +67,7 @@
/>
<Card
wave="hooky" title="Hooky" subtext="Webhook protection for Discord"
- icon="bots/hooky/circle"
+ icon={"bots/hooky/circle"}
buttons={[
{color: "EDC575", link: "https://discord.com/oauth2/authorize?client_id=752188923505279037&scope=bot&permissions=536882176", text: "Invite"},
{color: "EDC575", link: "/hooky", text: "About"}
@@ -75,6 +75,14 @@
buttonText={"000000"} gradient={["424242", "8D8D8D"]}
url="/hooky"
/>
+ <Card
+ title="New projects..." subtext="We're actively working on projects! You can join our Discord to find out more."
+ buttons={[
+ {color: "6576CC", link: "https://discord.gg/bPaNnxe", text:"Join our Discord"}
+ ]}
+ buttonText={"FFFFFF"} border={"C4C4C4"}
+ url="/" overwritePosition={"center"}
+ />
</CardRow>
</Panel>
<Panel halfSize={true}>
@@ -105,7 +113,7 @@
<Panel halfSize={true}>
<Title>Socials</Title>
<Divider />
- <Text>{"We've got discord, feel free to ask us anything"}</Text>
+ <Text>{"We've got Discord, feel free to ask us anything"}</Text>
<CardRow>
<Card
wave="discord" title="Discord" subtext="Join our Discord server to talk with the community"
diff --git a/styles/Components/card.module.css b/styles/Components/card.module.css
index 077c883..5721fa4 100644
--- a/styles/Components/card.module.css
+++ b/styles/Components/card.module.css
@@ -23,6 +23,18 @@
transition: filter 0.3s ease-in-out;
}
+.noPanel {
+ position: absolute;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ width: 88%;
+ height: 76%;
+ top: 12%;
+ left: 6%;
+ padding-top: 10px;
+ padding-bottom: 10px;
+}
+
.card {
border-radius: 25px;
width: 100%;
@@ -106,20 +118,21 @@
.longText {
height: 60%;
+ padding-inline: 10px;
}
.buttonLayout {
display: flex;
flex-direction: row;
- justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
padding: 0px;
position: absolute;
bottom: 5px;
right: 5px;
- height: 25%
+ height: 25%;
+ width: calc(100% - 10px);
}
.button {
@@ -148,4 +161,27 @@
.item {
width: min(428px, 90%);
+}
+
+.dashed {
+ /* Create a dashed border */
+ border: 8px dashed var(--theme-ui-colors-text);
+}
+
+.iconRow {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+}
+
+.band {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 15%;
}
\ No newline at end of file
diff --git a/styles/Components/navbar.module.css b/styles/Components/navbar.module.css
index 121d382..ca169bd 100644
--- a/styles/Components/navbar.module.css
+++ b/styles/Components/navbar.module.css
@@ -48,7 +48,7 @@
}
.skipNav:focus {
- width: 100%;
+ width: 150px;
overflow: auto;
}
diff --git a/styles/globals.module.css b/styles/globals.module.css
index 944f797..bdd52e8 100644
--- a/styles/globals.module.css
+++ b/styles/globals.module.css
@@ -5,7 +5,7 @@
height: calc(100vh - 42px);
width: 100%;
border-radius: 25px;
- box-shadow: 0 0 0 100px var(--theme-ui-colors-borders);
+ box-shadow: 0 0 0 1000px var(--theme-ui-colors-borders);
transition: 0.3s ease-in-out;
pointer-events: none;
background: transparent;
@@ -18,4 +18,13 @@
.container, .container * {
transform: rotateY(0);
-webkit-transform: rotateY(0);
+}
+
+.centeredSubBar {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
}
\ No newline at end of file