웹 구성 요소로 치팅하는 방법

누군가*, 몇 년 전에 불가능한 이름을 가진 웹 구성 요소를 만들었습니다.<card-t> (Web Components는 태그 이름에 하이픈이 필요하기 때문에)

하나의 단일 파일에 52개의 SVG 카드를 묶습니다!

하나의 웹 구성 요소를 훔쳐봅시다.



<script src="https://cardmeister.github.io/elements.cardmeister.min.js"></script>

그런 다음 Web Component 클래스 정의를 사용합니다.
우리 자신의 를 위해:

<script>
customElements.define( "poker-card", 
  class extends customElements.get("card-t") {})
</script>


이제 52개의 SVG 카드를 사용할 수 있습니다.



<poker-hand>
  <poker-card suit=Hearts rank=Ace></poker-card>
  <poker-card suit=Hearts rank=King></poker-card>
  <poker-card suit=Hearts rank=Queen></poker-card>
  <poker-card suit=Hearts rank=Jack></poker-card>
  <poker-card suit=Hearts rank=10></poker-card>
</poker-hand>




포커 게임... 솔리테어, 하트...를 프로그래밍하기만 하면 됩니다.



문서 및 라이선스가 없는 소스가 포함된 오래된 Repo: https://github.com/cardmeister/cardmeister.github.io

*) 나

좋은 웹페이지 즐겨찾기