A!leys Galerie

extends Node3D

class_name FractalDreamweaver

@export var dialogue_textures: Array[Texture3D] = []
@export var dialogue_themes: Array[String] = []
@export var emotion_weights: Dictionary = {
    "neutral": 0.5,
    "joy": 0.2,
    "sadness": 0.2,
    "anger": 0.1,
    "fear": 0.1
}

@onready var fractal_mesh: MeshInstance3D = $FractalMesh
@onready var fractal_material: ShaderMaterial3D = $FractalMaterial.shader_material
@onready var dialogue_label: Label = $DialogueLabel
@onready var input_field: LineEdit = $InputField
@onready var emotion_chart: CanvasLayer = $EmotionChart

var current_dialogue: String = ""
var current_emotion: String = "neutral"
var dialogue_history: Array[String] = []
var emotion_history: Array[float] = []
var fractal_seed: int = 0
var last_input_time: float = 0.0

func _ready():
    if dialogue_themes.size() != dialogue_textures.size():
        dialogue_themes.resize(dialogue_textures.size())
        dialogue_themes.fill("neutral", dialogue_textures.size())
    setup_fractal_material()
    generate_initial_dialogue()
    emotion_chart.visible = false
    input_field.text_entered.connect(_on_input_field_text_entered)

func _process(delta):
    update_emotion_chart()

func setup_fractal_material():
    var noise_params = fractal_material.shader.get_parameter("noise_params")
    if noise_params:
        noise_params[0] = fractal_seed
    var dialogue_theme = dialogue_themes[0]
    var color_param = fractal_material.shader.get_parameter("dialogue_theme")
    if color_param:
        color_param[0] = dialogue_theme

func generate_dialogue(emotion: String) -> String:
    var theme = dialogue_themes[current_dialogue_index(emotion)]
    var texture = dialogue_textures[current_dialogue_index(emotion)]
    var base_dialogue = random_dialogue_fragment(theme)
    var result = base_dialogue

    if texture:
        fractal_material.shader.set_parameter("dialogue_texture", texture)

    return result

func current_dialogue_index(emotion: String) -> int:
    var keys = dialogue_themes.keys()
    var theme = emotion_weights.lookup(emotion, dialogue_themes[0])
    var max_weight = 0.0
    var best_index = 0

    for i in range(dialogue_textures.size()):
        var current_weight = emotion_weights.lookup(dialogue_themes[i], 0.0)
        if current_weight > max_weight and theme == dialogue_themes[i]:
            max_weight = current_weight
            best_index = i

    return best_index

func random_dialogue_fragment(theme: String) -> String:
    var fragments = {
        "neutral": [
            "The path unfolds as you walk...",
            "A quiet moment, suspended in time...",
            "Echoes of thought, resonating...",
            "The canvas of your mind, vast and empty...",
        ],
        "joy": [
            "Colors burst like fireworks in the night sky!",
            "A symphony of laughter, dancing on the wind!",
            "Your soul sings, vibrant and free!",
            "The world sparkles with your joy, like stardust on water!",
        ],
        "sadness": [
            "Gray mist creeps into the corners of your vision...",
            "A lone tear, falling like a silent river...",
            "The weight of silence, heavy on your heart...",
            "The world fades into a soft, melancholic haze...",
        ],
        "anger": [
            "Red embers, burning with intensity!",
            "Your pulse, a drumbeat of defiance!",
            "The air crackles with your fury, sharp and bright!",
            "A storm brews within, a tempest of emotion!",
        ],
        "fear": [
            "Shadows stretch, long and cold, into your soul...",
            "A chill, creeping up your spine, unyielding...",
            "The world narrows, a tight, dark tunnel...",
            "Your breath, shallow and quick, like a hunted beast...",
        ]
    }

    var valid_fragments = fragments[theme] if fragments.has(theme) else fragments["neutral"]
    return valid_fragments[randi() % valid_fragments.size()]

func generate_initial_dialogue():
    current_dialogue = generate_dialogue(current_emotion)
    dialogue_label.text = current_dialogue
    fractal_seed = randi()
    setup_fractal_material()

