dnutiu/ro-hangman
dnutiu/ro-hangman
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implementing Translation & Tweaking Mobile

Browse source
This commit is contained in:
Denis 2015-01-10 13:53:49 +02:00
parent 8718179db1
commit e6f82fcaa8
7 changed files with 289 additions and 265 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

260
src/en/index.html
View file

@ -1,131 +1,133 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head>
<head> <title>Hagman</title>
<title>Hagman</title> <meta charset="utf-8">
<meta charset="utf-8"> <meta http-equiv="author" content="Niutenisu">
<meta http-equiv="author" content="Niutenisu"> <meta name="description" content="Hangman!">
<meta name="description" content="Hangman!"> <meta name="keywords" content="hangman, game, free, online">
<meta name="keywords" content="hangman, game, free, online"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="../favicon.ico">
<link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="../styles/normalize.css">
<link rel="stylesheet" type="text/css" href="../styles/normalize.css"> <link rel="stylesheet" type="text/css" href="../styles/styles.css">
<link rel="stylesheet" type="text/css" href="../styles/styles.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="../sound/ion.sound.min.js"></script>
<script src="../sound/ion.sound.min.js"></script> <script src="../js/words.js"></script>
<script src="../js/words.js"></script> <script src="../js/hangman.js"></script>
<script src="../js/hangman.js"></script> <script src="../js/main_en.js"></script>
<script src="../js/main_en.js"></script> </head>
</head> <body>
<div id="content">
<h1>Hangman!</h1>
<body> <div id="game" class="game" style="display: none;">
<div id="content"> <div class="mobile">
<h1>Hangman!</h1> <h3>Try to guess the word: <span class="word"></span></h3>
<div id="game" class="game" style="display: none;"> <h4>Type the letter here:</h4>
<div class="mobile"> <input name="mobile" type="text">
<h3>Try to guess the word: <span class="word"></span></h3> <h4 class="litera_msg" style="display: none;">You pressed "<span class="litera" style="color: red;"></span>
<h4>Type the letter here:</h4> <span class="litera_msg2"></span></h4>
<input name="mobile" type="text"> <h4 class="litere" style="color: red;"></h4>
<h4 class="litera_msg" style="display: none;">You pressed "<span class="litera" style="color: red;"></span> <select name="lista_cuvinte" class="change_words">
<span class="litera_msg2"></span></h4> <option value="animale_eu">Animals from EU</option>
<h4 class="litere" style="color: red;"></h4> <option value="tari_eu">Country from EU</option>
<select name="lista_cuvinte" class="change_words"> <option value="firme">Companies</option>
<option value="animale_eu">Animals from EU</option> <option value="ldp">Programming Languages</option>
<option value="tari_eu">Country from EU</option> </select>
<option value="firme">Companies</option> <button class="">Switch</button>
<option value="ldp">Programming Languages</option> </div>
</select> <div id="left">
<button class="">Switch</button> <h2>Try to guess the word: <span class="word"></span></h2>
</div> <h3>Type a key, any key!</h3>
<br>
<div id="left"> <h4 class="litera_msg" style="display: none;">You typed "<span class="litera red" style="color: red;"></span>"
<h2>Try to guess the word: <span class="word"></span></h2> <span class="litera_msg2"></span></h4>
<h3>Type a key, any key!</h3> <br>
<br> <br>
<h4 class="litera_msg" style="display: none;">You typed "<span class="litera red" style="color: red;"></span>" <br>
<span class="litera_msg2"></span></h4> <h4>Instructions:</h4>
<br> <p>Try to guess the word, you have 6 tries before you lose.</p>
<br> <br>
<br> <br>
<h4>Instructions:</h4> <h4 class="litere red"></h4>
<p>Try to guess the word, you have 6 tries before you lose.</p> <br>
<br> <br>
<br> <h4>Cuvinte:</h4>
<h4 class="litere red"></h4> <select name="lista_cuvinte" class="change_words">
<br> <option value="animale_eu">Animals from EU</option>
<br> <option value="tari_eu">Country from EU</option>
<h4>Cuvinte:</h4> <option value="firme">Companies</option>
<select name="lista_cuvinte" class="change_words"> <option value="ldp">Programming Languages</option>
<option value="animale_eu">Animals from EU</option> </select>
<option value="tari_eu">Country from EU</option> <button class="">Switch</button>
<option value="firme">Companies</option> </div>
<option value="ldp">Programming Languages</option> <div id="gamewon">
</select> <p>Click the image to play again!</p>
<button class="">Switch</button> <img src="../img/win.png" alt="Winner!" title="YOU'RE WINNER!">
</div> </div>
<div id="gamewon"> <div id="gameover">
<p>Click the image to play again!</p> <p>Click the image to play again!</p>
<img src="../img/win.png" alt="Winner!" title="YOU'RE WINNER!"> <p>The word was: <span class="red" id="lose_word"></span>
</div> </p>
<div id="gameover"> <img src="../img/lose.png" alt="Loser!" title="YOU'RE LOSER!">
<p>Click the image to play again!</p> </div>
<p>The word was: <span class="red" id="lose_word"></span> <div id="right">
</p> <img id="hang" src="../img/hang.png">
<img src="../img/lose.png" alt="Loser!" title="YOU'RE LOSER!"> <img id="human" src="../img/6.png">
</div> <br>
<div id="right"> <h3 id="incercari_msg">Life: <span id="incercari">6</span></h3>
<img id="hang" src="../img/hang.png"> </div>
<img id="human" src="../img/6.png"> </div>
<br> </div>
<h3 id="incercari_msg">Life: <span id="incercari">6</span></h3> <footer>
</div> <div class="footer-content">
</div> <p>
</div> <span>Hangman</span>
<footer> <em>created by</em>
<div class="footer-content"> <span> @<a href="http://www.twitter.com/niutenisu">Niutenisu</a></span>
<p> </p>
<span>Hangman</span> <p class="right">
<em>created by</em> <span><a href="https://github.com/niutenisu/ro-hangman/" alt="Github" title="Github Project Link">Github</a><span>
<span> @<a href="http://www.twitter.com/niutenisu">Niutenisu</a></span> </p>
</p> </div>
<p class="right"> <div class="language_menu">
<span><a href="https://github.com/niutenisu/ro-hangman/" alt="Github" title="Github Project Link">Github</a><span> <a href="#">
</p> <img src="../img/usa.png" alt="English Language" title="English" />
</div> </a>
</footer> <a href="../index.html">
<script> <img src="../img/ro.png" alt="Romanian Language" title="Romana" />
// Sound initialization </a>
ion.sound({ </div>
sounds: [{ </footer>
name: "button_tiny", <script>
volume: 0.8, // Sound initialization
preload: true ion.sound({
}, { sounds: [{
name: "ta_da", name: "button_tiny",
volume: 0.8, volume: 0.8,
preload: true preload: true
}, { }, {
name: "sad_trombone", name: "ta_da",
volume: 0.8, volume: 0.8,
preload: true preload: true
}], }, {
volume: 0.5, name: "sad_trombone",
path: "../sound/sounds/", volume: 0.8,
preload: true preload: true
}); }],
</script> volume: 0.5,
<!-- path: "../sound/sounds/",
<script type="text/javascript"> preload: true
if (window.jQuery) { });
// jQuery is loaded </script>
alert("jQuery is loaded"); <!--
} else { <script type="text/javascript">
// jQuery is not loaded if (window.jQuery) {
alert("jQuery is not loaded"); // jQuery is loaded
</script> alert("jQuery is loaded");
}--> } else {
// jQuery is not loaded
</body> alert("jQuery is not loaded");
</script>
</html> }-->
</body>
</html>

