kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Pokemon By Color</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/fuse.js@6.5.3/dist/fuse.min.js"></script>
    <script src="database.js"></script>
    <script src="main.js" defer></script>
  </head>
  <body>
    <noscript>Requires javascript</noscript>

    <template id="metric-select-template">
      <!-- Form is named by script, contains all fields to use event bubbling -->
      <form
        action="javascript:void(0)"
        autocomplete="off"
        class="metric-fields | flex col small-gap"
      >
        <output hidden name="metric"></output>
        <div class="flex center">
          <label>
            <input type="radio" name="metricKind" value="compare" />
            <div class="toggle-label | center pill-shape highlight-border">Compare</div>
          </label>
          <label>
            <input type="radio" name="metricKind" value="stat" />
            <div class="toggle-label | center pill-shape highlight-border">Stats</div>
          </label>
        </div>
        <select class="pill-shape highlight-border" name="compare" disabled>
          <option value="geoDiff">Geometric Difference (Ω)</option>
          <option value="psi">RMS Deviation (Ψ)</option>
          <option value="theta">Mean Cosine Difference (Θ)</option>
          <option value="psiL">RMS Deviation Lightness (Lᵣₘₛ)</option>
          <option value="psiA">RMS Deviation Red/Green (aᵣₘₛ)</option>
          <option value="psiB">RMS Deviation Blue/Yellow (bᵣₘₛ)</option>
          <option value="psiC">RMS Deviation Chroma (Cᵣₘₛ)</option>
          <option value="delta">Euclidean Distance (δ)</option>
          <option value="deltaL">Lightness Difference (ΔL)</option>
          <option value="deltaA">Red/Green Difference (Δa)</option>
          <option value="deltaB">Blue/Yellow Difference (Δb)</option>
          <option value="deltaC">Chroma Difference (ΔC)</option>
          <option value="angDiff">Angular Difference From Mean (φ)</option>
          <option value="deltaH">Hue Angular Difference (Δh)</option>
        </select>
        <select class="pill-shape highlight-border" name="stat" disabled>
          <option value="size">Size (N)</option>
          <option value="stddevTotal">Standard Deviation (σ)</option>
          <option value="deltaL">Mean Lightness (L̅)</option>
          <option value="stddevL">Lightness Deviation (σᴸ)</option>
          <option value="deltaA">Mean Red/Green (a̅)</option>
          <option value="stddevA">Red/Green Deviation (σᵃ)</option>
          <option value="deltaB">Mean Blue/Yellow (b̅)</option>
          <option value="stddevB">Blue/Yellow Deviation (σᵇ)</option>
          <option value="chromaMean" selected>Mean Chroma (C̅)</option>
          <option value="chromaDev">Chroma Deviation (σꟲ)</option>
        </select>
      </form>
    </template>

    <template id="pkmn-data-template">
      <div>Ω&nbsp;=&nbsp;<span bind-to="geoDiff"></span></div>
      <div>|Ψ|&nbsp;=&nbsp;<span bind-to="psi"></span></div>
      <div>Θ&nbsp;=&nbsp;<span bind-to="theta"></span>°</div>
      <div class="pkmn-data-wide">Ψ&nbsp;=&nbsp;(<span bind-to="psiVec"></span>)</div>
      <div>Cᵣₘₛ&nbsp;=&nbsp;<span bind-to="psiC"></span></div>
      <div>Δh&nbsp;=&nbsp;<span bind-to="deltaH"></span>°</div>
      <div>|δ|&nbsp;=&nbsp;<span bind-to="delta"></span></div>
      <div>φ&nbsp;=&nbsp;<span bind-to="angDiff"></span>°</div>
      <div class="pkmn-data-wide">δ&nbsp;=&nbsp;(<span bind-to="deltaVec"></span>)</div>
      <div>ΔC&nbsp;=&nbsp;<span bind-to="deltaC"></span></div>
      <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
      <div class="pkmn-data-wide">μ&nbsp;=&nbsp;(<span bind-to="centroid"></span>)</div>
      <div>C̅&nbsp;=&nbsp;<span bind-to="chromaMean"></span></div>
      <div class="pkmn-data-wide">σ&nbsp;=&nbsp;(<span bind-to="stddev"></span>)</div>
      <div>σꟲ&nbsp;=&nbsp;<span bind-to="chromaDev"></span></div>
      <div class="pkmn-data-wide">τ&nbsp;=&nbsp;(<span bind-to="tilt"></span>)</div>
      <div>h̅&nbsp;=&nbsp;<span bind-to="hue"></span>°</div>
      <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
      <div class="full-grid-row center"><span bind-to="size"></span> pixels</div>
    </template>

    <template id="pkmn-tile-template">
      <div class="pkmn-tile | flex col no-gap" bind-to="tileRoot">
        <div class="pkmn-title | emphasis flex">
          <span class="ellipsis" bind-to="name"></span>
        </div>
        <div class="pkmn-info | highlight-border flex">
          <div class="pkmn-info-detail | math-font grid" bind-to="totalData"></div>
          <div class="pkmn-info-detail | math-font grid" bind-to="cls1Data"></div>
          <div class="pkmn-info-detail | math-font grid" bind-to="cls2Data"></div>
          <div class="pkmn-info-detail | math-font grid" bind-to="cls3Data"></div>
          <div class="pkmn-info-detail | math-font grid" bind-to="cls4Data"></div>
          <div class="pkmn-info-main | flex col">
            <a bind-to="link" target="_blank" rel="noopener noreferrer" href="">
              <img bind-to="image" />
            </a>
            <div class="pkmn-score-row | flex">
              <div class="math-font" bind-to="score"></div>
              <div class="smaller">"<span bind-to="color"></span>"</div>
            </div>
            <div class="flex">
              <button
                bind-to="totalBtn"
                class="pkmn-total | math-font color-select"
              ></button>
              <span class="pkmn-info-icon | smaller" bind-to="infoHover">ⓘ</span>
            </div>
          </div>
          <div class="cluster-buttons | math-font flex col">
            <div class="flex">
              <button bind-to="cls1Btn" class="color-select" hidden></button>
              <span class="pkmn-info-icon | smaller" bind-to="infoHover1">ⓘ</span>
            </div>
            <div class="flex">
              <button bind-to="cls2Btn" class="color-select" hidden></button>
              <span class="pkmn-info-icon | smaller" bind-to="infoHover2">ⓘ</span>
            </div>
            <div class="flex">
              <button bind-to="cls3Btn" class="color-select" hidden></button>
              <span class="pkmn-info-icon | smaller" bind-to="infoHover3">ⓘ</span>
            </div>
            <div class="flex">
              <button bind-to="cls4Btn" class="color-select" hidden></button>
              <span class="pkmn-info-icon | smaller" bind-to="infoHover4">ⓘ</span>
            </div>
          </div>
        </div>
      </div>
    </template>

    <!-- Contains target color controls -->
    <form
      id="targetColorForm"
      hidden
      action="javascript:void(0)"
      autocomplete="off"
    ></form>
    <!-- Contains cluster fn controls + final objective fn controls -->
    <form
      id="colorCalculateForm"
      hidden
      action="javascript:void(0)"
      autocomplete="off"
    ></form>
    <!-- Contains final sort order control -->
    <form id="colorSortForm" hidden action="javascript:void(0)" autocomplete="off"></form>
    <!-- Contains display control (number of results) -->
    <form
      id="colorDisplayForm"
      hidden
      action="javascript:void(0)"
      autocomplete="off"
    ></form>
    <!-- Contains filter control (form filters, etc.) -->
    <form id="filterControl" hidden action="javascript:void(0)" autocomplete="off"></form>
    <!-- Contains name search controls -->
    <form
      id="nameSearchForm"
      hidden
      action="javascript:void(0)"
      autocomplete="off"
    ></form>

    <div class="section flow small-flow-space">
      <div class="color-inputs | flex col small-gap">
        <label class="emphasis center" for="colorInputText">Target Color</label>
        <div class="flex small-gap">
          <input
            form="targetColorForm"
            class="pill-shape highlight-border"
            name="colorText"
            type="text"
            pattern="#?[0-9a-fA-F]{0,6}"
            maxlength="7"
            placeholder="#000000"
          />
          <input form="targetColorForm" name="colorPicker" type="color" />
        </div>
        <button type="button" form="targetColorForm" name="randomColor">
          Random Color
        </button>
        <output class="center smaller" form="targetColorForm" name="info"></output>
        <div class="center">
          <label>
            <div class="emphasis">
              Results:&nbsp;<output form="colorDisplayForm" name="output">10</output>
            </div>
            <input
              form="colorDisplayForm"
              name="resultsToDisplay"
              type="range"
              min="1"
              max="100"
              value="10"
            />
          </label>
        </div>
        <label class="center">
          <input form="filterControl" type="checkbox" name="allowRepeatDexNum" hidden />
          <span class="toggle-label | pill-shape highlight-border">Repeat Species</span>
        </label>
        <label class="center">
          <input form="filterControl" type="checkbox" name="allowNoStartForms" hidden />
          <span class="toggle-label | pill-shape highlight-border">Non-Start Forms</span>
        </label>
      </div>
      <hr />
      <div class="emphasis center">Sort Function</div>
      <div id="sort-metric-mount"></div>
      <!-- Main Sort Function -->
      <div class="fn-control | flex col no-gap">
        <div class="fn-minmax | center flex small-gap">
          <label>
            <input
              form="colorSortForm"
              type="radio"
              name="sortOrder"
              value="min"
              checked
            />
            <span class="toggle-label | pill-shape highlight-border">Min</span>
          </label>
          <label>
            <input form="colorSortForm" type="radio" name="sortOrder" value="max" />
            <span class="toggle-label | pill-shape highlight-border">Max</span>
          </label>
        </div>
        <div class="fn-body | math-font flex">
          <label>
            <input
              form="colorCalculateForm"
              type="checkbox"
              name="sortUseWholeImage"
              checked
            />
            <span class="toggle-label | pill-shape highlight-border">
              <output form="colorCalculateForm" name="sortMetricSymbolP"></output>(I)
            </span>
          </label>
          +
          <label>
            <input
              form="colorCalculateForm"
              type="checkbox"
              name="sortUseBestCluster"
              checked
            />
            <span class="toggle-label | pill-shape highlight-border">
              <output form="colorCalculateForm" name="sortMetricSymbolB"></output>(B)
            </span>
          </label>
          ⋅
          <div class="fn-fraction | flex col no-gap">
            <label>
              <input
                form="colorCalculateForm"
                type="checkbox"
                name="sortUseClusterProportion"
              />
              <span class="toggle-label | pill-shape highlight-border">%B</span>
            </label>
            <label>
              <input
                form="colorCalculateForm"
                type="checkbox"
                name="sortUseInvClusterProportion"
                checked
              />
              <span class="toggle-label | pill-shape highlight-border">%B</span>
            </label>
          </div>
        </div>
      </div>
      <hr />
      <div id="cls-title" class="emphasis center">Cluster Choice</div>
      <div id="cls-metric-mount"></div>
      <!-- Cluster Sort Function -->
      <div id="cls-fn" class="fn-control | flex col no-gap">
        <div class="fn-minmax | center flex small-gap">
          <label>
            <input
              form="colorCalculateForm"
              type="radio"
              name="clusterSortOrder"
              value="min"
            />
            <span class="toggle-label | pill-shape highlight-border">Min</span>
          </label>
          <label>
            <input
              form="colorCalculateForm"
              type="radio"
              name="clusterSortOrder"
              value="max"
              checked
            />
            <span class="toggle-label | pill-shape highlight-border">Max</span>
          </label>
        </div>
        <div class="fn-body | math-font flex">
          <span class="toggle-label | pill-shape highlight-border">
            <output form="colorCalculateForm" name="clusterMetricSymbol"></output>(K)
          </span>
          ⋅
          <div class="fn-fraction | flex col no-gap">
            <label>
              <input
                form="colorCalculateForm"
                type="checkbox"
                name="clusterUseClusterSize"
                checked
              />
              <span class="toggle-label | pill-shape highlight-border">N(K)</span>
            </label>
            <label>
              <input
                form="colorCalculateForm"
                type="checkbox"
                name="clusterUseInvClusterSize"
              />
              <span class="toggle-label | pill-shape highlight-border">N(K)</span>
            </label>
          </div>
        </div>
      </div>
      <hr />
      <div class="flex col small-gap">
        <div class="emphasis center">Name Search</div>
        <input
          form="nameSearchForm"
          class="pill-shape highlight-border"
          type="text"
          autocomplete="off"
          name="input"
        />
        <button form="nameSearchForm" type="button" name="random">Random Pokemon</button>
        <button form="nameSearchForm" type="button" name="clear">Clear</button>
        <button form="nameSearchForm" type="button" name="all">Show All (slow)</button>
      </div>
    </div>

    <main class="section flow">
      <div class="emphasis">By Color</div>
      <div id="color-results" class="flex wrap"></div>
      <hr />
      <div class="emphasis">By Name</div>
      <div id="name-results" class="flex wrap"></div>
    </main>

    <div class="section flow">
      <div class="emphasis center">Previous Colors</div>
      <div id="prevColors"></div>
    </div>
  </body>
</html>