<head><title>Troll Romance Shipping Grid Maker</title> <style type="text/css"> /* Styling for standard grid square */ td.Cell{ float: left; text-align: center; vertical-align: top; border: thin double; border-color: #cccccc; background: #ffffff; margin: 1px; padding: 1px; width: 24px; height: 24x; } /*styling for row/column header grid square*/ td.headercell{ float: left; text-align: center; vertical-align: top; border: thin double; border-color: #cccccc; background: #dddddd; color: #000000; margin: 1px; padding: 1px; width: 24px; height: 24px; font-size: 20px; } div.header{ font-family: Verdana,Arial,Helvetica; font-size: 20px; text-align: center; vertical-align: center; background: #dddddd; color: #000000; width: 24px; height: 24px; border: none; } div.headerhighlight{ font-family: Verdana,Arial,Helvetica; font-size: 20px; text-align: center; vertical-align: center; background: #999999; color: #000000; width: 24px; height: 24px; border: none; } /*styling for clickable area in grid square*/ div.gridtext { font-family: Verdana,Arial,Helvetica; font-size: 20px; text-align: center; vertical-align: center; background: #ffffff; color: #000000; width: 24px; height: 24px; border: none; } /* Styling for center-diagonal grid square */ div.centergrid { font-family: Verdana,Arial,Helvetica; font-size: 20px; text-align: center; vertical-align: center; background: #efefef; color: #000000; width: 24px; height: 24px; border: none; } </style> <script type="text/javascript"> var userInput = ' '; //grid initialization var symbolArray; //grid initialization, as array var gridSize = 0; //size of grid var gridHTML = ''; //html code for grid //parses the grid initialization function ReadSymbols(){ userInput = document.getElementById('userInput').value; symbolArray = userInput.split(','); gridSize = symbolArray.length; MakeGrid(); } //draws the empty grid function MakeGrid(){ var c; var r; var d; var gridRow = ''; var emptyCell = '<td class="cell"><div class="gridtext" onmouseover="GridHighlight(this,this.id)" onmouseout="GridunHighlight(this,this.id)" onclick="IterateShip(this,this.id)" id="'; var centerCell = '<td class="cell"><div class="centergrid" onmouseover="GridHighlight(this,this.id)" onmouseout="GridunHighlight(this,this.id)" onclick="IterateShip(this,this.id)" id="'; gridHTML = '<table> <tr> <td class="cell"><div class="header" id="0,0"> </div></td>'; for (c=0;c<gridSize+0;c++){ gridHTML = gridHTML + '<td class="cell"><div class="header" onclick="IterateShip(this,this.id)" id="0,' + (c+1) + '">' + symbolArray[c] + '</div></td> '; } gridHTML = gridHTML + '</tr>'; for (r=1;r<gridSize+1;r++){ gridHTML = gridHTML + '<tr>'; gridHTML = gridHTML + '<td class="cell"><div div class="header" id="' + r + ',0">' + symbolArray[(r-1)] + '</div></td> '; for (d=1;d<gridSize+1;d++) { if (r==d){ gridHTML = gridHTML + centerCell;} else { gridHTML = gridHTML + emptyCell;} gridHTML = gridHTML + r + ',' + d +'"> </div></td> '; } gridHTML = gridHTML + '</tr> '; } gridHTML = gridHTML + '</table>'; document.getElementById('Grid').innerHTML = gridHTML; } //Highlights column,row headers on mouseover function GridHighlight(obj,objLoc){ var gridCoord = objLoc.split(','); var rowHeader = gridCoord[0] + ',0'; var columnHeader = '0,' + gridCoord[1]; document.getElementById(rowHeader).className = "headerhighlight"; document.getElementById(columnHeader).className = "headerhighlight"; } function GridunHighlight(obj,objLoc){ var gridCoord = objLoc.split(','); var rowHeader = gridCoord[0] + ',0'; var columnHeader = '0,' + gridCoord[1]; document.getElementById(rowHeader).className = "header"; document.getElementById(columnHeader).className = "header"; } //makes symbols appear when you click on a grid square function IterateShip(obj,objLoc){ var newShip = 'X'; var shipType = obj.innerHTML; var gridCoord; var recipCoord = new Array(); var recipID; if (shipType == ' '){ newShip='<font color="#bf0000">e&</font>';} else if (shipType == '<font color="#bf0000">e&</font>'){ newShip='<font color="#c39797">f&</font>';} else if (shipType == '<font color="#c39797">f&</font>'){ newShip='<font color="#8f8f8f">c&</font>';} else if (shipType == '<font color="#8f8f8f">c&</font>'){ newShip='<font color="#000000">`&</font>';} else if (shipType == '<font color="#000000">`&</font>' && document.getElementById('humanRomance').checked == 1){ newShip='<font color="#bf44bf">e&</font>'} else if (shipType == '<font color="#bf44bf">e&</font>' && document.getElementById('humanRomance').checked == 1){ newShip='<font color="aaaaaa">&amp;</font>';} else {newShip=' ';} if (document.getElementById('autoReciprocate').checked == 1){ gridCoord = objLoc.split(','); recipCoord[0] = gridCoord[1]; recipCoord[1] = gridCoord[0]; recipCoord.toString(); document.getElementById(recipCoord).innerHTML=newShip; } obj.innerHTML=newShip; } //outputs current HTML of grid into textarea function OutputHtml(){ document.getElementById('gridOutput').innerHTML=document.getElementById('Grid').innerHTML } </script></head> <body> <div><h1>Troll Romance Shipping Grid Maker</h1></div> <div> Enter character symbols, separated by a comma: <br><input type='text' id='userInput' value='' /> <input type='button' onclick='ReadSymbols()' value='Enter'/> <br><input type="checkbox" id="humanRomance">Include <font color="aaaaaa">&amp;</font> and <font color="#bf44bf">e&</font> symbols for Earth Human relationships? <br><input type="checkbox" id="autoReciprocate">Automatically reciprocate all relationships? <div id="Grid"> </div> <div><br> <p>Enter symbols or initials for characters in the text box, separated by commas (the text box will accept basic html, including img tags, but keep them small).</p> <p>To add a ship symbol, click your mouse on a grid square: once for hearts, twice for diamonds, three times for spades, four times for clubs, five times to clear again.</p> <p>To restart, reload page, or clear text box and enter new character list.</p><p>To get your current grid as an HTML table (suitable for posting on social media, etc.), click the button below, and then copy-paste the output. Note that the output table will have default table styling (and will not be clickable.) <br><input type='button' onclick='OutputHtml()' value='Save as HTML'/> <textarea id="gridOutput"> </textarea></p> <p>To save you current grid as an image file, press the printscreen key and then paste into your favorite image editing program</p> <p>This is a very early and unpretty version; I am teaching myself javascript. It has been tested in Opera 12.10 and QTWeb 3.7; ymmv if you're using one of those other browsers.</p> <p>Here are some cheats you can copy and paste into the entry box for your character list, if you want fully coded Homestuck character symbols. Note that some unicode symbols may not display on all browsers or systems. You can combine or re-order these lists, just make sure there is a comma between every entry. <ul><li>Trolls:<br> <textarea><font color="#a10000">&#9800;</font>, <font color="#a15000">&#9801;</font>, <font color="#a1a100">&#9802;</font>, <font color="#626262">&#9803;</font>, <font color="#416600">&#9804;</font>, <font color="#008141">&#9805;</font>, <font color="#008282">&#9806;</font>, <font color="#005682">&#9807;</font>, <font color="#000056">&#9808;</font>, <font color="#2b0057">&#9809;</font>, <font color="#6a006a">&#9810;</font>, <font color="#77003c">&#9811;</font></textarea></li> <li>Cherubim:<br> <textarea><font color="#ff0000">&#9934;</font>, <font color="#00ff00">&#9764;</font></textarea></li> <li>Kids:<br> <textarea><img src="http://melannen.katycat.net/shipgrid/john.png">, <img src="http://melannen.katycat.net/shipgrid/jade.png">, <img src="http://melannen.katycat.net/shipgrid/rose.png">, <img src="http://melannen.katycat.net/shipgrid/dave.png">, <img src="http://melannen.katycat.net/shipgrid/jane.png">, <img src="http://melannen.katycat.net/shipgrid/jake.png">, <img src="http://melannen.katycat.net/shipgrid/roxy.png">, <img src="http://melannen.katycat.net/shipgrid/dirk.png"></textarea></li> <li>On the asteroid of lurve:<br> <textarea> <font color="#626262">&#9803;</font>, <font color="#008141">&#9805;</font>, <font color="#008282">&#9806;</font>, <font color="#2b0057">&#9809;</font>, <img src="http://melannen.katycat.net/shipgrid/dave.png">, <img src="http://melannen.katycat.net/shipgrid/rose.png">, <font color="#000000">&#9823;</font></textarea></li> <li>All player characters:<br> <textarea><font color="#a10000">&#9800;'</font>, <font color="#a15000">&#9801;'</font>, <font color="#a1a100">&#9802;'</font>, <font color="#626262">&#9803;'</font>, <font color="#416600">&#9804;'</font>, <font color="#008141">&#9805;'</font>, <font color="#008282">&#9806;'</font>, <font color="#005682">&#9807;'</font>, <font color="#000056">&#9808;'</font>, <font color="#2b0057">&#9809;'</font>, <font color="#6a006a">&#9810;'</font>, <font color="#77003c">&#9811;'</font>, <font color="#a10000">&#9800;</font>, <font color="#a15000">&#9801;</font>, <font color="#a1a100">&#9802;</font>, <font color="#626262">&#9803;</font>, <font color="#416600">&#9804;</font>, <font color="#008141">&#9805;</font>, <font color="#008282">&#9806;</font>, <font color="#005682">&#9807;</font>, <font color="#000056">&#9808;</font>, <font color="#2b0057">&#9809;</font>, <font color="#6a006a">&#9810;</font>, <font color="#77003c">&#9811;</font>, <font color="#ff0000">&#9934;</font>, <font color="#00ff00">&#9764;</font>, <img src="http://melannen.katycat.net/shipgrid/john.png">, <img src="http://melannen.katycat.net/shipgrid/jade.png">, <img src="http://melannen.katycat.net/shipgrid/rose.png">, <img src="http://melannen.katycat.net/shipgrid/dave.png">, <img src="http://melannen.katycat.net/shipgrid/jane.png">, <img src="http://melannen.katycat.net/shipgrid/jake.png">, <img src="http://melannen.katycat.net/shipgrid/roxy.png">, <img src="http://melannen.katycat.net/shipgrid/dirk.png"></textarea></li></ul> </div> <div><small>Troll romance and related concepts are from <a href="http://www.mspaintadventures.com">MS Paint Adventures</a> by the Hon. Andrew Hussie <br>Javascript shipping grid by melannen (<a href="http://melannen.dreamwidth.org">melannen.dreamwidth.org</a>)</small></div> </body>