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.
