kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
							<!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="framework.js"></script>
    <script src="script.js" defer></script>
  </head>
  <body>
    <noscript>Requires javascript</noscript>

    <template id="metric-select-template">
      <form bind-to="form">
        <fieldset class="metric-fields | flex col small-gap">
          <legend bind-to="legend">Metric</legend>
          <label>
            <input type="radio" name="metricKind" value="whole" />
            <div class="toggle-label | center pill-shape highlight-border">
              Set Comparison
            </div>
          </label>
          <label>
            <input type="radio" name="metricKind" value="mean" />
            <div class="toggle-label | center pill-shape highlight-border">
              Mean Comparison
            </div>
          </label>
          <label>
            <input type="radio" name="metricKind" value="stat" />
            <div class="toggle-label | center pill-shape highlight-border">
              Set Statistics
            </div>
          </label>
          <select
            class="pill-shape highlight-border"
            name="whole"
            bind-to="wholeSelect"
            disabled
          >
            <option value="alpha">Geometric Difference (α)</option>
            <option value="sigma">RMS Deviation (σ)</option>
            <option value="bigTheta">Cosine Difference (Θ)</option>
          </select>
          <select
            class="pill-shape highlight-border"
            name="mean"
            bind-to="meanSelect"
            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
            class="pill-shape highlight-border"
            name="stat"
            bind-to="statSelect"
            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>
        </fieldset>
      </form>
    </template>

    <template id="function-template">
      <form bind-to="form" autocomplete="off">
        <div class="fn-control | flex col no-gap">
          <div class="fn-minmax | center flex small-gap">
            <label>
              <input type="radio" name="sortOrder" value="min" checked />
              <span class="toggle-label | pill-shape highlight-border">Minimizing</span>
            </label>
            <label>
              <input type="radio" name="sortOrder" value="max" />
              <span class="toggle-label | pill-shape highlight-border">Maximizing</span>
            </label>
          </div>
          <div class="fn-body | flex">
            <label bind-to="useWholeImageLabel">
              <input type="checkbox" name="useWholeImage" />
              <span class="toggle-label | pill-shape highlight-border">
                <span bind-to="metricSymbol"></span>(P)</span
              >
            </label>
            ⋅
            <label>
              <input type="checkbox" name="useBestCluster" />
              <span
                class="toggle-label | pill-shape highlight-border"
                bind-to="metricSymbolCls"
              ></span>
            </label>
            ⋅
            <div class="fn-fraction | flex col no-gap">
              <label>
                <input type="checkbox" name="clusterSize" />
                <span class="toggle-label | pill-shape highlight-border">
                  |<span bind-to="clusterName"></span>|
                </span>
              </label>
              <label>
                <input type="checkbox" name="invClusterSize" />
                <span class="toggle-label | pill-shape highlight-border">
                  |<span bind-to="clusterNameInv"></span>|
                </span>
              </label>
            </div>
            ⋅
            <div class="fn-fraction | flex col no-gap">
              <label>
                <input type="checkbox" name="totalSize" />
                <span class="toggle-label | pill-shape highlight-border">|P|</span>
              </label>
              <label>
                <input type="checkbox" name="invTotalSize" />
                <span class="toggle-label | pill-shape highlight-border">|P|</span>
              </label>
            </div>
          </div>
        </div>
      </form>
    </template>

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

    <template id="pkmn-template">
      <div class="pkmn-tile | flex col no-gap">
        <div class="ellipsis emphasis" bind-to="name"></div>
        <div class="pkmn-info | highlight-border flex even">
          <div class="flex col small-gap">
            <img bind-to="image" />
            <div class="center" bind-to="score"></div>
            <button bind-to="totalBtn" class="pkmn-total | color-select"></button>
            <div
              class="total-info | highlight-border grid small-gap"
              bind-to="totalData"
            ></div>
          </div>
          <div class="cluster-buttons | flex col">
            <button bind-to="cls1Btn" class="color-select" hidden></button>
            <div
              class="cluster-info | highlight-border grid small-gap"
              bind-to="cls1Data"
            ></div>
            <button bind-to="cls2Btn" class="color-select" hidden></button>
            <div
              class="cluster-info | highlight-border grid small-gap"
              bind-to="cls2Data"
            ></div>
            <button bind-to="cls3Btn" class="color-select" hidden></button>
            <div
              class="cluster-info | highlight-border grid small-gap"
              bind-to="cls3Data"
            ></div>
            <button bind-to="cls4Btn" class="color-select" hidden></button>
            <div
              class="cluster-info | highlight-border grid small-gap"
              bind-to="cls4Data"
            ></div>
          </div>
        </div>
        <!-- TODO the actual data -->
      </div>
    </template>

    <div id="sidebar" class="section | flow small-flow-space">
      <form id="targetSelect" class="flex col small-gap" autocomplete="off">
        <label class="emphasis center" for="colorInputText">Target Color</label>
        <div class="color-inputs | flex small-gap">
          <input
            id="colorInputText"
            class="pill-shape highlight-border"
            name="colorText"
            type="text"
            pattern="#?[0-9a-fA-F]*"
            maxlength="7"
          />
          <input name="colorPicker" type="color" />
        </div>
        <button type="button" bind-to="randomButton">Random Color</button>
        <div class="center">
          <label>
            <div class="emphasis">
              Results:&nbsp;<output name="resultsToDisplayOutput">6</output>
            </div>
            <input name="resultsToDisplay" type="range" min="1" max="100" value="6" />
          </label>
        </div>
        <div class="emphasis center">Color Space</div>
        <div class="center flex big-gap">
          <label>
            <input type="radio" name="colorSpace" value="jab" checked />
            <span class="toggle-label | pill-shape highlight-border">CIECAM</span>
          </label>
          <label>
            <input type="radio" name="colorSpace" value="rgb" />
            <span class="toggle-label | pill-shape highlight-border">sRGB</span>
          </label>
        </div>
      </form>
      <hr />
      <div class="emphasis center">Ranking Function</div>
      <div id="sort-metric-mount"></div>
      <div id="sort-fn-mount"></div>
      <hr />
      <div id="cls-title" class="emphasis center">Cluster Ranking</div>
      <div id="cls-metric-mount"></div>
      <div id="cls-fn-mount"></div>
      <hr />
      <div id="nameSearch" class="flex col small-gap">
        <div class="emphasis center">Name Search</div>
        <input
          class="pill-shape highlight-border"
          type="text"
          autocomplete="off"
          bind-to="input"
        />
        <button type="button" bind-to="randomBtn">Random Pokemon</button>
        <button type="button" bind-to="clearBtn">Clear</button>
      </div>
    </div>

    <main class="section flow">
      <div id="color-results-label" class="emphasis">By Color</div>
      <div id="color-results" class="flex wrap"></div>
      <hr />
      <div id="name-results-label" 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>