Permalink
Browse files

Added subtle hints when columns/rows are full but are not compliant w…

…ith the rules.

Added rule sheet.
When a game ends with errors, no longer will the wrong tiles simply light up, but the hint system now kicks in to let you know what rules were broken.
Tutorial slightly modified to better highlight the requirement of unique rows and columns.
Some architectural changes for supporting Windows and Windows Phone 8 using Cordova.
Typo's removed. Added some too probably.
Fonts altered to have the embed flag enabled again.
Added static web worker too for Windows Phone.
  • Loading branch information...
1 parent b9e9b67 commit d0310ec42365e587657503abfa5a5dbda96078fb @mrtnkl mrtnkl committed Nov 14, 2014
View
@@ -1,5 +0,0 @@
-var Config = {
- debug: false,
- tweet: true,
- barph: true
-};
View
@@ -0,0 +1,2 @@
+// placeholder
+window.isWebApp = true;
View
@@ -11,6 +11,8 @@
-webkit-touch-callout: none;
cursor: default;
-webkit-tap-highlight-color: rgba(0,0,0,0);
+ -ms-touch-action: none !important; /* DISABLE DOUBLE-TAP-ZOOM */
+ touch-action: none !important; /* DISABLE DOUBLE-TAP-ZOOM */
}
#feelsize {
position: fixed;
@@ -43,6 +45,9 @@ body {
width: 100%; height: 100%;
right: 0; bottom: 0;
}
+.side-padded {
+ padding: 0 20px;
+}
h1,h2,h3 {
text-align: center;
font-family: 'molle';
@@ -158,6 +163,14 @@ p {
-ms-animation: iconWiggle 2s ease-in-out .5s;
animation: iconWiggle 2s ease-in-out .5s;
}
+
+.iconcon.subtleHint {
+ -webkit-animation: subtleHint 2s ease-in-out infinite;
+ -moz-animation: subtleHint 2s ease-in-out infinite;
+ -ms-animation: subtleHint 2s ease-in-out infinite;
+ animation: subtleHint 2s ease-in-out infinite;
+}
+
.icon {
display: block;
width: 22px; height: 22px;
@@ -171,6 +184,7 @@ p {
#help.icon { background-image: url(../img/eye.png); }
#next.icon { background-image: url(../img/arrow-right.png); }
#tweet.icon { background-image: url(../img/twitter.png); }
+#rules.icon { background-image: url(../img/question.png); }
#bar {
position: absolute;
@@ -454,6 +468,35 @@ html body .show01 .tile .inner:after {
100% { transform: translateY(0); }
}
+@-webkit-keyframes subtleHint {
+ 0% { -webkit-transform: translateY(0); }
+ 25% { -webkit-transform: translateY(-8%); }
+ 50% { -webkit-transform: translateY(0); }
+ 75% { -webkit-transform: translateY(-8%); }
+ 100% { -webkit-transform: translateY(0); }
+}
+@-moz-keyframes subtleHint {
+ 0% { -moz-transform: translateY(0); }
+ 25% { -moz-transform: translateY(-8%); }
+ 50% { -moz-transform: translateY(0); }
+ 75% { -moz-transform: translateY(-8%); }
+ 100% { -moz-transform: translateY(0); }
+}
+@-ms-keyframes subtleHint {
+ 0% { -ms-transform: translateY(0); }
+ 25% { -ms-transform: translateY(-8%); }
+ 50% { -ms-transform: translateY(0); }
+ 75% { -ms-transform: translateY(-8%); }
+ 100% { -ms-transform: translateY(0); }
+}
+@keyframes subtleHint {
+ 0% { transform: translateY(0); }
+ 25% { transform: translateY(-8%); }
+ 50% { transform: translateY(0); }
+ 75% { transform: translateY(-8%); }
+ 100% { transform: translateY(0); }
+}
+
@-webkit-keyframes completed {
from { opacity: 1;}
to { opacity: 0; -webkit-transform: scale(4) }
Binary file not shown.
Binary file not shown.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -69,19 +69,39 @@
<div id="about" class="screen text" data-action="show-menu">
<div class="vertical">
<h3>About</h3>
- <p>
- 0h h1 is a little logic game<br>
- by Q42.<br>
- <br>
- It was created by<br>
- Martin Kool.<br>
- <br>
- The concept is also known<br>
- as Takuzu or Binairo.<br>
- <br>
- (c) 2014<br>
- www.q42.com
- </p>
+ <div class="side-padded">
+ <p>
+ 0h h1 is a little logic game<br>
+ by Q42. <span id="app">If you like, you can also get the free 0h h1 app.</span><br>
+ <br>
+ It was created by<br>
+ Martin Kool.<br>
+ <br>
+ The concept is also known<br>
+ as Takuzu or Binairo.<br>
+ <br>
+ (c) 2014<br>
+ www.q42.com &middot; 0hh1.com
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <div id="rules" class="screen text" data-action="show-game">
+ <div class="vertical">
+ <h3>Rules</h3>
+ <div class="side-padded">
+ <p>
+ Three adjacent tiles of the same color
+ in a row or column isn't allowed.
+ </p>
+ <p>
+ Rows and columns have an equal number of each color.
+ </p>
+ <p>
+ No two rows and no two columns are the same.
+ </p>
+ </div>
</div>
</div>
@@ -117,6 +137,7 @@ <h2 id="boardsize"></h2>
<div class="iconcon" data-action="back"><div id="back" class="icon"></div></div>
<a class="iconcon" id="tweeturl" target="_blank" href="about:blank" data-action="tweet"><span id="tweet" class="icon"></span></a>
<div class="iconcon" data-action="help"><div id="help" class="icon"></div></div>
+ <div class="iconcon" data-action="rules"><div id="rules" class="icon"></div></div>
</div>
</div>
</div>
@@ -133,25 +154,18 @@ <h2 id="boardsize"></h2>
}
};
</script>
- <script type="text/javascript" src="config.js"></script>
+ <script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
- <script>
- var scripts = [
- 'js/jquery-2.1.0.min.js',
- 'js/utils.js',
- 'js/state.js',
- 'js/game.js',
- 'js/grid.js',
- 'js/tile.js',
- 'js/hint.js',
- 'js/tutorial.js',
- 'js/webfont.js',
- 'js/levels.js',
- 'js/backgroundservice.js'
- ]
- for (var i=0; i<scripts.length; i++) {
- document.write('<scr'+'ipt src="' + scripts[i] + (Config.barph? ('?barph=' + (new Date() * 1)) : '') + '"></scr'+'ipt>');
- }
- </script>
+ <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
+ <script type="text/javascript" src="js/utils.js"></script>
+ <script type="text/javascript" src="js/state.js"></script>
+ <script type="text/javascript" src="js/game.js"></script>
+ <script type="text/javascript" src="js/grid.js"></script>
+ <script type="text/javascript" src="js/tile.js"></script>
+ <script type="text/javascript" src="js/hint.js"></script>
+ <script type="text/javascript" src="js/tutorial.js"></script>
+ <script type="text/javascript" src="js/webfont.js"></script>
+ <script type="text/javascript" src="js/levels.js"></script>
+ <script type="text/javascript" src="js/backgroundservice.js"></script>
</body>
</html>
@@ -8,7 +8,7 @@
*/
var BackgroundService = new (function() {
var self = this,
- enabled = (window.Blob && window.Worker)? true : false,
+ enabled = (window.Worker && (window.Blob || window.MSApp))? true : false,
worker = null;
if (Game.debug)
@@ -49,15 +49,25 @@ var BackgroundService = new (function() {
}
function createWorker() {
- var js = [
- Utility,State,Grid,Tile,generateGridAndSolution,
- '\nvar Utils = new Utility();',
- '\nfunction Hint() { this.active = false; }',
- 'self.onmessage = function(e) {generateGridAndSolution(e.data.size)};'
- ].join('');
+ if (window.MSApp) {
+ worker = new Worker('js/win-webworker.js');
+ if (Game.debug)
+ console.log('Web worker created statically')
+ }
+ // otherwise generate worker on the fly based on existing code
+ else {
+ if (Game.debug)
+ console.log('Web worker created on the fly')
+ var js = [
+ Utility,State,Grid,Tile,generateGridAndSolution,
+ '\nvar Utils = new Utility();',
+ '\nfunction Hint() { this.active = false; }',
+ 'self.onmessage = function(e) {generateGridAndSolution(e.data.size)};'
+ ].join('');
- var blob = new Blob([js], { type: "text/javascript" });
- worker = new Worker(window.URL.createObjectURL(blob));
+ var blob = new Blob([js], { type: "text/javascript" });
+ worker = new Worker(window.URL.createObjectURL(blob));
+ }
worker.onmessage = function(e) {
var puzzle = JSON.parse(e.data);
onPuzzleGenerated(puzzle);
Oops, something went wrong.

0 comments on commit d0310ec

Please sign in to comment.