BIN
src/img/ro.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 702 B

BIN
src/img/usa.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 536 B

260
src/index.html
View file

@ -1,131 +1,133 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head>
<head> <title>Spanzuratoarea</title>
<title>Spanzuratoarea</title> <meta charset="utf-8">
<meta charset="utf-8"> <meta http-equiv="author" content="Niutenisu">
<meta http-equiv="author" content="Niutenisu"> <meta name="description" content="Spanzuratoarea in limba romana!">
<meta name="description" content="Spanzuratoarea in limba romana!"> <meta name="keywords" content="spanzuratoarea, joc, gratuit, romana">
<meta name="keywords" content="spanzuratoarea, joc, gratuit, romana"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="shortcut icon" href="favicon.ico">
<link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" type="text/css" href="styles/normalize.css">
<link rel="stylesheet" type="text/css" href="styles/normalize.css"> <link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/styles.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="sound/ion.sound.min.js"></script>
<script src="sound/ion.sound.min.js"></script> <script src="js/words.js"></script>
<script src="js/words.js"></script> <script src="js/hangman.js"></script>
<script src="js/hangman.js"></script> <script src="js/main.js"></script>
<script src="js/main.js"></script> </head>
</head> <body>
<div id="content">
<h1>Spanzuratoarea!</h1>
<body> <div id="game" class="game" style="display: none;">
<div id="content"> <div class="mobile">
<h1>Spanzuratoarea!</h1> <h3>Incearca sa ghicesti cuvantul: <span class="word"></span></h3>
<div id="game" class="game" style="display: none;"> <h4>Introdu aici litera:</h4>
<div class="mobile"> <input name="mobile" type="text">
<h3>Incearca sa ghicesti cuvantul: <span class="word"></span></h3> <h4 class="litera_msg" style="display: none;">Ai apasat pe "<span class="litera" style="color: red;"></span>
<h4>Introdu aici litera:</h4> <span class="litera_msg2"></span></h4>
<input name="mobile" type="text"> <h4 class="litere" style="color: red;"></h4>
<h4 class="litera_msg" style="display: none;">Ai apasat pe "<span class="litera" style="color: red;"></span> <select name="lista_cuvinte" class="change_words">
<span class="litera_msg2"></span></h4> <option value="animale_eu">Animale din Europa</option>
<h4 class="litere" style="color: red;"></h4> <option value="tari_eu">Tari din Europa</option>
<select name="lista_cuvinte" class="change_words"> <option value="firme">Companii</option>
<option value="animale_eu">Animale din Europa</option> <option value="ldp">Limbaje de programare</option>
<option value="tari_eu">Tari din Europa</option> </select>
<option value="firme">Companii</option> <button class="">Schimba</button>
<option value="ldp">Limbaje de programare</option> </div>
</select> <div id="left">
<button class="">Schimba</button> <h2>Incearca sa ghicesti cuvantul: <span class="word"></span></h2>
</div> <h3>Apasa pe o litera de pe tastatura!</h3>
<br>
<div id="left"> <h4 class="litera_msg" style="display: none;">Ai apasat pe "<span class="litera red" style="color: red;"></span>"
<h2>Incearca sa ghicesti cuvantul: <span class="word"></span></h2> <span class="litera_msg2"></span></h4>
<h3>Apasa pe o litera de pe tastatura!</h3> <br>
<br> <br>
<h4 class="litera_msg" style="display: none;">Ai apasat pe "<span class="litera red" style="color: red;"></span>" <br>
<span class="litera_msg2"></span></h4> <h4>Instructiuni:</h4>
<br> <p>Incearca sa ghicesti cuvantul! Ai 6 incercari pana cand vei fi spanzurat</p>
<br> <br>
<br> <br>
<h4>Instructiuni:</h4> <h4 class="litere red"></h4>
<p>Incearca sa ghicesti cuvantul! Ai 6 incercari pana cand vei fi spanzurat</p> <br>
<br> <br>
<br> <h4>Cuvinte:</h4>
<h4 class="litere red"></h4> <select name="lista_cuvinte" class="change_words">
<br> <option value="animale_eu">Animale din Europa</option>
<br> <option value="tari_eu">Tari din Europa</option>
<h4>Cuvinte:</h4> <option value="firme">Companii</option>
<select name="lista_cuvinte" class="change_words"> <option value="ldp">Limbaje de programare</option>
<option value="animale_eu">Animale din Europa</option> </select>
<option value="tari_eu">Tari din Europa</option> <button class="">Schimba</button>
<option value="firme">Companii</option> </div>
<option value="ldp">Limbaje de programare</option> <div id="gamewon">
</select> <p>Da-i click pe imagine pentru a juca din nou!</p>
<button class="">Schimba</button> <img src="./img/win.png" alt="Winner!" title="YOU'RE WINNER!">
</div> </div>
<div id="gamewon"> <div id="gameover">
<p>Da-i click pe imagine pentru a juca din nou!</p> <p>Da-i click pe imagine pentru a juca din nou!</p>
<img src="./img/win.png" alt="Winner!" title="YOU'RE WINNER!"> <p>Cuvantul era: <span class="red" id="lose_word"></span>
</div> </p>
<div id="gameover"> <img src="./img/lose.png" alt="Loser!" title="YOU'RE LOSER!">
<p>Da-i click pe imagine pentru a juca din nou!</p> </div>
<p>Cuvantul era: <span class="red" id="lose_word"></span> <div id="right">
</p> <img id="hang" src="./img/hang.png">
<img src="./img/lose.png" alt="Loser!" title="YOU'RE LOSER!"> <img id="human" src="./img/6.png">
</div> <br>
<div id="right"> <h3 id="incercari_msg">Incercari ramase: <span id="incercari">6</span></h3>
<img id="hang" src="./img/hang.png"> </div>
<img id="human" src="./img/6.png"> </div>
<br> </div>
<h3 id="incercari_msg">Incercari ramase: <span id="incercari">6</span></h3> <footer>
</div> <div class="footer-content">
</div> <p>
</div> <span>Spanzuratoarea</span>
<footer> <em>created by</em>
<div class="footer-content"> <span> @<a href="http://www.twitter.com/niutenisu">Niutenisu</a></span>
<p> </p>
<span>Spanzuratoarea</span> <p class="right">
<em>created by</em> <span><a href="https://github.com/niutenisu/ro-hangman/" alt="Github" title="Github Project Link">Github</a><span>
<span> @<a href="http://www.twitter.com/niutenisu">Niutenisu</a></span> </p>
</p> <div class="language_menu">
<p class="right"> <a href="en/">
<span><a href="https://github.com/niutenisu/ro-hangman/" alt="Github" title="Github Project Link">Github</a><span> <img src="img/usa.png" alt="English Language" title="English" />
</p> </a>
</div> <a href="#">
</footer> <img src="img/ro.png" alt="Romanian Language" title="Romana" />
<script> </a>
// Sound initialization </div>
ion.sound({ </div>
sounds: [{ </footer>
name: "button_tiny", <script>
volume: 0.8, // Sound initialization
preload: true ion.sound({
}, { sounds: [{
name: "ta_da", name: "button_tiny",
volume: 0.8, volume: 0.8,
preload: true preload: true
}, { }, {
name: "sad_trombone", name: "ta_da",
volume: 0.8, volume: 0.8,
preload: true preload: true
}], }, {
volume: 0.5, name: "sad_trombone",
path: "sound/sounds/", volume: 0.8,
preload: true preload: true
}); }],
</script> volume: 0.5,
<!-- path: "sound/sounds/",
<script type="text/javascript"> preload: true
if (window.jQuery) { });
// jQuery is loaded </script>
alert("jQuery is loaded"); <!--
} else { <script type="text/javascript">
// jQuery is not loaded if (window.jQuery) {
alert("jQuery is not loaded"); // jQuery is loaded
</script> alert("jQuery is loaded");
}--> } else {
// jQuery is not loaded
</body> alert("jQuery is not loaded");
</script>
</html> }-->
</body>
</html>

