thepaperpilot/Super-Auto-Coots
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Super-Auto-Coots.git synced 2024-11-22 08:31:34 +00:00
Code Issues Releases Activity Actions

Victory and failure screens

Browse source
This commit is contained in:
thepaperpilot 2023-02-20 15:28:08 -06:00
parent 927571efa6
commit efb7872c17
3 changed files with 221 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/data/common.css
View file

@ -201,6 +201,29 @@
padding: 4vmin; 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) { @media (orientation: portrait) {
.teams-container { .teams-container {
flex-direction: column; flex-direction: column;
@ -215,3 +238,10 @@
height: 100%; height: 100%;
} }
} }
@keyframes swing {
0%, 100% { transform: rotate(-30deg); }
20% {transform:scale(.95);}
50% { transform: rotate(30deg); }
80% {transform:scale(.95);}
}

60
src/data/projEntry.tsx
View file

@ -25,6 +25,8 @@ import type { AbilityTypes, CharacterInfo, Character, BattleOutcome } from "./ty
import { formatWhole } from "util/bignum"; import { formatWhole } from "util/bignum";
import { createParticles } from "features/particles/particles"; import { createParticles } from "features/particles/particles";
import { render } from "util/vue"; import { render } from "util/vue";
import { globalBus } from "game/events";
import victoryParticles from "./victory.json";
export const characters: Record<string, CharacterInfo> = { export const characters: Record<string, CharacterInfo> = {
coots: { coots: {
@ -269,6 +271,40 @@ export const main = createLayer("main", function (this: BaseLayer) {
name: "Game", name: "Game",
minimizable: false, minimizable: false,
display: jsx(() => { 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) { if (battle.value != null) {
return ( return (
<div class={{ ["battle-container"]: true, fast: settings.fast }}> <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) { function clickCharacter(index: number) {
return (e?: MouseEvent) => { return (e?: MouseEvent) => {
if (main.selectedCharacter.value != null && main.selectedCharacter.value !== index) { if (main.selectedCharacter.value != null && main.selectedCharacter.value !== index) {

131
src/data/victory.json Normal file
View 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
}
}
}
]
}