Skip to content

Commit

Permalink
Mucho improves game over screen.
Browse files Browse the repository at this point in the history
  • Loading branch information
@saricden
saricden committed May 5, 2022
1 parent 9f30424 commit 97c5621
Show file tree
Hide file tree
Showing 19 changed files with 528 additions and 159 deletions.
Binary file added src/assets/music/mech-ost7.mp3
View file
Binary file not shown.
Binary file added src/assets/music/mech-ost8.mp3
View file
Binary file not shown.
Binary file added src/assets/particles/generic.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
89 changes: 40 additions & 49 deletions src/assets/ui-dom/game-over.html
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,45 @@
<div id="game-over">
<div>
<header id="game-heading">GAME OVER</header>

<div class="stat-grid">
<div style="transition-delay: 5s;">
<img src="/assets/ui-dom/icons/lg/clock.svg" alt="" />
<label>
<header>Match Duration</header>
<span id="total-time"></span>
</label>
</div>
<div style="transition-delay: 5.25s;">
<img src="/assets/ui-dom/icons/lg/bomb.svg" alt="" />
<label>
<header>Blocks Destroyed</header>
<span id="total-destruction"></span>
</label>
</div>
<div style="transition-delay: 5.5s;">
<img src="/assets/ui-dom/icons/lg/bomb.svg" alt="" />
<label>
<header>Other Stat</header>
<span>???</span>
</label>
</div>
<div style="transition-delay: 5.75s;">
<img src="/assets/ui-dom/icons/lg/bomb.svg" alt="" />
<label>
<header>Other Stat</header>
<span>???</span>
</label>
</div>
<div style="transition-delay: 6s;">
<img src="/assets/ui-dom/icons/lg/bomb.svg" alt="" />
<label>
<header>Other Stat</header>
<span>???</span>
</label>
</div>
<div style="transition-delay: 6.25s;">
<img src="/assets/ui-dom/icons/lg/bomb.svg" alt="" />
<label>
<header>Other Stat</header>
<span>???</span>
</label>
</div>
</div>
<img id="loser-profile" src="" alt="" />
<img id="winner-profile" src="" alt="" />
<div id="blur-filter"></div>
<header>
<small>This game's winner is...</small>
<span id="winner-name"></span>
</header>

<button id="btn-next-game">
<label>Next Game</label>
<div id="game-stats">
<div>
<img src="/assets/ui-dom/icons/lg/clock.svg" alt="" />
<span id="total-time"></span>
<label>Total Time</label>
</div>
<div>
<img src="/assets/ui-dom/icons/lg/tile.svg" alt="" />
<span id="total-destruction"></span>
<label>Blocks Destroyed</label>
</div>
<div>
<img src="/assets/ui-dom/icons/lg/crosshair.svg" alt="" />
<span id="accuracy-rating"></span>
<label>Accuracy Rating</label>
</div>
<div>
<img src="/assets/ui-dom/icons/lg/bomb.svg" alt="" />
<span id="damage-inflicted"></span>
<label>Damage Inflicted</label>
</div>
<div>
<img src="/assets/ui-dom/icons/lg/heart-broken.svg" alt="" />
<span id="damage-taken"></span>
<label>Damage Taken</label>
</div>
<div>
<img src="/assets/ui-dom/icons/lg/ruler.svg" alt="" />
<span id="distance-moved"></span>
<label>Distance Moved</label>
</div>
<button id="btn-next-match">
<label>Next Match</label>
<img src="/assets/ui-dom/icons/arrow-right.svg" alt="" />
</button>
</div>
Expand Down
3 changes: 3 additions & 0 deletions src/assets/ui-dom/icons/lg/crosshair.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions src/assets/ui-dom/icons/lg/heart-broken.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions src/assets/ui-dom/icons/lg/ruler.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions src/assets/ui-dom/icons/lg/tile.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
216 changes: 146 additions & 70 deletions src/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -690,121 +690,197 @@ canvas {
color: #FFF;
font-family: sans-serif;

opacity: 0;
visibility: hidden;
transition: opacity 4s, visibility 4s;
transform: scale(2);
transition: transform 0.5s;
}

#game-over.open {
opacity: 1;
visibility: visible;
#game-over.show {
transform: scale(1);
}

#loser-profile {
z-index: 0;
position: absolute;
bottom: 0;
left: 20%;
width: 300px;
height: auto;
transform: translate(-50%, 25px);
filter: blur(3px);
pointer-events: none;

