Skip to content

Commit 778db17

Browse files
jyoung4242jyoung4242
committed
added soundforge
1 parent 9ed67f0 commit 778db17

3 files changed

Lines changed: 251 additions & 0 deletions

File tree

‎Tools/SoundForge/readme.md‎

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
# SFXR ✦ ExcaliburJS Sound Forge
2+
3+
A modern web-based sound effects generator built with React and ExcaliburJS. Create retro-style sound effects and export them for use
4+
in games and applications.
5+
6+
## Overview
7+
8+
Sound Forge is a single-page application (SPA) that provides an intuitive interface for generating and manipulating sound effects. It
9+
leverages ExcaliburJS audio capabilities and React for a responsive, interactive user experience.
10+
11+
## Project Structure
12+
13+
```
14+
GDL sound forge/
15+
├── index.html # Main SPA file (HTML + inline React + CSS)
16+
├── README.md # This file
17+
└── .git/ # Git version control
18+
```
19+
20+
## Technology Stack
21+
22+
- **Frontend Framework**: React 18.2.0
23+
- **Rendering**: ReactDOM 18.2.0
24+
- **JSX Compilation**: Babel Standalone 7.23.2
25+
- **Game Framework**: ExcaliburJS
26+
- **Styling**: CSS Grid, CSS Variables (custom design system)
27+
- **Typography**:
28+
- Space Mono (monospace) - 400, 700 weights
29+
- Syne (sans-serif) - 400, 700, 800 weights
30+
- **External Dependencies**: Via CDN (React, ReactDOM, Babel)
31+
32+
## Design System
33+
34+
The application uses a sophisticated dark theme with the following color variables:
35+
36+
| Variable | Purpose | Value |
37+
| ------------ | -------------------------- | --------- |
38+
| `--bg` | Main background | `#0a0c10` |
39+
| `--surface` | Surface elements | `#111318` |
40+
| `--surface2` | Secondary surface | `#181b22` |
41+
| `--accent` | Primary accent (cyan) | `#00e5ff` |
42+
| `--accent2` | Secondary accent (pink) | `#ff3d6b` |
43+
| `--accent3` | Tertiary accent (yellow) | `#ffe066` |
44+
| `--accent4` | Quaternary accent (purple) | `#7c5cfc` |
45+
| `--text` | Primary text | `#e8eaf0` |
46+
| `--text2` | Secondary text | `#7a8099` |
47+
| `--text3` | Tertiary text | `#454d66` |
48+
49+
## Layout Architecture
50+
51+
The application uses a CSS Grid layout:
52+
53+
```
54+
┌─────────────────────────────────────┐
55+
│ Header (52px) │
56+
├──────────────┬──────────────────────┤
57+
│ Sidebar │ │
58+
│ (220px) │ Main Content │
59+
│ │ (1fr) │
60+
├──────────────┴──────────────────────┤
61+
│ Footer (60px) │
62+
└─────────────────────────────────────┘
63+
```
64+
65+
## Getting Started
66+
67+
### Prerequisites
68+
69+
- A modern web browser with ES6+ support
70+
- No build tools or installation required (CDN-based)
71+
72+
### Running Locally
73+
74+
1. Clone the repository:
75+
76+
```bash
77+
git clone <repository-url>
78+
cd "GDL sound forge"
79+
```
80+
81+
2. Open `index.html` directly in your browser:
82+
83+
```bash
84+
# On Windows
85+
start index.html
86+
87+
# On macOS
88+
open index.html
89+
90+
# On Linux
91+
xdg-open index.html
92+
```
93+
94+
Or use a local development server:
95+
96+
```bash
97+
# Using Python 3
98+
python -m http.server 8000
99+
100+
# Using Node.js http-server
101+
npx http-server
102+
```
103+
104+
3. Navigate to `http://localhost:8000` in your browser
105+
106+
## Development Guide
107+
108+
### File Structure
109+
110+
The entire application is contained in a single `index.html` file that includes:
111+
112+
- HTML markup
113+
- Inline CSS (within `<style>` tags)
114+
- JavaScript/React code (within `<script>` tags)
115+
116+
### Modifying the Application
117+
118+
1. **Styling**: Edit the CSS variables or add new styles within the `<style>` block
119+
2. **Functionality**: Modify the React components in the inline JavaScript
120+
3. **HTML Structure**: Update the DOM elements as needed
121+
122+
### Color Customization
123+
124+
To adjust the theme, modify the CSS variables in the `:root` selector:
125+
126+
```css
127+
:root {
128+
--bg: #0a0c10;
129+
--accent: #00e5ff;
130+
/* ... other variables ... */
131+
}
132+
```
133+
134+
### Adding Features
135+
136+
When adding new features:
137+
138+
1. Follow the existing React component patterns
139+
2. Utilize the defined CSS variables for consistency
140+
3. Maintain the responsive grid layout
141+
4. Test on multiple browsers and screen sizes
142+
143+
## Key Features
144+
145+
- **Modern UI**: Dark-themed interface with neon accents
146+
- **Responsive Design**: CSS Grid layout adapts to different screen sizes
147+
- **Sound Generation**: ExcaliburJS-powered sound effect creation
148+
- **Real-time Feedback**: Immediate audio preview
149+
- **Export Capabilities**: Download generated sounds in standard formats
150+
151+
## Browser Support
152+
153+
- Chrome/Chromium 90+
154+
- Firefox 88+
155+
- Safari 14+
156+
- Edge 90+
157+
158+
## Performance Considerations
159+
160+
- Uses CDN-hosted libraries to minimize bundle size
161+
- Scanline overlay effect uses GPU acceleration with `pointer-events: none`
162+
- CSS Grid for efficient layout rendering
163+
- Debounce audio generation for smooth user experience
164+
165+
## Building & Deployment
166+
167+
### Local Testing
168+
169+
Simply serve the `index.html` file through a web server. No build step required.
170+
171+
### Production Deployment
172+
173+
1. Test thoroughly in all target browsers
174+
2. Upload `index.html` (and any supporting assets) to your hosting platform
175+
3. Ensure CDN resources are accessible in your deployment environment
176+
177+
### Optimizations
178+
179+
For production deployment, consider:
180+
181+
- Caching `index.html` with appropriate headers
182+
- Using a CDN for CDN-hosted assets
183+
- Minifying inline CSS and JavaScript
184+
- Adding service worker for offline support
185+
186+
## Troubleshooting
187+
188+
### Styles Not Loading
189+
190+
- Check browser console for CSS errors
191+
- Verify Google Fonts CDN is accessible
192+
- Clear browser cache (Ctrl+Shift+Del)
193+
194+
### Sound Not Playing
195+
196+
- Check browser audio permissions
197+
- Verify ExcaliburJS is loaded from CDN
198+
- Check browser console for JavaScript errors
199+
200+
### React Not Rendering
201+
202+
- Verify React and ReactDOM CDN links are accessible
203+
- Check that Babel is compiling JSX correctly
204+
- Look for errors in browser console
205+
206+
## Contributing
207+
208+
When contributing to this project:
209+
210+
1. **Code Style**: Maintain consistent formatting with the existing code
211+
2. **Naming Conventions**: Use camelCase for variables and functions
212+
3. **Comments**: Document complex logic and non-obvious implementations
213+
4. **Testing**: Test changes across multiple browsers before submitting
214+
215+
## Future Enhancements
216+
217+
Potential areas for improvement:
218+
219+
- Modularize code into separate files
220+
- Add unit tests
221+
- Implement PWA capabilities
222+
- Support multiple export formats
223+
- Add preset management system
224+
- Community sound library integration
225+
226+
## License
227+
228+
[Add your license information here]
229+
230+
## Contact & Support
231+
232+
For questions or suggestions, please open an issue or contact the development team.
233+
234+
---
235+
236+
**Last Updated**: April 2026
237+
**Project**: GDL SoundForge with ExcaliburJS
238+
**Status**: Active Development

