From b41ac6d76f9d6b0a4536cdb0d89fb911d7605754 Mon Sep 17 00:00:00 2001 From: Denis Date: Sat, 3 Jan 2015 17:00:51 +0200 Subject: [PATCH] Mobile Site Implementation for mobile site is finished. --- src/game.js | 5 ++ src/m/game.js | 164 +++++++++++++++++++++++++++++++++++++++++++++++ src/m/index.html | 52 +++++++++++++++ src/m/styles.css | 88 +++++++++++++++++++++++++ 4 files changed, 309 insertions(+) create mode 100644 src/m/game.js create mode 100644 src/m/index.html create mode 100644 src/m/styles.css diff --git a/src/game.js b/src/game.js index fcd47e3..2f1fe64 100644 --- a/src/game.js +++ b/src/game.js @@ -1,6 +1,11 @@ //General var MOBILE_WIDH = 930; var WINDOW_W = $(window).width(); +var mobileSiteUrl = "/m"; // relative path +//Redirect to MobileSite +if (WINDOW_W <= MOBILE_WIDH) { + window.location.replace(mobileSiteUrl); +} // Sound initialization ion.sound({ sounds: [{ diff --git a/src/m/game.js b/src/m/game.js new file mode 100644 index 0000000..7c60034 --- /dev/null +++ b/src/m/game.js @@ -0,0 +1,164 @@ +// Sound initialization +ion.sound({ + sounds: [{ + name: "button_tiny", + volume: 0.8, + preload: true + }, { + name: "ta_da", + volume: 0.8, + preload: true + }, { + name: "sad_trombone", + volume: 0.8, + preload: true + } + + ], + volume: 0.5, + path: "../sound/sounds/", + preload: true +}); + +// Get word +// words array located in words.js +var word; +var incercari; +var missArray; +var charArray1; +var charArray2; +var missArray; + +function newGame(wordList) { + + word = wordList[Math.floor(Math.random() * wordList.length)]; + incercari = 6; + charArray1 = []; + charArray2 = []; + missArray = []; + + // Create the arrays + for (var i = 0; i < word.length; i++) { + charArray1[i] = '*'; + } + + for (var i = 0; i < word.length; i++) { + charArray2[i] = word.charAt(i); + } + + // Update page info + $('.word').html(charArray1); + $('#incercari').html(incercari); + $('.litera_msg2').html(); +} + +// DOM Elements & Events +$(document).ready(function() { + //$('.footer-content').append("

Spanzuratoarea created by" + "@Niutenisu

