JSFiddle - React, Tailwind, and code Playground

by arian_

HTML

<!DOCTYPE html>
<html>

<body>

<h1>CFLiPackedMiiDataCore Padding Tool</h1>

<hr>

<!-- Form 1: Encode Padding Data into Core Data -->
<h2>1. Encode Padding Data into Core Data</h2>
<form id="encodePaddingForm">
    <label for="encodeCoreData">Core Data Hex (72 bytes - 144 hex chars):</label><br>
    <textarea id="encodeCoreData" name="encodeCoreData" rows="4" cols="80" required></textarea><br><br>

    <label for="encodePaddingHex">Padding Data Hex (6 bytes - 12 hex chars):</label><br>
    <input type="text" id="encodePaddingHex" name="encodePaddingHex" maxlength="12" required><br><br>

    <input type="submit" value="Encode Padding into Core Data">
</form>

<h3>Encoded Core Data Hex:</h3>
<pre id="encodedCoreDataHexOutput"></pre>

<hr>

<!-- Form 2: Decode Padding Data from Core Data -->
<h2>2. Decode Padding Data from Core Data</h2>
<form id="decodePaddingForm">
    <label for="decodeCoreData">Core Data Hex (72 bytes - 144 hex chars):</label><br>
    <textarea id="decodeCoreData" name="decodeCoreData" rows="4" cols="80" required></textarea><br><br>

    <input type="submit" value="Decode Padding from Core Data">
</form>

<h3>Extracted Padding Data Hex:</h3>
<pre id="extractedPaddingHexOutput"></pre>

<hr>

<!-- Form 3: Pack Common Colors into Core Data -->
<h2>3. Pack Common Colors into Core Data</h2>
<form id="packCommonColorsForm">
    <label for="packCoreData">Core Data Hex (72 bytes - 144 hex chars):</label><br>
    <textarea id="packCoreData" name="packCoreData" rows="4" cols="80" required></textarea><br><br>

    <!-- Common Colors Inputs -->
    <h3>Common Colors (Ver4):</h3>
    <label for="packFaceColor">Face Color (0-9):</label>
    <input type="number" id="packFaceColor" name="packFaceColor" min="0" max="9" required><br><br>

    <label for="packHairColor">Hair Color (0-99):</label>
    <input type="number" id="packHairColor" name="packHairColor" min="0" max="99" required><br><br>

    <label for="packEyeColor">Eye Color (0-99):</label>
    <input...

JavaScript

// === Mapping Tables ===

// Mapping tables from Ver4 to Ver3
 const ToVer3HairColorTable = [
    0, 1, 2, 3, 4, 5, 6, 7, 0, 4, 3, 5, 4, 4, 6, 2, 0, 6, 4, 3,
    2, 2, 7, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,
    2, 4, 4, 4, 4, 4, 4, 4, 0, 0, 4, 4, 4, 4, 4, 4, 0, 0, 0, 4,
    4, 4, 4, 4, 4, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 5, 7, 5, 7, 7,
    7, 7, 7, 6, 7, 7, 7, 7, 7, 3, 7, 7, 7, 7, 7, 0, 4, 4, 4, 4
];

const ToVer3EyeColorTable = [
    0, 2, 2, 2, 1, 3, 2, 3, 0, 1, 2, 3, 4, 5, 2, 2, 4, 2, 1, 2,
    2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0,
    4, 4, 4, 4, 4, 4, 4, 1, 0, 4, 4, 4, 4, 4, 4, 4, 0, 5, 5, 5,
    5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 3, 3, 3, 3, 3,
    3, 3, 3, 2, 2, 3, 3, 3, 3, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1
];

const ToVer3MouthColorTable = [
    4, 4, 4, 4, 4, 4, 4, 3, 4, 4, 4, 4, 4, 4, 4, 1, 4, 4, 4, 0,
    1, 2, 3, 4, 4, 2, 3, 3, 4, 4, 4, 4, 1, 4, 4, 2, 3, 3, 4, 4,
    4, 4, 4, 4, 4, 3, 3, 3, 4, 4, 4, 3, 3, 3, 3, 3, 4, 4, 4, 4,
    4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 3, 3, 3,
    3, 3, 3, 4, 3, 3, 3, 3, 3, 4, 0, 3, 3, 3, 3, 4, 3, 3, 3, 3
];

const ToVer3GlassColorTable = [
    0, 1, 1, 1, 5, 1, 1, 4, 0, 5, 1, 1, 3, 5, 1, 2, 3, 4, 5, 4,
    2, 2, 4, 4, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3,
    3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 0, 0, 0, 5,
    5, 5, 5, 5, 5, 0, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5,
    5, 5, 5, 1, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5
];

const ToVer3FacelineColorTable = [0, 1, 2, 3, 4, 5, 0, 1, 5, 5];

const ToVer3GlassTypeTable = [0, 1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 1, 3, 7, 7, 6, 7, 8, 7, 7];

// === Reverse Mapping Tables ===

// Helper function to create reverse mapping tables
function createReverseMapping(table) {
    const reverseMap = {};
    table.forEach((ver3Value, ver4Index) => {
        if (!reverseMap[ver3Value]) {
            reverseMap[ver3Value] = [];
        }
        reverseMap[ver3Value].push(ver4Index);
    });
    return...