transition: transform 1s;
}

#loser-profile.panned {
transform: translate(calc(-50% - 100px), 25px);
}

#game-over > div {
width: 725px;
#winner-profile {
z-index: 1;
position: absolute;
bottom: 0;
left: 50%;
width: auto;
height: 100%;
padding: 40px;
text-align: right;
transform: translate(-50%, 50px);
pointer-events: none;

transition: transform 1s;
}

#game-over > div > header {
margin-bottom: 20px;
font-size: 96px;
letter-spacing: 15px;
#winner-profile.panned {
transform: translate(calc(-50% - 250px), 50px);
}

transform: translateX(calc(100% + 40px));
opacity: 0;
transition: transform 1s, opacity 1s;
transition-delay: 3s;
#winner-profile.npc {
filter: hue-rotate(90deg);
}

#game-over.open > div > header {
transform: translateX(0);
#loser-profile.npc {
filter: blur(3px) hue-rotate(90deg);
}

#blur-filter {
z-index: 3;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
backdrop-filter: blur(50px) grayscale(50%);

visibility: visible;
opacity: 1;
transition: visibility 0.5s, opacity 0.5s, background-color 2.4s;
}

.stat-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
#blur-filter.peek {
background-color: rgba(255, 255, 255, 0.85);
}

.stat-grid > div {
width: calc(33% - 20px);
#blur-filter.off {
visibility: hidden;
opacity: 0;
}

#game-over header {
z-index: 2;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
padding: 10px;
border: solid 2px #FFF;
align-items: flex-start;
justify-content: flex-start;
padding: 40px;
border-radius: 20px;
text-align: center;
background-color: rgba(255, 255, 255, 0.15);
background-color: rgba(0, 0, 0, 0.75);
font-size: 38px;
font-family: sans-serif;
font-weight: 600;
text-align: left;
user-select: none;

opacity: 0;
transform: translateY(50px);
transition: opacity 0.75s, transform 0.75s;
transition: opacity 2s;
}

#game-over.open .stat-grid > div {
#game-over.show header {
opacity: 1;
transform: translateY(0);
}

.stat-grid > div img {
width: 75%;
height: auto;
#winner-name {
margin-top: 10px;
font-size: 100px;
font-weight: 900;
letter-spacing: 10px;
text-transform: uppercase;
}

.stat-grid > div label {
margin-top: 30px;
#game-stats {
z-index: 2;
position: absolute;
top: 0;
right: 0;
width: 40%;
height: 500px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
padding: 40px;
user-select: none;

transform: translateX(100px);
opacity: 0;

transition: width 1s, transform 1s, opacity 1s;
}

.stat-grid > div label header {
display: block;
font-size: 20px;
font-weight: 400;
#game-stats.on {
width: 50%;
transform: translateX(0);
opacity: 1;
}

.stat-grid > div label span {
display: block;
margin-top: 5px;
#game-stats > div {
width: 33%;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 20px;
color: #FFF;
overflow: visible;
white-space: nowrap;
}

#game-stats > div img {
width: auto;
height: 70px;
margin: auto 0;
}

#game-stats > div span {
font-size: 36px;
font-weight: 600;
}

#btn-next-game {
display: inline-flex;
#game-stats > div label {
font-weight: 900;
font-size: 24px;
}

#btn-next-match {
width: calc(100% - 40px);
display: flex;
flex-direction: row;
align-items: center;
font-size: 46px;
background-color: #FFF;
color: #000;
border: 0;
justify-content: center;
margin: 20px auto 0 auto;
padding: 20px;
border: solid 2px #FFF;
border-radius: 20px;
padding: 20px 84px;
background-color: rgba(255, 255, 255, 0.75);
color: #000;
font-size: 32px;
text-transform: uppercase;
cursor: pointer;

opacity: 0;
transform: translateX(-100px);
transition: opacity 2s, transform 2s, background-color 0.35s;
transition: background-color 0.35s;
}

#btn-next-game:hover {
background-color: rgba(255, 255, 255, 0.5);
#btn-next-match:hover {
background-color: rgba(255, 255, 255, 1);
}

#btn-next-game * {
#btn-next-match * {
pointer-events: none;
}

#btn-next-game label {
margin-right: 10px;
}

#btn-next-game.on {
transform: translateX(0);
opacity: 1;
#btn-next-match img {
margin-left: 10px;
}
Loading

0 comments on commit 97c5621

Please sign in to comment.