"); + + var listaCuvinte = localStorage.getItem("listaCuvinte"); + if (listaCuvinte != null) { + $("select[name=lista_cuvinte]").val(listaCuvinte); + newGame(eval(listaCuvinte)); + } else { + newGame(animale_eu); + } + + $("select[name=lista_cuvinte]").on("change", function() { + localStorage.setItem("listaCuvinte", $(this).val()); + }).next().click(function() { + // eval for transforming string into object ref!!! + newGame(eval($(this).prev().val())); // POSSIBLE EXPLOIT!! + // prev for mobile <3 + /* On the page are two elements that have select[name=lista_cuvinte] + * We use next() for the button and prev() to get the value of the + * sellection. */ + }); + +}); + +$(document).on("keypress", function(e) { + var key = e.keyCode || e.which; + var key2 = String.fromCharCode(key).toLowerCase(); + + ion.sound.play("button_tiny"); + + $('.litera_msg').fadeIn('slow'); + $('.litera').html(key2); + + //already guessed, check, + if (check(key2)) { + $('.litera_msg2').html("aceasta litera se afla in cuvant."); + updateArray(key2); + $('.word').html(charArray1); + } else { + $('.litera_msg2').html("aceasta litera nu se afla in cuvant."); + + incercari--; + + if (incercari > -1) { + $('#incercari').html(incercari); + updateLetters(key2); + if (incercari == 0) + gameOver(); + } + } + + // check if arrays are equal + if (arraysEqual(charArray1, charArray2)) { + gameWon(); + } +}) + +function gameWon() { + ion.sound.play("ta_da"); + alert("Felicita e tenersi per mano") + window.location.reload(); // mobile + return; + //alert("You're winner!"); +} + +function gameOver() { + ion.sound.play("sad_trombone"); + alert("Ai pierdut! CUVANT: " + word); + window.location.reload(); // for mobile phones + return; // for slower mobile phones + + $('#incercari_msg').html("Game Over!"); + $('#lose_word').html(word); +} + +function check(guess) { + return word.indexOf(guess) > -1; +} + +function updateLetters(guess) { + + var len = missArray.length; + if (!($.inArray(guess, missArray) > -1)) { + missArray[len] = guess; + } + $('.litere').html(missArray + " "); + +} + +function updateArray(guess) { + guess = guess.toLowerCase(); + + for (i = 0; i < charArray1.length; i++) { + if (charArray2[i] == guess) { + charArray1[i] = guess; + } + } +} + +function arraysEqual(a, b) { + if (a === b) return true; + if (a == null || b == null) return false; + if (a.length != b.length) return false; + + for (var i = 0; i < a.length; ++i) { + if (a[i] !== b[i]) return false; + } + return true; +} diff --git a/src/m/index.html b/src/m/index.html new file mode 100644 index 0000000..0e5bb57 --- /dev/null +++ b/src/m/index.html @@ -0,0 +1,52 @@ + + + + Spanzuratoarea + + + + + + + + + + + + + +

+
+
+

Spanzuratoarea

+

Click pe casuta si incepe sa ghicesti literele!

+
+
+

Incearca sa ghicesti cuvantul:

+
+

Introdu aici litera:

+ +

VIATA:

+ +

+
+ + +
+ + + \ No newline at end of file diff --git a/src/m/styles.css b/src/m/styles.css new file mode 100644 index 0000000..a820fea --- /dev/null +++ b/src/m/styles.css @@ -0,0 +1,88 @@ +* { + margin: 0; + padding: 0; +} +html, body { + height: 100%; + font-size: 16px; +} + +body { + background-color: #eef7fb; +} +h1 { + color: #8AD4B8; + -webkit-text-stroke: 1px #375449; + -moz-text-stroke: 1px #375449; + -o-text-stroke: 1px #375449; + text-stroke: 1px #375449; + font-family: "Impact", "Arial Black"; + letter-spacing: 2px; + font-style: oblique; + font-variant: small-caps; + font-size: 2.5em; +} + +.desc { + color: #8AD4B8; + -webkit-text-stroke: 1px #375449; + -moz-text-stroke: 1px #375449; + -o-text-stroke: 1px #375449; + text-stroke: 1px #375449; + font-family: "Courier New", "Courier"; + font-size: 110%; + font-size: 1.3em; +} + +header { + border-bottom: 2px solid #527f6e; + border-top: 2px solid #527f6e; + margin-bottom: 5px; +} + +h1, h2, h3, h4, h5, h6, p { + text-align: center; +} + +a { + text-decoration: none; + font-family: "Trebuchet MS", Helvetica, Arial; + color: #e9f5fa; + font-size: 15px; +} + +footer { + font-family: sans-serif, Helvetica, Verdana; + color: #c9e7f3; + background-color: #8aa3c8; +} + +input[name=mobile] { + background-color: white; + border-style: solid; + padding: 4px; + border-color: #c9e7f3; + outline: none; +} + +.container { + margin: 25px auto; + padding: 5px; + min-width: 10%; + width: 85%; + min-height: 100%; + margin-bottom: -50px; + text-align: center; + font-family: monospace ; + color: #375449; + +} + +.container:after { + content: ""; + display: block; +} + +footer, .container:after { + height: 50px; +} \ No newline at end of file