func _on_input_field_text_entered(text: String):
    if text.strip() == "":
        return

    last_input_time = Time.get_ticks_msec() / 1000.0
    dialogue_history.append(text)
    analyse_emotion(text)
    generate_dialogue_response()

    input_field.text = ""
    emotion_chart.visible = false

func analyse_emotion(text: String) -> void:
    var words = text.split()
    var emotion_scores = {
        "joy": 0.0,
        "sadness": 0.0,
        "anger": 0.0,
        "fear": 0.0
    }

    var joy_keywords = ["joy", "happy", "laugh", "bright", "color", "celebrate"]
    var sadness_keywords = ["sad", "tear", "melancholy", "gray", "lonely"]
    var anger_keywords = ["anger", "rage", "fury", "burn", "defiance"]
    var fear_keywords = ["fear", "terror", "chill", "shadow", "tunnel"]

    for word in words:
        word = word.strip().lower()

        if joy_keywords.has(word):
            emotion_scores["joy"] += 1.0
        elif sadness_keywords.has(word):
            emotion_scores["sadness"] += 1.0
        elif anger_keywords.has(word):
            emotion_scores["anger"] += 1.0
        elif fear_keywords.has(word):
            emotion_scores["fear"] += 1.0

    var max_score = 0.0
    current_emotion = "neutral"

    for key in emotion_scores:
        if emotion_scores[key] > max_score:
            max_score = emotion_scores[key]
            current_emotion = key

    emotion_history.append(max_score)
    emotion_chart.visible = true

func generate_dialogue_response():
    current_dialogue = generate_dialogue(current_emotion)
    dialogue_label.text = current_dialogue
    fractal_seed += 1
    setup_fractal_material()

