index.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. <html>
  2. <head><title>VGS</title>
  3. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script></head>
  4. <body>
  5. <p>Just start typing! Try "VGS"</p>
  6. <div id="display"></div>
  7. <br />
  8. <div id="suggest"></div>
  9. <script type="text/javascript">
  10. var commands = ['VAA',
  11. 'VAB',
  12. 'VAC',
  13. 'VAD',
  14. 'VAF',
  15. 'VAR',
  16. 'VAW',
  17. 'VBC',
  18. 'VBE',
  19. 'VBR',
  20. 'VBS',
  21. 'VCA',
  22. 'VCC',
  23. 'VCD',
  24. 'VCW',
  25. 'VDB',
  26. 'VDC',
  27. 'VDE',
  28. 'VDF',
  29. 'VDM',
  30. 'VDR',
  31. 'VED',
  32. 'VFD',
  33. 'VFF',
  34. 'VFG',
  35. 'VFR',
  36. 'VFS',
  37. 'VFT',
  38. 'VGB',
  39. 'VGCA',
  40. 'VGCG',
  41. 'VGCN',
  42. 'VGCS',
  43. 'VGCY',
  44. 'VGH',
  45. 'VGN',
  46. 'VGO',
  47. 'VGQ',
  48. 'VGRA',
  49. 'VGRD',
  50. 'VGRT',
  51. 'VGRW',
  52. 'VGS',
  53. 'VGTA',
  54. 'VGTB',
  55. 'VGTG',
  56. 'VGTT',
  57. 'VGTW',
  58. 'VGW',
  59. 'VGY',
  60. 'VNC',
  61. 'VNE',
  62. 'VNS',
  63. 'VNW',
  64. 'VSAA',
  65. 'VSAB',
  66. 'VSAF',
  67. 'VSDB',
  68. 'VSDD',
  69. 'VSDF',
  70. 'VSRB',
  71. 'VSTC',
  72. 'VSTD',
  73. 'VSTO',
  74. 'VTA',
  75. 'VTB',
  76. 'VTD',
  77. 'VTF',
  78. 'VTM',
  79. 'VTN',
  80. 'VTW',
  81. 'VVA',
  82. 'VVB',
  83. 'VVC',
  84. 'VVD',
  85. 'VVH',
  86. 'VVM',
  87. 'VVN',
  88. 'VVS',
  89. 'VVT',
  90. 'VVW',
  91. 'VVY',
  92. ];
  93. $(document).ready(function(){
  94. document.addEventListener("keydown", keyDown, true);
  95. buildCommands();
  96. });
  97. var buildCommands = function() {
  98. commands.forEach(command => {
  99. var audioNode = document.createElement("audio");
  100. audioNode.id = command;
  101. let mp3Source = document.createElement("source");
  102. mp3Source.src = `${command}.mp3`;
  103. mp3Source.type = "audio/mpeg";
  104. audioNode.appendChild(mp3Source);
  105. let oggSource = document.createElement("source");
  106. oggSource.src = `${command}.ogg`;
  107. oggSource.type = "audio/ogg";
  108. audioNode.appendChild(mp3Source);
  109. document.body.appendChild(audioNode);
  110. });
  111. };
  112. var keyDown = function(event){
  113. var display = $("#display");
  114. var suggestion = $("#suggest");
  115. if (event.keyCode == 27) {
  116. display.text("");
  117. } else {
  118. display.append(String.fromCharCode(event.keyCode));
  119. var displayContents = display.text();
  120. if(isValid(displayContents)) {
  121. suggestion.html("<ul>" + suggestNextCommand(displayContents) + "</ul>");
  122. }
  123. if(inCommandsList(displayContents)) {
  124. $("#" + displayContents).get(0).play();
  125. display.text("");
  126. suggestion.html("");
  127. }
  128. if(!isValid(displayContents)) {
  129. display.text("");
  130. suggestion.html("");
  131. }
  132. }
  133. };
  134. var inCommandsList = function(input) {
  135. for(var i = 0; i < commands.length; i++) {
  136. if(input == commands[i]) {return true;}
  137. };
  138. return false;
  139. };
  140. var isValid = function(input) {
  141. if(input.charAt(0) == "V" && input.length < 5) {
  142. return true;
  143. }
  144. return false;
  145. };
  146. var suggestNextCommand = function(input) {
  147. var filteredCommands = [];
  148. var displayFilteredCommands = "";
  149. for(var i = 0; i < commands.length; i++) {
  150. if (commands[i].indexOf(input) == 0) {
  151. filteredCommands.push(commands[i]);
  152. displayFilteredCommands += "<li>"+ commands[i] +"</li>";
  153. }
  154. }
  155. return displayFilteredCommands;
  156. };
  157. console.log("Mornin' Jeramie! Try these!");
  158. console.log(commands);
  159. </script>
  160. <div id="footer">
  161. <p>Contact: <a href="mailto:eyeofmidas@gmail.com">eyeofmidas@gmail.com</a></p>
  162. <script>
  163. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  164. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  165. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  166. })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  167. ga('create', 'UA-50800317-1', 'eyeofmidas.com');
  168. ga('send', 'pageview');
  169. </script>
  170. </div>
  171. </body>
  172. </html>