Merge pull request #1 from iiiypuk/v2

v2.0.0

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+package-lock.json

CHANGELOG.md

@@ -0,0 +1,2 @@
+## 2.0.0 [2021-02-25] 
+Init version

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Alexander Popov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1 @@
+

TODO.md

@@ -0,0 +1,2 @@
+[ ] Keyboard fit
+[ ] iOS web app

_media/css/chota.min.css

@@ -0,0 +1 @@
+../../node_modules/chota/dist/chota.min.css

_media/css/styles.css

@@ -0,0 +1,30 @@
+@font-face {
+	font-family: 'F5.6';
+	src: url('/_media/fonts/F5.6-Regular.eot');
+	src: url('/_media/fonts/F5.6-Regular.eot?#iefix') format('embedded-opentype'),
+		url('/_media/fonts/F5.6-Regular.woff2') format('woff2'),
+		url('/_media/fonts/F5.6-Regular.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+:root {
+	/*--font-size: 2rem;*/
+}
+
+body.dark {
+	--bg-color: #000;
+	--bg-secondary-color: #131316;
+	--font-color: #f5f5f5;
+	--color-grey: #ccc;
+	--color-darkGrey: #777;
+}
+
+body {
+	font-family: 'F5.6';
+}
+
+p#word {
+	font-size: 4rem;
+}

_media/js/game.js

@@ -0,0 +1,126 @@
+'use strict';
+
+// keyboard layouts
+const keyboardLayouts = {
+	'usQwertyKeyboard' : 'abcdefghijklmnopqrstuvwxyz'.toUpperCase(),
+	'ruQwertyKeyboard' : 'йцукеёнгшщзхъфывапролджэячсмитьбю'.toUpperCase()
+}
+
+const pageCredits = '\
+	<p class="text-center">Font F5.6 by\
+	  <a href="http://dotcolon.net/">DOT COLON</a>\
+  </p>\
+  \
+  <p class="text-center">UI by\
+  	<a href="https://jenil.github.io/chota/">chota.css</a>\
+  </p>\
+';
+
+const pageStatistics = '';
+
+const words = [
+	'google', 'speed', 'design', 'forest', 'forever', 'love',
+	'horizon', 'defect'
+];
+
+// game variables
+let gameWord = words[Math.floor(Math.random() * words.length)].toUpperCase();
+let gameAnswered = new Array(gameWord.length + 1).join('-');
+let lives = 6;
+
+// Функция генерации html кода клавиатуры
+function generateKeyboard(layout)
+{
+	var keyboardHtmlStr = '';
+
+	layout.split('').forEach(function(letter)
+	{
+		keyboardHtmlStr = keyboardHtmlStr + '<button class="button outline is-marginless" id="' + letter +
+			'" onclick="offChar(\'' + letter + '\')"> ' + letter + '</button>';
+	})
+
+	let keyboard = document.querySelector("#keyboard");
+	keyboard.classList.remove('is-hidden');
+	document.querySelector("#keyboard").innerHTML = keyboardHtmlStr;
+}
+
+function offChar(letter)
+{
+	var charButton = document.getElementById(letter);
+	charButton.disabled = true; 
+
+	var indices = [];
+	var idx = gameWord.split('').indexOf(letter)
+	
+	if (idx == -1)
+	{
+		wrong();
+		return;
+	}
+	
+	while (idx != -1)
+	{
+		indices.push(idx);
+		idx = gameWord.split('').indexOf(letter, idx + 1);
+	}
+
+	indices.forEach(function(item, indices)
+	{
+		var wordArray = gameAnswered.split('')
+		wordArray[item] = letter;
+		gameAnswered = wordArray.join('');
+		document.querySelector("#word").innerHTML = gameAnswered;
+		var wordsAnswered = localStorage.getItem('wordsAnswered');
+		localStorage.setItem('wordsAnswered', parseInt(wordsAnswered) + 1);
+	})
+
+	if (gameAnswered.split('').indexOf('-') == -1)
+	{
+		var gamesWon = localStorage.getItem('gamesWon');
+		localStorage.setItem('gamesWon', parseInt(gamesWon) + 1);
+		alert('You Win');
+		document.location.reload(true);
+	}
+}
+
+function wrong()
+{
+  if (lives <= 0)
+  {
+    var gamesFail = localStorage.getItem('gamesFail');
+    localStorage.setItem('gamesFail', parseInt(gamesFail) + 1);
+    alert('You dead');
+    document.location.reload(true);
+  }
+
+  lives -= 1;
+  document.querySelector("#lives").innerHTML = 'Lives ' + lives;
+}
+
+
+function showPage(element, pageName)
+{
+	// alert(event.srcElement.id);
+
+	['gameButton', 'statsButton', 'creditsButton'].forEach(function(item)
+	{
+		document.querySelector("#" + item).classList.remove('active');
+	});
+	document.querySelector("#" + element.id).classList.add('active');
+
+	document.querySelector("#content").innerHTML = pageName;
+}
+
+
+
+// game
+window.onload = function()
+{
+	generateKeyboard(keyboardLayouts['usQwertyKeyboard']);
+	document.querySelector('#lives').innerHTML = 'Lives ' + lives;
+	console.log('Word:', gameWord.toLowerCase());
+	document.querySelector('#word').innerHTML = gameAnswered;
+
+	// fix load empty word
+	// if (gameWord === 0) { document.location.reload(true); }
+}

