Merge pull request #318 from ORNL-AMO/issue-279-c

Final changes to loseGame, styling, stat changes
ORNL-AMO · Apr 1, 2024 · de9acf1 · de9acf1
2 parents 055a17c + 1050c7b
commit de9acf1
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 113 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -187,7 +187,7 @@ $landfill-gasses:  #f06807;
 		position: fixed;
 		z-index: -1;
 		background: url($image-url);
-		filter: blur(3px);
+		// filter: blur(3px);
 		background-size: cover;
 		background-position: bottom;
 		top: -1 * $blur-radius;
@@ -220,23 +220,22 @@ $landfill-gasses:  #f06807;
 	flex-grow: 1;
 	color: #000;
 	border-radius: 10px;
-	padding: 36px 64px;
+	padding: 16px 64px;
 	animation-fill-mode: 'forwards';
 	opacity: 0;
 	font-size: 36px;
 	letter-spacing: 0px;
 	line-height: 3rem;
 	font-weight: 900;
-	text-transform: uppercase;
 	font-family:"Lato", sans-serif;
 }
 
 .slide-stat-div {
-	font-size: 42px;
+	font-size: 36px;
 	color: #fff;
 	font-weight: 900;
 	border-radius: 10px;
-	letter-spacing: 1.5px;
+	letter-spacing: 1px;
 	text-align: center;
 	font-family: "Lato", sans-serif;
 	line-height: 4rem;
@@ -247,6 +246,34 @@ $landfill-gasses:  #f06807;
 	margin-top: 2rem;
 }
 
