| <html> | |
| <head> | |
| <title>TwitchTetris</title> | |
| <link href="//fonts.googleapis.com/css?family=VT323" rel="stylesheet" type="text/css" /> | |
| <link href="styles.css" rel="stylesheet" type="text/css" /> | |
| <link href="controlsStyles.css" rel="stylesheet" type="text/css" /> | |
| <script src="jawsjs.js" type="text/javascript"></script> | |
| <script src="cookie.js" type="text/javascript"></script> | |
| <script src="input.js" type="text/javascript"></script> | |
| <script src="controls.js" type="text/javascript"></script> | |
| </head> | |
| <body onload="onControlsLoad();"> | |
| <table border="0" class="mainTable"> | |
| <tr> | |
| <td class="menuCell"> | |
| <div class="menu"> | |
| <img class="menuLogo" src="media/background/logo.png"></img> | |
| <br/><br/> | |
| <a href="index.html" class="bareLink"> | |
| <div class="menuItem">Play TwitchTetris</div> | |
| </a> | |
| <br/> | |
| <a href="controls.html" class="bareLink"> | |
| <div class="menuItem selectedMenuItem">Controls Options</div> | |
| </a> | |
| <br/> | |
| <a href="highScores.html" class="bareLink"> | |
| <div class="menuItem">High Scores</div> | |
| </a> | |
| <br/> | |
| <a href="about.html" class="bareLink"> | |
| <div class="menuItem">About TwitchTetris</div> | |
| </a> | |
| <br/> | |
| <a href="http://www.leighpauls.com" class="bareLink"> | |
| <div class="menuItem">About the Developer</div> | |
| </a> | |
| <br/> | |
| <div class="instructions"> | |
| <b> > TwitchTetris --help </b> | |
| <p>Use the keyboard controls to rotate and move the blocks as they fall</p> | |
| <p>Place the blocks to form horizontal lines, which will be removed and make all the blocks above fall down. If the blocks reach the top of the screen, the game is over!</p> | |
| <p>Clear multiple lines at a time, or clear lines in consective moves to earn more points.</p> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="contentCell"> | |
| <canvas id="dummyCanvas" height="0px" width="0px"></canvas> | |
| <div class="controlsArea"> | |
| <div class="enableCustomDiv"> | |
| Do you want to use a custom control scheme? | |
| <br/> | |
| <br/> | |
| <form> | |
| <input type="radio" name="controlStyle" id="defaultRadio" onchange="setDefaultControls();"/> | |
| <label for="defaultRadio">Default Controls</label><br/> | |
| <input type="radio" name="controlStyle" id="customRadio" onchange="configureCustomControls();"/> | |
| <label for="customRadio">Custom Controls</label><br/> | |
| </form> | |
| <br/> | |
| <div id="instructionsDefault" class="withDisplay"> | |
| To change your controls, select "Custom Controls" from above. | |
| </div> | |
| <div id="instructionsCustom" class="noDisplay"> | |
| Click on the fields on the right to set your controls. | |
| </div> | |
| <div id="instructionsPending" class="noDisplay"> | |
| Press a key to set this field... | |
| </div> | |
| <br/> | |
| </div> | |
| <div class="customControlsDiv"> | |
| <div class="controlsUnit" id="rotateLeftDiv" onclick="controlsUnitClicked('rotateLeft');"> | |
| Rotate Left: <span id="rotateLeftValue" class="controlsValue"></span> | |
| </div> | |
| <div class="controlsUnit" id="rotateRightDiv" onclick="controlsUnitClicked('rotateRight');"> | |
| Rotate Right: <span id="rotateRightValue" class="controlsValue"></span> | |
| </div> | |
| <div class="controlsUnit" id="shiftLeftDiv" onclick="controlsUnitClicked('shiftLeft');"> | |
| Shift Left: <span id="shiftLeftValue" class="controlsValue"></span> | |
| </div> | |
| <div class="controlsUnit" id="shiftRightDiv" onclick="controlsUnitClicked('shiftRight');"> | |
| Shift Right: <span id="shiftRightValue" class="controlsValue"></span> | |
| </div> | |
| <div class="controlsUnit" id="softDropDiv" onclick="controlsUnitClicked('softDrop');"> | |
| Soft Drop: <span id="softDropValue" class="controlsValue"></span> | |
| </div> | |
| <div class="controlsUnit" id="hardDropDiv" onclick="controlsUnitClicked('hardDrop');"> | |
| Hard Drop: <span id="hardDropValue" class="controlsValue"></span> | |
| </div> | |
| <div class="controlsUnit" id="swapDiv" onclick="controlsUnitClicked('swap');"> | |
| Swap Peice: <span id="swapValue" class="controlsValue"></span> | |
| </div> | |
| </div> | |
| <div class="autoRepeatArea"> | |
| Auto-Repeat Times:<br/> | |
| <button onclick="resetAutoRepeat();">Reset Auto-Repeat</button> | |
| <div class="autoRepeatForm"> | |
| <div class="autoRepeatDiv"> | |
| AutoRepeat: <span id="autoRepeatValue"></span> ms <br/> | |
| <input id="autoRepeatRange" type="range" min="15" max="300" value="50" step="5" onchange="updateAutoRepeat();"/> | |
| </div> | |
| <div class="thresholdDiv"> | |
| Repeat Charge: <span id="thresholdValue"></span> ms <br/> | |
| <input id="thresholdRange" type="range" min="15" max="500" value="200" step="5" onchange="updateThreshold();"/> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |