From 0aae0d0f4265cc3729b6b7d8faa428da141c20e2 Mon Sep 17 00:00:00 2001 From: nbintertech Date: Fri, 29 Mar 2024 09:33:38 -0500 Subject: [PATCH] Rewrite stats, readability chagnes, add kg per year --- src/App.scss | 67 +++++----------------- src/App.tsx | 2 + src/components/WinGame.tsx | 112 +++++++++++++++++-------------------- src/trackedStats.tsx | 1 + 4 files changed, 70 insertions(+), 112 deletions(-) diff --git a/src/App.scss b/src/App.scss index 3660da0..5fb1ac3 100644 --- a/src/App.scss +++ b/src/App.scss @@ -171,7 +171,6 @@ $landfill-gasses: #f06807; position: fixed; z-index: -1; background: url('images/lose-image-opt.jpg'); - // filter: blur($blur-radius); background-size: cover; top: -1 * $blur-radius; left: -1 * $blur-radius; @@ -181,12 +180,12 @@ $landfill-gasses: #f06807; } } -.swiper-slide.swiper-slide-active.slide1-image { +@mixin slide-psuedo-image($image-url) { &::before { position: fixed; z-index: -1; - background: url('images/turbine2-opt.jpg') ; - // filter: blur($blur-radius); + background: url($image-url); + filter: blur(3px); background-size: cover; top: -1 * $blur-radius; left: -1 * $blur-radius; @@ -196,53 +195,20 @@ $landfill-gasses: #f06807; } } -.swiper-slide.swiper-slide-active.slide2-image { - &::before { - position: fixed !important; - z-index: -1; - background: url('images/solar-array2-opt.jpg') !important; - background-size: cover !important; +.swiper-slide.swiper-slide-active.slide1-image { + @include slide-psuedo-image('images/turbine2-opt.jpg') +} - // filter: blur($blur-radius); - top: -1 * $blur-radius; - left: -1 * $blur-radius; - bottom: -1 * $blur-radius; - right: -1 * $blur-radius; - display: block; - } +.swiper-slide.swiper-slide-active.slide2-image { + @include slide-psuedo-image('images/solar-array2-opt.jpg') } .swiper-slide.swiper-slide-active.slide3-image { - &::before { - position: fixed !important; - z-index: -1; - background: url('images/electricity.jpg') !important; - background-size: cover !important; - - // filter: blur($blur-radius); - top: -1 * $blur-radius; - left: -1 * $blur-radius; - bottom: -1 * $blur-radius; - right: -1 * $blur-radius; - display: block; - } - + @include slide-psuedo-image('images/electricity.jpg') } .swiper-slide.swiper-slide-active.slide4-image { - &::before { - position: fixed !important; - z-index: -1; - background: url('images/field-opt.jpg') !important; - background-size: cover !important; - - // filter: blur($blur-radius); - top: -1 * $blur-radius; - left: -1 * $blur-radius; - bottom: -1 * $blur-radius; - right: -1 * $blur-radius; - display: block; - } + @include slide-psuedo-image('images/field-opt.jpg') } .lose-game-text { @@ -269,20 +235,17 @@ $landfill-gasses: #f06807; border-radius: 10px; letter-spacing: 1.5px; text-align: center; - text-transform: uppercase; font-family: "Lato", sans-serif; line-height: 4rem; margin-top: 0; } +.child-stat-div { + margin-top: 2rem; +} - - - - - // Animations - +// Animations .animate-underline-emphasis { display: inline-block; position: relative; @@ -310,7 +273,7 @@ $landfill-gasses: #f06807; background: #fff; animation-name: border; animation-duration: 500ms; - animation-delay: 1s; + animation-delay: 2s; animation-fill-mode: both; } diff --git a/src/App.tsx b/src/App.tsx index e7fd78c..ff1a8db 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -647,6 +647,7 @@ export class App extends React.PureComponent { }); const carbonSavingsPercentFormatted: string = (endYearStats.carbonSavingsPercent * 100).toFixed(2); const gameTotalNetCostFormatted: string = noDecimalsFormatter.format(endYearStats.gameTotalSpending); + const carbonSavingsKgFormatted: string = noDecimalsFormatter.format(endYearStats.carbonSavingsPerKg); const projectedFinancedSpendingFormatted: string = noDecimalsFormatter.format(projectedFinancedSpending); const gameCurrentAndProjectedSpendingFormatted: string = noDecimalsFormatter.format(projectedFinancedSpending + endYearStats.gameTotalSpending); const costPerCarbonSavingsFormatted: string = endYearStats.costPerCarbonSavings !== undefined ? Intl.NumberFormat('en-US', { @@ -657,6 +658,7 @@ export class App extends React.PureComponent { // todo add NAN / undefined defensives let endGameResults: EndGameResults = { carbonSavingsPercent: carbonSavingsPercentFormatted, + carbonSavingsKg: carbonSavingsKgFormatted, gameTotalSpending: gameTotalNetCostFormatted, projectedFinancedSpending: projectedFinancedSpendingFormatted, gameCurrentAndProjectedSpending: gameCurrentAndProjectedSpendingFormatted, diff --git a/src/components/WinGame.tsx b/src/components/WinGame.tsx index a4d4c9c..cc16422 100644 --- a/src/components/WinGame.tsx +++ b/src/components/WinGame.tsx @@ -36,10 +36,10 @@ export default class WinGame extends React.Component { modules={[Pagination, Navigation, Autoplay, EffectFade]} spaceBetween={30} effect='fade' - speed={1000} + speed={1500} centeredSlides={true} autoplay={{ - delay: 9000, + delay: 10000, disableOnInteraction: true, }} pagination={{ @@ -54,8 +54,7 @@ export default class WinGame extends React.Component { statDivs={ [
+ className='slide-stat-div'> Your company has met the decarbonization goal, reducing CO2e emissions by @@ -68,18 +67,28 @@ export default class WinGame extends React.Component { - While spending - - on GHG reduction measures, your cost per kg reduced was - 2e`} - animationClass='animate-underline-emphasis'> - - -
+ [ +
+ In the game, you spent + + on GHG reduction measures. + + +
, +
+ {this.props.endGameResults.projectedFinancedSpending ? + In the years after the game, you will spend on financed and power purchase agreement projects. + + : + <> + } +
] } /> @@ -87,29 +96,26 @@ export default class WinGame extends React.Component { - {this.props.endGameResults.projectedFinancedSpending? - You are projected to spend - - on financed and renewed projects. - - : - <> - } - , + [
- Your total spend including projections is - + key={'slide3'} + className='slide-stat-div'> + + Your total spend on GHG reduction projects will be + + and you will have reduced your GHG emissions by + - -
+ , +
+ + Your cost of carbon reduction is + 2e`} animationClass='animate-underline-emphasis'> + +
] } /> @@ -120,31 +126,17 @@ export default class WinGame extends React.Component { [
- You reduced CO2e emissions by {this.props.endGameResults.carbonSavingsPercent} + className='slide-stat-div'> + Overall, You reduced your GHG emissions by {this.props.endGameResults.carbonSavingsPercent}%
,
- Cost per kg was reduced to {this.props.endGameResults.costPerCarbonSavings}/kg CO2e + className='slide-stat-div child-stat-div'> + This cost ${this.props.endGameResults.costPerCarbonSavings}/kg CO2e
,
Thank you!
, @@ -186,9 +178,9 @@ function UnderlineSpan(props: UnderlineProps) { const underlinedText = {__html: props.text}; return ( -   + {/*   */} -   + {/*   */} ) } @@ -198,7 +190,7 @@ export interface SlideProps {statDivs: ReactNode[]} function SlideContent(props: SlideProps) { const swiperSlide = useSwiperSlide(); - const animationCSS = swiperSlide.isActive? `animate__animated animate__fadeIn animate__fast` : ''; + const animationCSS = swiperSlide.isActive? `animate__animated animate__fadeIn animate__slow` : ''; return (