kirkleon
/
pokemon-color-search


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

    <template id="metric-select-template">
      <form action="javascript:void(0)" autocomplete="off">
        <output hidden name="metric"></output>
        <fieldset class="metric-fields | flex col small-gap">
          <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" 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" 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" 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="pkmn-data-template">
      <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 | 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 | grid small-gap" bind-to="cls1Data"></div>
            <button bind-to="cls2Btn" class="color-select" hidden></button>
            <div class="cluster-info | grid small-gap" bind-to="cls2Data"></div>
            <button bind-to="cls3Btn" class="color-select" hidden></button>
            <div class="cluster-info | grid small-gap" bind-to="cls3Data"></div>
            <button bind-to="cls4Btn" class="color-select" hidden></button>
            <div class="cluster-info | grid small-gap" bind-to="cls4Data"></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 + color space controls -->
    <form id="colorSortForm" hidden action="javascript:void(0)" autocomplete="off"></form>
    <!-- Contains display control (number or results) -->
    <form
      id="colorDisplayForm"
      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>
        <div class="center">
          <label>
            <div class="emphasis">
              Results:&nbsp;<output form="colorDisplayForm" name="output">6</output>
            </div>
            <input
              form="colorDisplayForm"
              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
              form="colorSortForm"
              type="radio"
              name="colorSpace"
              value="jab"
              checked
            />
            <span class="toggle-label | pill-shape highlight-border">CIECAM</span>
          </label>
          <label>
            <input form="colorSortForm" type="radio" name="colorSpace" value="rgb" />
            <span class="toggle-label | pill-shape highlight-border">sRGB</span>
          </label>
        </div>
      </div>
      <hr />
      <div class="emphasis center">Ranking 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">Minimizing</span>
          </label>
          <label>
            <input form="colorSortForm" type="radio" name="sortOrder" value="max" />
            <span class="toggle-label | pill-shape highlight-border">Maximizing</span>
          </label>
        </div>
        <div class="fn-body | flex">
          <label>
            <input
              form="colorCalculateForm"
              type="checkbox"
              name="sortUseWholeImage"
              checked
            />
            <span class="toggle-label | pill-shape highlight-border">
              <output form="colorCalculateForm" name="sortMetricSymbolP"></output>(P)
            </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="sortUseClusterSize"
              />
              <span class="toggle-label | pill-shape highlight-border">|B|</span>
            </label>
            <label>
              <input
                form="colorCalculateForm"
                type="checkbox"
                name="sortUseInvClusterSize"
                checked
              />
              <span class="toggle-label | pill-shape highlight-border">|B|</span>
            </label>
          </div>
          ⋅
          <div class="fn-fraction | flex col no-gap">
            <label>
              <input
                form="colorCalculateForm"
                type="checkbox"
                name="sortUseTotalSize"
                checked
              />
              <span class="toggle-label | pill-shape highlight-border">|P|</span>
            </label>
            <label>
              <input
                form="colorCalculateForm"
                type="checkbox"
                name="sortUseInvTotalSize"
              />
              <span class="toggle-label | pill-shape highlight-border">|P|</span>
            </label>
          </div>
        </div>
      </div>
      <hr />
      <div id="cls-title" class="emphasis center">Cluster Ranking</div>
      <div id="cls-metric-mount"></div>
      <!-- Cluster Sort Function -->
      <div 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">Minimizing</span>
          </label>
          <label>
            <input
              form="colorCalculateForm"
              type="radio"
              name="clusterSortOrder"
              value="max"
              checked
            />
            <span class="toggle-label | pill-shape highlight-border">Maximizing</span>
          </label>
        </div>
        <div class="fn-body | 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"
              />
              <span class="toggle-label | pill-shape highlight-border">|K|</span>
            </label>
            <label>
              <input
                form="colorCalculateForm"
                type="checkbox"
                name="clusterUseInvClusterSize"
              />
              <span class="toggle-label | pill-shape highlight-border">|K|</span>
            </label>
          </div>
          ⋅
          <div class="fn-fraction | flex col no-gap">
            <label>
              <input
                form="colorCalculateForm"
                type="checkbox"
                name="clusterUseTotalSize"
              />
              <span class="toggle-label | pill-shape highlight-border">|P|</span>
            </label>
            <label>
              <input
                form="colorCalculateForm"
                type="checkbox"
                name="clusterUseInvTotalSize"
              />
              <span class="toggle-label | pill-shape highlight-border">|P|</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>
      </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>