after a bunch of circulatory discussions with AI, I finally came up with the start of a solution
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gimkit Spine Player (CodePen)</title>
<style>
body { margin: 0; }
#spine-player-container { width: 600px; height: 400px; border: 1px solid #ccc; }
</style>
<link href="https://unpkg.com/@esotericsoftware/spine-player@4.1/dist/spine-player.css" rel="stylesheet">
</head>
<body>
<div>
<label for="filenameInput">Enter Filename:</label>
<input type="text" id="filenameInput" value="snowman">
<button id="loadButton">Load Animation</button>
</div>
<div id="spine-player-container"></div>
<script src="https://unpkg.com/@esotericsoftware/spine-player@4.1/dist/iife/spine-player.js"></script>
<script src="https://cdn.jsdelivr.net/npm/compress-json@3/bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const filenameInput = document.getElementById('filenameInput');
const loadButton = document.getElementById('loadButton');
const GIMKIT_ASSET_BASE_URL = 'https://www.gimkit.com/assets/map/characters/spine/';
const CORS_PROXY_URL = 'https://api.allorigins.win/raw?url=';
loadButton.addEventListener('click', () => {
const filename = filenameInput.value.trim();
if (filename) {
encodeAssets(filename);
} else {
console.warn("Please enter a filename.");
}
});
async function encodeAssets(filename) {
const jsonUrl = GIMKIT_ASSET_BASE_URL + filename + '.json';
const proxiedJsonUrl = CORS_PROXY_URL + encodeURIComponent(jsonUrl);
const atlasUrl = GIMKIT_ASSET_BASE_URL + filename + '.atlas';
const proxiedAtlasUrl = CORS_PROXY_URL + encodeURIComponent(atlasUrl);
const pngUrl = GIMKIT_ASSET_BASE_URL + filename + '.png';
const proxiedPngUrl = CORS_PROXY_URL + encodeURIComponent(pngUrl);
try {
// Fetch and Base64 encode JSON
const jsonResponse = await fetch(proxiedJsonUrl);
if (!jsonResponse.ok) throw new Error(`Failed to fetch JSON: ${jsonResponse.status}`);
const compressedData = await jsonResponse.json();
const spineJsonData = compressJSON.decompress(compressedData);
const jsonString = JSON.stringify(spineJsonData);
const base64Json = btoa(jsonString);
console.log("Base64 JSON:", base64Json);
// Fetch and Base64 encode Atlas
const atlasResponse = await fetch(proxiedAtlasUrl);
if (!atlasResponse.ok) throw new Error(`Failed to fetch atlas: ${atlasResponse.status}`);
const atlasText = await atlasResponse.text();
const base64Atlas = btoa(atlasText);
console.log("Base64 Atlas:", base64Atlas);
// Fetch and Base64 encode PNG
const pngResponse = await fetch(proxiedPngUrl);
if (!pngResponse.ok) console.warn(`Failed to fetch PNG: ${pngResponse.status}`);
const pngBlob = await pngResponse.blob();
const reader = new FileReader();
const pngBase64 = await new Promise((resolve, reject) => {
reader.onloadend = () => {
const base64String = reader.result.split(',')[1]; // Extract the Base64 part
resolve(base64String);
};
reader.onerror = reject;
reader.readAsDataURL(pngBlob);
});
console.log("Base64 PNG:", pngBase64);
} catch (error) {
console.error("Error encoding assets:", error);
}
}
// Encode default on start
encodeAssets(filenameInput.value.trim());
});
</script>
</body>
</html>
I'm getting the JSON file decompressed, then base64 encoded. I can't for the life of me figure out how that works tho