func update_emotion_chart():
    var emotion_colors = {
        "neutral": Color(0.5, 0.5, 0.5),
        "joy": Color(1, 1, 0),
        "sadness": Color(0.5, 0.5, 1),
        "anger": Color(1, 0, 0),
        "fear": Color(0, 0, 0.5)
    }

    var max_value = emotion_history.size_of()
    if max_value == 0:
        return

    for i in range(emotion_history.size()):
        var emotion = current_emotion if i == emotion_history.size() - 1 else emotion_history[i]
        var value = emotion_history[i] / max_value
        var rect = emotion_chart.get_child(i) as Rect
        if rect:
            var color = emotion_colors[emotion] if emotion_colors.has(emotion) else Color(0.7, 0.7, 0.7)
            rect.modulate = color
            rect.rect_size = Vector2(value * 500, 20)
            rect.position = Vector2(i * 500, 20)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Morphing Nature Icons</title>
    <style>
        body {
            background: #f8f8f8;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }

        .container {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 800px;
            padding: 20px;
        }

        .icon-wrapper {
            width: 120px;
            height: 120px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .icon-wrapper:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .icon-wrapper:hover svg {
            filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.3));
        }

        .label {
            margin-top: 10px;
            font-size: 14px;
            font-weight: 500;
            color: #333;
            text-transform: capitalize;
        }

        .controls {
            margin-top: 30px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background: #4a6fa5;
            color: white;
            font-size: 14px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        button:hover {
            background: #3a5a8f;
        }

        button.active {
            background: #8e44ad;
        }

        .speed-control {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        input[type="range"] {
            width: 150px;
        }

        h1 {
            color: #4a6fa5;
            margin-bottom: 30px;
            font-size: 2.2em;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <h1>Morphing Nature Icons</h1>
    <div class="container" id="container">
        <!-- Icons will be added dynamically -->
    </div>
    <div class="controls">
        <div class="speed-control">
            <label for="speed">Speed:</label>
            <input type="range" id="speed" min="0" max="10" value="3" step="1">
            <span id="speed-value">3</span>
        </div>
        <button id="randomize">Randomize</button>
        <button id="pause">Pause</button>
        <button id="reset">Reset</button>
    </div>

    <script>
        // Icon data with SVG paths and labels
        const icons = [
            {
                label: 'leaf',
                paths: [
                    'M 50,20 L 30,50 L 70,50 Z',
                    'M 50,20 L 30,40 L 70,40 Z',
                    'M 50,20 L 20,50 L 80,50 Z',
                    'M 50,20 L 20,40 L 80,40 Z',
                    'M 50,20 L 30,60 L 70,60 Z',
                    'M 50,20 L 20,30 L 80,30 Z'
                ]
            },
            {
                label: 'flora',
                paths: [
                    'M 50,30 C 70,30 70,10 50,10 C 30,10 30,30 50,30 Z M 50,50 C 30,50 30,70 50,70 C 70,70 70,50 50,50 Z',
                    'M 50,30 C 70,30 70,20 50,20 C 30,20 30,30 50,30 Z M 50,50 C 30,50 30,60 50,60 C 70,60 70,50 50,50 Z',
                    'M 50,30 C 70,30 70,40 50,40 C 30,40 30,30 50,30 Z M 50,50 C 30,50 30,40 50,40 C 70,40 70,50 50,50 Z'
                ]
            },
            {
                label: 'insect',
                paths: [
                    'M 50,20 Q 70,50 50,80 Q 30,50 50,20 Z',
                    'M 50,20 Q 60,40 50,60 Q 40,40 50,20 Z',
                    'M 50,20 Q 70,30 50,40 Q 30,30 50,20 Z',
                    'M 50,20 Q 65,35 50,50 Q 35,35 50,20 Z'
                ]
            },
            {
                label: 'sun',
                paths: [
                    'M 50,20 L 50,80',
                    'M 20,50 L 80,50',
                    'M 35,35 L 65,65',
                    'M 65,35 L 35,65'
                ],
                circle: true
            },
            {
                label: 'cloud',
                paths: [
                    'M 30,30 Q 50,10 70,30 Q 90,50 70,70 Q 50,90 30,70 Q 10,50 30,30',
                    'M 40,40 Q 60,20 80,40 Q 100,60 80,80 Q 60,100 40,80 Q 20,60 40,40'
                ]
            },
            {
                label: 'water',
                paths: [
                    'M 20,50 Q 50,20 80,50 Q 70,70 30,70 Q 40,90 60,90 Q 50,80 50,50',
                    'M 30,60 Q 60,30 90,60 Q 80,80 20,80 Q 30,95 70,95 Q 60,85 60,60'
                ]
            }
        ];

        // DOM elements
        const container = document.getElementById('container');
        const speedSlider = document.getElementById('speed');
        const speedValue = document.getElementById('speed-value');
        const randomizeBtn = document.getElementById('randomize');
        const pauseBtn = document.getElementById('pause');
        const resetBtn = document.getElementById('reset');

        // Animation state
        let animations = [];
        let isPaused = false;
        let speed = 3;

        // Create icons
        function createIcons() {
            container.innerHTML = '';

            icons.forEach(icon => {
                const wrapper = document.createElement('div');
                wrapper.className = 'icon-wrapper';
                wrapper.innerHTML = `
                    <svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                        <g id="morph-group">
                            <!-- Paths will be added here -->
                        </g>
                        ${icon.circle ? '<circle cx="50" cy="50" r="40" fill="none" stroke="#4a6fa5" stroke-width="3" id="sun-circle"/>' : ''}
                    </svg>
                    <div class="label">${icon.label}</div>
                `;

                const morphGroup = wrapper.querySelector('#morph-group');
                icon.paths.forEach(path => {
                    const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                    pathElement.setAttribute('d', path);
                    pathElement.setAttribute('fill', getRandomColor());
                    morphGroup.appendChild(pathElement);
                });

                container.appendChild(wrapper);

                // Store reference to the morph group for animation
                const animation = {
                    paths: Array.from(morphGroup.children),
                    originalPaths: Array.from(morphGroup.children).map(path => path.cloneNode(true)),
                    currentIndex: 0,
                    isAnimating: false,
                    pauseId: null
                };

                animations.push(animation);
            });
        }

        // Get a random color
        function getRandomColor() {
            const colors = ['#4a6fa5', '#8e44ad', '#4a6fa5', '#8e44ad', '#6a4c93', '#3a5a8f', '#4a6fa5'];
            return colors[Math.floor(Math.random() * colors.length)];
        }

        // Morph one path to another
        function morphPath(path, targetPath, duration, callback) {
            const pathLength = path.getTotalLength();
            const targetPathLength = targetPath.getTotalLength();

            if (pathLength === 0 || targetPathLength === 0) {
                if (callback) callback();
                return;
            }

            let distance = 0;
            let startTime = null;

            function step(timestamp) {
                if (!startTime) startTime = timestamp;
                const elapsed = timestamp - startTime;
                const progress = Math.min(elapsed / duration, 1);

                // Update path data
                const startPoints = path.getPathData().split(' ').filter(Boolean).map(Number);
                const endPoints = targetPath.getPathData().split(' ').filter(Boolean).map(Number);

                // For simplicity, we'll just animate the first few commands (this is a simplified approach)
                // A more robust solution would use a proper path interpolation library
                const newPoints = [];
                for (let i = 0; i < startPoints.length && i < endPoints.length; i++) {
                    newPoints.push(
                        startPoints[i] + (endPoints[i] - startPoints[i]) * progress
                    );
                }

                path.setAttribute('d', newPoints.join(' '));

                if (progress < 1) {
                    path.pauseId = requestAnimationFrame(step);
                } else {
                    path.setAttribute('d', targetPath.getAttribute('d'));
                    if (callback) callback();
                }
            }

            path.pauseId = requestAnimationFrame(step);
        }

        // Animate all icons
        function animateAll(iconIndex = 0, speedValue = 3) {
            if (isPaused || iconIndex >= animations.length) return;

            const animation = animations[iconIndex];
            if (animation.isAnimating) {
                // If already animating, just move to next index
                animateAll((iconIndex + 1) % animations.length, speedValue);
                return;
            }

            animation.isAnimating = true;
            const paths = animation.paths;
            const nextIndex = (animation.currentIndex + 1) % paths.length;

            // Clear any pending animation
            if (animation.pauseId) {
                cancelAnimationFrame(animation.pauseId);
                animation.pauseId = null;
            }

            // Store original paths if this is the first animation
            if (animation.originalPaths.length === 0) {
                animation.originalPaths = paths.map(path => path.cloneNode(true));
            }

            // Morph to next path
            const duration = 1000 / speedValue;
            morphPath(paths[animation.currentIndex], paths[nextIndex], duration, () => {
                // Swap paths (simplified approach)
                const tempPath = paths[animation.currentIndex].cloneNode(true);
                paths[animation.currentIndex].setAttribute('d', paths[nextIndex].getAttribute('d'));
                paths[nextIndex].setAttribute('d', tempPath.getAttribute('d'));

                animation.currentIndex = nextIndex;
                animation.isAnimating = false;
                animateAll((iconIndex + 1) % animations.length, speedValue);
            });
        }

        // Randomize all animations
        function randomizeAnimations() {
            animations.forEach(animation => {
                if (animation.pauseId) {
                    cancelAnimationFrame(animation.pauseId);
                    animation.pauseId = null;
                }

                // Reset to original paths
                animation.paths.forEach((path, index) => {
                    path.setAttribute('d', animation.originalPaths[index].getAttribute('d'));
                });
                animation.currentIndex = 0;
                animation.isAnimating = false;
            });

            // Start new random animations
            animateAll(0, speed);
        }

        // Pause all animations
        function pauseAll() {
            isPaused = true;
            animations.forEach(animation => {
                if (animation.pauseId) {
                    cancelAnimationFrame(animation.pauseId);
                    animation.pauseId = null;
                }
            });
            pauseBtn.textContent = 'Play';
        }

        // Reset all animations
        function resetAll() {
            isPaused = false;
            randomizeAnimations();
            pauseBtn.textContent = 'Pause';
        }

        // Event listeners
        speedSlider.addEventListener('input', () => {
            speed = parseInt(speedSlider.value);
            speedValue.textContent = speed;
        });

        randomizeBtn.addEventListener('click', randomizeAnimations);
        pauseBtn.addEventListener('click', pauseAll);
        resetBtn.addEventListener('click', resetAll);

        // Initialize
        createIcons();
        animateAll(0, speed);
    </script>
</body>
</html>