stadium / Exports / Stadium

Class: Stadium

Stadium은 스프라이트가 배치될 수 있는 공간입니다.

const element = document.querySelector('.stadium')
const designedSize = { width: 1000, height: 1000 }
const actualSize = { width: 500, height: 500 }

const stadium = new Stadium(element, designedSize, actualSize);

Stadium을 초기화하면 element에는 다음과 같은 변화가 생깁니다

1. position이 relative로 설정됩니다
2. width와 height가 actualSize의 값으로 설정됩니다
3. 종횡비가 CSS Variable에 저장됩니다
   • --x-ratio: width / designedSize.width
   • --y-ratio: height / designedSize.height

Table of contents

Constructors

• constructor

Properties

• element
• pubsub
• sprites

Methods

• addSprite

Constructors

constructor

• new Stadium(element, designedSize, actualSize?): Stadium

Stadium 클래스의 생성자입니다.

Parameters

Name	Type	Default value	Description
element	HTMLDivElement	undefined	스타디움을 표시할 HTMLDivElement입니다.
designedSize	Size	undefined	스타디움의 설계 크기
actualSize	Size	designedSize	실제 렌더링될 Element의 크기

Returns

Stadium

Defined in

lib/stadium/index.ts:48

Properties

element

• element: HTMLDivElement

스타디움을 표시할 HTMLDivElement입니다.

Defined in

lib/stadium/index.ts:49

---

pubsub

• pubsub: PubSub<{ spriteMove: (sprite: Sprite) => void }>

Stadium의 이벤트를 구독할 수 있는 PubSub 객체

stadium.pubsub.sub('spriteMove', (sprite: Sprite) => {
   console.log(sprite, `가 이동했습니다.`);
})

Defined in

lib/stadium/index.ts:38

---

sprites

• sprites: Sprite[] = []

Stadium에 배치된 스프라이트들의 목록

Defined in

lib/stadium/index.ts:27

Methods

addSprite

▸ addSprite(sprite): void

스프라이트를 스타디움에 추가합니다. Stadium에 Sprite를 추가하는 과정을 mount라고 합니다.

stadium.add(sprite);

다음의 순서로 mount됩니다:

1. DOM에 Sprite의 엘리먼트가 추가됩니다.
2. sprite.onMount 이벤트를 호출합니다
   • onMount 함수에는 Stadium과 id가 전달됩니다.
   • id는 crypto.randomUUID 함수를 사용해서 만들어집니다. 고유함을 보장하지 않습니다.

Parameters

Name	Type	Description
sprite	Sprite	추가할 스프라이트 객체입니다.

Returns

void

Deprecated

Stadium.addSprite는 Stadium.add로 대체되었습니다.

Defined in

lib/stadium/index.ts:93