+.slide-overlay {
+	margin-top: 100px;
+	color: #444;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+
+.slide-overlay-rect {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	background-color: rgba(47,47,47,.75);
+	color: #fff;
+	max-width: 50%;
+	border-radius: 10px;
+	padding: 64px;
+	animation-fill-Mode: forwards;
+	animation-delay: 500ms;
+	opacity: 0
+}
+
+.slide-flex-space {
+	display: flex;
+	width: 100px;
+}
+
+
 
 // Animations  
   .animate-underline-emphasis {
@@ -314,4 +341,11 @@ $landfill-gasses:  #f06807;
 	// animation-delay: 6s;
 	// animation-fill-mode: forwards;
 	}
-}
+}
+
+.lose-captioned {
+	color: #fff;
+	font-size: 24px;
+	text-align: left;
+	align-self: center;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -598,6 +598,7 @@ export class App extends React.PureComponent<unknown, AppState> {
 
 		const isGameWon = newYearTrackedStats.carbonSavingsPercent >= 0.5;
 		const isEndOfGame = newYearTrackedStats.currentGameYear === this.state.gameSettings.totalGameYears + 1;
+
 		if (isGameWon) {
 			this.endGame(true, newYearTrackedStats, nextState);
 		} else if (isEndOfGame) {

diff --git a/src/components/Dialogs/EndGameDialog.tsx b/src/components/Dialogs/EndGameDialog.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Dialog, DialogActions } from '@mui/material';
+import { Dialog, DialogActions, Typography } from '@mui/material';
 import { ControlCallbacks, PageControl } from '../controls';
 import { EndGameResults, TrackedStats } from '../../trackedStats';
 import { GameSettings } from '../SelectGameSettings';
@@ -41,14 +41,21 @@ export default function EndGameDialog(props: EndGameDialogProps) {
 			{props.endGameResults.isWinningGame && <WinGame {...props}></WinGame>}
 			{!props.endGameResults.isWinningGame && <LoseGame {...props}></LoseGame>}
 
-			<DialogActions>
+			<DialogActions sx={{justifyContent: 'space-between'}}>
+				<Typography variant='h4' fontWeight='800'
+					textAlign='left' pl={2} component='div'
+					className='bp-font-color'>
+					Choose Your Own Solution
+				</Typography>
+				<div>
 				<ButtonGroup
 					buttons={buttons}
 					doPageCallback={props.doPageCallback}
 					doAppStateCallback={props.doAppStateCallback}
 					resolveToValue={props.resolveToValue}
 					useMUIStack={false}
-				/>
+					/>
+				</div>
 			</DialogActions>
 		</Dialog>
 	);

diff --git a/src/components/LoseGame.tsx b/src/components/LoseGame.tsx
@@ -7,53 +7,64 @@ import 'swiper/css/effect-fade';
 import './SwiperOverrides.css';
 import 'animate.css';
 import { PageControl } from './controls';
+import NorthIcon from '@mui/icons-material/North';
 import { EndGameResults } from '../trackedStats';
+import { Box } from '@mui/material';
 
 
 export default class LoseGame extends React.Component<LoseGameProps> {
 
     render() {
+        const statOneDelay = 6000;
+        const statTwoDelay = 7000;
+        const statThreeDelay = 8000;
+        const initialDelay = 4500;
+
         return (
             <div style={{ width: '100%', height: '100vh', position: 'relative' }}>
                 <Swiper
                     centeredSlides={true}
                 >
-                    <SwiperSlide id='fade-to-white' className='lose-game-bg'>
+                    <SwiperSlide id='fade-to-white' className='lose-game-bg' style={{position: 'relative'}}>
                         <div style={{
                             marginTop: '100px',
                             color: '#444',
                             display: 'flex',
+                            position: 'absolute',
+                            width: '100%'
+                        }}>
+                            <div  style={{
+                            display: 'flex',
                             flexDirection: 'column',
                             justifyContent: 'center',
                             maxWidth: '75%',
                             marginLeft: 'auto',
                             marginRight: 'auto',
                         }}>
-                            {/* <div
-                                style={{
-                                    display: 'flex',
-                                    color: '#fff',
-                                    borderRadius: '10px',
-                                    width: '100px'
-                                }}
-                            ></div> */}
-                            <div
+
+                            <Box
                                 className='lose-game-text animate__animated animate__fadeIn animate__slower'
-                                style={{ animationDelay: '500ms' }}>
+                                sx={{ 
+                                    animationDelay: {xs: `${String(statOneDelay - initialDelay)}ms`, md: `${statOneDelay}ms`}
+                                    }}>
                                 <span>Your company has reduced CO2e emissions by {`${this.props.endGameResults.carbonSavingsPercent}%`} in 10 years</span>
-                            </div>
+                            </Box>
 
-                            <div
+                            <Box
                                 className='lose-game-text animate__animated animate__fadeIn animate__slower'
-                                style={{ animationDelay: '3500ms' }}>
+                                sx={{ 
+                                    animationDelay: {xs: `${String(statTwoDelay - initialDelay)}ms`, md: `${statTwoDelay}ms`}
+                                    }}>
                                 <span>You were unable to meet your goal of decarbonizing by 50%</span>
-                            </div>
+                            </Box>
 
-                            <div
+                            <Box
                                 className='lose-game-text animate__animated animate__fadeIn animate__slower'
-                                style={{ animationDelay: '7000ms' }}>
+                                sx={{ 
+                                    animationDelay: {xs: `${String(statThreeDelay - initialDelay)}ms`, md: `${statThreeDelay}ms`}
+                                    }}>
                                 <span>Try again?</span>
-                            </div>
+                            </Box>
                             <div
                                 style={{
                                     display: 'flex',
@@ -62,8 +73,35 @@ export default class LoseGame extends React.Component<LoseGameProps> {
                                     width: '100px'
                                 }}
                             ></div>
-
+                            </div>
                         </div>
+
+                        <Box sx={{
+                            color: '#444',
+                            display: {xs: 'none', md: 'flex'},
+                            flexDirection: 'column',
+                            justifyContent: 'end',
+                            height: '100%'
+                        }}>
+                            <div style={{flexGrow: '1'}}></div>
+                            <div className="lose-captioned">
+                                <div style={{ marginLeft: '96px' }}>
+
+                                <div className="animate__animated animate__fadeInRight" style={{ animationDelay: '1000ms' }}>
+                                    <span style={{ fontSize: '32px', fontWeight: '800' }}>
+                                       This is you &nbsp; <NorthIcon style={{ fontSize: '32px'}} /> 
+                                    </span>
+                                </div>
+                                <div className="animate__animated animate__fadeInRight" style={{ animationDelay: '3500ms' }}>
+                                    You should have visited the&nbsp; 
+                                    <br />
+                                    <a style={{ color: '#fff'}} href="https://betterbuildingssolutioncenter.energy.gov">
+                                        Better Building Solution Center</a>.
+                                </div>
+                                </div>
+                            </div>
+                            <div style={{flexGrow: '.1'}}></div>
+                        </Box>
                     </SwiperSlide>
                 </Swiper>
             </div>