Publish the source code for the SaltyGME website

[Primigenus]

Hi,

I <3 this extension and I use the website regularly to listen to game music, but I have some improvements I'd like to make (styling, keyboard shortcuts etc) that I would love to contribute via pull request. It doesn't appear to be hosted on Github. Would it be possible to create a repo for the site?

Thanks!

[multimediamike]

Thanks for your interest in the game music project. As you can see, there is still a lot of work to do. I do maintain the website in a separate repo that I store on my local development machine. I would have to audit the code before uploading it to make sure no private stuff leaks.

I would appreciate some tips on styling (obviously one of my weakest points). Also, what ideas do you have for further keyboard shortcuts (currently, number keys can toggle voices, but that's difficult to advertise properly).

[Primigenus]

OK, no problem.

From a styling point of view, adding Bootstrap was a big upgrade already, but I think it would be cool to add some character to it. The way I usually design stuff is by just jumping into the HTML and CSS and repositioning and resizing things until everything feels right. The more general tips like spacing, alignment, fonts etc have been taken care of by applying Bootstrap. So if you get a chance to publish the code one day I'd love to dive in and tweak things!

As for keyboard shortcuts, it would be really nice if it were possible to change tracks (next and previous), pause and unpause (spacebar, just like with videos?) and jump to a random game as those are functions I use regularly. Enabling and disabling DSPs is a fun feature but not something I really do when I'm actually listening to the soundtrack. Maybe a key to focus the search box would be nice too, because then you can truly jump around between games and combined with the other shortcuts listen to anything with just the keyboard.

[multimediamike]

Thanks for the suggestions on the keyboard shortcuts. I had some of those in mind (space, left, right), though I felt a little concerned about highjacking the space bar. What key bindings would you suggest for search box focus and random menu pulldown?

As for styling, you can already see everything I'm doing on that front. I'm using stock Bootstrap, unmodified by virtue of the fact that I wouldn't know how to even being modifying it. I have looked for a simple place to begin modifying the color scheme, but even that's not obvious.

I don't have things broken up into very many files. There is one player.php script that drives the "/listen/" URL. If you inspect the source, you can see just a few div tags that manage the proceedings. Like I said, it's all pretty simple; if it were any more complicated, I would hurt myself because web dev clearly isn't my area. :-)

One idea I have been entertaining is to have different color themes for each console.

[Primigenus]

I wouldn't worry about hijacking keys because the GME website is essentially an app - look at web based music apps like Google Music and Spotify for an idea of how far you can go. Or take a look at the commands Github has built in. Space may be a bit aggressive but it should be possible to get some basic keyboard shortcuts going that don't require arcane ctrl/shift modifiers and such.

I tend to use Ctrl/Cmd+Shift+F or something similar to highlight an in-page search box. Esc to remove focus (so that I can use the keys for other purposes). Random track could be as simple as "q" or Shift-R or something? And then I guess you should have a little legend somewhere that shows which keys do what.

I like the idea of styling per console because the site looked kind of nice with the SNES-style purple you had going on before.

[multimediamike]

Suddenly, I feel empowered by thinking of this meager web page as an "app"-- thanks! :-) I'll take a look at some other web-based music players for inspiration.

With enough keyboard shortcuts, a legend will certainly be warranted (right now, I have a tooltip describing the voice toggling if you mouse over "Voices:").

I would like to think of a more subtle way to style to page rather than changing the background (which can get a bit gaudy). Perhaps just a diagonal gradient is called for. The more challenging aspect will be to come up with color schemes for certain systems. I have found kuler.adobe.com to be a great resource (that's where I found the SNES theme).

[Primigenus]

Maybe style the buttons to be reminiscent of the buttons on each associated control pad, too? Eg. have red/blue/green/yellow gel-cap buttons for SNES (well, that's how the SNES looked in Europe, anyway) and a white Apple-esque look for Nintendo DS, etc. I could help you out with implementing the styles for those if you want.

If we're brainstorming ideas I think a playlist feature with track search could be really nice. Sometimes I want to listen to just battle themes from various RPGs, or a specific favourite selection. It would be cool to be able to add tracks to a playlist (which could be stored in a cookie or something). Or since the Salty music player is a Chrome extension, you could go further and add the GME to the Chrome Web Store too, then use Google's single sign on so that when clicking the icon in Chrome you already know who I am and can remember stuff about me :-)

[Primigenus]

Any progress on this? :-)

[multimediamike]

Sorry, I've been trying to sort out the much more serious bug in which Chrome 27 broke the site.