mirror of
https://github.com/thepaperpilot/Super-Auto-Coots.git
synced 2024-11-22 00:21:33 +00:00
Victory and failure screens
This commit is contained in:
parent
927571efa6
commit
efb7872c17
3 changed files with 221 additions and 0 deletions
|
|
@ -201,6 +201,29 @@
|
|||
padding: 4vmin;
|
||||
}
|
||||
|
||||
.total-outcome-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.total-outcome {
|
||||
font-size: 4vmin;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.smiley {
|
||||
font-size: 20vmin;
|
||||
margin: 0;
|
||||
animation: swing 2s infinite ease;
|
||||
}
|
||||
|
||||
.total-outcome-container .button {
|
||||
margin: 0;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
@media (orientation: portrait) {
|
||||
.teams-container {
|
||||
flex-direction: column;
|
||||
|
|
@ -215,3 +238,10 @@
|
|||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes swing {
|
||||
0%, 100% { transform: rotate(-30deg); }
|
||||
20% {transform:scale(.95);}
|
||||
50% { transform: rotate(30deg); }
|
||||
80% {transform:scale(.95);}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ import type { AbilityTypes, CharacterInfo, Character, BattleOutcome } from "./ty
|
|||
import { formatWhole } from "util/bignum";
|
||||
import { createParticles } from "features/particles/particles";
|
||||
import { render } from "util/vue";
|
||||
import { globalBus } from "game/events";
|
||||
import victoryParticles from "./victory.json";
|
||||
|
||||
export const characters: Record<string, CharacterInfo> = {
|
||||
coots: {
|
||||
|
|
@ -269,6 +271,40 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
name: "Game",
|
||||
minimizable: false,
|
||||
display: jsx(() => {
|
||||
if (wins.value >= 5) {
|
||||
return (
|
||||
<div class="total-outcome-container">
|
||||
<span class="total-outcome">You Won!</span>
|
||||
<span class="smiley">😃</span>
|
||||
<Row>
|
||||
{new Array(3).fill(0).map((_, i) => (
|
||||
<CharacterSlot character={team.value[i]} />
|
||||
))}
|
||||
</Row>
|
||||
<button class="button" onClick={() => location.reload()}>
|
||||
Play again
|
||||
</button>
|
||||
{render(particles)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (lives.value <= 0) {
|
||||
return (
|
||||
<div class="total-outcome-container">
|
||||
<span class="total-outcome">You ran out of lives!</span>
|
||||
<span class="smiley">😰</span>
|
||||
<Row>
|
||||
{new Array(3).fill(0).map((_, i) => (
|
||||
<CharacterSlot character={team.value[i]} />
|
||||
))}
|
||||
</Row>
|
||||
<button class="button" onClick={() => location.reload()}>
|
||||
Play again
|
||||
</button>
|
||||
{render(particles)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (battle.value != null) {
|
||||
return (
|
||||
<div class={{ ["battle-container"]: true, fast: settings.fast }}>
|
||||
|
|
@ -596,6 +632,30 @@ export const main = createLayer("main", function (this: BaseLayer) {
|
|||
};
|
||||
});
|
||||
|
||||
let timeSinceFirework = 0;
|
||||
globalBus.on("update", diff => {
|
||||
if (main.wins.value >= 5) {
|
||||
timeSinceFirework += diff;
|
||||
if (timeSinceFirework >= 1) {
|
||||
timeSinceFirework = 0;
|
||||
const boundingRect = main.particles.boundingRect.value;
|
||||
if (!boundingRect) {
|
||||
return;
|
||||
}
|
||||
main.particles.addEmitter(victoryParticles).then(e => {
|
||||
e.updateOwnerPos(
|
||||
Math.random() * boundingRect.width,
|
||||
Math.random() * boundingRect.height
|
||||
);
|
||||
console.log(e);
|
||||
e.playOnceAndDestroy();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
timeSinceFirework = 0;
|
||||
}
|
||||
});
|
||||
|
||||
function clickCharacter(index: number) {
|
||||
return (e?: MouseEvent) => {
|
||||
if (main.selectedCharacter.value != null && main.selectedCharacter.value !== index) {
|
||||
|
|
|
|||
131
src/data/victory.json
Normal file
131
src/data/victory.json
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
{
|
||||
"lifetime": {
|
||||
"min": 1.5,
|
||||
"max": 2.5
|
||||
},
|
||||
"ease": [
|
||||
{
|
||||
"s": 0,
|
||||
"cp": 0.329,
|
||||
"e": 0.548
|
||||
},
|
||||
{
|
||||
"s": 0.548,
|
||||
"cp": 0.767,
|
||||
"e": 0.876
|
||||
},
|
||||
{
|
||||
"s": 0.876,
|
||||
"cp": 0.985,
|
||||
"e": 1
|
||||
}
|
||||
],
|
||||
"frequency": 0.001,
|
||||
"emitterLifetime": 0.1,
|
||||
"maxParticles": 100,
|
||||
"addAtBack": true,
|
||||
"pos": {
|
||||
"x": 0,
|
||||
"y": 0
|
||||
},
|
||||
"emit": false,
|
||||
"behaviors": [
|
||||
{
|
||||
"type": "alpha",
|
||||
"config": {
|
||||
"alpha": {
|
||||
"list": [
|
||||
{
|
||||
"time": 0,
|
||||
"value": 0.74
|
||||
},
|
||||
{
|
||||
"time": 1,
|
||||
"value": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "moveAcceleration",
|
||||
"config": {
|
||||
"accel": {
|
||||
"x": 0,
|
||||
"y": 2000
|
||||
},
|
||||
"minStart": 600,
|
||||
"maxStart": 600,
|
||||
"rotate": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "scale",
|
||||
"config": {
|
||||
"scale": {
|
||||
"list": [
|
||||
{
|
||||
"time": 0,
|
||||
"value": 0.5
|
||||
},
|
||||
{
|
||||
"time": 1,
|
||||
"value": 0.25
|
||||
}
|
||||
]
|
||||
},
|
||||
"minMult": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "color",
|
||||
"config": {
|
||||
"color": {
|
||||
"list": [
|
||||
{
|
||||
"time": 0,
|
||||
"value": "#962121"
|
||||
},
|
||||
{
|
||||
"time": 0.5,
|
||||
"value": "#214a96"
|
||||
},
|
||||
{
|
||||
"time": 1,
|
||||
"value": "#4c2196"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "rotation",
|
||||
"config": {
|
||||
"accel": 0,
|
||||
"minSpeed": 0,
|
||||
"maxSpeed": 200,
|
||||
"minStart": 0,
|
||||
"maxStart": 360
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "textureRandom",
|
||||
"config": {
|
||||
"textures": [
|
||||
"/particle.png"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "spawnShape",
|
||||
"config": {
|
||||
"type": "torus",
|
||||
"data": {
|
||||
"radius": 100,
|
||||
"x": 0,
|
||||
"y": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in a new issue