docs/README.md

@@ -1 +0,0 @@
-![Screenshot](screen.png)

docs/game.js

@@ -1,96 +0,0 @@
-"use strict";
-
-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('-');
-
-var keyboardLayouts = {
-  'usQwertyKeyboard' : 'abcdefghijklmnopqrstuvwxyz'.toUpperCase(),
-  'ruQwertyKeyboard' : 'йцукеёнгшщзхъфывапролджэячсмитьбю'.toUpperCase()
-}
-
-// Функция генерации html кода клавиатуры
-function generateKeyboard(layout)
-{
-  var htmlKeyboardStr = '';
-
-  keyboardLayouts[layout].split('').forEach(function(word)
-  {
-    htmlKeyboardStr = htmlKeyboardStr + '<button id="' + word +
-      '" onclick="offChar(\'' + word + '\')">' + word + '</button>';
-  })
-
-  document.getElementById("keyboard").innerHTML = htmlKeyboardStr;
-}
-
-window.onload = function()
-{
-  generateKeyboard('usQwertyKeyboard');
-  
-  console.log(gameWord) // for DEBUG
-  document.getElementById("WORD").innerHTML = gameAnswered;
-  document.getElementById("lives").innerHTML = 'Lives ' + lives;
-
-  // init storage
-  var storageNames = ['gamesWon', 'wordsAnswered', 'gamesFail'];
-  storageNames.forEach(function(item)
-  {
-    if(null == localStorage.getItem(item))
-      localStorage.setItem(item, 0);
-  })
-}
-
-function wrong()
-{
-  if (lives <= 0)
-  {
-    var gamesFail = localStorage.getItem('gamesFail');
-    localStorage.setItem('gamesFail', parseInt(gamesFail) + 1);
-    alert('You dead');
-    document.location.reload(true);
-  }
-
-  lives -= 1;
-  document.getElementById("lives").innerHTML = 'Lives ' + lives;
-}
-
-function offChar(char)
-{
-  var charButton = document.getElementById(char);
-  charButton.disabled = true; 
-
-  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);
-  }
-
-  indices.forEach(function(item, indices)
-  {
-    var wordArray = gameAnswered.split('')
-    wordArray[item] = char;
-    gameAnswered = wordArray.join('');
-    document.getElementById("WORD").innerHTML = gameAnswered;
-    var wordsAnswered = localStorage.getItem('wordsAnswered');
-    localStorage.setItem('wordsAnswered', parseInt(wordsAnswered) + 1);
-  })
-
-  if (gameAnswered.split('').indexOf('-') == -1)
-  {
-    var gamesWon = localStorage.getItem('gamesWon');
-    localStorage.setItem('gamesWon', parseInt(gamesWon) + 1);
-    alert('You Win');
-    document.location.reload(true);
-  }
-}

docs/genKeys.py

@@ -1,24 +0,0 @@
-#!/usr/bin/env python3
-
-__author__ = 'Alexander Popov'
-__version__ = '1.0.0'
-__license__ = 'MIT'
-
-usQwertyKeyboard = 'abcdefghijklmnopqrstuvwxyz'.upper()
-
-def genKeys(alphabet):
-        keys = list()
-
-        for letter in alphabet:
-            keys.append(
-              '<button id="{l}" onclick="offChar(\'{l}\')">{l}</button>'
-              .format(l=letter))
-
-        return(keys)
-
-if __name__ == '__main__':
-    with open('keys.html', 'w+', encoding='utf-8') as f:
-        keyboard = genKeys(usQwertyKeyboard)
-
-        for item in keyboard:
-            f.write(item)

