kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Pokemon By Color</title>
        <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
        <script src="https://unpkg.com/colorspaces@0.1.5/colorspaces.js"></script>
        <script src="https://unpkg.com/fuse.js@6.5.3/dist/fuse.js"></script>
        <script src="database.js"></script>
        <script src="nearest.js"></script>
        <script lang="javascript">window.onload = () => { onUpdate(); }</script>
        <style>
            body {
                width: 100vw;
                padding-top: 4px;
            }

            .container {
                width: 100%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                align-items: flex-start;
            }

            .panel {
                width: 100%;
                flex: 1;
                display: flex;
                flex-flow: column nowrap;
                justify-content: flex-start;
                align-items: flex-start;
            }

            .padded {
                padding-left: 16px;
                padding-right: 16px;
            }

            .margined {
                margin-left: 8px;
                margin-right: 8px;
            }

            #left-panel {
                min-width: 400px;
                max-width: 500px;
            }

            .bycolor {
                flex: 2;
            }

            .bycolor_l1 {
                justify-content: flex-start;
                align-items: flex-end;
            }

            .bycolor_l2 {
                padding-top: 16px;
                justify-content: flex-start;
            }

            .control {
                height: 32px;
                align-items: flex-end;
            }

            .pokemon {
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
                align-items: flex-end;
                width: 400px;
                height: 50px;
            }

            .color-tile {
                width: 50px; 
                height: 32px; 
                font-size: 10px;
                text-align: center;
                display: inline-flex;
                align-items: center;
                margin-right: 4px;
            }

            .pokemon_text {
                flex: 1;
                padding-left: 4px;
                text-align: left;
            }

            .pkmn-list {
                list-style-type: none;
                padding: 0;
                margin: 0;
                margin-top: 16px;
            }

            .bypkmn {
                border-top: 4px solid #222;
                border-right: 4px solid #222;
                margin-top: 32px;
                padding-top: 8px;
                padding-right: 8px;
            }
        </style>
    </head>
    <body>
        <noscript>Requires javascript</noscript>    
        <div class="container">
            <div id="left-panel" class="padded panel">
                <div>
                    Minimizing:
                    <span id="x-term">X(P)</span>
                    <span>-</span>
                    <span id="c-value">2</span>
                    <span id="q-vec">q</span>
                    <span>·</span>
                    <span id="y-vec">Y(P)</span>
                </div>
                <form class="panel" onsubmit="onUpdate(event)">
                    <div class="container control">
                        <label for="include-x">Include X:</label>
                        <input type="checkbox" checked oninput="onUpdate()" id="include-x">
                    </div>
                    
                    <div class="container control">
                        <label for="norm-q-y">Normalize q and Y:</label>
                        <input type="checkbox" oninput="onUpdate()" id="norm-q-y">
                    </div>
                    
                    <div class="container control">
                        <label for="close-coeff">Closeness coefficient: <span id="close-coeff-display">2</span></label>
                        <input type="range" min="0" max="10" value="2" step="0.1" oninput="onUpdate()" id="close-coeff">                
                    </div>

                    <div class="container control">
                        <div>Color Space: <span id="color-space">CIELUV</span></div>
                        <button id="space-toggle" type="button" onclick="onToggleSpace()">Swap to RGB</button>
                    </div>
                </form>

                <div class="panel bypkmn">
                    <form class="container control" onsubmit="onUpdate(event)">
                        <label for="pokemon-name">Search By Pokemon</label>
                        <input id="pokemon-name" size="15" oninput="onUpdate()">
                    </form>
                    <ul id="search-list" class="pkmn-list"></ul>
                </div>
            </div>
            <div class="padded panel bycolor">
                <div>
                    Search By Color - click random, or enter six digit hex code (optional #)
                </div>
                <form class="panel" onsubmit="onUpdate(event)">
                    <div class="container bycolor_l1">
                        <button class="padded" type="button" onclick="onRandomColor()">Random color</button>
                        <input class="margined" size="7" maxlength="7" id="color-input" oninput="onUpdate()" value="#ffffff" />
                        <img src="https://img.pokemondb.net/sprites/sword-shield/icon/bulbasaur.png" />
                    </div>

                    <div class="container bycolor_l2">
                        <label for="num-poke" style="min-width: 200px;">Number to find: <span id="num-poke-display">10</span></label>
                        <input type="range" min="1" max="100" value="10" oninput="onUpdate()" id="num-poke">
                    </div>
                </form>
                <ul id="best-list" class="pkmn-list"></ul>
            </div>
        </div>
    </body>
</html>