adds a background flash effect, makes metrics prettier
This commit is contained in:
Lars Berning
parent
ef86a4988f
commit
d662e6e71e
|
|
@ -14,10 +14,11 @@ const STAR_NUM = 10
|
|||
* @param {import('kaboom').KaboomCtx} k Kaboom Context
|
||||
*/
|
||||
export default function addSpaceBackground (k) {
|
||||
k.add([
|
||||
const background = k.add([
|
||||
k.rect(k.width() + 50, k.height() + 50),
|
||||
k.pos(-25, -25),
|
||||
k.color(0, 9, 28),
|
||||
redflash(),
|
||||
k.layer('background')
|
||||
])
|
||||
|
||||
|
|
@ -44,6 +45,28 @@ export default function addSpaceBackground (k) {
|
|||
{ speed: k.rand(STAR_SPEED * 0.5, STAR_SPEED * 1.5) }
|
||||
])
|
||||
}
|
||||
function redflash () {
|
||||
let timer = 0
|
||||
let origR = 0
|
||||
let flashing = false
|
||||
return {
|
||||
add () {
|
||||
origR = this.color.r
|
||||
},
|
||||
update () {
|
||||
if (flashing && timer < 0.2) {
|
||||
this.color.r = k.wave(origR, 100, timer * 20)
|
||||
timer += k.dt()
|
||||
} else {
|
||||
this.color.r = origR
|
||||
}
|
||||
},
|
||||
redflash () {
|
||||
timer = 0
|
||||
flashing = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
k.onUpdate('star', (star) => {
|
||||
star.move(0, star.speed)
|
||||
|
|
@ -52,4 +75,12 @@ export default function addSpaceBackground (k) {
|
|||
addStar(true)
|
||||
}
|
||||
})
|
||||
|
||||
function _redflash () {
|
||||
background.redflash()
|
||||
}
|
||||
|
||||
return {
|
||||
redflash: _redflash
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@ export default function StrokeFighterBattleScene (k) {
|
|||
// how much stroke power is needed to fire high power lasers
|
||||
const THRESHOLD_POWER = 180
|
||||
// training duration in seconds
|
||||
const TARGET_TIME = 5 * 60
|
||||
const TARGET_TIME = 10 * 60
|
||||
// strokes per minute at start of training
|
||||
const SPM_START = 14
|
||||
const SPM_START = 18
|
||||
// strokes per minute at end of training
|
||||
const SPM_END = 28
|
||||
const BULLET_SPEED = 1200
|
||||
|
|
@ -44,7 +44,7 @@ export default function StrokeFighterBattleScene (k) {
|
|||
'ui'
|
||||
], 'game')
|
||||
|
||||
addSpaceBackground(k)
|
||||
const background = addSpaceBackground(k)
|
||||
|
||||
function grow (rate) {
|
||||
return {
|
||||
|
|
@ -82,7 +82,7 @@ export default function StrokeFighterBattleScene (k) {
|
|||
k.shake(4)
|
||||
k.play('hit', {
|
||||
detune: -1200,
|
||||
volume: 0.3,
|
||||
volume: 0.6,
|
||||
speed: k.rand(0.5, 2)
|
||||
})
|
||||
})
|
||||
|
|
@ -141,12 +141,13 @@ export default function StrokeFighterBattleScene (k) {
|
|||
spawnBullet(player.pos.sub(16, 15))
|
||||
spawnBullet(player.pos.add(16, -15))
|
||||
} else {
|
||||
background.redify()
|
||||
spawnBullet(player.pos.sub(0, 20))
|
||||
spawnBullet(player.pos.sub(16, 15))
|
||||
spawnBullet(player.pos.add(16, -15))
|
||||
}
|
||||
k.play('shoot', {
|
||||
volume: 0.3,
|
||||
volume: 0.6,
|
||||
detune: k.rand(-1200, 1200)
|
||||
})
|
||||
}
|
||||
|
|
@ -176,7 +177,7 @@ export default function StrokeFighterBattleScene (k) {
|
|||
k.shake(1)
|
||||
k.play('hit', {
|
||||
detune: k.rand(-1200, 1200),
|
||||
volume: 0.1,
|
||||
volume: 0.3,
|
||||
speed: k.rand(0.2, 2)
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ export class GameComponent extends AppElement {
|
|||
height: 100vw;
|
||||
}
|
||||
}
|
||||
span .icon {
|
||||
div > .icon {
|
||||
height: 0.8em;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
|
@ -44,11 +44,25 @@ export class GameComponent extends AppElement {
|
|||
position: relative;
|
||||
}
|
||||
#widget {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.5em;
|
||||
margin: 1vw;
|
||||
background: var(--theme-widget-color);
|
||||
background: var(--theme-background-color);
|
||||
border-radius: var(--theme-border-radius);
|
||||
}
|
||||
.metric-unit {
|
||||
font-size: 80%
|
||||
}
|
||||
#widget div {
|
||||
width: 6.5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#buttons {
|
||||
padding: 0.5em;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
`
|
||||
]
|
||||
}
|
||||
|
|
@ -59,13 +73,19 @@ export class GameComponent extends AppElement {
|
|||
<canvas id="arcade"></canvas>
|
||||
<div id="container">
|
||||
<div id="widget">
|
||||
<span>${icon_route}${Math.round(metrics.distanceTotal)}</span><br/>
|
||||
<span>${icon_stopwatch}${metrics.splitFormatted}</span><br/>
|
||||
<span>${icon_bolt}${Math.round(metrics.powerRaw)}</span><br/>
|
||||
<span>${icon_paddle}${Math.round(metrics.strokesPerMinute)}</span><br/>
|
||||
${metrics?.heartrate ? html`<span>${icon_heartbeat}${Math.round(metrics.heartrate)}</span><br/>` : ''}
|
||||
<!-- todo: should use the same calculations as PerformanceDashboard -->
|
||||
<div>${icon_route}${Math.round(metrics.distanceTotal)}<span class="metric-unit">m</span></div>
|
||||
<div>${icon_stopwatch}${metrics.splitFormatted}<span class="metric-unit">/500m</span></div>
|
||||
<div>${icon_bolt}${Math.round(metrics.powerRaw)}<span class="metric-unit">watt</span></div>
|
||||
<div>${icon_paddle}${Math.round(metrics.strokesPerMinute)}<span class="metric-unit">/min</span></div>
|
||||
${metrics?.heartrate ? html`<div>${icon_heartbeat}${Math.round(metrics.heartrate)}<span class="metric-unit">bpm</span></div>` : ''}
|
||||
<div>${icon_bolt}${metrics.instantaneousTorque.toFixed(2)}<span class="metric-unit">trq</span></div>
|
||||
<div>${icon_bolt}${metrics.powerRatio.toFixed(2)}<span class="metric-unit">ratio</span></div>
|
||||
<div>${icon_bolt}${metrics.strokeState}</div>
|
||||
|
||||
<button @click=${this.openDashboard}>${icon_exit}</button>
|
||||
<div id='buttons'>
|
||||
<button @click=${this.openDashboard}>${icon_exit}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Common styles for UI elements
|
||||
*/
|
||||
|
||||
import { css } from 'lit-element'
|
||||
import { css } from 'lit'
|
||||
|
||||
export const buttonStyles = css`
|
||||
button {
|
||||
|
|
|
|||
Loading…
Reference in New Issue