Skip to content

Commit

Permalink
Merge pull request #315 from ORNL-AMO/issue-279-c
Browse files Browse the repository at this point in the history 
Issue 279 - Rewrite stats, readability changes, add kg per year
  • Loading branch information
@nbintertech
nbintertech authored Mar 29, 2024
2 parents 63147f2 + 0aae0d0 commit 67b9fae
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 112 deletions.
67 changes: 15 additions & 52 deletions src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}

Expand Down
2 changes: 2 additions & 0 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -647,6 +647,7 @@ export class App extends React.PureComponent<unknown, AppState> {
});
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', {
Expand All @@ -657,6 +658,7 @@ export class App extends React.PureComponent<unknown, AppState> {
// todo add NAN / undefined defensives
let endGameResults: EndGameResults = {
carbonSavingsPercent: carbonSavingsPercentFormatted,
carbonSavingsKg: carbonSavingsKgFormatted,
gameTotalSpending: gameTotalNetCostFormatted,
projectedFinancedSpending: projectedFinancedSpendingFormatted,
gameCurrentAndProjectedSpending: gameCurrentAndProjectedSpendingFormatted,
Expand Down
112 changes: 52 additions & 60 deletions src/components/WinGame.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,10 @@ export default class WinGame extends React.Component<WinGameProps> {
modules={[Pagination, Navigation, Autoplay, EffectFade]}
spaceBetween={30}
effect='fade'
speed={1000}
speed={1500}
centeredSlides={true}
autoplay={{
delay: 9000,
delay: 10000,
disableOnInteraction: true,
}}
pagination={{
Expand All @@ -54,8 +54,7 @@ export default class WinGame extends React.Component<WinGameProps> {
statDivs={
[<div
key={'slide1'}
className='slide-stat-div'
style={{marginTop: 0}}>
className='slide-stat-div'>
<span>Your company has met the decarbonization goal, reducing CO<sub>2</sub>e emissions by</span>
<UnderlineSpan text={`${this.props.endGameResults.carbonSavingsPercent}% `}
animationClass='animate-underline-emphasis'></UnderlineSpan>
Expand All @@ -68,48 +67,55 @@ export default class WinGame extends React.Component<WinGameProps> {
<SwiperSlide className='slide2-image'>
<SlideContent
statDivs={
[<div
key={'slide2'}
className='slide-stat-div'>
<span>While spending
<UnderlineSpan text={`$${this.props.endGameResults.gameTotalSpending}`}
animationClass='animate-underline-emphasis'></UnderlineSpan>
on GHG reduction measures, your cost per kg reduced was
<UnderlineSpan text={`$${this.props.endGameResults.costPerCarbonSavings}/kg CO<sub>2</sub>e`}
animationClass='animate-underline-emphasis'></UnderlineSpan>
</span>

</div>
[
<div
key={'slide2'}
className='slide-stat-div'>
<span>In the game, you spent
<UnderlineSpan text={`$${this.props.endGameResults.gameTotalSpending}`}
animationClass='animate-underline-emphasis'></UnderlineSpan>
on GHG reduction measures.
</span>

</div>,
<div
key={'slide2b'}
className='slide-stat-div child-stat-div'>
{this.props.endGameResults.projectedFinancedSpending ?
<span>In the years after the game, you will spend <UnderlineSpan text={`$${this.props.endGameResults.projectedFinancedSpending}`}
animationClass='animate-underline-emphasis'></UnderlineSpan> on financed and power purchase agreement projects.
</span>
:
<></>
}
</div>
]
}
/>
</SwiperSlide>
<SwiperSlide className='slide3-image'>
<SlideContent
statDivs={
[<div
key={'slide3'}
className='slide-stat-div'>
{this.props.endGameResults.projectedFinancedSpending?
<span>You are projected to spend
<UnderlineSpan text={`$${this.props.endGameResults.projectedFinancedSpending}`}
animationClass='animate-underline-emphasis'></UnderlineSpan>
on financed and renewed projects.
</span>
:
<></>
}
</div>,
[
<div
key={'slide3b'}
className='slide-stat-div'
style={{marginTop: '3rem'}}>
<span>Your total spend including projections is
<UnderlineSpan text={`$${this.props.endGameResults.gameCurrentAndProjectedSpending}`}
animationClass='animate-underline-emphasis'></UnderlineSpan>
key={'slide3'}
className='slide-stat-div'>
<span>
Your total spend on GHG reduction projects will be
<UnderlineSpan text={`$${this.props.endGameResults.gameCurrentAndProjectedSpending}`}
animationClass='animate-underline-emphasis'></UnderlineSpan>
and you will have reduced your GHG emissions by
<UnderlineSpan text={`${this.props.endGameResults.carbonSavingsKg} kg/yr`} animationClass='animate-underline-emphasis'></UnderlineSpan>
</span>

</div>
</div>,
<div
key={'slide3b'}
className='slide-stat-div child-stat-div'>
<span>
Your cost of carbon reduction is
<UnderlineSpan text={`$${this.props.endGameResults.costPerCarbonSavings}/kg CO<sub>2</sub>e`} animationClass='animate-underline-emphasis'></UnderlineSpan>
</span>
</div>
]
}
/>
Expand All @@ -120,31 +126,17 @@ export default class WinGame extends React.Component<WinGameProps> {
[
<div
key={'slide4c'}
className='slide-stat-div'
style={{
fontSize: '24px', textTransform: 'uppercase',
maxWidth: '75%',
marginLeft: 'auto',
marginRight: 'auto',
lineHeight: '3rem'
}}>
You reduced CO<sub>2</sub><small>e</small> emissions by {this.props.endGameResults.carbonSavingsPercent}
className='slide-stat-div'>
Overall, You reduced your GHG emissions by {this.props.endGameResults.carbonSavingsPercent}%
</div>,
<div
key={'slide4b'}
className='slide-stat-div'
style={{
fontSize: '24px', textTransform: 'uppercase',
maxWidth: '75%',
marginLeft: 'auto',
marginRight: 'auto',
lineHeight: '3rem'
}}>
Cost per kg was reduced to {this.props.endGameResults.costPerCarbonSavings}/kg CO<sub>2</sub>e
className='slide-stat-div child-stat-div'>
This cost ${this.props.endGameResults.costPerCarbonSavings}/kg CO<sub>2</sub>e
</div>,
<div
key={'slide4'}
className='slide-stat-div'
className='slide-stat-div child-stat-div'
style={{ fontSize: '64px', marginTop: '3rem' }}>
<span>Thank you!</span>
</div>,
Expand Down Expand Up @@ -186,9 +178,9 @@ function UnderlineSpan(props: UnderlineProps) {
const underlinedText = {__html: props.text};
return (
<Fragment>
<span>&nbsp;</span>
{/* <span>&nbsp;</span> */}
<span className={animationCSS} dangerouslySetInnerHTML={underlinedText}></span>
<span>&nbsp;</span>
{/* <span>&nbsp;</span> */}
</Fragment>
)
}
Expand All @@ -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 (
<div style={{
Expand All @@ -221,7 +213,7 @@ function SlideContent(props: SlideProps) {
display: 'flex',
flexDirection: 'column',
flexGrow: 1,
backgroundColor: 'rgba(68,68,68,.8)',
backgroundColor: 'rgba(47,47,47,.75)',
color: '#fff',
maxWidth: '50%',
borderRadius: '10px',
Expand Down
1 change: 1 addition & 0 deletions src/trackedStats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ export interface TrackedStats {
export interface EndGameResults {
carbonSavingsPercent: string,
gameTotalSpending: string,
carbonSavingsKg: string,
projectedFinancedSpending: string,
gameCurrentAndProjectedSpending: string,
costPerCarbonSavings: string,
Expand Down

0 comments on commit 67b9fae

Please sign in to comment.