<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; 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.headercomplete{ font-family: Verdana,Arial,Helvetica; font-size: 20px; text-align: center; vertical-align: center; background: #dddddd; color: #000000; width: 22px; height: 23px; border: 1px solid black; } div.highlightcomplete{ font-family: Verdana,Arial,Helvetica; font-size: 20px; text-align: center; vertical-align: center; background: #999999; color: #000000; width: 22px; height: 23px; border: 1px solid black; } 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; } /* Styling for grid square with error highlight */ div.error { font-family: Verdana,Arial,Helvetica; font-size: 20px; text-align: center; vertical-align: center; background: #aaffaa; 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 = 1; //size of grid var gridHTML = ''; //html code for grid var hearts = '<font color="#bf0000">e&</font>'; var diamonds = '<font color="#c39797">f&</font>'; var clubs = '<font color="#8f8f8f">c&</font>'; var spades = '<font color="#000000">`&</font>'; var love = '<font color="#bf44bf">e&</font>'; var friend = '<font color="aaaaaa">&amp;</font>'; //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]; if (document.getElementById(rowHeader).className == "headercomplete" || document.getElementById(rowHeader).className == "highlightcomplete"){ document.getElementById(rowHeader).className = "highlightcomplete";} else {document.getElementById(rowHeader).className="headerhighlight";} if (document.getElementById(columnHeader).className == "headercomplete" || document.getElementById(columnHeader).className == "highlightcomplete"){ document.getElementById(columnHeader).className = "highlightcomplete";} else {document.getElementById(columnHeader).className="headerhighlight";} } function GridunHighlight(obj,objLoc){ var gridCoord = objLoc.split(','); var rowHeader = gridCoord[0] + ',0'; var columnHeader = '0,' + gridCoord[1]; if (document.getElementById(rowHeader).className == "headercomplete" || document.getElementById(rowHeader).className == "highlightcomplete"){ document.getElementById(rowHeader).className = "headercomplete";} else {document.getElementById(rowHeader).className="header";} if (document.getElementById(columnHeader).className == "headercomplete" || document.getElementById(columnHeader).className == "highlightcomplete"){ document.getElementById(columnHeader).className = "headercomplete";} else {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 = objLoc.split(','); var recipCoord = new Array(); var recipID; if (shipType == ' '){ newShip=hearts;} else if (shipType == hearts){ newShip=diamonds;} else if (shipType ==diamonds){ newShip=clubs;} else if (shipType ==clubs){ newShip=spades;} else if (shipType == spades && document.getElementById('humanRomance').checked == 1){ newShip=love} else if (shipType == love && document.getElementById('humanRomance').checked == 1){ newShip=friend;} else {newShip=' ';} if (document.getElementById('autoReciprocate').checked == 1){ recipCoord[0] = gridCoord[1]; recipCoord[1] = gridCoord[0]; document.getElementById(recipCoord).innerHTML=newShip; if (document.getElementById('autoDupcheck').checked == 1) {CheckDuplicate(recipCoord,newShip); GridCheck(recipCoord);} } obj.innerHTML=newShip; if (document.getElementById('autoDupcheck').checked == 1) {CheckDuplicate(gridCoord,newShip); GridCheck(gridCoord); DroneCheck();} } //checks for completeness of column and row function GridCheck(gridCoord){ var numHearts=0; var numDiamonds=0; var numSpades=0; var numClubs=0; var r = gridCoord[0]; var d = gridCoord[1]; var c; var rowCoord; var colCoord; var headerID; var allcomplete; for (c=1;c<gridSize+1;c++){ rowCoord = r + ',' + c; if (document.getElementById(rowCoord).innerHTML==hearts){numHearts++;} if (document.getElementById(rowCoord).innerHTML==diamonds){numDiamonds++;} if (document.getElementById(rowCoord).innerHTML==clubs){numClubs++;} if (document.getElementById(rowCoord).innerHTML==spades){numSpades++;} } if (numHearts==1&&numDiamonds==1&&numClubs==2&&numSpades==1){ headerID=r+',0'; document.getElementById(headerID).className="headercomplete";} else{ headerID=r+',0'; document.getElementById(headerID).className="header";} numHearts = 0; numDiamonds = 0; numClubs=0; numSpades=0; for (c=1;c<gridSize+1;c++){ rowCoord = c + ',' + d; if (document.getElementById(rowCoord).innerHTML==hearts){numHearts++;} if (document.getElementById(rowCoord).innerHTML==diamonds){numDiamonds++;} if (document.getElementById(rowCoord).innerHTML==clubs){numClubs++;} if (document.getElementById(rowCoord).innerHTML==spades){numSpades++;} } if (numHearts==1&&numDiamonds==1&&numClubs==2&&numSpades==1){ headerID='0,'+d; document.getElementById(headerID).className="headercomplete";} else{ headerID='0,'+d; document.getElementById(headerID).className="header";} } function DroneCheck(){ var c; var allcomplete=0; var headerID; // if (gridSize!=0){ for (c=1;c<gridSize+1;c++){ headerID = '0,'+ c; if (document.getElementById(headerID).className=="headercomplete"){allcomplete++;} headerID=c + ',0'; if (document.getElementById(headerID).className=="headercomplete"){allcomplete++;} } if (allcomplete==gridSize+gridSize){ alert("Grid is now completely safe for arrival of Imperial Drones! Congratulations, you all get to live.");} //} } //checks for duplicate ships in a column function CheckDuplicate (gridCoord,newShip){ var r; var d; var c; var currentSquare = ''; var checkSquare = ''; var squareError = 0; var clubsRow = 0; var clubsColumn = 0; for (r=1;r<gridSize+1;r++){ currentSquare = r + ',' + gridCoord[1]; if (document.getElementById(currentSquare).innerHTML!=' ' && document.getElementById(currentSquare).innerHTML!=clubs){ for (c=1;c<gridSize+1;c++){ checkSquare = c + ',' + gridCoord[1]; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ squareError = 1;} checkSquare = r + ',' + c; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ squareError = 1;} } } else if (document.getElementById(currentSquare).innerHTML==clubs){ clubsRow=0; clubsColumn=0; for (c=1;c<gridSize+1;c++){ checkSquare = c + ',' + gridCoord[1]; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ clubsRow++;} checkSquare = r + ',' + c; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ clubsColumn++;} if (clubsRow==1 && clubsColumn==1) {squareError = 0;} else {squareError = 1;} }} if (squareError == 1) {document.getElementById(currentSquare).className = "error";} else if (r==gridCoord[1]) {document.getElementById(currentSquare).className = "centergrid";} else {document.getElementById(currentSquare).className = "gridtext";} squareError = 0;} for (r=1;r<gridSize+1;r++){ currentSquare = gridCoord[0] + ',' + r; if (document.getElementById(currentSquare).innerHTML!=' ' && document.getElementById(currentSquare).innerHTML!=clubs){ for (c=1;c<gridSize+1;c++){ checkSquare = c + ',' + r; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ squareError = 1;} checkSquare = gridCoord[0] + ',' + c; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ squareError = 1;} } } else if (document.getElementById(currentSquare).innerHTML==clubs){ clubsRow=0; clubsColumn=0; for (c=1;c<gridSize+1;c++){ checkSquare = c + ',' + r; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ clubsRow++;} checkSquare = gridCoord[0] + ',' + c; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ clubsColumn++;} if (clubsRow==1 && clubsColumn==1) {squareError = 0;} else {squareError = 1;} }} if (squareError == 1) {document.getElementById(currentSquare).className = "error";} else if (gridCoord[0]==r) {document.getElementById(currentSquare).className = "centergrid";} else {document.getElementById(currentSquare).className = "gridtext";} squareError = 0; } } //outputs current HTML of grid into textarea function OutputHtml(){ document.getElementById('gridOutput').innerHTML=document.getElementById('Grid').innerHTML } //check whole grid for duplicates or clear all error marks function FullCheck(){ var r; var d; var c; var currentSquare = ''; var checkSquare = ''; var squareError = 0; var clubsRow = 0; var clubsColumn = 0; var currentArray; if (document.getElementById('autoDupcheck').checked == 0){ for (r=1;r<gridSize+1;r++){ for (d=1;d<gridSize+1;d++){ currentSquare = r + ',' + d; if (r==d) {document.getElementById(currentSquare).className = "centergrid";} else {document.getElementById(currentSquare).className = "gridtext";} } document.getElementById('0,'+r).className = "header"; document.getElementById(r +',0').className = "header"; } } else{ for (r=1;r<gridSize+1;r++){ for (d=1;d<gridSize+1;d++){ currentSquare = r + ',' + d; currentArray = currentSquare.split(',') GridCheck(currentArray); currentSquare = r + ',' + d; if (document.getElementById(currentSquare).innerHTML!=' ' && document.getElementById(currentSquare).innerHTML!=clubs){ for (c=1;c<gridSize+1;c++){ checkSquare = c + ',' + d; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ squareError = 1;} checkSquare = r + ',' + c; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ squareError = 1;} } } else if (document.getElementById(currentSquare).innerHTML==clubs){ clubsRow=0; clubsColumn=0; for (c=1;c<gridSize+1;c++){ checkSquare = c + ',' + d; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ clubsRow++;} checkSquare = r + ',' + c; if (document.getElementById(currentSquare).innerHTML == document.getElementById(checkSquare).innerHTML && currentSquare!=checkSquare){ clubsColumn++;} if (clubsRow==1 && clubsColumn==1) {squareError = 0;} else {squareError = 1;} }} if (squareError == 1) {document.getElementById(currentSquare).className = "error";} else if (r==d) {document.getElementById(currentSquare).className = "centergrid";} else {document.getElementById(currentSquare).className = "gridtext";} squareError = 0; }} DroneCheck(); } }; </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? <br><input type="checkbox" id="autoDupcheck" onclick="FullCheck()">Automatic rule checks? <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 your 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>