From 2ce73d33f8e115d0e61e2f7c92cd27b5543091dc Mon Sep 17 00:00:00 2001 From: Lloyd Richards Date: Fri, 19 Jun 2020 16:00:36 +0200 Subject: [PATCH] content: Pellets and Bales --- .../LifePlastic/Plastic/ParticleBale.tsx | 59 +++++++++++ .../LifePlastic/Plastic/ParticleGARBAGE.tsx | 100 ++++++------------ .../LifePlastic/Plastic/ParticleHDPE.tsx | 4 +- .../LifePlastic/Plastic/ParticleLDPE.tsx | 4 +- .../LifePlastic/Plastic/ParticleMIXED.tsx | 4 +- .../LifePlastic/Plastic/ParticleOTHER.tsx | 7 +- .../LifePlastic/Plastic/ParticlePET.tsx | 4 +- components/LifePlastic/Plastic/ParticlePP.tsx | 4 +- components/LifePlastic/Plastic/ParticlePS.tsx | 4 +- .../LifePlastic/Plastic/ParticlePVC.tsx | 4 +- .../LifePlastic/Plastic/ParticlePellet.tsx | 59 +++++++++++ components/LifePlastic/RootRoutes.tsx | 6 +- components/LifePlastic/Routes.tsx | 2 +- components/LifePlastic/Routes/MixedRoutes.tsx | 2 +- pages/experiment/011.tsx | 14 +-- 15 files changed, 180 insertions(+), 97 deletions(-) create mode 100644 components/LifePlastic/Plastic/ParticleBale.tsx create mode 100644 components/LifePlastic/Plastic/ParticlePellet.tsx diff --git a/components/LifePlastic/Plastic/ParticleBale.tsx b/components/LifePlastic/Plastic/ParticleBale.tsx new file mode 100644 index 0000000..f79686b --- /dev/null +++ b/components/LifePlastic/Plastic/ParticleBale.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import anime from "animejs"; +import { BoxProps } from "../Interfaces/Interfaces"; +import { velocity } from "./PlasticParticles"; + +export const ParticleBale = ({ + pathRef, + onComplete, + delay, + colour, +}: BoxProps) => { + const ref = React.useRef(null); + React.useEffect(() => { + const path = anime.path(pathRef); + const instance = anime({ + targets: ref.current, + translateX: path("x"), + translateY: path("y"), + rotate: path("angle"), + delay: delay, + duration: path.length / velocity - (delay ? delay : 0), + easing: "linear", + complete: onComplete, + }); + + return instance.pause; + }, []); + return ( +
+ + + + + + +
+ ); +}; diff --git a/components/LifePlastic/Plastic/ParticleGARBAGE.tsx b/components/LifePlastic/Plastic/ParticleGARBAGE.tsx index 7ebac0a..f96805f 100644 --- a/components/LifePlastic/Plastic/ParticleGARBAGE.tsx +++ b/components/LifePlastic/Plastic/ParticleGARBAGE.tsx @@ -8,7 +8,6 @@ export const ParticleGARBAGE = ({ onComplete, delay, colour, - version, }: BoxProps) => { const ref = React.useRef(null); React.useEffect(() => { @@ -19,79 +18,42 @@ export const ParticleGARBAGE = ({ translateY: path("y"), rotate: path("angle"), delay: delay, - duration: path.length / velocity - (delay ? delay : 0), + duration: path.length / velocity + (delay ? delay : 0), easing: "linear", complete: onComplete, }); return instance.pause; }, []); - - if (version === 0) { - return ( -
- - - - - - -
- ); - } else { - return ( -
+ - - - - - - -
- ); - } + + + + + + + ); }; diff --git a/components/LifePlastic/Plastic/ParticleHDPE.tsx b/components/LifePlastic/Plastic/ParticleHDPE.tsx index 5b76e0c..a8c5c36 100644 --- a/components/LifePlastic/Plastic/ParticleHDPE.tsx +++ b/components/LifePlastic/Plastic/ParticleHDPE.tsx @@ -45,7 +45,7 @@ export const ParticleHDPE = ({ fill="none" xmlns="http://www.w3.org/2000/svg" > - + - + - + - + - + - + - + @@ -78,7 +80,7 @@ export const ParticleOTHER = ({ fill="none" xmlns="http://www.w3.org/2000/svg" > - + diff --git a/components/LifePlastic/Plastic/ParticlePET.tsx b/components/LifePlastic/Plastic/ParticlePET.tsx index 3329cf0..f36012e 100644 --- a/components/LifePlastic/Plastic/ParticlePET.tsx +++ b/components/LifePlastic/Plastic/ParticlePET.tsx @@ -45,7 +45,7 @@ export const ParticlePET = ({ fill="none" xmlns="http://www.w3.org/2000/svg" > - + - + - + - + - + - + - + - + { + const ref = React.useRef(null); + React.useEffect(() => { + const path = anime.path(pathRef); + const instance = anime({ + targets: ref.current, + translateX: path("x"), + translateY: path("y"), + rotate: path("angle"), + delay: delay, + duration: path.length / velocity - (delay ? delay : 0), + easing: "linear", + complete: onComplete, + }); + + return instance.pause; + }, []); + return ( +
+ + + + + + +
+ ); +}; diff --git a/components/LifePlastic/RootRoutes.tsx b/components/LifePlastic/RootRoutes.tsx index 7a80d33..a60d236 100644 --- a/components/LifePlastic/RootRoutes.tsx +++ b/components/LifePlastic/RootRoutes.tsx @@ -316,7 +316,7 @@ export const RootRoutes: Array = [ wasteChance: 0.1, }, { - parent: "Mixed-HDPERecovery _2", + parent: "Mixed-HDPERecovery_2", require: "MixedBin", possible: [ "Mixed-PS-Machine", @@ -437,14 +437,14 @@ export const RootRoutes: Array = [ { parent: "Bale-PP-Machine", require: "PETBin", - possible: ["Mixed-HDPERecovery", "Regrind-PP"], + possible: ["Mixed-HDPERecovery_2", "Regrind-PP"], waste: "PP-Garbage", wasteChance: 0.1, }, { parent: "Bale-PP-Hand", require: "PETBin", - possible: ["Mixed-HDPERecovery", "Regrind-PP"], + possible: ["Mixed-HDPERecovery_2", "Regrind-PP"], waste: "PP-Garbage", wasteChance: 0.1, }, diff --git a/components/LifePlastic/Routes.tsx b/components/LifePlastic/Routes.tsx index bd71643..eea0da8 100644 --- a/components/LifePlastic/Routes.tsx +++ b/components/LifePlastic/Routes.tsx @@ -188,7 +188,7 @@ export const Routes = () => { d="M311.156 2424v30c0 5.52-4.477 10-10 10h-2.972a9.963 9.963 0 01-5.547-1.68l-18.961-12.64a9.963 9.963 0 00-5.547-1.68H96.493a9.999 9.999 0 01-10-10.01l.654-738.58c.004-5.52 4.48-9.99 10-9.99h27.94c5.523 0 10 4.48 10 10V1768" /> diff --git a/components/LifePlastic/Routes/MixedRoutes.tsx b/components/LifePlastic/Routes/MixedRoutes.tsx index cf2eb82..5030c66 100644 --- a/components/LifePlastic/Routes/MixedRoutes.tsx +++ b/components/LifePlastic/Routes/MixedRoutes.tsx @@ -93,7 +93,7 @@ export const MixedRoutes: Array = [ type: "HDPE", plastic: "MIXED", amount: 1, - name: "Mixed-HDPERecovery _2", + name: "Mixed-HDPERecovery_2", path: "M439.156 2488v21.66c0 7.81-8.555 12.61-15.218 8.53l-33.88-20.72a10.008 10.008 0 00-5.218-1.47H97.156c-5.523 0-10-4.48-10-10v-786.58c0-5.52 4.477-10 10-10h27.93c5.523 0 10 4.48 10 10V1768", }, diff --git a/pages/experiment/011.tsx b/pages/experiment/011.tsx index c34a01e..1b2ebcf 100644 --- a/pages/experiment/011.tsx +++ b/pages/experiment/011.tsx @@ -13,10 +13,7 @@ import { import { RootRoutes } from "../../components/LifePlastic/RootRoutes"; import { CombinedRoutes } from "../../components/LifePlastic/Routes/CombinedRoutes"; -import { - Garbage, - Plastic, -} from "../../components/LifePlastic/Plastic/PlasticParticles"; +import { Plastic } from "../../components/LifePlastic/Plastic/PlasticParticles"; import { ParticlePET } from "../../components/LifePlastic/Plastic/ParticlePET"; import { ParticleHDPE } from "../../components/LifePlastic/Plastic/ParticleHDPE"; import { ParticlePP } from "../../components/LifePlastic/Plastic/ParticlePP"; @@ -25,6 +22,9 @@ import { ParticleLDPE } from "../../components/LifePlastic/Plastic/ParticleLDPE" import { ParticlePVC } from "../../components/LifePlastic/Plastic/ParticlePVC"; import { ParticleOTHER } from "../../components/LifePlastic/Plastic/ParticleOTHER"; import { ParticleMIXED } from "../../components/LifePlastic/Plastic/ParticleMIXED"; +import { ParticleGARBAGE } from "../../components/LifePlastic/Plastic/ParticleGARBAGE"; +import { ParticlePellet } from "../../components/LifePlastic/Plastic/ParticlePellet"; +import { ParticleBale } from "../../components/LifePlastic/Plastic/ParticleBale"; import { GroundFactories } from "../../components/LifePlastic/GroundFactories"; import { SkyFactories } from "../../components/LifePlastic/SkyFactories"; @@ -423,7 +423,7 @@ const Experiment011: React.FC = () => { ); case "Bale": return ( - { ); case "Pellet": return ( - { ); case "GARBAGE": return ( -