kirkleon
/
pokemon-color-search


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Pokemon By Color</title>
    <link rel="stylesheet" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
    />
    <script src="https://unpkg.com/fuse.js@6.5.3/dist/fuse.min.js"></script>
    <script src="database.js"></script>
    <script src="main.js" defer></script>
  </head>
  <body>
    <noscript>Requires javascript</noscript>

    <template id="metric-select-template">
      <!-- Form is named by script, contains all fields to use event bubbling -->
      <form
        action="javascript:void(0)"
        autocomplete="off"
        class="metric-fields | flex center-items smaller-gap"
      >
        <output hidden name="metric"></output>
        <div class="metric-kind-toggle | flex col center-content">
          <label>
            <input type="radio" name="metricKind" value="compare" />
            <div class="toggle-label | center pill-shape highlight-border">Compare</div>
          </label>
          <label>
            <input type="radio" name="metricKind" value="stat" />
            <div class="toggle-label | center pill-shape highlight-border">Statistic</div>
          </label>
        </div>
        <select class="pill-shape highlight-border ellipsis" name="compare" disabled>
          <option value="arcDiff">Arc Difference (Ω)</option>
          <option value="psi">RMS Deviation (Ψ)</option>
          <option value="theta">Quasi-mean Angular Difference (Θ)</option>
          <option value="delta">Euclidean Distance (δ)</option>
          <option value="angDiff">Angular Difference From Mean (φ)</option>
          <option value="psiL">RMS Deviation Lightness (Lᵣₘₛ)</option>
          <option value="psiA">RMS Deviation Red/Green (aᵣₘₛ)</option>
          <option value="psiB">RMS Deviation Blue/Yellow (bᵣₘₛ)</option>
          <option value="psiC">RMS Deviation Chroma (Cᵣₘₛ)</option>
          <option value="deltaL">Lightness Difference (ΔL)</option>
          <option value="deltaA">Red/Green Difference (Δa)</option>
          <option value="deltaB">Blue/Yellow Difference (Δb)</option>
          <option value="deltaC">Chroma Difference (ΔC)</option>
          <option value="deltaH">Hue Angular Difference (Δh)</option>
        </select>
        <select class="pill-shape highlight-border ellipsis" name="stat" disabled>
          <option value="size">Size (N)</option>
          <option value="stddevTotal">Standard Deviation (σ)</option>
          <option value="deltaL">Mean Lightness (L̅)</option>
          <option value="stddevL">Lightness Deviation (σᴸ)</option>
          <option value="deltaA">Mean Red/Green (a̅)</option>
          <option value="stddevA">Red/Green Deviation (σᵃ)</option>
          <option value="deltaB">Mean Blue/Yellow (b̅)</option>
          <option value="stddevB">Blue/Yellow Deviation (σᵇ)</option>
          <option value="chromaMean" selected>Mean Chroma (C̅)</option>
          <option value="chromaDev">Chroma Deviation (σꟲ)</option>
        </select>
      </form>
    </template>

    <template id="pkmn-data-template">
      <div>Ω&nbsp;=&nbsp;<span bind-to="arcDiff"></span></div>
      <div>|Ψ|&nbsp;=&nbsp;<span bind-to="psi"></span></div>
      <div>Θ&nbsp;=&nbsp;<span bind-to="theta"></span>°</div>
      <div class="pkmn-data-wide">Ψ&nbsp;=&nbsp;(<span bind-to="psiVec"></span>)</div>
      <div>Cᵣₘₛ&nbsp;=&nbsp;<span bind-to="psiC"></span></div>
      <div>Δh&nbsp;=&nbsp;<span bind-to="deltaH"></span>°</div>
      <div>|δ|&nbsp;=&nbsp;<span bind-to="delta"></span></div>
      <div>φ&nbsp;=&nbsp;<span bind-to="angDiff"></span>°</div>
      <div class="pkmn-data-wide">δ&nbsp;=&nbsp;(<span bind-to="deltaVec"></span>)</div>
      <div>ΔC&nbsp;=&nbsp;<span bind-to="deltaC"></span></div>
      <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
      <div class="pkmn-data-wide">μ&nbsp;=&nbsp;(<span bind-to="centroid"></span>)</div>
      <div>C̅&nbsp;=&nbsp;<span bind-to="chromaMean"></span></div>
      <div class="pkmn-data-wide">σ&nbsp;=&nbsp;(<span bind-to="stddev"></span>)</div>
      <div>σꟲ&nbsp;=&nbsp;<span bind-to="chromaDev"></span></div>
      <div class="pkmn-data-wide">τ&nbsp;=&nbsp;(<span bind-to="tilt"></span>)</div>
      <div>h̅&nbsp;=&nbsp;<span bind-to="hue"></span>°</div>
      <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
      <div class="full-grid-row center"><span bind-to="size"></span> pixels</div>
    </template>

    <template id="pkmn-tile-template">
      <div class="pkmn-tile | flex col no-gap" bind-to="tileRoot">
        <div class="pkmn-title | emphasis flex center-items">
          <span class="ellipsis" bind-to="name"></span>
        </div>
        <div class="pkmn-info | highlight-border flex">
          <div class="pkmn-info-detail | math-font grid" bind-to="totalData"></div>
          <div class="pkmn-info-detail | math-font grid" bind-to="cls1Data"></div>
          <div class="pkmn-info-detail | math-font grid" bind-to="cls2Data"></div>
          <div class="pkmn-info-detail | math-font grid" bind-to="cls3Data"></div>
          <div class="pkmn-info-detail | math-font grid" bind-to="cls4Data"></div>
          <div class="pkmn-info-main | flex col smaller-gap">
            <a
              bind-to="link"
              class="iflex center-content center-items"
              target="_blank"
              rel="noopener noreferrer"
              href=""
            >
              <img bind-to="image" />
            </a>
            <div class="pkmn-score-row | flex center-items">
              <div class="math-font" bind-to="score"></div>
              <div class="smaller">"<span bind-to="color"></span>"</div>
            </div>
            <div class="flex">
              <button
                bind-to="totalBtn"
                class="pkmn-total | math-font color-select"
              ></button>
              <span class="pkmn-info-icon | smaller" bind-to="infoHover">ⓘ</span>
            </div>
          </div>
          <div class="cluster-buttons | math-font flex center-content col smaller-gap">
            <div class="flex">
              <button bind-to="cls1Btn" class="color-select" hidden></button>
              <span class="pkmn-info-icon | smaller" bind-to="infoHover1">ⓘ</span>
            </div>
            <div class="flex">
              <button bind-to="cls2Btn" class="color-select" hidden></button>
              <span class="pkmn-info-icon | smaller" bind-to="infoHover2">ⓘ</span>
            </div>
            <div class="flex">
              <button bind-to="cls3Btn" class="color-select" hidden></button>
              <span class="pkmn-info-icon | smaller" bind-to="infoHover3">ⓘ</span>
            </div>
            <div class="flex">
              <button bind-to="cls4Btn" class="color-select" hidden></button>
              <span class="pkmn-info-icon | smaller" bind-to="infoHover4">ⓘ</span>
            </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 control -->
    <form id="colorSortForm" hidden action="javascript:void(0)" autocomplete="off"></form>
    <!-- Contains display control (number of results) -->
    <form
      id="colorDisplayForm"
      hidden
      action="javascript:void(0)"
      autocomplete="off"
    ></form>
    <!-- Contains filter control (form filters, etc.) -->
    <form id="filterControl" hidden action="javascript:void(0)" autocomplete="off"></form>
    <!-- Contains name search controls -->
    <form
      id="nameSearchForm"
      hidden
      action="javascript:void(0)"
      autocomplete="off"
    ></form>

    <main class="section flow">
      <div class="flex wrap small-gap">
        <!-- Color Select -->
        <div id="sort-inputs" class="control-block | flex col smaller-gap center-items">
          <div class="flex center-content center-items small-gap wrap">
            <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" />
            <button
              title="Randomize Color"
              class="icon-button | material-symbols-outlined"
              type="button"
              form="targetColorForm"
              name="randomColor"
            >
              shuffle
            </button>
          </div>
          <output class="smaller" form="targetColorForm" name="info"></output>
        </div>
        <!-- Filter/Limit -->
        <div class="control-block | flex center-items">
          <label>
            <div class="center emphasis">
              Results:&nbsp;<output form="colorDisplayForm" name="output">10</output>
            </div>
            <input
              form="colorDisplayForm"
              name="resultsToDisplay"
              type="range"
              min="1"
              max="100"
              value="10"
            />
          </label>
          <div id="filter-toggles" class="flex col">
            <label class="center">
              <input
                form="filterControl"
                type="checkbox"
                name="allowRepeatDexNum"
                hidden
              />
              <span class="toggle-label | pill-shape highlight-border">
                Repeat Species
              </span>
            </label>
            <label class="center">
              <input
                form="filterControl"
                type="checkbox"
                name="hideNoStart"
                hidden
                checked
              />
              <span class="toggle-label | pill-shape highlight-border">
                Start Forms Only
              </span>
            </label>
            <label class="center">
              <input
                form="filterControl"
                type="checkbox"
                name="allowNFE"
                hidden
                checked
              />
              <span class="toggle-label | pill-shape highlight-border">
                Include NFE
              </span>
            </label>
          </div>
        </div>
        <!-- Sort Function -->
        <div
          class="fn-control | control-block | flex center-items center-content small-gap"
        >
          <div id="sort-metric-mount"></div>
          <div class="fn-minmax | flex col center-items small-gap">
            <label>
              <input
                form="colorSortForm"
                type="radio"
                name="sortOrder"
                value="min"
                checked
              />
              <span class="toggle-label | pill-shape highlight-border">Min</span>
            </label>
            <label>
              <input form="colorSortForm" type="radio" name="sortOrder" value="max" />
              <span class="toggle-label | pill-shape highlight-border">Max</span>
            </label>
          </div>
          <div class="fn-body | math-font flex center-content center-items">
            <label>
              <input
                form="colorCalculateForm"
                type="checkbox"
                name="sortUseWholeImage"
                checked
              />
              <span class="toggle-label | pill-shape highlight-border">
                <output form="colorCalculateForm" name="sortMetricSymbolP"></output>(I)
              </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="sortUseClusterProportion"
                />
                <span class="toggle-label | pill-shape highlight-border">%B</span>
              </label>
              <label>
                <input
                  form="colorCalculateForm"
                  type="checkbox"
                  name="sortUseInvClusterProportion"
                  checked
                />
                <span class="toggle-label | pill-shape highlight-border">%B</span>
              </label>
            </div>
          </div>
        </div>
        <!-- Cluster Function -->
        <div
          id="cls-fn"
          class="fn-control | control-block | flex center-items center-content small-gap"
        >
          <div id="cls-metric-mount"></div>
          <div class="fn-minmax | flex col center-items small-gap">
            <label>
              <input
                form="colorCalculateForm"
                type="radio"
                name="clusterSortOrder"
                value="min"
              />
              <span class="toggle-label | pill-shape highlight-border">Min</span>
            </label>
            <label>
              <input
                form="colorCalculateForm"
                type="radio"
                name="clusterSortOrder"
                value="max"
                checked
              />
              <span class="toggle-label | pill-shape highlight-border">Max</span>
            </label>
          </div>
          <div class="fn-body | math-font flex center-content center-items">
            <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"
                  checked
                />
                <span class="toggle-label | pill-shape highlight-border">N(K)</span>
              </label>
              <label>
                <input
                  form="colorCalculateForm"
                  type="checkbox"
                  name="clusterUseInvClusterSize"
                />
                <span class="toggle-label | pill-shape highlight-border">N(K)</span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div id="color-results" class="flex wrap"></div>
      <hr />
      <div id="name-search-controls" class="flex wrap center-items small-gap">
        <input
          id="nameSearchInput"
          form="nameSearchForm"
          class="pill-shape highlight-border"
          type="text"
          autocomplete="off"
          name="input"
          aria-label="Search By Name"
          placeholder="Search By Name"
        />
        <button
          title="Randomize"
          class="icon-button | material-symbols-outlined"
          form="nameSearchForm"
          type="button"
          name="random"
        >
          shuffle
        </button>
        <button
          title="Clear"
          class="icon-button | material-symbols-outlined"
          form="nameSearchForm"
          type="button"
          name="clear"
        >
          clear
        </button>
        <button form="nameSearchForm" type="button" name="all">Show All (slow)</button>
      </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>