Skip to content

Commit

Permalink
add pulse
Browse files Browse the repository at this point in the history
  • Loading branch information
@eonarheim
eonarheim committed Jul 17, 2024
1 parent 85cd040 commit e9bc381
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 20 deletions.
85 changes: 78 additions & 7 deletions src/inventory.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Level } from './levels/main-level';
import { Unit, UnitType, UnitsConfig } from './unit';
import { Vector } from 'excalibur';
import { SfxrSounds } from './resources';
import { classMap } from 'lit/directives/class-map';

export type InventoryConfig = Record<UnitType, number>;

Expand All @@ -20,6 +21,14 @@ export class Inventory extends LitElement {
knight: 0,
archer: 0
} as any;
public pulse: Record<UnitType, boolean> = {
dragon: false,
orc: false,
goblin: false,
rat: false,
knight: false,
archer: false
} as any;

left = 0;
top = 0;
Expand Down Expand Up @@ -91,6 +100,57 @@ export class Inventory extends LitElement {
align-items: center;
}
@keyframes pulse {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.box {
position: relative;
box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.box::after {
content: "";
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.box:hover {
/* -webkit-transform: scale(1.25, 1.25);
transform: scale(1.25, 1.25); */
}
.box:hover::after {
/* opacity: 1; */
animation-duration: 1.5s;
animation-name: pulse;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.pulse.box::after {
animation-duration: 1.5s;
animation-name: pulse;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.unit-image {
background-image: var(--monster-image-path);
width: 32px;
Expand Down Expand Up @@ -142,6 +202,11 @@ export class Inventory extends LitElement {
this.requestUpdate();
}

setPulse(monster: UnitType, pulse: boolean = true){
this.pulse[monster] = pulse;
this.requestUpdate();
}

setLevel(level: Level) {
this.level = level;
}
Expand All @@ -155,7 +220,7 @@ export class Inventory extends LitElement {
this.requestUpdate();
}
}

override firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
const container = this.renderRoot.querySelector('.container') as HTMLElement;
container.style.setProperty('--monster-image-path', `url(${monsterSheetPng})`);
Expand All @@ -166,15 +231,15 @@ export class Inventory extends LitElement {
onSelection = (type: UnitType) => {
return () => {
if (this.counts[type] > 0) {
const unit = new Unit({type});
const unit = new Unit({ type });
if (this.level.currentSelection) {
this.level.cancelSelection();
}
this.level.selectUnit(unit, true);
this.counts[type]--;
SfxrSounds.selectInventory.play();
this.requestUpdate();
this.dispatchEvent(new CustomEvent('selection', { detail: type}));
this.dispatchEvent(new CustomEvent('selection', { detail: type }));
}
}
}
Expand All @@ -191,11 +256,17 @@ export class Inventory extends LitElement {
<ul>
${Object.entries(this.counts).map(([type, count]) => count > 0 ? html`
<li>
<button .title=${'Summoned Value: ' + UnitsConfig[type as UnitType].value.toString()} @pointerdown=${this.onSelection(type as UnitType)}>
<button
class=${classMap({
box: true,
pulse: this.pulse[type as UnitType]
})}
.title=${'Summoned Value: ' + UnitsConfig[type as UnitType].value.toString()}
@pointerdown=${this.onSelection(type as UnitType)}>
<span>${UnitsConfig[type as UnitType].value.toString()}:${type}</span>
${new Array(count).fill(null).map(() =>
html`<div class="unit-image ${type}"></div>`
)}
${new Array(count).fill(null).map(() =>
html`<div class="unit-image ${type}"></div>`
)}
</button>
</li>
` : html``)}
Expand Down
34 changes: 21 additions & 13 deletions src/levels/tutorial.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,19 +164,26 @@ export class Tutorial extends Level {
}

waitForSelection = (selection: UnitType) => {
this.inventory.setPulse(selection, true);
const future = new Future<void>();
if (this.selections.length > 0) {
const removeSelections = (selection: UnitType) => {
const index = this.selections.indexOf(selection);
this.selections.splice(index, 1);
if (index > -1) {
this.inventory.setPulse(selection, false);
future.resolve();
}
}
this.inventory.addEventListener('selection', ({ detail }: any) => {
if (selection === detail) {
future.resolve();
}
});
console.log(this.selections);
if (this.selections.length > 0) {
removeSelections(selection);
} else {
this.inventory.addEventListener('selection', ({ detail }: any) => {
if (selection === detail) {
removeSelections(detail);
}
}, {once: true});
}
return future.promise;
}

Expand All @@ -188,11 +195,11 @@ export class Tutorial extends Level {
future.resolve();
}
}))
this.puzzleGrid.events.on('placement', (tile) => {
if (tile.x === x && tile.y === y) {
future.resolve();
}
});
this.puzzleGrid.events.on('placement', (tile) => {
if (tile.x === x && tile.y === y) {
future.resolve();
}
});
return future.promise;
}

Expand All @@ -210,10 +217,11 @@ export class Tutorial extends Level {
const waitForPlacement = this.waitForPlacement;
const puzzleGrid = this.puzzleGrid;
const equation = this.equation;
const inventory = this.inventory;
coroutine(function* () {
const xPos = 508;
const goblinYPos = 85;
const ratYPos = 68;
const goblinYPos = 90;
const ratYPos = 73;
yield 500;
yield moveFingerAndRotate(vec(xPos, goblinYPos), 0);
yield waitForSelection('goblin');
Expand Down

0 comments on commit e9bc381

Please sign in to comment.