‎library-data.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,17 @@ export const SECTIONS = [
3030

3131
export const ITEMS = [
3232
// ── TOOLS ────────────────────────────────────────────────────────────────
33+
{
34+
section: "tools",
35+
emoji: "🎶",
36+
title: "JSFXR Sound Forge",
37+
desc: "Create retro sound effects with a web-based SFXR-inspired tool. Perfect for prototyping and adding quick audio to your games.",
38+
links: [
39+
{ label: "Launch ↗", href: "https://gdl-sound-forge.vercel.app/", launch: true },
40+
{ label: "Docs", href: `${GITHUB}/Tools/Sound%20Forge/readme.md` },
41+
],
42+
isNew: true,
43+
},
3344
{
3445
section: "tools",
3546
emoji: "Ⓐ",

‎readme.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ mapping, pub/sub signals, UUID generation, behavior trees, and simple components
1717
- :star:[Mini-map](/UIcomponents/MiniMap/readme.md):arrow_backward: NEW STUFF HERE!!!!!
1818

1919
- Tools
20+
- :star:[SoundForge - JSFXR](https://gdl-sound-forge.vercel.app/):arrow_backward: NEW STUFF HERE!!!!!
21+
- [Readme](./Tools/SoundForge/readme.md)
2022
- :star:[SpriteFontForge](https://sprite-font-forge.vercel.app/):arrow_backward: NEW STUFF HERE!!!!!
2123
- [Readme](./Tools/SpriteFont%20Forge/readme.md)
2224
- [Tileset Combiner](https://tilesetconsolidator.vercel.app/)

0 commit comments

Comments
 (0)