145 lines
4.1 KiB
HTML
145 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Game Object Formatter</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
.input-area {
|
|
width: 100%;
|
|
margin: 20px 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
textarea {
|
|
width: 100%;
|
|
height: 120px;
|
|
font-family: monospace;
|
|
font-size: 16px;
|
|
margin-bottom: 10px;
|
|
}
|
|
button {
|
|
padding: 8px 20px;
|
|
font-size: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.games-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 24px;
|
|
}
|
|
.game {
|
|
opacity: 0;
|
|
transform: translateY(-50px);
|
|
transition: opacity 0.5s, transform 0.5s;
|
|
margin: 10px;
|
|
border: 1px solid #eee;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
width: 175px;
|
|
background: #faf9f7;
|
|
box-shadow: 0 2px 7px #0001;
|
|
}
|
|
.game img {
|
|
width: 150px;
|
|
height: 150px;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
.game-title {
|
|
margin-top: 10px;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Game Object to HTML Formatter</h2>
|
|
<div class="input-area">
|
|
<label for="objInput">Paste your JS object(s) or JSON here — array or single object:</label>
|
|
<textarea id="objInput" placeholder='Try this:
|
|
[
|
|
{
|
|
"name": "Tic-Tac-Toe",
|
|
"image": "assets/tic-tac-toe.png",
|
|
"link": "tic-tac-toe/index.html"
|
|
},
|
|
{
|
|
"name": "Chess",
|
|
"image": "assets/chess.png",
|
|
"link": "chess/index.html"
|
|
}
|
|
]'></textarea>
|
|
<button onclick="formatGames()">Format!</button>
|
|
</div>
|
|
<div class="games-container" id="gamesContainer"></div>
|
|
|
|
<script>
|
|
function formatTitle(str) {
|
|
return str.replace(/-/g, " ").replace(/\b\w/g, c => c.toUpperCase());
|
|
}
|
|
|
|
function parseUserInput(txt) {
|
|
// Try parse as JSON
|
|
try {
|
|
return JSON.parse(txt);
|
|
} catch {}
|
|
// Try parse as JS object(s)
|
|
try {
|
|
// add quotes around keys, make valid JSON
|
|
let fixedTxt = txt.replace(/([{,]\s*)(\w+)\s*:/g, '$1"$2":');
|
|
return JSON.parse(fixedTxt);
|
|
} catch {
|
|
alert("Could not parse input as JSON or JS object array.");
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function formatGames() {
|
|
const raw = document.getElementById('objInput').value.trim();
|
|
const gameData = parseUserInput(raw);
|
|
const games = Array.isArray(gameData) ? gameData : [gameData];
|
|
|
|
const container = document.getElementById('gamesContainer');
|
|
container.innerHTML = ''; // clear old
|
|
|
|
const basePath = "/WebGames-master/WebGames-master/";
|
|
let idx = 0;
|
|
for (const game of games) {
|
|
if (!game || !game.name || !game.image || !game.link) continue;
|
|
const div = document.createElement('div');
|
|
div.className = "game";
|
|
div.style.opacity = "0";
|
|
div.style.transform = "translateY(-50px)";
|
|
|
|
const anchor = document.createElement('a');
|
|
anchor.href = basePath + game.link;
|
|
|
|
const img = document.createElement('img');
|
|
img.src = "./" + game.image;
|
|
img.alt = game.name.toLowerCase();
|
|
|
|
const titleDiv = document.createElement('div');
|
|
titleDiv.className = "game-title";
|
|
titleDiv.textContent = formatTitle(game.name);
|
|
|
|
anchor.appendChild(img);
|
|
anchor.appendChild(titleDiv);
|
|
div.appendChild(anchor);
|
|
|
|
container.appendChild(div);
|
|
|
|
// Animate appearance
|
|
setTimeout(() => {
|
|
div.style.opacity = "1";
|
|
div.style.transform = "translateY(0)";
|
|
}, 40 * idx++);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |