JSFiddle - React, Tailwind, and code Playground

by arian_

HTML

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>Ver3 to Common Color Reverse Mapping Toy</h1>
    <b>note: i made this to visualize reordering the switch to wiiu/3ds conversion tables and so the tables in the JS are the final modified versions</b>
    <div style="font-size: 10px;">but why did I reorder the values? the maximum "grouped index" values for most part types barely exceeded 31, so now with these modifications the grouped indices can use 5 bits instead of 6, giving me additional space for a less jank checksum/detection/signature etc</div>
<div>note 2025-01-02 (wow): has been adjusted to give hair/eye/glass one more free index to represent placeholder for no value (aka use original ver3 color present in data. or convert from that one lol.)</div>
    </div>
    <div id="details-container"></div>
    <h2>Common Colors Mapping:</h2>
    <div id="common-colors">
    </div>
    <div id="mapping-count"></div>

    <script>
    </script>
</body>
</html>

CSS

body {
  margin: 20px;
}
h3 {
  cursor: pointer;
  display: inline;
}
.color-rect {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  color: white;
  border: 1px solid #000;
}
.color-square {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin: 5px;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  color: white;
  border: 1px solid #000;
}
#details-container {
  margin-top: 20px;
}
.highlight {
  outline: 4px solid yellow;
  box-shadow: 0 0 10px rgba(255, 255, 0, 0.8);
}

#mapping-count {
  font-weight: bold;
  margin-top: 10px;
}

JavaScript

// Example Data (replace with the full data you have)
const haircolorTable = [
  { id: 0, r: 30, g: 26, b: 23 },
  { id: 1, r: 64, g: 31, b: 16 },
  { id: 2, r: 92, g: 23, b: 9 },
  { id: 3, r: 123, g: 57, b: 19 },
  { id: 4, r: 120, g: 120, b: 128 },
  { id: 5, r: 78, g: 61, b: 16 },
  { id: 6, r: 135, g: 87, b: 23 },
  { id: 7, r: 208, g: 159, b: 73 },
]

const eyecolorTable = [
  { id: 0, r: 0, g: 0, b: 0 },
  { id: 1, r: 108, g: 111, b: 111 },
  { id: 2, r: 102, g: 59, b: 44 },
  { id: 3, r: 95, g: 94, b: 47 },
  { id: 4, r: 70, g: 83, b: 168 },
  { id: 5, r: 56, g: 111, b: 87 },
]

const glasscolorTable = [
  { id: 0, r: 23, g: 23, b: 23 },
  { id: 1, r: 95, g: 55, b: 15 },
  { id: 2, r: 167, g: 15, b: 7 },
  { id: 3, r: 31, g: 47, b: 103 },
  { id: 4, r: 167, g: 95, b: 0 },
  { id: 5, r: 119, g: 111, b: 103 },
]

const mouthcolorTable = [
  { id: 0, r: 215, g: 82, b: 7 },
  { id: 1, r: 239, g: 11, b: 7 },
  { id: 2, r: 245, g: 71, b: 71 },
  { id: 3, r: 239, g: 154, b: 116 },
  { id: 4, r: 139, g: 80, b: 64 },
]

const commonColors = [
  {
    id: 2,
    r: 92,
    g: 24,
    b: 10,
  },
  {
    id: 24,
    r: 132,
    g: 38,
    b: 38,
  },
  {
    id: 10,
    r: 102,
    g: 60,
    b: 44,
  },
  {
    id: 23,
    r: 140,
    g: 80,
    b: 64,
  },
  {
    id: 15,
    r: 168,
    g: 16,
    b: 8,
  },
  {
    id: 20,
    r: 240,
    g: 12,
    b: 8,
  },
  {
    id: 21,
    r: 245,
    g: 72,
    b: 72,
  },
  {
    id: 25,
    r: 255,
    g: 115,
    b: 102,
  },
  {
    id: 26,
    r: 255,
    g: 166,
    b: 166,
  },
  {
    id: 27,
    r: 255,
    g: 192,
    b: 186,
  },
  {
    id: 28,
    r: 115,
    g: 46,
    b: 59,
  },
  {
    id: 29,
    r: 153,
    g: 31,
    b: 61,
  },
  {
    id: 30,
    r: 138,
    g: 23,
    b: 62,
  },
  {
    id: 31,
    r: 181,
    g: 62,
    b: 66,
  },
  {
    id: 32,
    r: 199,
    g: 30,
 ...