kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
							<!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
        class="metric-select-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="alpha">Geometric Difference (α)</option>
          <option value="sigma">RMS Deviation (σ)</option>
          <option value="bigTheta">Cosine 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="importance">Visual Importance (β)</option>
          <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>
        </select>
        <output name="sortMetric" hidden aria-hidden="true"></output>
      </fieldset>
    </template>

    <template id="pkmn-data-template">
      α&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--alpha"></span>
      σ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--sigma"></span>
      Θ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--bigTheta"></span>
      <hr />
      θ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--theta"></span>°
      ϕ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--phi"></span>°
      δ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--delta"></span>
      M&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--manhattan"></span>
      Ч&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--ch"></span>
      ℓ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--lightnessDiff"></span>
      <hr />
      β&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--importance"></span>
      I&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--inertia"></span>
      V&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--variance"></span>
      Φ&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--muNuAngle"></span>°
      N&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--size"></span>
      L&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--lightness"></span>
      C&nbsp;=&nbsp;<span class="pkmn-data-value pkmn-data-value--chroma"></span>
    </template>

    <template id="pkmn-template">
      <div class="pkmn">
        <img />
        <div class="pkmn-name"></div>
        <div
          class="pkmn-total"
          onmouseenter="event.target.querySelector('dialog').show()"
          onmouseleave="event.target.querySelector('dialog').close()"
        >
          <dialog class="pkmn-data"></dialog>
        </div>
        <div class="pkmn-score"></div>
        <div
          class="pkmn-cls pkmn-cls1"
          onmouseenter="event.target.querySelector('dialog').show()"
          onmouseleave="event.target.querySelector('dialog').close()"
        >
          <span></span><span></span>
          <dialog class="pkmn-data" hidden></dialog>
        </div>
        <div
          class="pkmn-cls pkmn-cls2"
          onmouseenter="event.target.querySelector('dialog').show()"
          onmouseleave="event.target.querySelector('dialog').close()"
        >
          <span></span><span></span>
          <dialog class="pkmn-data" hidden></dialog>
        </div>
        <div
          class="pkmn-cls pkmn-cls3"
          onmouseenter="event.target.querySelector('dialog').show()"
          onmouseleave="event.target.querySelector('dialog').close()"
        >
          <span></span><span></span>
          <dialog class="pkmn-data" hidden></dialog>
        </div>
        <div
          class="pkmn-cls pkmn-cls4"
          onmouseenter="event.target.querySelector('dialog').show()"
          onmouseleave="event.target.querySelector('dialog').close()"
        >
          <span></span><span></span>
          <dialog class="pkmn-data" hidden></dialog>
        </div>
      </div>
    </template>

    <div class="main-container">
      <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>
      </form>

      <form
        action="javascript:void(0);"
        id="clusterFunction"
        autocomplete="off"
        onchange="updateSort()"
      >
        <div class="fn-group">
          <span class="center">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>
      </form>

      <form action="javascript:void(0);" id="sortMetric">
        <!-- Template mount point -->
      </form>

      <form action="javascript:void(0);" id="clusterMetric">
        <!-- Template mount point -->
      </form>

      <form action="javascript:void(0);" id="colorSelect" autocomplete="off">
        <label for="color-input-text">Target Color</label>
        <button type="button" onclick="onColorChange(randomColor())">Random Color</button>
        <input
          id="color-input-text"
          name="colorText"
          type="text"
          maxlength="7"
          oninput="onColorChange(event.target.value)"
        />
        <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">6</output></div>
            <input
              name="resultsToDisplay"
              type="range"
              min="1"
              max="100"
              value="6"
              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-label">By Color</div>
      <div id="name-results-label">By Name</div>

      <div id="color-results"></div>
      <div id="name-results"></div>
      <div id="prev-colors-container">
        <div>Previous Colors</div>
        <div id="prev-colors"></div>
      </div>

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