JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Image-Based Adventure</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .image-container {
            transition: background 0.3s ease;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-purple-900 to-blue-900 h-screen">
    <div class="container mx-auto h-full flex flex-col">
        <!-- Image Container -->
        <div id="image-container" class="image-container flex-1 w-full relative">
            <div class="absolute inset-0 bg-black bg-opacity-60"></div>
        </div>

        <!-- Story Interface -->
        <div class="relative z-10 p-6 bg-black bg-opacity-70 text-white rounded-t-2xl shadow-2xl">
            <div id="story-text" class="text-xl mb-6 font-serif italic"></div>
            <div id="choices" class="space-y-4"></div>
        </div>
    </div>

<script>
// Sample JSON Data Structure
const storyNodes = {
    start: {
        story_text: "You stand before an ancient portal...",
        image: {
            url: "https://example.com/portal.jpg",
            resize_mode: "stretch"
        },
        choices: [
            {text: "Enter the portal", target: "node_1"},
            {text: "Walk away", random_group: "bad_endings"}
        ]
    },
    // Add other nodes and 20 bad endings here
};

const randomGroups = {
    bad_endings: ["bad_end_1", "bad_end_2", "bad_end_3", /* ... up to 20 */]
};

// Image Resizing Functions
function applyResizeMode(mode) {
    const container = document.getElementById('image-container');
    switch(mode.toLowerCase()) {
        case 'stretch':
            container.style.backgroundSize = '100% 100%';
            container.style.backgroundRepeat = 'no-repeat';
            break;
        case 'fill':
            container.style.backgroundSize = 'cover';
            container.style.backgroundRepeat = 'no-repeat';
            break;
        case 'fit':
            container.style.backgroundSize = 'contain';
           ...