Shipping Grids

[melannen]

This is how badly I'm procrastinating on the things I'm currently over-deadline on:

I sat down today and decided it was time to finally teach myself Javascript.

So, um, I have made a thing. Specifically, I have made a Troll Romance Shipping Grid Generator, where you can put in a list of characters and then automatically fill out the grid with ♥/⋄/♣/♠. Because that is something I've needed in my life, and I haven't been able to find one that did what I wanted, and it seemed like the sort of thing I could program with pretty basic stuff.

Troll Romance Shipping Grid Maker


There is a bunch more stuff I'd like to fix/add to it, but it's reached the point of functionality that I'm spending more time playing with it than coding it, so I thought I'd share. :P

(and while the example lists there are all Homestuck characters, let's be honest, I made this so I could do a TTOI shipping grid, it is not limited to Homestuck characters.)

Sample grid:

	♋	♍	♎	♑
♋		♣	♥	♦	♣	♠
♍	♣		♦	♠	♣	♥
♎	♥	♦		♣	♠	♣
♑	♦	♠	♣		♥	♣
	♣	♣	♠	♥		♦
	♠	♥	♣	♣	♦

I spent about half the time trying to remember basic programming stuff I haven't used in so long I've forgotten (like, oh yeah, == and = are different, that matters in C-ish languages) and half the time figuring out the weirdness that comes with js and html and making output happen. (I was going to be good and do the styling with all CSS, too, but I still can't make myself do rube goldberg css kludges when table and font tags work PERFECTLY FINE for the purpose. :P I did the CSS-appropriate stuff in CSS, anyway.)

Things to work on:

Style:
more flexible formatting on column/row headers so longer labels fit better
accessibility
figure out metadata stuff
make page prettier
add comments to code (if i have to, i guess)
figure out how embeds work
in-page way to save grids (output as HTML table?) Done!
mark center diagonal Done!
Highlight row/column on mouseover
recognize image urls in input field
strip unwanted html in input field
strip unwanted html & add bg colors in html output

Functionality:
automatically fill in mirror-image space on grid WOOHOO!
automatically check for duplications/contradictions
notify when a grid is fully drone-safe
add option for & and / symbols for human relationships Done
add option for vacillation
puzzles

Most of those - especially the functionality fixes - will require basically re-doing the whole thing, so it, like, uses actual arrays to store values and stuff, but that can be my Lesson 2 :P