new card types, style changes, image preloading etc etc
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%)`,
}} />