kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
							<!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/d3-color@3.0.1/dist/d3-color.min.js"></script>
    <script src="https://unpkg.com/d3-cam02@0.1.5/build/d3-cam02.min.js"></script>
    <script src="https://unpkg.com/fuse.js@6.5.3/dist/fuse.min.js"></script>
    <script src="database-v3.js"></script>
    <script src="math.js"></script>
    <script src="form.js"></script>
  </head>
  <body>
    <noscript>Requires javascript</noscript>

    <template id="metric-select-template">
      <fieldset onchange="onMetricChange(event.target.form.elements)">
        <legend>Metric</legend>
        <div>
          <label>
            <input type="radio" name="metricKind" value="whole" />
            Set Comparison
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="metricKind" value="mean" />
            Mean Comparison
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="metricKind" value="statistic" />
            Set Statistics
          </label>
        </div>
        <select name="whole" disabled>
          <option value="sigma">RMS Deviation (σ)</option>
          <option value="bigTheta">Cosine Difference (Θ)</option>
          <option value="alpha" selected>Geometric Difference (α)</option>
        </select>
        <select name="mean" disabled>
          <option value="theta">Angular Difference (θ)</option>
          <option value="phi">Hue Azimuth (ϕ)</option>
          <option value="delta">Euclidean (δ)</option>
          <option value="manhattan">Manhattan (M)</option>
          <option value="ch">Chebyshev (Ч)</option>
          <option value="lightnessDiff">Lightness (ℓ)</option>
        </select>
        <select name="statistic" disabled>
          <option value="inertia">Inertia (I)</option>
          <option value="variance">Variance (V)</option>
          <option value="muNuAngle">Mu-Nu Angle (Φ)</option>
          <option value="size">Size (N)</option>
          <option value="lightness">Mean Lightness (L)</option>
          <option value="chroma">Mean Chroma (C)</option>
          <option value="importance">Visual Importance (β)</option>
        </select>
        <output name="sortMetric" hidden aria-hidden="true"></output>
      </fieldset>
    </template>

    <template id="pkmn-template">
      <div class="pkmn">
        <img />
        <div class="pkmn-name"></div>
        <div class="pkmn-total"></div>
        <div class="pkmn-score"></div>
        <div class="pkmn-cls pkmn-cls1"><span></span><span></span></div>
        <div class="pkmn-cls pkmn-cls2"><span></span><span></span></div>
        <div class="pkmn-cls pkmn-cls3"><span></span><span></span></div>
        <div class="pkmn-cls pkmn-cls4"><span></span><span></span></div>
      </div>
    </template>

    <form
      action="javascript:void(0);"
      id="sortFunction"
      autocomplete="off"
      onchange="updateSort()"
    >
      <div class="fn-group fn-group-outer">
        <label class="fn-minmax">
          <input type="checkbox" name="sortOrder" role="button" hidden />
          <div class="fn-minmax-toggle">
            <span>min</span>
            <span>max</span>
          </div>
        </label>
        <span class="fn-bracket">[</span>
        <div
          class="fn-group"
          onchange="event.target.parentNode.classList.toggle('fn-part--disabled')"
        >
          <label class="fn-part">
            <input type="checkbox" name="useWholeImage" checked />
            <output name="metricSymbolP">α</output>(P)
          </label>
          ⋅
          <label class="fn-part">
            <input type="checkbox" name="totalSize" checked />
            |P|
          </label>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="invTotalSize" />
            |P|<sup>-1</sup>
          </label>
          ⋅
          <label class="fn-part">
            <input type="checkbox" name="useBestCluster" checked />
            <output name="metricSymbolB">α</output>(B)
          </label>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="clusterSize" />
            |B|
          </label>
          ⋅
          <label class="fn-part">
            <input type="checkbox" name="invClusterSize" checked />
            |B|<sup>-1</sup>
          </label>
        </div>
        <span class="fn-bracket">]</span>
      </div>
      <!-- Template mount point -->
    </form>

    <form
      action="javascript:void(0);"
      id="clusterFunction"
      autocomplete="off"
      onchange="updateSort()"
    >
      <div class="fn-group">
        <span>where B =&nbsp;</span>
        <label class="fn-minmax fn-minmax--wide">
          <input type="checkbox" name="sortOrder" role="button" checked hidden />
          <div class="fn-minmax-toggle">
            <span>argmin</span>
            <span>argmax</span>
          </div>
        </label>
        <span class="fn-bracket">[</span>
        <div
          class="fn-group"
          onchange="event.target.parentNode.classList.toggle('fn-part--disabled')"
        >
          <span class="fn-part fn-part--fixed">
            <output name="metricSymbol">β</output>(K)
          </span>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="clusterSize" />
            |K|
          </label>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="invClusterSize" />
            |K|<sup>-1</sup>
          </label>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="totalSize" />
            |P|
          </label>
          ⋅
          <label class="fn-part fn-part--disabled">
            <input type="checkbox" name="invTotalSize" />
            |P|<sup>-1</sup>
          </label>
        </div>
        <span class="fn-bracket">]</span>
      </div>
      <!-- Template mount point -->
    </form>

    <form action="javascript:void(0);" id="colorSelect" autocomplete="off">
      <label for="color-input-text">Target Color</label>
      <input
        id="color-input-text"
        name="colorText"
        type="text"
        maxlength="7"
        oninput="onColorChange(event.target.value)"
      />
      <button type="button" onclick="onColorChange(randomColor())">Random Color</button>
      <input
        name="colorPicker"
        type="color"
        onchange="onColorChange(event.target.value)"
      />
    </form>

    <form action="javascript:void(0);" id="sortControl" autocomplete="off">
      <div>
        <label>
          <div>Results:&nbsp;<output name="resultsToDisplayOutput">10</output></div>
          <input
            name="resultsToDisplay"
            type="range"
            min="1"
            max="100"
            value="10"
            oninput="
              event.target.form.elements.resultsToDisplayOutput.value = event.target.value
            "
            onchange="showResults()"
          />
        </label>
      </div>
      <div>
        <label>
          <input
            type="radio"
            onchange="updateSort()"
            name="colorSpace"
            value="jab"
            checked
          />
          CIECAM
        </label>
      </div>
      <div>
        <label>
          <input type="radio" onchange="updateSort()" name="colorSpace" value="rgb" />
          sRGB
        </label>
      </div>
    </form>

    <div id="color-results"></div>

    <input
      type="text"
      autocomplete="off"
      id="name-search"
      oninput="searchByName(event.target.value)"
    />
    <button type="button" onclick="randomPokemon()">Random Pokemon</button>

    <div id="name-results"></div>

    <div>
      <div>Previous Colors</div>
      <div id="prev-colors"></div>
    </div>
  </body>
</html>