1. 개요

스몬하면서 카드를 필터링해서 좀 더 쉽게 확인하기 위해 개발하기 시작함. / 물론 일단 개인용도로 쓰려고 ㅎㅎ

2. 변경 내역 + 소스 발췌본

• v0.02 : 색상 + 버전 기준 교차 필터링 추가
• v0.01 : 최초작성

핵심 기능 : 중요한 것은 속성 정보를 모두 변경 후 화면을 갱신 처리
이것은 추후 게임등에서 더블 버퍼링 할때도 유용하게 써먹음 .. 물론 세부 구현은 다름 (개별 버퍼에 그린 후 / 레이어 적층 후 / 한번에 화면 갱신 음... )
개별 속성 정보는 각 노드에 attribute(속성)을 만들어 저장하도록 함. json으로 저장

function attachEventListeners(){

    // 알파 베타 프로모션 
    $(".btnCards").click((e)=>{
        let bedition = parseInt($(e.target).attr('data-edition'));
        let checked = $(e.target).prop("checked");

        $( "div" ).each(function(){
            let iedition = parseInt($(this).attr('data-edition'));
            if(bedition==iedition){
                let data = JSON.parse($(this).attr('data'));
                if(checked){
                    data['edition']=true;
                }else{
                    data['edition']=false;
                }
                $(this).attr('data', JSON.stringify(data));
            }
        });
        updateDisplay();
    });

    // 색상
    $(".btnColor").click((e)=>{
        let bcolor = $(e.target).attr('data-color');
        let checked = $(e.target).prop("checked");

        $( "div" ).each(function(){
            let icolor = $(this).attr('data-color');
            if(bcolor==icolor){
                let data = JSON.parse($(this).attr('data'));
                if(checked){
                    data['color']=true;
                }else{
                    data['color']=false;
                }
                $(this).attr('data', JSON.stringify(data));
            }
        });
        updateDisplay();
    });
}

3. 기능 구현 진행 사항

STEP 1 : (진행중) 전체 카드 가지고 필터링 하기

• 현재시간 스타터팩 구매 비용
• 현재시간 시즌 정보 / 랭킹전 정보
• 전체 카드 목록 기준 카드 나열
• 알파 / 베타 / 프로모션 기준 필터링
• 색상(파이어, 어스, 데스, 워터, 골드, 그린) 기준 필터링
• 카드 희귀도(커몬, 레어, 에픽, 레전더리) 기준 필터링
• 소환사/몬스터 기준 필터링
• 어빌리티(스닉, 탱힐, 독, 힐 ...) 기준 필터링
• 레벨 기준 : 공격력, 스피드, 스킬 동적으로 표현

STEP 2 : (구상중) 내가 보유한 카드와 연동하기 ( 아이디 값 입력 받음 )

• 카드 기준 최고 랩의 고유 아이디 표시하기
• 내 카드 고유 아이디 전체 목록 표시+XP 기준 정렬하기

STEP 3 : (구상중) 피드백 받아서 좀 더 멋지게 꾸미기

4. 맺음말

• STEP 1 이 완료되는 시점에 github 공개를 할 예정 입니다. (지금은 아직 된 것이 별로 없어서 ㅋㅋ)
• 스몬을 가지고서 소소하게 뭐 만들어 보니 재미 있네요 ㅋㅋ
• 다들 즐거운 하루 되세요

자매품 : @steemit.holdem ::: 지루할 때 홀덤 한판 ?!

---

_{Sponsored ( Powered by dclick )}

My Actifit Report Card: October 18 2018

^{하루 잘 보내셨나요? 내일 오전 날씨입니다. 서울 7도, 대전 7도, 광주 8도, 춘천 5도,...}