Shkrubbel for Open Web Camp 3

shkrubbel: a game of letters :: kitt hodsden : @kitt :: open web camp 2011

shkrubbel

Or, how to make a mobile app using web technologies


Hi.


Why?


@snookca


Why not?



div.tile { float: left; }

div.tile { display: grid }

table td


.tile { float: left; width: 3em; height: 3em;}

<div class=“board”> <div class=“tilerow”> <div class=“tile”></div> <div class=“tile”></div> … <div class=“tile last”></div> …</div>


display: grid;

http://caniuse.com/css-gridhttp://dev.w3.org/csswg/css3-grid-align/

http://caniuse.com/css-grid

http://dev.w3.org/csswg/css3-grid-align/


Really now, tables for layout?


styling the board


one giant background image


http://wordswithfriends.com/

http://wordswithfriends.com/


single tile images


http://www.flickr.com/photos/lwr/3034478627/ by Leo Reynolds

http://www.flickr.com/photos/lwr/3034478627/


all CSS, all the time


-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;


http://tileabl.es/


$(’.tile').noisy({ 'intensity' : 1, 'size' : 200, 'opacity' : 0.08, 'fallback' : '', 'monochrome' : false}).css('background-color', '#EDEBDE');

https://github.com/DanielRapp/Noisy


(You may hate me now.)


http://www.fontyukle.net/en/DownLoad-News+Gothic+Std+Medium.ttf


http://www.fontsquirrel.com/fontface/generator



<div class="tile"> <span class="letter">O</span> <span class="val">1</span></div>


<!DOCTYPE html><html><head><script src="js/jquery-1.6.2.js"></script><script src=”js/jquery-ui-1.8.14.js"></script><style>…


$(document).ready(function() { $(".tile").draggable();});



.tile { opacity: .9; background-color: AntiqueWhite; }


$(".tile").draggable( { snap: "#board td" });


.dropped { border: 1px solid red; }

$("#board td").droppable({ drop: function(event, ui) { $(this).addClass("dropped"); ... } }


Keep track of the played tile locations


SHK.board = new Array(15);

…

for (var i = 0; i < 15; i++) { SHK.board[i] = new Array(15); for (var j = 0; j < 15; j++) { SHK.board[i][j] = ''; }}


<div class="tilenum">14</div>

.tilenum { display: none;}


data-* to save the day!


<td id="l1"> <div id="t1" class="tile" data-tilenum="1"> <span class="letter">U</span> <span class="val">2</span> </div> </td>


// if previously placed on a board tile, clear the last positionvar p = ui.helper.data('prevloc');if (ui.helper.data('prevloc')) { var p = ui.helper.data('prevloc'); SHK.board[p[0]][p[1]] = '’;}

// set the new positionui.helper.data('prevloc', [row, col]);


<td id=”r9b"><div class="it"></div></td>

var row = id.substring(1, 2); // 9var col = id.substring(2, 3); // b b = 11, so need to convert from hex to decimal

convert to decimal this way:

parseInt(row, 16);


Submit the word!



rc = 0 or rc = 1, depending on checking for row or column

var t = false;

for (var i in SHK.inplay) { if (i && SHK.inplay[i]) { if (t) { if (t != SHK.inplay[i][rc]) { return false; } } else { t = SHK.inplay[i][rc]; } } }


But is it a word?


localStorage FTW!


// See if the property we want is pre-cached in localStorage if ( window.localStorage !== null && window.localStorage.shkrubbeldict ) { var words = window.localStorage.shkrubbeldict.split("\n"); for ( var i = 0; i < words.length; i++ ) { SHK.dict[words[i]] = true; }…

http://diveintohtml5.org/storage.html


// easy check now… if (SHK.dict[word.toLowerCase()]) { // we have a word!}


did I mention, don’t do this?

read these instead:

http://ejohn.org/blog/dictionary-lookups-in-javascript/http://ejohn.org/blog/javascript-trie-performance-analysis/http://ejohn.org/blog/revised-javascript-dictionary-search/


While we’re here…


for (var i = 0; i < 7; i++) {

// we're using this in several places, so store in var var t = $('#t' + i);

// move the tile back to its starting spot t.animate({'top': '0px', 'left' : '0px'});

// clear the inplay tiles from the board SHK.inplay[i] = false;

// clear the tile from the board var p = t.data('prevloc'); if (p) { SHK.board[p[0]][p[1]] = '';

t.data(‘prevloc’) = ‘’; } }


Wait a second…


http://www.techradar.com/reviews/pc-mac/tablets/apple-ipad-681021/review

http://www.techradar.com/reviews/pc-mac/tablets/apple-ipad-681021/review


O_O


http://phonegap.github.com/weinre


Performance


Send only what you need


And I determine that how?


Server side browser detection?

(Have you seen a recent User-Agent list?)


http://www.user-agents.org/

http://www.user-agents.org/


Feature detection


http://www.modernizr.com/

http://www.modernizr.com/


Media Queries


<link rel="stylesheet" href="theme.css" /><link rel="stylesheet” href="print.css" media="print” />


/* iPhone Portrait */@media screen and (max-width: 320px) { …}

/* iPhone Landscape */@media screen and (min-width: 321px) and (max-width: 480px) { …}

/* iPad */@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { …}


Adapt.jshttp://adapt.960.gs/


Compress files

http://developer.yahoo.com/yui/compressor/http://www.phpied.com/cssmin-js/


Reduce image sizes

http://developer.yahoo.com/yslow/smushit/http://www.imageoptimizer.net/Pages/Home.aspx


Use data URIs if you can


background: url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSAAA…) no-repeat left center; padding: 5px 0 5px 25px;

data:[<mime type>][;charset=<charset>][;base64],<encoded data>


Taking it all offline


Generate a MANIFEST

why:http://diveintohtml5.org/offline.html

http://bit.ly/g01Her (apple.com)

how:https://github.com/jamesgpearce/confess

http://bit.ly/g01Her


Tell the mobile browser about it.


<meta name="apple-mobile-web-app-capable" content="yes" /><link rel="apple-touch-startup-image" href="home.png" /><link rel="apple-touch-icon" href="icon.png" />




Push it


http://shkrubbel.com/https://github.com/kitt/shkrubbel

@shkrubbel


phew!

http://ki.tt/owc3

Technology

Shkrubbel for Open Web Camp 3