docs/index.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html>
-<!--
- /_     ...   _    /_
-/_//_/ ////_//_//_//\
-   _/     _//
--->
-<head>
-  <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">
-  <link rel="stylesheet" type="text/css" href="styles.css">
-</head>
-<body>
-
-  <div class="wrap">
-    <div id="WORD" class="word">
-      LOADING
-    </div>
-
-    <div id="lives" class="lives">
-      ...
-    </div>
-
-    <div id="keyboard" class="keyboard">
-      ...
-    </div>
-
-    <footer>
-      2021 by <a href="//iiiypuk.me/">iiiypuk</a>
-      <p>ver: 0.2.1</p>
-    </footer>
-  </div>
-
-  <script type="text/javascript" src="game.js"></script>
-</body>
-</html>

hgman.py

@@ -1,62 +0,0 @@
-#!/usr/bin/env python3
-
-import sys
-import random
-
-__author__ = 'Alexander Popov'
-__version__ = '1.0.0'
-__license__ = 'MIT'
-
-wordsDb = list()
-
-# for count, line in enumerate(sys.stdin):
-#     if not line in wordsDb:
-#         wordsDb.append(line.rstrip())
-with open('words.txt', 'r', encoding='utf-8') as f:
-    for count, line in enumerate(f.readlines()):
-        if line not in wordsDb:
-            wordsDb.append(line.rstrip())
-
-
-class Player:
-    def __init__(self, gameWord):
-        self.Health = 6
-        self.Word = '-' * len(gameWord)
-
-    def answer(self, newWords=None):
-        if newWords:
-            self.Word = newWords
-        return(self.Word)
-
-    def lives(self):
-        return(self.Health)
-
-    def crap(self):
-        self.Health -= 1
-        pass
-
-gameWord = random.choice(wordsDb)
-Gamer = Player(gameWord)
-
-while Gamer.answer() != gameWord:
-    if Gamer.lives() < 0:
-        print('You are dead')
-        break
-
-    print('%d : %s' % (Gamer.lives(), Gamer.answer(),))
-
-    offWord = input()
-
-    wordIndex = [index for index, char in enumerate(gameWord)
-                 if char == offWord]
-
-    if len(wordIndex) != 0:
-        for index in wordIndex:
-            aaa = list(Gamer.answer())
-            aaa[index] = offWord
-            Gamer.answer("".join(aaa))
-    else:
-        Gamer.crap()
-
-if not Gamer.lives() < 0:
-    print('Won!')

index.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<!--
+ /_     ...   _    /_
+/_//_/ ////_//_//_//\
+   _/     _//
+-->
+<head>
+  <meta charset="utf-8">
+  <title>Hangman</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="_media/css/chota.min.css">
+  <link rel="stylesheet" href="_media/css/styles.css">
+  <link rel="icon" type="image/png" href="_media/img/favicon.png">
+</head>
+<body>
+  <div class="container">
+    <header>
+      <nav class="nav">
+        <div class="nav-left">
+          <a class="brand" href="#">Hangman game</a>
+        </div>
+        <div class="nav-center">
+          <p id="lives" class="button error">loading...</p>
+        </div>
+        <div class="nav-right">
+          <a class="button dropdown">Язык</a>
+          <a class="button dark" id="theme-switch" onclick="switchMode(this)">☀️</a>
+        </div>
+      </nav>
+    </header>
+
+    <nav class="tabs is-full">
+      <a onclick="document.location.reload(true);" class="active" id="gameButton">Game</a>
+      <a onclick="showPage(this, pageStatistics);" id="statsButton">Statistics</a>
+      <a onclick="showPage(this, pageCredits);" id="creditsButton">Credits</a>
+    </nav>
+
+    <br>
+
+    <section id="content">
+      <p id="word" class="card text-center text-uppercase">
+        Loading word...
+      </p>
+
+      <div id="keyboard" class="is-hidden text-center">
+        ... keyboard ...
+      </div>
+    </section>
+
+    <hr>
+    <footer class="text-center">
+      <p class="text-grey is-marginless is-small">
+        by iiiypuk<br>
+        ver: 2.0.0
+      </p>
+    </footer>
+  </div>
+
+  <script>
+    if (window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.body.classList.add('dark');
+    }
+
+    function switchMode(el) {
+      const bodyClass = document.body.classList;
+      bodyClass.contains("dark")
+        ? ((el.innerHTML = "☀️"), bodyClass.remove("dark"))
+        : ((el.innerHTML = "🌙"), bodyClass.add("dark"));
+    }
+
+  </script>
+  <script type="text/javascript" src="_media/js/game.js"></script>
+</body>
+</html>

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "chota": "0.8.0"
+  }
+}

words.txt

@@ -1,3 +0,0 @@
-google
-window
-horizon