2
src/m/index.html
View file

@ -11,7 +11,7 @@
<link rel="stylesheet" type="text/css" href="./styles.css"> <link rel="stylesheet" type="text/css" href="./styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../sound/ion.sound.min.js"></script> <script src="../sound/ion.sound.min.js"></script>
<script src="../words.js"></script> <script src="words.js"></script>
<script src="./game.js"></script> <script src="./game.js"></script>
</head> </head>
<body> <body>

7
src/m/words.js Normal file
View file

@ -0,0 +1,7 @@
var animale_eu = ["pisica", "caine", "lup", "vulpe", "urs", "caprioara", "vaca", "cal", "oaie", "sobolan", "soarece"];
var tari_eu = ["romania", "moldova", "germania", "spania", "franta", "rusia","italia", "elvetia", "suedia", "norvegia"];
var firme = ["google", "yahoo", "microsoft", "oracle", "amazon", "emag", "ebay", "apple", "siemens", "intel", "toyota", "dacia", "volvo"];
var ldp = ["javascript", "html", "css", "java", "c", "c++", "ruby", "pascal", "lisp", "erlang", "sql", "python", "perl", "lua"];

25
src/styles/styles.css
View file

@ -4,11 +4,11 @@
} }
html, body { html, body {
height: 100%; height: 100%;
}
body {
background-color: #eef7fb; background-color: #eef7fb;
} }
h1 { h1 {
margin: 0;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
-webkit-text-stroke: 1px #375449; -webkit-text-stroke: 1px #375449;
@ -30,7 +30,7 @@ h3, h5 {
color: #3b7998; color: #3b7998;
} }
footer, #content:after { footer, #content:after {
height: 50px; height: 30px;
} }
a { a {
text-decoration: none; text-decoration: none;
@ -48,12 +48,24 @@ footer {
color: #c9e7f3; color: #c9e7f3;
background-color: #8aa3c8; background-color: #8aa3c8;
} }
.language_menu a, img {
padding: 1px;
margin: 1px auto;
display: inline;
}
.language_menu {
display: inline;
padding: 2px;
height: 18px;
width: auto;
}
.game p { .game p {
color: #448aae; color: #448aae;
} }
.game { .game {
padding: 30px; padding: 30px;
margin: 20px 80px 20px; margin: 0 80px;
height: 400px; height: 400px;
border: solid 5px black; border: solid 5px black;
background-color: #C9E7F3; background-color: #C9E7F3;
@ -64,8 +76,8 @@ footer {
#content { #content {
min-height: 100%; min-height: 100%;
/* equal to footer height */ /* equal to footer height */
top: 0;
margin-bottom: -50px; margin-bottom: -30px;
} }
#left { #left {
float: left; float: left;
@ -146,6 +158,7 @@ margin-bottom: -50px;
right: 108px; right: 108px;
} }
.footer-content { .footer-content {
display: inline;
margin: 0px 10px 0px 10px; margin: 0px 10px 0px 10px;
padding-top: 15px; padding-top: 15px;
} }