From bc508119d7bcddcc8f34dfe73f5cef55fee54dfd Mon Sep 17 00:00:00 2001
From: Alexander Popov <iiiypuk@fastmail.fm>
Date: Fri, 17 Feb 2017 04:34:12 +0300
Subject: [PATCH] BTOOM!

---
 html/README.md        |   1 +
 html/Vegur/.gitignore |   1 +
 html/Vegur/README.md  |   1 +
 html/Vegur/vegur.css  |   7 ++++
 html/game.js          |  58 +++++++++++++++++++++++++++
 html/genKeys.py       |   6 ++-
 html/index.html       |  91 ++++--------------------------------------
 html/keys.html        |   1 -
 html/screen.png       | Bin 0 -> 3693 bytes
 html/styles.css       |  56 ++++++++++++++++++++++++++
 10 files changed, 135 insertions(+), 87 deletions(-)
 create mode 100644 html/README.md
 create mode 100644 html/Vegur/.gitignore
 create mode 100644 html/Vegur/README.md
 create mode 100644 html/Vegur/vegur.css
 create mode 100644 html/game.js
 delete mode 100644 html/keys.html
 create mode 100644 html/screen.png
 create mode 100644 html/styles.css

diff --git a/html/README.md b/html/README.md
new file mode 100644
index 0000000..603b336
--- /dev/null
+++ b/html/README.md
@@ -0,0 +1 @@
+![Screenshot](https://raw.githubusercontent.com/iiiypuk/hgman/master/html/screen.png)
diff --git a/html/Vegur/.gitignore b/html/Vegur/.gitignore
new file mode 100644
index 0000000..5b0b552
--- /dev/null
+++ b/html/Vegur/.gitignore
@@ -0,0 +1 @@
+*.otf
diff --git a/html/Vegur/README.md b/html/Vegur/README.md
new file mode 100644
index 0000000..acb6d04
--- /dev/null
+++ b/html/Vegur/README.md
@@ -0,0 +1 @@
+Download from [it](http://dotcolon.net/font/vegur/).
diff --git a/html/Vegur/vegur.css b/html/Vegur/vegur.css
new file mode 100644
index 0000000..ebcd0b0
--- /dev/null
+++ b/html/Vegur/vegur.css
@@ -0,0 +1,7 @@
+@font-face {
+    font-family: 'Vegur';
+    src: url('Vegur-Regular.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+
+}
diff --git a/html/game.js b/html/game.js
new file mode 100644
index 0000000..27139ec
--- /dev/null
+++ b/html/game.js
@@ -0,0 +1,58 @@
+var words = ['google', 'speed', 'window', 'horizon'];
+
+var lives = 6;
+var gameWord = words[Math.floor(Math.random() * words.length)].toUpperCase();
+var gameAnswered = new Array(gameWord.length + 1).join('-')
+
+window.onload = function()
+{
+  console.log(gameWord)
+  document.getElementById("WORD").innerHTML = gameAnswered;
+  document.getElementById("lives").innerHTML = 'Lives ' + lives;
+}
+
+function wrong()
+{
+  lives -= 1;
+  document.getElementById("lives").innerHTML = 'Lives ' + lives;
+}
+
+function offChar(char)
+{
+  var charButton = document.getElementById(char);
+  charButton.disabled = true; 
+
+  if (gameAnswered.split('').indexOf('-') == -1)
+  {
+    alert('You Win');
+    return;
+  }
+
+  if (lives == 0) {
+    alert('You dead');
+    return;
+  }
+
+  var indices = [];
+  var idx = gameWord.split('').indexOf(char)
+  if (idx == -1)
+  {
+    wrong();
+    return;
+  }
+  
+  while (idx != -1)
+  {
+    indices.push(idx);
+    idx = gameWord.split('').indexOf(char, idx + 1);
+  }
+  console.log(indices)
+
+  indices.forEach(function(item, indices)
+  {
+    var wordArray = gameAnswered.split('')
+    wordArray[item] = char;
+    gameAnswered = wordArray.join('');
+    document.getElementById("WORD").innerHTML = gameAnswered;
+  })
+}
diff --git a/html/genKeys.py b/html/genKeys.py
index 53af962..25b78a6 100644
--- a/html/genKeys.py
+++ b/html/genKeys.py
@@ -1,7 +1,7 @@
 #!/usr/bin/env python3
 
 __author__ = 'Alexander Popov'
-__version__ = '0.1.0'
+__version__ = '1.0.0'
 __license__ = 'MIT'
 
 usQwertyKeyboard = 'abcdefghijklmnopqrstuvwxyz'.upper()
@@ -10,7 +10,9 @@ def genKeys(alphabet):
         keys = list()
 
         for letter in alphabet:
-            keys.append('<button onclick="offChar(\'%s\')">%s</button>' % (letter, letter)) # FIX IT
+            keys.append(
+              '<button id="{l}" onclick="offChar(\'{l}\')">{l}</button>'
+              .format(l=letter))
 
         return(keys)
 
diff --git a/html/index.html b/html/index.html
index 16a7117..7e1fc9e 100644
--- a/html/index.html
+++ b/html/index.html
@@ -9,31 +9,8 @@
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title>hgman</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <style type="text/css">
-    body {
-      font-size: 24px;
-    }
-
-    .wrap {
-      max-width: 400px;
-      margin: 10px auto;
-    }
-
-    div.word, div.lives {
-      text-align: center;
-    }
-
-    div.keyboard {
-      text-align: center;
-    }
-
-    div.keyboard button {
-      padding: 8px;
-      border: 1px solid #999;
-      box-sizing: border-box;
-      margin: 2px;
-    }
-  </style>
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  <link rel="stylesheet" type="text/css" href="Vegur/vegur.css">
 </head>
 <body>
 
@@ -47,66 +24,12 @@
     </div>
 
     <div class="keyboard">
-      <button onclick="offChar('A')">A</button><button onclick="offChar('B')">B</button><button onclick="offChar('C')">C</button><button onclick="offChar('D')">D</button><button onclick="offChar('E')">E</button><button onclick="offChar('F')">F</button><button onclick="offChar('G')">G</button><button onclick="offChar('H')">H</button><button onclick="offChar('I')">I</button><button onclick="offChar('J')">J</button><button onclick="offChar('K')">K</button><button onclick="offChar('L')">L</button><button onclick="offChar('M')">M</button><button onclick="offChar('N')">N</button><button onclick="offChar('O')">O</button><button onclick="offChar('P')">P</button><button onclick="offChar('Q')">Q</button><button onclick="offChar('R')">R</button><button onclick="offChar('S')">S</button><button onclick="offChar('T')">T</button><button onclick="offChar('U')">U</button><button onclick="offChar('V')">V</button><button onclick="offChar('W')">W</button><button onclick="offChar('X')">X</button><button onclick="offChar('Y')">Y</button><button onclick="offChar('Z')">Z</button>
-  </div>
+      <button id="A" onclick="offChar('A')">A</button><button id="B" onclick="offChar('B')">B</button><button id="C" onclick="offChar('C')">C</button><button id="D" onclick="offChar('D')">D</button><button id="E" onclick="offChar('E')">E</button><button id="F" onclick="offChar('F')">F</button><button id="G" onclick="offChar('G')">G</button><button id="H" onclick="offChar('H')">H</button><button id="I" onclick="offChar('I')">I</button><button id="J" onclick="offChar('J')">J</button><button id="K" onclick="offChar('K')">K</button><button id="L" onclick="offChar('L')">L</button><button id="M" onclick="offChar('M')">M</button><button id="N" onclick="offChar('N')">N</button><button id="O" onclick="offChar('O')">O</button><button id="P" onclick="offChar('P')">P</button><button id="Q" onclick="offChar('Q')">Q</button><button id="R" onclick="offChar('R')">R</button><button id="S" onclick="offChar('S')">S</button><button id="T" onclick="offChar('T')">T</button><button id="U" onclick="offChar('U')">U</button><button id="V" onclick="offChar('V')">V</button><button id="W" onclick="offChar('W')">W</button><button id="X" onclick="offChar('X')">X</button><button id="Y" onclick="offChar('Y')">Y</button><button id="Z" onclick="offChar('Z')">Z</button>
+    </div>
+
+    <footer>2017 by iiiypuk</footer>
   </div>
 
-  <script type="text/javascript">
-    var words = ['wood', 'speed'];
-
-    var lives = 6;
-    var gameWord = words[Math.floor(Math.random() * words.length)].toUpperCase();
-    var gameAnswered = new Array(gameWord.length + 1).join('-')
-
-    window.onload = function()
-    {
-      console.log(gameWord)
-      document.getElementById("WORD").innerHTML = gameAnswered;
-      document.getElementById("lives").innerHTML = lives;
-    }
-
-    function wrong()
-    {
-      lives -= 1;
-      document.getElementById("lives").innerHTML = lives;
-    }
-
-    function offChar(char)
-    {
-      if (gameAnswered.split('').indexOf('-') == -1)
-      {
-        alert('You Win');
-        return;
-      }
-
-      if (lives == 0) {
-        alert('You dead');
-        return;
-      }
-
-      var indices = [];
-      var idx = gameWord.split('').indexOf(char)
-      if (idx == -1)
-      {
-        wrong();
-        return;
-      }
-      
-      while (idx != -1)
-      {
-        indices.push(idx);
-        idx = gameWord.split('').indexOf(char, idx + 1);
-      }
-      console.log(indices)
-
-      indices.forEach(function(item, indices)
-      {
-        var wordArray = gameAnswered.split('')
-        wordArray[item] = char;
-        gameAnswered = wordArray.join('');
-        document.getElementById("WORD").innerHTML = gameAnswered;
-      })
-    }
-  </script>
+  <script type="text/javascript" src="game.js"></script>
 </body>
 </html>
diff --git a/html/keys.html b/html/keys.html
deleted file mode 100644
index 9d09536..0000000
--- a/html/keys.html
+++ /dev/null
@@ -1 +0,0 @@
-<button onclick="offChar('A')">A</button><button onclick="offChar('B')">B</button><button onclick="offChar('C')">C</button><button onclick="offChar('D')">D</button><button onclick="offChar('E')">E</button><button onclick="offChar('F')">F</button><button onclick="offChar('G')">G</button><button onclick="offChar('H')">H</button><button onclick="offChar('I')">I</button><button onclick="offChar('J')">J</button><button onclick="offChar('K')">K</button><button onclick="offChar('L')">L</button><button onclick="offChar('M')">M</button><button onclick="offChar('N')">N</button><button onclick="offChar('O')">O</button><button onclick="offChar('P')">P</button><button onclick="offChar('Q')">Q</button><button onclick="offChar('R')">R</button><button onclick="offChar('S')">S</button><button onclick="offChar('T')">T</button><button onclick="offChar('U')">U</button><button onclick="offChar('V')">V</button><button onclick="offChar('W')">W</button><button onclick="offChar('X')">X</button><button onclick="offChar('Y')">Y</button><button onclick="offChar('Z')">Z</button>
\ No newline at end of file
diff --git a/html/screen.png b/html/screen.png
new file mode 100644
index 0000000000000000000000000000000000000000..427cbc91019d767f6743c7bdf60a9804e688456d
GIT binary patch
literal 3693
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
RAoo`hWDj?S-LXCs_b-=bwqXDO

literal 0
HcmV?d00001

diff --git a/html/styles.css b/html/styles.css
new file mode 100644
index 0000000..9d86808
--- /dev/null
+++ b/html/styles.css
@@ -0,0 +1,56 @@
+* {
+  margin: 0; padding: 0; outline: 0;
+}
+
+body {
+  color: #032137;
+  background-color: #29516D;
+  font-family: 'Vegur';
+  font-size: 32px;
+}
+
+.wrap {
+  max-width: 400px;
+  margin: 10px auto;
+}
+
+div.word {
+  padding: 8px;
+  border-top: 1px solid #032137;
+}
+
+div.lives {
+  font-size: 24px;
+}
+
+div.word, div.lives {
+  text-align: center;
+}
+
+div.keyboard {
+  text-align: center;
+}
+
+div.keyboard button {
+  color: #032137;
+  font-family: 'Vegur';
+  border-radius: 4px;
+  font-size: 16px;
+  background-color: #708EA4;
+  padding: 8px;
+  border: 1px solid #032137;
+  box-sizing: border-box;
+  margin: 2px;
+}
+
+div.keyboard button:disabled {
+  opacity: 0.5;
+}
+
+footer {
+  border-top: 1px solid #032137;
+  padding: 8px;
+  margin-top: 20px;
+  text-align: center;
+  font-size: 16px;
+}