MyBangDreamTierList

A small static site with a main menu and two modes. Mode 1, My Song Ranking (songs.html) has two boards: rank your ten favorite BanG Dream! original songs (first place gets the biggest cover), or pick the one song you like most from each band. Either board can be saved as a PNG or shared as a link.

Features

• Top 10 ranking: 10 ranks arranged as a pyramid: #1 is the largest, then #2-3, #4-6 and #7-10.
• Best song per band: one pick for each of the 12 bands; the saved image shows each band's logo next to its song.
• Browse about 450 original songs by band, or search by title (press / to jump to search).
• Tap a song to place it, tap a rank first to choose where it goes, or drag to reorder.
• Save the board as a vertical 1080x1350 image (sized for a Facebook post), or copy a share link (the picks are stored in the URL hash).
• Your ranking is remembered in the browser (localStorage).

Run locally

The page loads JSON with fetch(), so it needs a web server (opening index.html as a file will not work):

python -m http.server 8000

Then open http://localhost:8000 (the main menu).

Layout

Path	What it is
index.html	Main menu: choose a mode
songs.html, scripts/	Mode 1, My Song Ranking (scripts/poster.js draws the exported image)
id-card.html, scripts/idcard.js, scripts/idcard-draw.js, styles/idcard.css	Mode 2, My BanG Dream! ID card: name, main character, with the picture you upload yourself (no default pictures), band, song, the games you play (Japan, Global or Both) and your player IDs, drawn on a canvas and saved as a PNG
data/characters.json	The 61 characters of the 12 bands (names and colors only, grouped by band; from the BanG Dream! Wikia). Michelle is listed separately from Okusawa Misaki
styles/	Shared stylesheet
data/songs.json, data/bands.json	Song and band lists, generated by build_data.py
covers/<Band>/	Cover images as WebP (max 800px)
covers/index.csv	Where each cover came from (Bestdori game jacket, or a wiki fallback)
assets/bands/	Band icons (Bestdori, plus a few picked by hand)
assets/logos/	Band wordmark logos from the BanG Dream! Wikia, used on the per-band image

To rebuild the data files after changing covers/index.csv, run python build_data.py.

Credits

Unofficial fan project. BanG Dream! and all related artwork are © Bushiroad / BanG Dream! Project. Cover images and icons come from Bestdori, the BanG Dream! Wikia and the BanG Dream! Wiki, and are used for personal, non-commercial fan purposes.