Song List Template

A customizable, responsive web application for displaying and organizing music charts with support for multiple languages (English and Japanese).

Features

• Multi-language Support: Switch between English and Japanese interfaces
• Genre-based Organization: Songs are automatically categorized by genre
• Collections: Create custom collections of songs
• Responsive Design: Works on both desktop and mobile devices
• Custom Styling: Easily customize colors and appearance

Project Structure

songListTemplate/
├── index.html          # Main HTML file
├── scripts/
│   ├── temp_collectionScriptPlugin.js  # Handles collection functionality
│   ├── temp_customCharts.js             # Song data and configuration
│   ├── temp_customcollections.js        # Collection definitions
│   └── temp_songListPlugin.js           # Core song list functionality
└── styles/
    └── songlist.css          # Styling for the song list

Installation

1. Clone or download this repository
2. Open index.html in a web browser 2.1. If you have python, run python -m http.server in the root directory of the repository while running Powershell 2.2. Open http://localhost:8000 in your web browser 2.3. If you don't have python, open index.html.
3. No additional dependencies required - everything runs client-side

Configuration

Adding Songs

Edit scripts/temp_customCharts.js to add or modify songs. Each song should be an object with the following properties:

{
    title: "Song Title",           // English title
    subtitle: "Artist Name",        // Artist name
    titleJA: "曲名",                // Japanese title (optional)
    subtitleJA: "アーティスト名",    // Japanese artist name (optional)
    genre: 1,                       // Genre ID (1-9)
    difficulty: {                    // Difficulty levels
        easy: 1,                    // 1-10 difficulty
        normal: 3,
        hard: 5,
        insane: 7,
        expert: 9
    },
    videoLink: "youtube.com/...",   // Video link (optional)
    uniqueid: "unique_id",          // Unique identifier
    releaseDate: "2023-01-01",       // Release date (optional)
    albumArt: "path/to/image.jpg"    // Album art path (optional)
}

Creating Collections

Edit scripts/temp_customcollections.js to create custom collections. Example:

{
    collectionid: 1,
    collectionKey: 'example',
    colTitle: { en: 'Example Collection', ja: '例のコレクション' },
    songIds: ['song_id_1', 'song_id_2'],
    isCustomColor: true,
    collectioncolor: {
        headerColor: {
            tableBorderLeftColor: 'rgb(17, 144, 190)',
            isGradient: true,
            tableGradient: {
                gradStart: 'rgb(39,199,255)',
                gradEnd: 'rgb(154, 194, 209)'
            },
            // Additional styling...
        },
        // More color configurations...
    }
}

API Documentation

Core Functions

loadJSFile(filename)

• Description: Loads a JavaScript file containing song data
• Parameters:
  • filename (string): Name of the file to load (without .js extension)
• Returns: Promise that resolves with the loaded song data array

createGenreTables()

• Description: Creates and displays genre-based tables of songs
• Parameters: None
• Returns: void

createCollectionTable()

• Description: Creates a table for a collection of songs
• Parameters: None
• Returns: void

updateAll()

• Description: Updates all UI elements when language changes
• Parameters: None
• Returns: void

Helper Functions

createTh(en, ja, width, iconUrl, iconAlt)

• Description: Creates a table header with language support
• Parameters:
  • en (string): English text
  • ja (string): Japanese text
  • width (string): CSS width
  • iconUrl (string): URL for optional icon
  • iconAlt (string): Alt text for icon
• Returns: HTMLTableHeaderCellElement

getSongsByIds(ids)

• Description: Retrieves full song data from song IDs
• Parameters:
  • ids (string[]): Array of song IDs
• Returns: Array of song objects

Styling

Customize the appearance by modifying styles/songlist.css. The following CSS classes are available:

• .song-table: Main song table
• .collection-table: Collection table
• .difficulty-easy: Easy difficulty cell
• .difficulty-normal: Normal difficulty cell
• .difficulty-hard: Hard difficulty cell
• .difficulty-insane: Insane difficulty cell
• .difficulty-expert: Expert difficulty cell

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is open source and available under the MIT License.

Contributing

Contributions are always welcome. For inquiries, please go to... (placeholder link) for more information.