# 1 깃허브에서 포켓몬을 수집하자!

이 글에는 svg가 들어있다. 기본모드로 수정하면 바로 삭제되니 왠만하면 그대로 두자.

 

이번 프로젝트는 어떤 개발자의 멋진 작품을 보고 영감을 얻었다.

[멋진 작품은 이거: https://github.com/devxb/gitanimals]

 

svg로 화면을 구성하는 것을 보고 신기했는데, 보통 깃허브 마크다운은 자바스크립트를 허용하지 않아서 제대로 된 뭔가를 해볼 수 없기 때문에 이를 우회한 것을 보고 감탄을 했었다.

그리고 보통 프로젝트를 만들다보면 나도 모르게 프론트엔드에 시간을 많이 쏟게 되는데, 이는 물론 그 자체로 재밌었던 프로젝트(순무모드) 들도 있었지만 꽤 스트레스다. svg로 간단하게 화면을 구성할 수 있다면 더할 나위없이 좋다고 판단했다.

 

나도 바로 svg를 이용해서 뭔가를 만들고 싶었고 곧바로 포켓몬을 수집하는 것을 떠올렸다.

위 레포를 보고 수집하는 것과 내가 아르세우스에서 도감 채우려 시간을 쏟아부었던게 더해진 결과인 것 같다.

 

초기에는 깃허브에 커밋을 할수록 포켓몬을 하나씩 받을 수 있고 화면에 둥둥 떠다니는 형태로 화면을 구현하기로 했다.

그래서 아래와 같이 좌하단에 지금까지 모든 포켓몬 수가 뜨고 포켓몬 이미지가 돌아다니는 형태를 생각했다.

 

이번에도 역시 파이썬으로 백엔드를 구현하고자 했고 장고와 fastapi 사이에서 고민한 뒤  fastapi를 택했다.

최대한 간소화해서 빠르게 작성하는게 목표였기 때문이다.

그렇기 때문에 프로젝트 구조도 좀더 단순화 하고 싶었다. 바로 전 프로젝트인 "스팀 게임 퀴즈"는 너무 파일이 많다. 구조도 좀 복잡한 느낌이고..

위 레포인 gitanimals을 많이 참고해서 구현했다. 코드는 orm 모델을 struct 마냥 쓰지 않고(이전 프로젝트가 딱 그랬다) 모델과 관련된 동작을 넣으니 간소화된 것 같았다.

 

그리고 개발에 들어갔는데.. 둥둥 떠다니는 것은 쉽지 않았다. 게다가 포켓몬은 움직이지도 않아서 많이 곤란했다.

그러던 중, http://www.pokencyclopedia.info/ 에서 포켓몬 움직이는 스프라이트를 구할 수 있는 것을 알아냈다.

그래서 포켓몬이 걸어다니는 방식으로 가닥을 잡았다.

 

처음에는 화면에 돌아다닌 다는 생각 때문에 말그대로 돌아다니는 형태로 구현했다.

왜 버벅대지? gif 변환이 잘 안된건가? 잘 모르겠다.

다시 말하지만 이건 svg만 사용해서 만든 작품이다. (물론 생성기는 파이썬 코드지만, 지금 생성된 svg를 보고 있다)

왼쪽 오른쪽 발 내밀어 걷는 프레임 2개가 반복되는 것, 반 시계방향으로 방향이 바뀌는 것은 모두 css 애니메이션으로 구현했다.

 

포켓몬은 왼, 오, 아래, 위 프레임 2개씩 총 8개의 Image 엘리먼트가 묶여있고, 이를 한 주기를 4/1씩 쪼개서 보여주는 방식이다. 발이 교차하는 프레임은 더 짦은 한 주기마다 절반씩 보여준다.

 

포켓몬은 근본 1세대(주인장 레드/블루 안해봄)를 기준으로 151개나 되기 때문에 둥글게 도는 방식은 적합하지 않았다.

솔직히 너무 많아서 징그러웠다.

그래서 아래와 같이 단방향으로 가는 것으로 선회했다. (사실 이 방식이 더 만들기는 편하다 개.이.득)

이정도면 내가 어떤 포켓몬을 가지고 있는건지 도통 알수가 없다. 돈이 엄청 많은게 이런느낌인건가

이렇게 만들다보니 갑자기 닌텐도의 맴매가 두려워졌다.

닌텐도가 고소를 하면 어쩌지? 열심히 만들고도 프로젝트를 폐기하며 엉엉 우는 미래가 그려졌다.

 

그래서 자료조사를 해보았는데 아예 포켓몬 이미지를 깃허브에 올린 대담한 자들도 있었고, 포켓몬을 이용한 서비스는 종종 있었다.

상업화만 안하고 저작권 명시만 하면 괜찮을 것 같았다.

그리고 열심히 만들고 폐기할때 마상입는 것을 방지하고자 최대한 빨리 만들었다.

 

이렇게 만들고 다시 gitanimal을 보고나니 왜 포켓몬을 받게 되었는지 설명이 없었다.

기여 수를 표현해야 겠다고 느꼈다.

 

2jun0's Pokemons (28/151) CP 2800

 

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="250">
    <style xmlns="http://www.w3.org/2000/svg">
        @font-face{
            font-family:public pixel;
            font-style:normal;
            font-weight:400;
            src:url(data:font/woff;chatset=utf-8;base64,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) format('woff')
        }

        :root {
            --pokemon-x-offsets: 20px;
            --pokemon-y-offsets: 20px;
            --pokemon-move-duration: 10s;
            --pokemon-move-delay: 0s;
        }

        text { font-family: 'Public Pixel', sans-serif; }
        .header { font-weight: 0; font-size: 12px; }
        .bottom { font-weight: 0; font-size: 10px; }

        .frame-1 { animation: 0.5s linear infinite move-frame-1; }
        .frame-2 { animation: 0.5s linear infinite move-frame-2; }
        @keyframes move-frame-1 { 0% {opacity: 0;} 49.99% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 1;} }
        @keyframes move-frame-2 { 0% {opacity: 1;} 49.99% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 0;} }

        .pokemon {
            opacity: 0;
            animation-name: move-pokemon;
            animation-duration: var(--pokemon-move-duration);
            animation-delay: var(--pokemon-move-delay);
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        @keyframes move-pokemon {
            0% {opacity: 1; transform: translate(120%, calc(64px + var(--pokemon-y-offsets)));}
            100% {opacity: 1; transform: translate(-120%, calc(64px + var(--pokemon-y-offsets)));}
        }
    </style>
    <rect x="0.01%" y="0.01%" rx="4.5" width="99.99%" height="99.99%" stroke="#e4e2e2" fill="#ffffff" stroke-opacity="1"/>
    <g transform="translate(20, 30)">
        <text x="0" y="0" class="header">2jun0's Pokemons</text>
    </g>
    <g transform="translate(20, 230)">
        <text x="25" y="0" class="bottom">(28/151)</text>
        <image xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="-7" y="-22" width="30" height="30" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAAIVBMVEWwsLAwMDBIUFB4eICYSDigoMDYWDjYyPD4kDj40Dj4+Phh7PQLAAAAAXRSTlMAQObYZgAAAIFJREFUGNNjYCAeMAoKCsDZEh0djTAekN3RkQiV6JwB5LRBpCRmrQRxEjE4jB0QZWkCYA4YpGHheHSAVaWAOSodShptaWlOYI6SUlRQWoqSEtgiYaVVi5SUlAzB9ogvjgpSUjIPhDinyti8vLwU6lLRciA7EOYF0dDQQAFsniMCAAAOwy6M9C6LvQAAAABJRU5ErkJggg=="/>
    </g>
    <g transform="translate(180, 230)">
        <text x="25" y="0" class="bottom">CP 2800</text>
    </g>
    <g id="pokemons" transform="translate(0,40)">
        <svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-1 {
            --pokemon-move-duration: 14.86499306433226s;
            --pokemon-x-offsets: calc(24px+60px);
            --pokemon-y-offsets: 24px;
            --pokemon-move-delay: 5.593418347473542s;
        }
    </style>

    <g class="pokemon" id="pokemon-1">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUAAAAAAAAwMDBQIBB4IECIKBiQkJC4QGi4iBjAwNDIOBDYcJjoYEDoqEjo6Pj4wBAyGcGhAAAAAXRSTlMAQObYZgAAALpJREFUKFNjYBjagMUBSBgyCsAF3LeGBjB/lEcImGw+syrwx38kgY335qyS/wjnM3tHTXxzSt5QECZgXqo1786ppf1wJaLBWasEBUWbDeACi1MXrlolijCTcXHqqsyJqwwQAlFiamlaUQgBBlExo5laUYHCcCHBwCwl1aWmoYthAhKhgquiQsNmTobymf+3hoYuNs1MUoAZat/RaGwglQbjg0QaGRikJjEgACPQ1VJJSAIMQH8xInSQCABrWzEWkTgwpgAAAABJRU5ErkJggg=="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUAAAAAAAAwMDBQIBB4IECIKBiQkJC4QGi4iBjAwNDIOBDYcJjoYEDoqEjo6Pj4wBAyGcGhAAAAAXRSTlMAQObYZgAAALVJREFUKFNjYBjagMUBSBgyCsAF3LeGBjB/lEcImGw+syrwx38kgY335qyS/wjnM3tHTXxzSt5QECZgXqo176qgaD9ciWhw1iqpVaLNBnCBxakLl00MRZjJuDh1VZpUlAFCIEpMbaZWlIGxMVyPWKiS6qrAVYthAoKBWauWLrWKhKuQCBVcFRUaNhNmCvP/1tDQxaaZk+CG2nc0GhswrlRgQIg0AolFDAjACHK1EJIAgyADBQAAadwxPy1mf/kAAAAASUVORK5CYII="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-2 {
            --pokemon-move-duration: 10.761026542896147s;
            --pokemon-x-offsets: calc(38px+60px);
            --pokemon-y-offsets: 38px;
            --pokemon-move-delay: 4.054067614520865s;
        }
    </style>

    <g class="pokemon" id="pokemon-2">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJFBMVEUAAAAAAAAwSFA4gKBIqNhQQDhoaGiQcEioqLCwmGjoyJjo6PhuDlEjAAAAAXRSTlMAQObYZgAAAH1JREFUKJFjYBiRIDRQAJW/ctZSZBHWWStXrZqIJBAFEpiKLjBLAEkHhsDKlTNnIgmEzlw5MzRyVgBcILxy5lQgRAgEbS8vLQ1H2MKkJl1YWl6OUMBoKC0iLiiK5AyhZmNFJAUMDCJOTkaGyF5jFFJRVlZA8S2joCCqAG4AAOHfJsKRzZjLAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJFBMVEUAAAAAAAAwSFA4gKBIqNhQQDhoaGiQcEioqLCwmGjoyJjo6PhuDlEjAAAAAXRSTlMAQObYZgAAAHlJREFUKM9jYBiRIDRQAJW/ctZSZBHWWStXrZqIJBAFEpiKLjBLAEkHhsDKlTNnIgmEzlw5MzRyVgBcILxy5lQgRAgEbS8vLQ1H2MKkJl1YWl6OUMBoKC0iLiiK5AyhZmNFJAUMDCJOTkaGyF5jVEITYGAQFBQgNqAA6b8m3CrURGoAAAAASUVORK5CYII="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-3 {
            --pokemon-move-duration: 14.173510102308228s;
            --pokemon-x-offsets: calc(-23px+60px);
            --pokemon-y-offsets: -23px;
            --pokemon-move-delay: 1.7588773442909367s;
        }
    </style>

    <g class="pokemon" id="pokemon-3">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAABYODCIODiQcEi4oGjAQGjo2Jjo6Pj4qAAMyfwPAAAAAXRSTlMAQObYZgAAALVJREFUKFPVkMEJwzAMRR1PYBdKrolAmE6QcyALVCA8QCdIaPgbdIduWztxHOip137QQQ9L/8vG/JksfYGwZNjVnkDeBcjZT8BFicsTizVOdxYsBQRgnh0zjpkE2tEwRyzHSP8crbIcS5iQgCiXJYR1wGxFFOsGWrwGSAZEsoMHkEySL7YLmjb7+byj+DY+oMeV9PSNSNlU9VaDZEAq/N6DWIkMddTVbyEhr86curq9qnypn/QBg8Mygr4y9i0AAAAASUVORK5CYII="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAABYODCIODiQcEi4oGjAQGjo2Jjo6Pj4qAAMyfwPAAAAAXRSTlMAQObYZgAAALZJREFUKFPVjssJwzAQRGVVIAWMr/LCYlJBzgY3kIXFBaQCm4jpID2k26ziT5xbrhmd9Nj5OPdnovT996AY/IFy7hA6yG7AgKtX4rQZ8jgkFswr6IBpcszYPAaa3sCIebO0994ryxbCBAOivIYQ8gWTF1HkN2jwuEAKIJIF3IDAbL2gAqqm9MWSsfZWsUOLmvTTO8K2qep5H1IAqfAzrRfjbHZKnpYLmy16cgdVdajDEbho71e9APMAMu92Qi0JAAAAAElFTkSuQmCC"/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-4 {
            --pokemon-move-duration: 12.887280365567586s;
            --pokemon-x-offsets: calc(17px+60px);
            --pokemon-y-offsets: 17px;
            --pokemon-move-delay: 2.002194407261857s;
        }
    </style>

    <g class="pokemon" id="pokemon-4">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAAAYICBIiJBYcHBooKh4kLCgMCiouNDo6PgVRB8uAAAAAXRSTlMAQObYZgAAAIxJREFUGBnlwbENwjAQBdBvT5CzgxCdc44H8KEM4CgFtS0PgMQO1GxOdUlKet7DH2DLNuBgF+4x4OCpc5OAXep051yhTGNJzVUoyzE1SgHKVJJpqQyVfPfiYoXyk5OYRaBMJu8uecDu9vS+xgxl6VMkCkHZx2vkdQ7YzbRuY8GBi9vKgJPrmwacGcLPvi6LEjXyiBZTAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAAAYICBIiJBYcHBooKh4kLCgMCiouNDo6PgVRB8uAAAAAXRSTlMAQObYZgAAAI1JREFUGBnlwbENwjAQBdBvT5CzgxCdc44H8KEM4CgFtS0PgMQO1GxOdQl09LyHP8CWbcDBLtxjwMFT5yYBu9TpyrlCmcaSmqtQlmNqlAKUqSTTUhkq+e7FxQrlJycxi0CZTN6d8oDd5e59jRnK0qtIFIKyt8fI6xywm2ndxoIDb8WVAR/o/BzwxRB+9QYuQhI1ZrmInwAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-5 {
            --pokemon-move-duration: 12.85494174960246s;
            --pokemon-x-offsets: calc(-48px+60px);
            --pokemon-y-offsets: -48px;
            --pokemon-move-delay: 9.631885777974054s;
        }
    </style>

    <g class="pokemon" id="pokemon-5">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUAAAAAAAAoaHg4SGBAMChAQEBICChIkKB4wPCQGFiweEjQqGDQ0NDgMGDo6Pj4oKD5izzDAAAAAXRSTlMAQObYZgAAAIdJREFUKM9jYBjyIC0BlW8saIzCZy58L2SAxGezkPw/sRhJIDdD9iaKQGaG7N2J5QJIWioa74ojCzB3dAi2IwtYVLR3lBchCZiLd5SXFyLZyywT0VEu3owk0C4nKFjRiBBgFC4vr2gUQHa7RQcKn8WFRVAYWd57t8sSFM+yuOxyQAsfF0oCFwCpyR/L/wlhiQAAAABJRU5ErkJggg=="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUAAAAAAAAoaHg4SGBAMChAQEBICChIkKB4wPCQGFiweEjQqGDQ0NDgMGDo6Pj4oKD5izzDAAAAAXRSTlMAQObYZgAAAIhJREFUKM9jYBjyIC0BlW8saIzCZy58L2SAxGezkPw/sRhJIDdD9iaKQGaG7N2J5QJIWioa74ojCzB3dAi2IwtYVLR3lBchCZiLd5SXFyLZyywT0VEu3owk0C4nKFjRiBBgFC4vr2gUQHa7RQcK34WBRVAYic+y28XLAcWzLruWoAWPiwMlgQsAsxkgBkj1WvYAAAAASUVORK5CYII="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-6 {
            --pokemon-move-duration: 12.336662550893415s;
            --pokemon-x-offsets: calc(-23px+60px);
            --pokemon-y-offsets: -23px;
            --pokemon-move-delay: 7.151946026116665s;
        }
    </style>

    <g class="pokemon" id="pokemon-6">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAAAAABAWChQQDBgmDh4CECI2FCoQHC4oDDweKDw4Ej4PEAJAAAAAXRSTlMAQObYZgAAAGJJREFUKM9jYBgBwNgAjb9qMQqfedWqVchKmK2AAshKLKvQBCRBAo3IAhWrpDqQBcSndnR0CCAJMIpaoCgACQkKoAowMCkpoAqopCWhCbikCaAZgmaKMZqZwgxoGhjQBPABAH3cFizR3TQTAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAAAAABAWChQQDBgmDh4CECI2FCoQHC4oDDweKDw4Ej4PEAJAAAAAXRSTlMAQObYZgAAAGFJREFUKM9jYBgBwNgAjb9qMQqfedWqVchKmK2AAshKLKvQBCRBAo3IAhWrpDqQBcSndnR0CCAJMIpaoCgACQkKoLmUSUkBVUAlLQlNwCVNAM0QNFOY0XzLIMCMpgOMiAMAew4WHfZUF7cAAAAASUVORK5CYII="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-7 {
            --pokemon-move-duration: 10.036090605382853s;
            --pokemon-x-offsets: calc(30px+60px);
            --pokemon-y-offsets: 30px;
            --pokemon-move-delay: 5.504125686704024s;
        }
    </style>

    <g class="pokemon" id="pokemon-7">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJ1BMVEUAAAAAAAAgOGgwUHBAcJhQKIB4IBCoMEioUBCoqKjYYHDYkJD4cBi2IGjFAAAAAXRSTlMAQObYZgAAAKNJREFUKJFjYBjagA1dICOBLS0BWUCiTXxVIYqAYNWu5YIMaXABxlXiaYWrxBrhAlK7Cs+I71qIJLC8sEO8aiNCgLFcSnBhuQTMIrYENsHqVcsF4WayHctoLK9GKGBgkDmRJl5e2NOGMEJQ2VBQWOKMAFyEyUTFxdlQEOFSJhdHERdjBYQAY2iIC4oAg+AUJxchlABQFBJUQBFgNEblAzUxEA0ArZsjgwVfd64AAAAASUVORK5CYII="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJ1BMVEUAAAAAAAAgOGgwUHBAcJhQKIB4IBCoMEioUBCoqKjYYHDYkJD4cBi2IGjFAAAAAXRSTlMAQObYZgAAAKVJREFUKM9jYBjagA1dICOBLS0BWUCiTXxVIYqAYNWu5YIMaXABxlXiaYWrxBrhAlK7Cs+I71qIJLC8sEO8aiNCgLFcSnBhuQTMIrYENsHqVcsF4WayHctoLK9GKGBgkDmRJl5e2NOGMEJQ2VBQWOKMAFyEyUTFxdlQEOFSJhdHERdjBYQAY2iIizOyAIPgFBVHI5QAUFQUUkANEiZjNAEGQaLDFwCxOCOStv8YHwAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-8 {
            --pokemon-move-duration: 14.465863604017377s;
            --pokemon-x-offsets: calc(-69px+60px);
            --pokemon-y-offsets: -69px;
            --pokemon-move-delay: 0.3867162114693268s;
        }
    </style>

    <g class="pokemon" id="pokemon-8">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAAAAAA4MFhoWJigiFCogNi4qIDY2NjgOCDo2LDo6PgObzOSAAAAAXRSTlMAQObYZgAAAHdJREFUKJFjYBgFRAMlZLYCAwNTqAKczxQaBCSC4QJMykGCQEoZLqAaqhoqgCTAFBqqmqmkwGSEMCE0bKZqkJIRQodpaFJoKJIRwaWKqqGhcAUMyhFLZwqHIixlUC9MEzY2UhZAOEtBxEhQ0AUhwMDACOQIEutlAGCNEcF+dJdmAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAAAAAA4MFhoWJigiFCogNi4qIDY2NjgOCDo2LDo6PgObzOSAAAAAXRSTlMAQObYZgAAAG9JREFUKJFjYBgFZAElBRCB4DOFBoEIBThfOUgQSAbDBVRDVUMFGBiUFeAaQlUzgaYgC4TNVA1iMkLoMA1NCg1VRhgRXKqoHBoKV8CgHLF0prApwg4G9cI0YWMjQyRnKQg6CYo4ojhdkIFRgFhvAgAGZBFGrZ6EbQAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-9 {
            --pokemon-move-duration: 12.259116275468443s;
            --pokemon-x-offsets: calc(6px+60px);
            --pokemon-y-offsets: 6px;
            --pokemon-move-delay: 5.406236905191553s;
        }
    </style>

    <g class="pokemon" id="pokemon-9">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAAA4ODhIYGhwgIiIqLiwmHDAKEDoyJjo6PhQZ+dtAAAAAXRSTlMAQObYZgAAAG1JREFUKFPdz7ERgCAQRNGDCjxnNL5BtA8cSuDGGAJqoQH7Nb01sAA3+y9bov/Ph4BwjCG2fWVuAOsYswXXe68ALQSAuKtuYkFVC8B1I2zp1mSaXM55skDMDE0xR0E4Fd/5pItYcIVf/1mwP/YArNcQrjhFkXAAAAAASUVORK5CYII="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAAA4ODhIYGhwgIiIqLiwmHDAKEDoyJjo6PhQZ+dtAAAAAXRSTlMAQObYZgAAAG1JREFUKFPdz7ENgDAMBECHCTBC1JET2APJbBCLOikySxbIvrR5Cgbguz9980T/zySCcLTmYZCZC8DW2jKCq7VmgCICEHez4EcwswRwd4RwdjuHTk5V5xGImaFTjOoBxCK+c7ZeOOH0+k+Mg488oO8Qj1VBKNMAAAAASUVORK5CYII="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-10 {
            --pokemon-move-duration: 10.628185380615358s;
            --pokemon-x-offsets: calc(40px+60px);
            --pokemon-y-offsets: 40px;
            --pokemon-move-delay: 2.6671923766996377s;
        }
    </style>

    <g class="pokemon" id="pokemon-10">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAABAMBhgQDiAYDCogEC4oGDAkFDg0Kjo6PiAdnumAAAAAXRSTlMAQObYZgAAAIlJREFUKJFjYBiZgEkJmafEyKTihCygri7iooCs3D28SFAQSUC1tFyxvBBZR3lRuZIAgs9Y7lqupIhsROik0BABBkG4sUyuQqEugorlRXAREWMXpyTx8g64AKOIi5iqaFkiwpBGwTTVIEGEPUwdbYmhochu10gSVQpBFmAScmJQckT2HaMACBEFAPduFfrI9W1yAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAABAMBhgQDiAYDCogEC4oGDAkFDg0Kjo6PiAdnumAAAAAXRSTlMAQObYZgAAAIpJREFUGBnlwbEOgjAUBdDb9wV9pupaGkjd/YOmxJ3QOMPgbhN8s4th9otdwDK6ew7+FDlsOEV1wIb3JloUdLlmZhTNJJXcUXjJ4jS+lLTiKhSU3qnXYIsFtbsUuZJssTDnGMajzBYLZeKh2T8GrOjJt6ZjjRXNryGlgOI0mq4PKEhTqDW2lGb85gP6pxX6Cy7glQAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-11 {
            --pokemon-move-duration: 11.304773314003459s;
            --pokemon-x-offsets: calc(-8px+60px);
            --pokemon-y-offsets: -8px;
            --pokemon-move-delay: 1.869747808877481s;
        }
    </style>

    <g class="pokemon" id="pokemon-11">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGFBMVEUAAAAAAABAKCiggFCoQDiwmGjYaDDgwJjomNHDAAAAAXRSTlMAQObYZgAAANNJREFUKFPN0LFuAyEMBmCcJ8B3wBzco3tS9QFAFp0vah4gp5P3qpXy+sFHKiVT17JY/iSbH4z5vwfQPkOQy5OAiFwewYlQfIQgC9qdhf29hyrRGliCvW9vgIYUCKruAl4QQ8xuWNq0VcjoQixTg+EX2E1rLaWBzrjC7KrIWox7VaDCmVs44T2wQvrMQ4dILjfw8zh1KG9pCzIeuCqsjO9bXEDqQB57+O/U4XT82sDj8Ufh4yWetN+lEa/U/uA6+FF3pJmMPyOe53ahgr4ZcKta/j43BvcxBExQfoAAAAAASUVORK5CYII="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGFBMVEUAAAAAAABAKCiggFCoQDiwmGjYaDDgwJjomNHDAAAAAXRSTlMAQObYZgAAANJJREFUKFPN0E1OhTAQAOAOJ2CgZU3n8TyAxgO0mdQ1RA4AIbN/ieZdX4bRKCbunXT1ZX7r3L8JwPoMnSwnARFZfoIXQfxVcWoCRWLtqhr6b9gLYO2+soBXbEiBbD5wQt/F5JsVyvIJ3MU8NOveX1N8ZvbDVnJ2zQGUOfkisilozfU1I+/bCvf+QSGMFzKIwEfX9nEwSOTTsQlyUdi4DbZdJANCg+r9ajA93yxhojeFl0scj4SngHcSoXsbJz25inMdZsR5rPow2RR9Tk+F09f9ER9sDDEyEmIDagAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-12 {
            --pokemon-move-duration: 10.757332126882764s;
            --pokemon-x-offsets: calc(-32px+60px);
            --pokemon-y-offsets: -32px;
            --pokemon-move-delay: 1.3752076366977706s;
        }
    </style>

    <g class="pokemon" id="pokemon-12">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJ1BMVEUAAAAAAABIQHhYQDBgKBhgiLCAsNioYDCoyPDAoFDIyMjo6PjwwHikrLvuAAAAAXRSTlMAQObYZgAAALpJREFUKJHNkD0KwkAQhZOcwA0oCzZxYUBtg3gHrXZlJNglRbC3sd3C5IGVdh7EQwg5lJWZjYW1072PNz9voujfS2Vfmt1AG7JqFGp4DS/SALo9i2MO+Oa0FkdygW/zvBRQAE2+SvvFBKDe2X0mM47X2pEzAoptZ1OuPkAXfvPSjelvjSd1pwyob4lipR5ExEG+xQ0Vu5kAmqJkZwNgn2NilsTJXfGYmSVgykzslPQsD9aYYEsUDx72s95jIit2WvSNpQAAAABJRU5ErkJggg=="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJ1BMVEUAAAAAAABIQHhYQDBgKBhgiLCAsNioYDCoyPDAoFDIyMjo6PjwwHikrLvuAAAAAXRSTlMAQObYZgAAALhJREFUKM/NkD0KwkAQhRNP4AaUBZvswIDaBvEOWu3KSLDTItjb2G7hZsBKT+MVhBxKLNzZWFj7uvcxvy/L/l2q/PLkeh7QqmHq2Wv2YoFZt2epmDL7cFpKxeDCvq2qvYCaOVSLIi5GZm42dlvKjOO1cehAQL3ubEGHD9C1Xz11gHhrPm46BYyxJcuVuhMiJf/NdDDkjADzCEgueRAnlt6KYHAbkSNScj0AWTJpYvOdgV5meS+xX3oBLecqzWJVPeYAAAAASUVORK5CYII="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-13 {
            --pokemon-move-duration: 10.099459845528239s;
            --pokemon-x-offsets: calc(-64px+60px);
            --pokemon-y-offsets: -64px;
            --pokemon-move-delay: 7.805912099910479s;
        }
    </style>

    <g class="pokemon" id="pokemon-13">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUAAAAAAAAIMEgQcHggOGggkIgwaIhIiLBQSDhYsOCAyOigoKCwmDjQ0NDgyGjo6PjA5uFJAAAAAXRSTlMAQObYZgAAANdJREFUKJFjYBhqQEkBjR+qgMYPAtMsDhC+UWiwHZjpBRFgAvLftIAUzHQRAAmohtq9OdcNlGSZNgsiYBp8RkkJJFA5E6SHKXhpaGioCYiZOQVshNWq0FDjXpCAO1gHy6pVS4Pf9boAWSFgSzxXuS+NO7HX1YHBFayDQWq9y6ozL247BzsHQwQ8F0qtmtFxpXJKyEyIu1g8Z07x3ntlJhBAXc7i4n13N1B0ZgnMb963724pmTmlxAEmwOK9xcWlslwA4X0WdwcGF2QBRpBucWQBENuRgTgAAL53PyN8BsWfAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUAAAAAAAAIMEgQcHggOGggkIgwaIhIiLBQSDhYsOCAyOigoKCwmDjQ0NDgyGjo6PjA5uFJAAAAAXRSTlMAQObYZgAAAN5JREFUKFNjYBhqQEkBjR8KFmBxgPODwLQXVMAoNNgOxGSZ6SIA4jMB+W9aQALTZoEFVEPt3pzrBhrCUjkTrEfVNPiMkhKImTkFrCN4aWhoqAlIwB1ihNWq0FDjXqAASwjYDpZVq5YGv+t1YWBwBetg8FzlvjTuxF5XZ+dgiIDUepdVZ17cdg4JgdjB4LlQatWMjiuV02dCBVg8Z07x3ntl5syZJQwQwOLifXe350xPqAIg8L59d4vnTHcXGJ+BxXuLu/v0QgYEYHEvYXFHFmBgLGEQF0AREGBwZCASAABaoz7jjOrP8QAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-14 {
            --pokemon-move-duration: 11.025007751725589s;
            --pokemon-x-offsets: calc(-29px+60px);
            --pokemon-y-offsets: -29px;
            --pokemon-move-delay: 0.9427772023897696s;
        }
    </style>

    <g class="pokemon" id="pokemon-14">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJ1BMVEUAAAAAAABAMBBAQEBoCChwSCBwcHCYIEiYeDioqKjIyMjQQGjocJjbmVp+AAAAAXRSTlMAQObYZgAAAGJJREFUKM9jYBgFVAJKSgoofKaOjiYUAY2Ojg5kJSweaALSR7o6WpEFxHc7hoYKIAkwlruGhgojCbAJhoaGihkgBCyTQkOD0pAEzDLTki2nJSMEmM2SLdOSkR3GZmCWjMNTAC8WFEqQhuoVAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJ1BMVEUAAAAAAABAMBBAQEBoCChwSCBwcHCYIEiYeDioqKjIyMjQQGjocJjbmVp+AAAAAXRSTlMAQObYZgAAAFtJREFUKJFjYBgFtAJKSgoofKaOjiYUAY2Ojg5kJSweaALSR7o6WpEFxHc7hoYKIwkwlruGhooZIATMBENDg9KSEQKWadPSzGamIQSY05LTphkju4PZIA2FjwQADkkTkziouV8AAAAASUVORK5CYII="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-15 {
            --pokemon-move-duration: 11.899759154678218s;
            --pokemon-x-offsets: calc(-31px+60px);
            --pokemon-y-offsets: -31px;
            --pokemon-move-delay: 9.942330089025473s;
        }
    </style>

    <g class="pokemon" id="pokemon-15">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAAAwKChAQEBYOCBoSDCIYCiYeEjAwMjo6PjgNatIAAAAAXRSTlMAQObYZgAAAJZJREFUKJFjYBjkQEkBjV+ugMZPQuEzlqc5oQiIl5cFoioACighCbAABRRDlZB1lCe5F4Yh7HEvLw0vD0K4hLG8tL28VBDZzMDpxUZBCB2MapmlAoahSE5jUlJkYBRFcTsjh0EiitMEOATVhJCVCDSqpYkGoQokKoUqIAswpSkgh5GEAIMSiqESAoysqAEgwCgowEAkAAC35BwVpuuopQAAAABJRU5ErkJggg=="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAAAwKChAQEBYOCBoSDCIYCiYeEjAwMjo6PjgNatIAAAAAXRSTlMAQObYZgAAAJBJREFUKJFjYBjkQEkBjV+ugMZPQuEzlqc5oQiIl5cFoioACighCbAABRRDlZB1lCe5F4Yh7HEvLw0vD0K4hLG8tL28VBDZzMDpZcZBCB2MapmlgsyiSE5jUlIQYBBEdbtAM5siitMYGpWEkJUwcoiliQahCiQqhSqgCCighBFjoxKKd4ECrKgCDIKCAgzEAgDSyhqCGuW37QAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-16 {
            --pokemon-move-duration: 10.660868666272119s;
            --pokemon-x-offsets: calc(-48px+60px);
            --pokemon-y-offsets: -48px;
            --pokemon-move-delay: 9.283892984903801s;
        }
    </style>

    <g class="pokemon" id="pokemon-16">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAG1BMVEUAAAAAAABAQEBwcHCIIDiQkJCwsLDIyMjo6PikeamoAAAAAXRSTlMAQObYZgAAAJlJREFUKFPlj7EOwjAMRBO+oI4UM8dSskN/gtWR7gNaqd5hgN+n0AYysuPtns+6s3N/OeT80GtvA8894KVm7Tx+EQJ4+oAi+ggCbfow43hjS0r7UYHeJdqU7Q18AIpZijFjA9csq2ZCrVuEVTMBR+gGHJcUQBNy2nOjXKBYDS3XAzWsktCqEhFyoDN9u/N4CsJj98xr6cn9ME/vuh2KsK+fDwAAAABJRU5ErkJggg=="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAG1BMVEUAAAAAAABAQEBwcHCIIDiQkJCwsLDIyMjo6PikeamoAAAAAXRSTlMAQObYZgAAAJpJREFUGBnlwTFuAkEMBdBvTmCPNE49I832hEuk9Uj/AIuE+6SA60OWrEKZPu/hfzKI4oWk+hkv/DJHiGInl26kr9gtPW6lM/DjcObbl2cLU2wWxrXXXEcqHqSQS2ardVDxIJ+jZzY3zolvkjOz0ytjYuNLK7SVo63Y1P7BYGUwsBFylhE0Kp7MjLPYuyl2Bz8d/aT4JaZi+Is74H4dVYXW2/0AAAAASUVORK5CYII="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-17 {
            --pokemon-move-duration: 13.998317657271695s;
            --pokemon-x-offsets: calc(48px+60px);
            --pokemon-y-offsets: 48px;
            --pokemon-move-delay: 3.8187157876039715s;
        }
    </style>

    <g class="pokemon" id="pokemon-17">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJFBMVEUAAAAAAABIOChQQECYQCiYeDDAQCDYWCDYqEjo2Jjo6Pj4gEiU3OvMAAAAAXRSTlMAQObYZgAAAMhJREFUKJHVz7EOgjAQBuDa6C7EATe4IGAY8QUgxAcwMdG4Gh/AQWaYrquJCfcYymDivZwVbGB09YYOX/5r+wvx57MRAtwh7F3Ih7AgyDMdMimpyNcAiq4dLKn2c89ykFwDt8Li55xqMHB4cOMporqLyC1zk6Skp7t2zMzJyvkAthBywJzu9ApV7Ur8sjlzdmgCIrzHxSWqEPH7igyLM6CG0nxdWkAYeNbUwEQRlsGxryeV2s5Op0HfyAdYH7MeRp/y9hCm5vhh3pAxPGVY8vaFAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJFBMVEUAAAAAAABIOChQQECYQCiYeDDAQCDYWCDYqEjo2Jjo6Pj4gEiU3OvMAAAAAXRSTlMAQObYZgAAAMNJREFUKFPVz78OgjAQBvBKdKdMjHBBwTDiC0Aad0xMNG4OPICD7EzX1cSEewxlMPFeTpA/gc3VL136S6/9KsSfZycEOGM4OqDGsCRQyWhvaPImsKbSU640AQa455JfFpLTw+nJlavp1t+xZ66imIi6mTkzRxu7hrKd8XnFHB/0AOHb4sRugNq+/iPMr0GBNeAXDD+/ABZYHym6ZyQQrgJE7IosNKHcuphafRGtU5WdpSn62IWCbPJfNzEgHoGYmc36LR9IDzuO+UPgnwAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-18 {
            --pokemon-move-duration: 12.70619359129632s;
            --pokemon-x-offsets: calc(-43px+60px);
            --pokemon-y-offsets: -43px;
            --pokemon-move-delay: 6.698425365043304s;
        }
    </style>

    <g class="pokemon" id="pokemon-18">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAAAoKDA4ODhgWHhgYGCQcLiYmJjAsOjo6PjzMa/sAAAAAXRSTlMAQObYZgAAANhJREFUKM+lkTFuwzAMRa2mBwhtl9DYCkGyOmjgObYIo2sGH0AxwT2+gRdBNwh62w6WmyhLCpQbH8kPkj/L/hHwkKvpGUCX1gFMWhdKRfcACVnpECBf3wMvweU38BmEO3Hvv0sWXlojnKtZR31ftJjzVloMsw704NGjtO0mCkMemlAKf8BxnumNZl0KQxxR/a4Uh0IlR2CumjshqiWC0+h5IKEugswYP/ia6UARvI3ovixZWjpeDFIxUXFolv8gWwtNBsvBr8h1Y6u7DzKhqxJTQLlnRv09fgB5+S1fFNWNMQAAAABJRU5ErkJggg=="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAAAoKDA4ODhgWHhgYGCQcLiYmJjAsOjo6PjzMa/sAAAAAXRSTlMAQObYZgAAAOFJREFUKM+NkT1OxDAQhWOWA+xkzcglWAhaJFapif0U0VLkANkdTc/eYBvLN0DcliIOxAgE071v/mea5v9G37Q5/wV4qv1EvvYr6qIswHalNwDQr0FPVIVsXM5E4Qs85qRZ6fpz6l1WGVRaM7cy769Og1cNnOc6NFLyhzsN4bYUpjZzYpUbeppzRu/6bFWopJjx3oqzCisF+DerEys6LeDl5GRQYCig8T7JEYr9Mv7VKR1TJxFLxIXn6Tki7peNTcvYnbGlZeFLlhhpdRDD0vXxYXUhAU9r3RCZ+g0/vPJX+wAGMzA8Z2VjUAAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-19 {
            --pokemon-move-duration: 13.680437666180831s;
            --pokemon-x-offsets: calc(76px+60px);
            --pokemon-y-offsets: 76px;
            --pokemon-move-delay: 5.681891898956653s;
        }
    </style>

    <g class="pokemon" id="pokemon-19">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJFBMVEUAAAAAAAAQmPAwWEhAUIhYqIiY8OCgIBCgoKDYaIjo6PjweHDxY0BNAAAAAXRSTlMAQObYZgAAAHhJREFUKFPtzjEKgDAMBdCUXkARRHcPoBR7AEF3lbg4ifZ7MntOuzXdPIB/y+OThOhPiDZtCv2aiuYSpwTTXVMWR5VzOTSHANgAomEtsIwRNLDhmtsI2+4Z4op6bg/rxI4aMHBzhHDFgUWDCqycgHqKKgHKw7f0MS+8QBblhU+oQgAAAABJRU5ErkJggg=="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJFBMVEUAAAAAAAAQmPAwWEhAUIhYqIiY8OCgIBCgoKDYaIjo6PjweHDxY0BNAAAAAXRSTlMAQObYZgAAAHpJREFUKM9jYBgFQMBsbIAqYBqMKsIcKpaWjCxgbJjiJoDgMgqGijmpJCIJpJkBBZBUmJmlpQW5IgSY09LC0lICEbYwh0UvC01DsoVxafqyNLNUJDMk09KM01IDkW1JS00LRVLBIByWHIoiwCAV2BqI4jdGAUEBYgMGANI5Fy/4gTOMAAAAAElFTkSuQmCC"/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-20 {
            --pokemon-move-duration: 11.57554564217524s;
            --pokemon-x-offsets: calc(74px+60px);
            --pokemon-y-offsets: 74px;
            --pokemon-move-delay: 2.7227144835177164s;
        }
    </style>

    <g class="pokemon" id="pokemon-20">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAKlBMVEUAAAAAAAA4UChAKChQqChYSECA2FiQYDigoKDIWHjIiFjQoFjo6Pj4yFi1MeTVAAAAAXRSTlMAQObYZgAAAPJJREFUKJGtz7FKxEAQBuDZC/aZM+zhYZEM+wCKhYhY7DLsG9wDKMv2ckXgXsCnsLpCSCeWRyqfQFKGeRcLs2ZT2bjdfPwzOwPwP29FAKDKGVQkAF1nkSrWKmQJUPy0CmWDU4lEhrUlH8tpQmRkbX3ACZBjqJxjojSCjLfOoY5JFBpeN8wcp691cMZWzEQ/oAKztdxg/duBuDbks9Ue5IQV+8dUFyLD6RrRp0jRy70Me8AE6utTRDZX8239MC4ALj7GS9kcs/PPexm3GcDZ3et7t8/hiNs2TxSHt7Z7zgBuD11b5qB2uxtYwMuiAWBe++/3DTJcORMxG6YQAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAKlBMVEUAAAAAAAA4UChAKChQqChYSECA2FiQYDigoKDIWHjIiFjQoFjo6Pj4yFi1MeTVAAAAAXRSTlMAQObYZgAAAPJJREFUKFOtzjFqw0AQBdBZi/QaR6yJSSENewC7CiGk2GXYG/gACcv2wYXAF8gpXLkIqAspjaqcIKgUc5cUlqxVlSa/m8efYQD+JwsCAJVPoCIB6DKpFLFUIWmA4tdFyCscRiQyrC35mA8XIiNr6wMOgBxD4RwTjSfIeOsc6jiKQsPLipljeQEdnLEFM9EFVGC2lissrxuIS0M+ee1ZzliwfxnnTKQ7bxH9WMlaeZJuDziC+vkWkdXmekK1XT8DuPvq72V1mkDdttKvE4Cbx+Nns0/hhOs6bWSHj7p5SwAeDk2dp5BtdzuYRb3PNgCmv//MLzEAORP7d84sAAAAAElFTkSuQmCC"/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-21 {
            --pokemon-move-duration: 11.664616262557814s;
            --pokemon-x-offsets: calc(9px+60px);
            --pokemon-y-offsets: 9px;
            --pokemon-move-delay: 5.3064667511895465s;
        }
    </style>

    <g class="pokemon" id="pokemon-21">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAABQUHhgKEBgSEBwoPiQSFjQcJDo6Pj4qLgvq2faAAAAAXRSTlMAQObYZgAAAHdJREFUKFNjYBgFIGCMwktLYC43QOKzzZxmjiKQOXPmTMFiJAHLspmTZ0oKIATMp2daeloi6WHOnDnFs3IyQkByRud0z5nIAq0aQGORBZpAAkjWsM3orJxZjiTAWF48vRzFZWJlZuWFSHwGZvFyQyR3gTQJMhANAGFiH9jEuXMRAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAABQUHhgKEBgSEBwoPiQSFjQcJDo6Pj4qLgvq2faAAAAAXRSTlMAQObYZgAAAHdJREFUKFNjYBgFIGCMwktLYC43QOKzzZxmjiKQOXPmTMFiJAHLspmTZ0oKIATMp2daeloi6WHOnDnFs3IyQkByRud0z5nIAq0aQGORBZpAAkjWsM3orJxZjiTAWF48vRzFZWJlZmWJSHwGZkHzciR3gXUJMhALAFwIH8e9N/VpAAAAAElFTkSuQmCC"/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-22 {
            --pokemon-move-duration: 13.168090241065322s;
            --pokemon-x-offsets: calc(-8px+60px);
            --pokemon-y-offsets: -8px;
            --pokemon-move-delay: 8.10356313898437s;
        }
    </style>

    <g class="pokemon" id="pokemon-22">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGFBMVEUAAAAAAAAwMFBIUHhwgLiwuNjg4PDo6Pg34D9MAAAAAXRSTlMAQObYZgAAAK5JREFUKFPVjsEOgjAQRJf6A2KiZ2yCXk0I+gfeLcx6x+z8/yfYUglI4gc4l9l9mZ1W5K/UrMGtueTB++xX60biwSq5M7WQnJbBiaTFySn1C9TQMeHUlIw3vsaQAgWfBzLVugycdi3Zh3QUZOqgMpJ67IzPDZpY8MhA/PmeAJEvRDa9rgCQIobtB8QvxYxhBvu6Q9Rj2qUAWiwCUihewFFmAOPOz3sELCtZqizll96TuzB7yR5GPwAAAABJRU5ErkJggg=="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGFBMVEUAAAAAAAAwMFBIUHhwgLiwuNjg4PDo6Pg34D9MAAAAAXRSTlMAQObYZgAAAK5JREFUKFPVkMENwjAMRd2wAEWCc4kIXJEqYAIYoK3NHcl//xFwnBZKN+BfEj/5fzsh+iu1S3Brz7/gqn0hMfoRVLTzmtHk8whA7RagCyCQDIKoAOZJLN5R4bkDLDYmfnmm9Bdg6BoK7NmeAYGRVEDASzLrKPkQm396ZMCRR7AavEP5A5gLKBGUN7hnyxfs2UzmWE+g0oFN9VTb+/Uwr8lW34x/UbRF3dBc1ax7qTccJzC1M+sqVAAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-23 {
            --pokemon-move-duration: 13.45290419457788s;
            --pokemon-x-offsets: calc(13px+60px);
            --pokemon-y-offsets: 13px;
            --pokemon-move-delay: 3.8070490708012796s;
        }
    </style>

    <g class="pokemon" id="pokemon-23">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJ1BMVEUAAAAAAABgKDBoUBCYWGCgqLDAwMDQeIDQqGDo6PjwmKDw2JD4wLDXTF0bAAAAAXRSTlMAQObYZgAAAJVJREFUKFNjYBgFWIASGp+pXAGVr+SuoIQkxOS13Mll1RIFBiaooPqqVcu1Vq1axMA0Ccxn9lq1alUVECtpQgQsdgHZQP4qrZVJYAHrHauWr5ICq4KYIbFjzhIvsMAiiJnSOyVXKQL5y4ugljDunrlqCVBXuQMDFBjvbndf5a5eXsQAFzESLVFxEkUIALUJAbEAA1EAAIsFMSWB/jfAAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAJ1BMVEUAAAAAAABgKDBoUBCYWGCgqLDAwMDQeIDQqGDo6PjwmKDw2JD4wLDXTF0bAAAAAXRSTlMAQObYZgAAAJBJREFUKFNjYBgFWIASGp+pXAGVr+SuoIQkxOS13Mll1RIFBiaooPqqVcu1Vq1axMA0Ccxn9lq1alUVECtpQgQsdgHZQP4qrZVJYAHrHauWr5ICq4KYIbFjzhIvsMAiiJnSOyVXKQL5y4ugljDunrlqCVA9wnHGu9uVykvUkVxrbMQgWiRaxIAMGAUYBRiIAwAyuy/xuMGj4QAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-24 {
            --pokemon-move-duration: 14.729957891482464s;
            --pokemon-x-offsets: calc(-28px+60px);
            --pokemon-y-offsets: -28px;
            --pokemon-move-delay: 6.516683775397486s;
        }
    </style>

    <g class="pokemon" id="pokemon-24">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAAAAABIOBhoUDiQeDiQeGCwsLjYqDDo6Pj42GD48MBUnbGNAAAAAXRSTlMAQObYZgAAAKBJREFUKJFjYBhYwKSAJqCOJsBUgq6giIFREFlBuQOj5EQkvuYUR8mZAggBzZkzPWciK5gJAgpoApOQjNSc3j5zOoqCjPbycmQjKyTKy8sLEQLiLkC+IJISRnEnJcWFjkh6GMvLZ7kgO5xBcOasRcFIKhgYJQVFQ5EFJBoFTQORtUi0qRsKIQswCqoXFjGgAEbxEgVUgfQyAVQBQRR34AMAXEQjCEll+EgAAAAASUVORK5CYII="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAAAAABIOBhoUDiQeDiQeGCwsLjYqDDo6Pj42GD48MBUnbGNAAAAAXRSTlMAQObYZgAAAJtJREFUKM9jYBhYwKSAJqCOJsBUgq6giIFREFlBuQOj5EQkvuYUR8mZAggBzZkzPWciK5gJAgpoApOQjNSc3j5zOoqCjPbycmQjKyTKy8sLEQLiLkC+IJISRnEnJcWFjkh6GMvLZ7kgO5xBcOasRcFIKhgYJQVFQwVQlBiGBqL4XqJNUAhFgFFQvAg1gIQcBVBVpJehCQgKMhALANUyIa+X+AHyAAAAAElFTkSuQmCC"/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-25 {
            --pokemon-move-duration: 10.579090182399728s;
            --pokemon-x-offsets: calc(-29px+60px);
            --pokemon-y-offsets: -29px;
            --pokemon-move-delay: 9.622444990899313s;
        }
    </style>

    <g class="pokemon" id="pokemon-25">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUAAAAAAAAwIEBIOIBwSNCAYCCIAACIiIigaPCoMFCwkFDIyMjYuIDogJjo6Pj4yMiURMImAAAAAXRSTlMAQObYZgAAAJpJREFUKM9jYBh+gEmBSQGJw8AgoqAhABdQLxRgEFFsQQgwyT1kcpZoQmhhYJQWcewwckIyknFjR4dGC5ISFXGPjo4OJCUazh0oAkwg+Q4PFwVUgRaEgK5L/7WOlhZnuIDkFc+bGi4uCAHG2W7TVFxcjBCGCrkouZgYGyKsVXY6pWysLIDkeSPlYGNB5OBgXBUoiBpAggJEhyUA+7IiPAo0wrcAAAAASUVORK5CYII="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUAAAAAAAAwIEBIOIBwSNCAYCCIAACIiIigaPCoMFCwkFDIyMjYuIDogJjo6Pj4yMiURMImAAAAAXRSTlMAQObYZgAAAJpJREFUKM9jYBh+gEmBSQGJw8AgoqAhABdQLxRgEFFsQQgwyT1kcpZoQmhhYJQWcewwckIyknFjR4dGC5ISFXGPjo4OJCUazh0oAkwg+Q4PFwVUgRaEgK5L/7WOlhZnuIDkFc+bGi4uCAHG2W7TVFxcjBCGCrkouZgYGyKsVXY6pWysLIDkeWMj5WBB5OBgNFwViBZCggLEhiUAAjgiXKilw/wAAAAASUVORK5CYII="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-26 {
            --pokemon-move-duration: 12.259897612944739s;
            --pokemon-x-offsets: calc(18px+60px);
            --pokemon-y-offsets: 18px;
            --pokemon-move-delay: 8.583185465011642s;
        }
    </style>

    <g class="pokemon" id="pokemon-26">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAHlBMVEUAAAAAAABAQEBgSCi4uLjAKEDAmEDo6Pj4cIj40EBDmfcLAAAAAXRSTlMAQObYZgAAAHBJREFUKM9jYBhxgEkBXaDI2ABVoERzMqqAi+VMFCVmajNnJiPxWSNnogpEtM6cOQ1FoCNSMi2ZgQkuwNgRlpZmwKCOcI1gWlpiMoMKkvMEBcVQBRgk0syMJyG7hNE4zTIZxbESyW0CKAKMgoJkBxYAjD4V35O1VI0AAAAASUVORK5CYII="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAAAAABAQEBgSCigeDC4uLjAKEDAmEDo6Pj4cIj40EBnQqDEAAAAAXRSTlMAQObYZgAAAHVJREFUKJFjYBhxQAldQEPZGE0gaJUBioBq8KrFyHzmoqpVy5GVpK1ahSLANjNr1apyFIFpC5cDBZjgIpLTysuLgXYpwAQYxcvLxQ0YVOECDIyCguUoAgyM04uLjRchO0XYvNyqGFmAcbrzdAEU1wsaCzKQCwA35xog+JpsgAAAAABJRU5ErkJggg=="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-27 {
            --pokemon-move-duration: 12.853928194111024s;
            --pokemon-x-offsets: calc(-62px+60px);
            --pokemon-y-offsets: -62px;
            --pokemon-move-delay: 5.697877584930048s;
        }
    </style>

    <g class="pokemon" id="pokemon-27">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAAAAABIMDBISEiAgICIYBioiFjAwMDQsJDY4ODo6PgSTAMMAAAAAXRSTlMAQObYZgAAAH9JREFUKM9jYBj6gNEATUByMgqX2XBmMQrfcqaLILKA+MzpxTMFkAycCQRT0AUcUXRM8ZzijKSgcqZrSHk5wiGSMycHL0YRKC8WXGw5EckI43Jj82JkSwTNywsFUX1mbJomgCzA1BEYJoQq0CoYhKJHNUhJAUVAMxA9vASID1sAxLIeKnFZu3kAAAAASUVORK5CYII="/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAAAAABIMDBISEiAgICIYBioiFjAwMDQsJDY4ODo6PgSTAMMAAAAAXRSTlMAQObYZgAAAH9JREFUKM9jYBj6gNEATUByMgqX2XBmMQrfcqaLILKA+MzphTMFkAycCQRT0AUcUXRM8ZzijKSgcqZrSHk5wiGSMycHL0YRKC8WXGw5EckI43Jj82JkSwTNywsFUX1mbCaEIsDUHCaqhCLQIRgahKJEozVIAdUQyUD0ABMgOmwBhOIdu0OLLoMAAAAASUVORK5CYII="/>
        </g>
    </g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
    <style>
        #pokemon-28 {
            --pokemon-move-duration: 10.749734310670114s;
            --pokemon-x-offsets: calc(58px+60px);
            --pokemon-y-offsets: 58px;
            --pokemon-move-delay: 7.586461121417272s;
        }
    </style>

    <g class="pokemon" id="pokemon-28">
        <g class="left">
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-2" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAAAAAAoKDhQOGhgYGBoUICQeKCYmJi4uLjYYGD4qKDEgYYIAAAAAXRSTlMAQObYZgAAAJtJREFUKFPNjTEOgkAQRWc3HkDYsLawBK3ZCQcB8u3BMAfwCDacwMIjeEs7drC08nf/5f0Zor+PLb96swM2MGtgw1zHnTAvbaYNj8FPSjFyO0urjhgRWXIOGyhEZHScNsVVEOuYJgUAdHqCNzCqyaV/AZ36cng8IYMyzLreZVI36LTC99weN2A7VI45AWrGOoYqdXKcl6RjMvo9H377HKtOXiSFAAAAAElFTkSuQmCC"/>
            <image xmlns:xlink="http://www.w3.org/1999/xlink" class="frame-1" width="32" height="32" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAIVBMVEUAAAAAAAAoKDhQOGhgYGBoUICQeKCYmJi4uLjYYGD4qKDEgYYIAAAAAXRSTlMAQObYZgAAAJhJREFUKFPNjDESwiAQRRfGA0gYYmtgEmvYyUEMg71xsgex4QQWHsFbGpuwWFr5un3z/gL8PfL4dfeVkBaRC2lnF6pgXrziRZum9soSQbeBPHsiiGhp0G7CrCJqLBtzoRRcKBOTVkY+Sa+UIpuczs9PUSa7+yOSY4XIeSDNfsAhd4tGv9+EHCeFiEWA7aOzHTA0NlAhFPzMG+4LG5qgdAFCAAAAAElFTkSuQmCC"/>
        </g>
    </g>
</svg>
    </g>
</svg>

 

기여 수는 CP(Commit Points)로 이름 붙였고 100마다 포켓몬 하나씩 랜덤으로 주는 방식으로 했다.

깃허브 api를 이용해 기여 수를 가져오는데 개인용 계정은 시간당 5만건으로 제약되기 때문에 cp를 업데이트 한 뒤 1시간이 지나야 깃허브 api를 호출하도록 했다.

svg를 3600초(1시간)동안 캐싱했고(Cache-Control) 혹시 몰라 db에서 user의 commit_points의 updated_at까지 비교하는 것으로 했다.

 

지금 백엔드 서버는 winiv에서 서비스하고 있다. 큰 이유는 없고 가격이 저렴해서 선택했다.

아래에 코드를 모두 올려두었다.

https://github.com/2jun0/github-pokemon-collection

GitHub - 2jun0/github-pokemon-collection: Collect Pokémon on GitHub!