kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230
							<!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-form-template">
      <div>
        <label>
          <input type="checkbox" name="sortOrder" role="button" hidden />
          <output name="sortOrderLabel"></output>
          (click to toggle)
        </label>
      </div>
      <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">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>
    </template>

    <template id="scale-form-template">
      <div>
        <label>
          <input type="radio" name="rescaleFactor" value="none" />
          None
        </label>
      </div>
      <div>
        <label>
          <input type="radio" name="rescaleFactor" value="direct" />
          Cluster Size
        </label>
      </div>
      <div>
        <label>
          <input type="radio" name="rescaleFactor" value="inverse" />
          Inverse Cluster Size
        </label>
      </div>
      <div>
        <label>
          <input type="radio" name="rescaleFactor" value="size" />
          Image Size
        </label>
      </div>
      <div>
        <label>
          <input type="radio" name="rescaleFactor" value="inverseSize" />
          Inverse Image Size
        </label>
      </div>
    </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="sortControl" autocomplete="off">
      <div>
        <label>
          <div>Target Color</div>
          <input
            name="colorText"
            type="text"
            maxlength="7"
            oninput="onColorChange(event.target.value)"
          />
        </label>
        <input
          name="colorPicker"
          type="color"
          onchange="onColorChange(event.target.value)"
        />
        <button type="button" onclick="onColorChange(randomColor())">Random Color</button>
      </div>
      <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>
      <fieldset onchange="updateSort()">
        <legend>Color Space</legend>
        <div>
          <label>
            <input type="radio" name="colorSpace" value="jab" checked />
            CIECAM
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="colorSpace" value="rgb" />
            sRGB
          </label>
        </div>
      </fieldset>
      <fieldset name="metric" onchange="onMetricChange(event.target.form.elements)">
        <legend>Distance Metric</legend>
        <!-- template mount point -->
      </fieldset>
      <fieldset name="rescaleSection" onchange="updateSort()">
        <legend>Scaled By</legend>
        <!-- template mount point -->
      </fieldset>
      <fieldset
        onchange="
          const elements = event.target.form.elements;
          document.forms.sortControl.elements.rescaleSection.hidden = elements.useClusters.value === 'off';
          document.forms.clusterControl.hidden = elements.useClusters.value === 'off';
          onMetricChange(elements);
        "
      >
        <legend>Compare With</legend>
        <div>
          <label>
            <input type="radio" name="useClusters" value="off" />
            Whole Image
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="useClusters" value="on" />
            Best Cluster
          </label>
        </div>
        <div>
          <label>
            <input type="radio" name="useClusters" value="mult" checked />
            Best Cluster Times Whole
          </label>
        </div>
      </fieldset>
    </form>

    <form action="javascript:void(0);" id="clusterControl" autocomplete="off">
      <div>Cluster Ranking</div>
      <fieldset name="metric" onchange="onMetricChange(event.target.form.elements)">
        <legend>Distance Metric</legend>
        <!-- template mount point -->
      </fieldset>
      <fieldset name="rescaleSection" onchange="updateSort()">
        <legend>Scaled By</legend>
        <!-- template mount point -->
      </fieldset>
    </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>