From 27f45f04e44aa295d31ce780be4d11a29dcce7f2 Mon Sep 17 00:00:00 2001 From: Lloyd Richards Date: Tue, 7 Jul 2020 14:49:35 +0200 Subject: [PATCH] feat: Factory Signs --- components/LifePlastic/Buttons.tsx | 8 +- components/LifePlastic/FactorySigns.tsx | 2073 +++++++++++++++++ components/LifePlastic/UI/RevealBox.tsx | 2 +- components/LifePlastic/UI/TutorialOverlay.tsx | 16 +- .../LifePlastic/UI/icons/tutorialSpot.tsx | 35 + .../LifePlastic/styles/PlasticStyles.tsx | 5 + package-lock.json | 121 + package.json | 1 + pages/lifeofplastic/index.tsx | 80 +- 9 files changed, 2288 insertions(+), 53 deletions(-) create mode 100644 components/LifePlastic/FactorySigns.tsx diff --git a/components/LifePlastic/Buttons.tsx b/components/LifePlastic/Buttons.tsx index 3a98d4b..1153232 100644 --- a/components/LifePlastic/Buttons.tsx +++ b/components/LifePlastic/Buttons.tsx @@ -284,9 +284,7 @@ export const FactoryButton: React.FC = ({ id="PPHandSorting" d="M432.095 1897.8v.14l.124.08 32.849 19.13V1934.41l.122.07 6.873 4.1v6.6l-2.414 1.43-.123.07v4.3l-6.181 2.81-.146.06V1961.29l-7.464 7.31-.041.04-.019.06c-.876 2.48-2.195 6.2-3.309 9.3-.557 1.55-1.062 2.94-1.435 3.95-.186.5-.339.91-.449 1.19-.045.12-.083.21-.111.28h-3.263l-.054.17-1.842 6.12-20.889 4.57-11.892-8.19-.081-.06-.097.02-10.871 1.6-6.244-10.86-.145-.26-.227.18-3.475 2.77-7.034-25.03-.111-.4-.3.28-2.615 2.44-1.473-9.59-.018-.11-.101-.06-3.061-1.83v-6.6l5.461-3.23.123-.07v-6.8l7.562-4.37.125-.07v-9.07l6.253-3.75.038-.03.028-.03 14.61-18.07 5.503.34.266.01v-12.31c0-.41.186-.82.561-1.22.377-.39.934-.76 1.64-1.07 1.414-.63 3.384-1.03 5.573-1.03 2.189 0 4.159.4 5.572 1.03.707.31 1.264.68 1.64 1.07.376.4.562.81.562 1.22v16.67z" fill={FILLCOLOR} - fillOpacity={ - systems.PPHandSorting ? FILLOPACITY_HIDDEN : FILLOPACITY - } + fillOpacity={systems.PPHandSorting ? FILLOPACITY_HIDDEN : FILLOPACITY} stroke={STROKECOLOR} strokeWidth={STROKEWEIGHT} cursor="pointer" @@ -343,9 +341,7 @@ export const FactoryButton: React.FC = ({ id="PSHandSorting" d="M514.129 1888.76c1.156 3.1 2.498 6.69 2.498 11.96-.586.46-.932 1.03-.932 1.65v1.7c0 .48.209.93.578 1.32a6 6 0 01-2.878 4.53l-6.416 3.85a14.003 14.003 0 00-6.79 12v4.28c-.489.44-.773.96-.773 1.52v1.7c0 .56.284 1.08.773 1.51v11.07c-.489.43-.773.95-.773 1.51v1.7c0 1.53 2.137 2.78 4.774 2.78s4.774-1.25 4.774-2.78v-1.7c0-.56-.285-1.08-.775-1.51v-11.06c.49-.44.775-.96.775-1.52v-1.7c0-.56-.285-1.08-.775-1.52v-4.28a6.01 6.01 0 012.91-5.14l6.416-3.86a13.992 13.992 0 006.756-11.03c.61-.46.972-1.04.972-1.67v-1.7c0-.62-.346-1.19-.931-1.65 0-5.22 1.268-8.8 2.366-11.89.837-2.36 1.574-4.44 1.574-6.76h-15.767c0 2.29.769 4.35 1.644 6.69z" fill={FILLCOLOR} - fillOpacity={ - systems.PSHandSorting ? FILLOPACITY_HIDDEN : FILLOPACITY - } + fillOpacity={systems.PSHandSorting ? FILLOPACITY_HIDDEN : FILLOPACITY} stroke={STROKECOLOR} strokeWidth={STROKEWEIGHT} cursor="pointer" diff --git a/components/LifePlastic/FactorySigns.tsx b/components/LifePlastic/FactorySigns.tsx new file mode 100644 index 0000000..2e02c44 --- /dev/null +++ b/components/LifePlastic/FactorySigns.tsx @@ -0,0 +1,2073 @@ +import React from "react"; + +import { ToggleProps } from "./Interfaces/Interfaces"; + +const FactorySigns: React.FC> = ({ systems }) => { + return ( + + + + + + + + Sort + + + + + + + PET + + + + + + + + + PS + + + + + + + + + PVC + + + + + + + + + + Sort + + + + + + + PET + + + + + + + + + + Sort + + + + + + + HDPE + + + + + + + + + + Sort + + + + + + + HDPE + + + + + + + + + + Sort + + + + + + + PP + + + + + + + + + + Sort + + + + + + + PP + + + + + + + + + + Sort + + + + + + + LDPE + + + + + + + + + + Sort + + + + + + + LDPE + + + + + + + + + + Sort + + + + + + + Other + + + + + + + + + + Sort + + + + + + + Other + + + + + + + + + + Sort + + + + + + + PS + + + + + + + + + mPET + + + + + + + + Grind + + + + + + + + + EPS + + + + + + + + Smelt + + + + + + + + + PP + + + + + + + + Grind + + + + + + + + + mHDPE + + + + + + + + Grind + + + + + + + + + sPET + + + + + + + + Grind + + + + + + + + + sHDPE + + + + + + + + Grind + + + + + + + + + PVC + + + + + + + + Grind + + + + + + + + + rPS + + + + + + + + Refine + + + + + + + + + rPET + + + + + + + + Refine + + + + + + + + + rHDPE + + + + + + + + Refine + + + + + + + + + rPET + + + + + + + + Refine + + + + + + + + + rHDPE + + + + + + + + Refine + + + + + + + + + PS + + + + + + + + Grind + + + + + + + + + rLDPE + + + + + + + + Refine + + + + + + + + + Other + + + + + + + + Refine + + + + + + + + + rPVC + + + + + + + + Refine + + + + + + + + + rPP + + + + + + + + Refine + + + + + + + + + + Fill + + + + + + + Trash + + + + + + + + + + Blow + + + + + + + rHDPE + + + + + + + + + + Make + + + + + + + rPS + + + + + + + + + + Form + + + + + + + Other + + + + + + + + + + Spin + + + + + + + rLDPE + + + + + + + + + + Make + + + + + + + Trash + + + + + + + + + + Form + + + + + + + Other + + + + + + + + + + Stuff + + + + + + + Trash + + + + + + + + + + Spin + + + + + + + rPET + + + + + + + + + + Sew + + + + + + + Trash + + + + + + + + + + Form + + + + + + + rPS + + + + + + + + + + Form + + + + + + + rHDPE + + + + + + + + + + Form + + + + + + + Other + + + + + + + + + + Blow + + + + + + + rPET + + + + + + + + + + Form + + + + + + + rPVC + + + + + + + + + + Form + + + + + + + rPVC + + + + + + + + + + Form + + + + + + + Trash + + + + + + + + + + Fill + + + + + + + Trash + + + + + + + + + + Form + + + + + + + rPP + + + + + + + ); +}; + +export default FactorySigns; diff --git a/components/LifePlastic/UI/RevealBox.tsx b/components/LifePlastic/UI/RevealBox.tsx index 1f71782..133bdf8 100644 --- a/components/LifePlastic/UI/RevealBox.tsx +++ b/components/LifePlastic/UI/RevealBox.tsx @@ -17,7 +17,7 @@ const RevealBox: React.FC = ({ onRemove, show, children }) => { React.useEffect(() => { const handleScroll = () => { const yPos = window.scrollY; - if (yPos > 1200) { + if (yPos > 1500) { setReveal(true); if (onRemove) setTimeout(() => onRemove(), 3000); } diff --git a/components/LifePlastic/UI/TutorialOverlay.tsx b/components/LifePlastic/UI/TutorialOverlay.tsx index 648a048..1aa39b4 100644 --- a/components/LifePlastic/UI/TutorialOverlay.tsx +++ b/components/LifePlastic/UI/TutorialOverlay.tsx @@ -24,8 +24,8 @@ const TutorialOverlay = () => { >

When you want to add or remove an entire recycling system, you can - click these buttons to toggle everything at once. Try click on the - button to see which factories appear and disapear. + click these buttons to toggle everything at once. Try clicking on + the button to see which factories appear and disapear.

); @@ -40,7 +40,7 @@ const TutorialOverlay = () => { }} >

- Want to add some plastic to the system? Click the recycle symbol + Want to add some plastic to the system? Click the recycling symbol and watch the plastic object start its journey through the system. You can add multiple items at once.

@@ -134,7 +134,7 @@ const TutorialOverlay = () => { }} /> { Scroll.animateScroll.scrollTo(1200); @@ -142,7 +142,7 @@ const TutorialOverlay = () => { }} /> { Scroll.animateScroll.scrollTo(1500); @@ -150,7 +150,7 @@ const TutorialOverlay = () => { }} /> { Scroll.animateScroll.scrollTo(2200); @@ -158,7 +158,7 @@ const TutorialOverlay = () => { }} /> { Scroll.animateScroll.scrollTo(2400); @@ -166,7 +166,7 @@ const TutorialOverlay = () => { }} /> { Scroll.animateScroll.scrollTo(0); diff --git a/components/LifePlastic/UI/icons/tutorialSpot.tsx b/components/LifePlastic/UI/icons/tutorialSpot.tsx index 05b301f..f4251fe 100644 --- a/components/LifePlastic/UI/icons/tutorialSpot.tsx +++ b/components/LifePlastic/UI/icons/tutorialSpot.tsx @@ -1,5 +1,7 @@ +/** @jsx jsx */ import React from "react"; import { GROUNDBACKGROUND } from "../../styles/PlasticStyles"; +import { jsx, css, keyframes } from "@emotion/core"; interface SymbolProps { number: number; @@ -7,6 +9,23 @@ interface SymbolProps { onClick: () => void; } +const pulse = keyframes` + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 #FCE35F; + } + + 70% { + transform: scale(1.8); + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } + + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + } +`; + const TutorialSpotIcon: React.FC = ({ number, onClick, @@ -25,6 +44,22 @@ const TutorialSpotIcon: React.FC = ({ }} onClick={onClick} > +
{ switch (type) { @@ -87,7 +88,7 @@ const Experiment013: React.FC = () => { const [garbagePile, setGarbagePile] = React.useState(0); const [tutorial, setTutorial] = React.useState(true); const [triggerTutorial, setTriggerTutorial] = React.useState(false); - const [mode, setMode] = React.useState(true); + const [mode, setMode] = React.useState(false); React.useEffect(() => { console.log(garbagePile); @@ -225,7 +226,7 @@ const Experiment013: React.FC = () => { }; return ( -
+
{tutorial ? ( setTutorial(false)}> @@ -264,7 +265,7 @@ const Experiment013: React.FC = () => {

However, not all plastic is created equal. There are 7 types of - plastic that can be recycles, though most places will only deal + plastic that can be recycled, though most places will only deal with PET, HDPE and PP. The technology exists to recycle the other 4 types but depending on the supply and demand, they might not be available in your municipality. @@ -273,10 +274,10 @@ const Experiment013: React.FC = () => {

- To start exploring what these relationships looks like, you can - click the PET button below and then click the recycle symbol to - add plastic. If you're unsure what to do, there is a tutorial in - the top right. Have fun exploring! + To start exploring, what these relationships look like, click the + PET button below and then add plastic with the recycle symbol. If + you're unsure what to do, there is a tutorial in the top right. + Have fun exploring!

@@ -305,36 +306,39 @@ const Experiment013: React.FC = () => { {tutorial ? (
) : ( - +
+ + {mode ?
: } +
)}
@@ -347,6 +351,7 @@ const Experiment013: React.FC = () => { + { MissingLines: "none", }} /> - {mode ?
: } {materials.materials.map((item) => { switch (item.type) {