bevy_webgate 0.2.1

A web server integration for the Bevy game engine that allows you to easily append a webserver to Bevy.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

// JavaScript for Bevy WebGate Demo

async function loadData() {
    const button = document.querySelector('.cta-button');
    const dataDisplay = document.getElementById('data-display');
    
    button.disabled = true;
    button.textContent = 'Loading...';
    dataDisplay.className = 'api-response';
    dataDisplay.innerHTML = '<p>Fetching data from the API...</p>';
    
    try {
        let response = await fetch('/api/info');
        
        if (!response.ok) {
            response = await fetch('/static/data.json');
        }
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        
        dataDisplay.innerHTML = `

            <div>

                <h4 style="color: var(--success); margin-bottom: 1rem;">✅ API Response Loaded Successfully!</h4>

                <pre>${JSON.stringify(data, null, 2)}</pre>

            </div>

        `;
        dataDisplay.classList.add('loaded');
        
        button.textContent = 'Data Loaded Successfully!';
        setTimeout(() => {
            button.textContent = 'Reload Data';
            button.disabled = false;
        }, 2000);
        
    } catch (error) {
        dataDisplay.innerHTML = `

            <div>

                <h4 style="color: var(--error); margin-bottom: 1rem;">❌ Error Loading Data</h4>

                <p style="color: var(--text-secondary);">Error: ${error.message}</p>

                <p style="color: var(--text-muted); font-size: 0.875rem; margin-top: 0.5rem;">

                    Make sure the server is running and try again.

                </p>

            </div>

        `;
        dataDisplay.classList.add('error');
        button.textContent = 'Try Again';
        button.disabled = false;
    }
}

// Add some interactivity on page load
document.addEventListener('DOMContentLoaded', function() {
    console.log('🚀 Bevy WebGate File Server Demo loaded!');
    
    // Add hover effects to demo items
    const demoItems = document.querySelectorAll('.demo-item');
    demoItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-6px)';
            this.style.boxShadow = '0 15px 40px rgba(0, 0, 0, 0.4)';
        });
        
        item.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(-4px)';
            this.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.3)';
        });
    });
    
    // Add click animation to feature list items
    const features = document.querySelectorAll('.feature-list li');
    features.forEach(feature => {
        feature.addEventListener('click', function() {
            this.style.transform = 'scale(1.02)';
            this.style.transition = 'transform 0.2s ease';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 200);
        });
    });
    
    // Animate elements on scroll
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);
    
    // Observe all demo items and feature cards
    document.querySelectorAll('.demo-item, .feature-card, .code-example').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });
    
    // Add some visual feedback to the CTA button
    const ctaButton = document.querySelector('.cta-button');
    if (ctaButton) {
        ctaButton.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-3px) scale(1.02)';
        });
        
        ctaButton.addEventListener('mouseleave', function() {
            if (!this.disabled) {
                this.style.transform = 'translateY(-2px) scale(1)';
            }
        });
    }
});