Use CSS instead of coordinate for positionning, play squeletton

11 files changed, 236 insertions, 130 deletions

diff --git a/html/app.js b/html/app.js
index b54cd9c..beee00a 100644
--- a/html/app.js
+++ b/html/app.js
@@ -38,12 +38,17 @@ enyo.kind({
 		Abcd.sound.play(soundThemes[this.soundindex]);
 	},
 	
-	// Play learn game
+	// Play games
 	learnGame: function(e, s) {
 		Abcd.sound.pause();	
 		Abcd.context.screen = new Abcd.Learn().renderInto(document.getElementById("body"));	
 	},
 	
+	playGame: function(e, s) {
+		Abcd.sound.pause();	
+		Abcd.context.screen = new Abcd.Play().renderInto(document.getElementById("body"));	
+	},
+		
 	// Sound ended, play next instrument
 	endOfSound: function(e, s) {
 		if (s == soundThemes[this.soundindex])
diff --git a/html/buttons.js b/html/buttons.js
new file mode 100644
index 0000000..3384e7c
--- /dev/null
+++ b/html/buttons.js
@@ -0,0 +1,94 @@
+
+
+// Go home button
+enyo.kind({
+	name: "Abcd.HomeButton",
+	kind: enyo.Control,
+	components: [
+		{name: "home", kind: "Image", src: "images/home.png", classes: "backButton", ontap: "goHome"},
+	],
+	
+	// Constructor
+	rendered: function() {
+		this.inherited(arguments);
+	},
+
+	// Go back home
+	goHome: function() {
+		Abcd.goHome();
+	}	
+});
+
+
+// Switch case button
+var caseVisibilityTab = [
+	{switchToLower: false, switchToUpper: true, switchToScript: false},
+	{switchToLower: false, switchToUpper: false, switchToScript: true},
+	{switchToLower: true, switchToUpper: false, switchToScript: false}
+];
+
+enyo.kind({
+	name: "Abcd.CaseButton",
+	kind: enyo.Control,
+	classes: "switchCase",
+	components: [
+		{name: "switchToUpper", kind: "Image", src: "images/case0.png", classes: "switchCaseButton", ontap: "localUpper"},			
+		{name: "switchToScript", kind: "Image", src: "images/case1.png", showing: false, classes: "switchCaseButton", ontap: "localScript"},			
+		{name: "switchToLower", kind: "Image", src: "images/case2.png", showing: false, classes: "switchCaseButton", ontap: "localLower"},			
+	],
+	
+	// Constructor
+	rendered: function() {
+		this.inherited(arguments);
+		Abcd.changeVisibility(this, caseVisibilityTab[Abcd.context.casevalue]);
+	},
+	
+	// Change current case
+	localUpper: function() {
+		Abcd.changeVisibility(this, caseVisibilityTab[1]);
+		Abcd.setCase(1);
+	},
+	
+	localLower: function() {
+		Abcd.changeVisibility(this, caseVisibilityTab[0]);
+		Abcd.setCase(0);
+	},
+	
+	localScript: function() {
+		Abcd.changeVisibility(this, caseVisibilityTab[2]);	
+		Abcd.setCase(2);
+	}
+});
+
+
+
+// Switch language button
+enyo.kind({
+	name: "Abcd.LanguageButton",
+	kind: enyo.Control,
+	classes: "switchLang",
+	components: [
+		{name: "switchToFrench", kind: "Image", src: "images/us.png", showing: false, classes: "switchLangButton", ontap: "localFrench"},
+		{name: "switchToEnglish", kind: "Image", src: "images/fr.png", classes: "switchLangButton", ontap: "localEnglish"}	
+	],
+	
+	// Constructor
+	rendered: function() {
+		this.inherited(arguments);
+		if (Abcd.context.lang == 'en')
+			Abcd.changeVisibility(this, {switchToEnglish: false, switchToFrench: true});
+		else
+			Abcd.changeVisibility(this, {switchToEnglish: true, switchToFrench: false});
+	},
+	
+	// Change current language
+	localEnglish: function() {
+		Abcd.changeVisibility(this, {switchToEnglish: false, switchToFrench: true});
+		Abcd.setLocale(Abcd.enTexts);
+	},
+	
+	localFrench: function() {
+		Abcd.changeVisibility(this, {switchToEnglish: true, switchToFrench: false});
+		Abcd.setLocale(Abcd.frTexts);
+	}
+});	
\ No newline at end of file
diff --git a/html/depends.js b/html/depends.js
index 9abc8ba..593a50a 100644
--- a/html/depends.js
+++ b/html/depends.js
@@ -2,13 +2,15 @@
 	"sugar.js",	
 	"util.js",
 	"database.js",
-	"l10n.js",		
+	"l10n.js",
 	"audio.js",
 	"item.js",
 	"entry.js",
 	"collection.js",
 	"theme.js",
-	"letter.js",	
+	"letter.js",
+	"buttons.js",
 	"learn.js",
+	"play.js",
 	"app.js"
 );
diff --git a/html/images/build.png b/html/images/build.png
index e26a2dd..350c586 100644
--- a/html/images/build.png
+++ b/html/images/build.png
diff --git a/html/images/play.png b/html/images/play.png
index ac826f9..09f3fa4 100644
--- a/html/images/play.png
+++ b/html/images/play.png
diff --git a/html/item.js b/html/item.js
index 9bb1107..5a7c625 100644
--- a/html/item.js
+++ b/html/item.js
@@ -2,7 +2,7 @@
 enyo.kind({
 	name: "Abcd.Item",
 	kind: enyo.Control,
-	published: { x: 0, y: 0, z: 0 },
+	published: { x: -1, y: -1, z: -1 },
 	
 	// Constructor
 	create: function() {
@@ -19,17 +19,17 @@ enyo.kind({
 	
 	// Coordinate setup
 	xChanged: function() {
-		this.applyStyle("margin-left", this.x+"px");
+		if (this.x != -1) this.applyStyle("margin-left", this.x+"px");
 	},
 	
 	// Coordinate setup
 	yChanged: function() {
-		this.applyStyle("margin-top", this.y+"px");
+		if (this.y != -1) this.applyStyle("margin-top", this.y+"px");
 	},
 	
 	// Coordinate setup
-	zChanged: function() {
-		this.applyStyle("z-index", this.z);
+	zChanged: function() {	
+		if (this.z != -1) this.applyStyle("z-index", this.z);
 	},
 	
 	// Change position
diff --git a/html/learn.js b/html/learn.js
index 899ec36..0dde736 100644
--- a/html/learn.js
+++ b/html/learn.js
@@ -1,12 +1,8 @@
 
 
 // Collections size on the screen
-var viewConst = {
-	themes: { x: 60, y: 70, dx: 260},
-	letters: { x: 90, y: 350, dx: 80, dy: 80, line: 12},
-	collections: { x: 30, y: 50, dx: 280, dy: 100, line: 4},
-	entries: { x: 70, y: 50, dx: 260, dy: 250, line: 4, screen: 8}
-};
+var entriesByScreen = 8;
+
 
 
 // Learn app class
@@ -17,14 +13,11 @@ enyo.kind({
 	components: [
 		{components: [
 			{name: "colorBar", classes: "colorBar"},
-			{name: "home", kind: "Image", src: "images/home.png", classes: "backButton", ontap: "goHome"},			
+			{name: "home", kind: "Abcd.HomeButton"},
 			{name: "startSlideshow", kind: "Image", src: "images/slideshow.png", showing: false, ontap: "startSlideshow", classes: "slideshow"},
 			{name: "stopSlideshow", kind: "Image", src: "images/pause.png", showing: false, ontap: "stopSlideshow", classes: "slideshow"},
-			{name: "switchToUpper", kind: "Image", src: "images/case0.png", ontap: "localUpper", classes: "switchCase"},			
-			{name: "switchToScript", kind: "Image", src: "images/case1.png", showing: false, ontap: "localScript", classes: "switchCase"},			
-			{name: "switchToLower", kind: "Image", src: "images/case2.png", showing: false, ontap: "localLower", classes: "switchCase"},			
-			{name: "switchToFrench", kind: "Image", src: "images/us.png", showing: false, ontap: "localFrench", classes: "switchLang"},
-			{name: "switchToEnglish", kind: "Image", src: "images/fr.png", ontap: "localEnglish", classes: "switchLang"}
+			{kind: "Abcd.CaseButton"},
+			{kind: "Abcd.LanguageButton"}
 		]},
 		{components: [
 			{name: "pageCount", content: "-/-", classes: "pageCount", showing: false},
@@ -80,38 +73,23 @@ enyo.kind({
 		// Display themes
 		this.theme = -1;
 		var length = Abcd.themes.length;
-		var x = viewConst.themes.x;
-		var y = viewConst.themes.y;
 		this.cleanBox();
-		this.$.home.show();
-		this.$.back.hide();
-		this.$.prev.hide();
-		this.$.next.hide();
-		this.$.pageCount.hide();
+		this.$.box.addClass("box-4-theme");
+		Abcd.changeVisibility(this, {home: true, back: false, prev: false, next: false, pageCount: false});
 		this.$.colorBar.addClass("themeColor"+this.theme);
 		for (var i = 0 ; i < length ; i++) {
 			this.$.box.createComponent(
-				{ kind: "Abcd.Theme", index: i, x: x, y: y, ontap: "displayCollections" },
+				{ kind: "Abcd.Theme", index: i, ontap: "displayCollections" },
 				{ owner: this }
 			).render();
-			x = x + viewConst.themes.dx;
 		}	
 		
 		// Display letters
-		x = viewConst.letters.x;
-		y = viewConst.letters.y;
-		var count = 0;
 		for (var i = 0 ; i < 26 ; i++) {
 			this.$.box.createComponent(
-				{ kind: "Abcd.Letter", x: x, y: y, letter: String.fromCharCode(65+i), ontap: "displayLetters" },
+				{ kind: "Abcd.Letter", letter: String.fromCharCode(65+i), ontap: "displayLetters" },
 				{ owner: this }
-			).render();
-			x = x + viewConst.letters.dx;
-			if (++count % viewConst.letters.line == 0) {
-				y = y + viewConst.letters.dy;
-				x = viewConst.letters.x;
-				if ( i == 23 ) x = x + (viewConst.letters.dx * 5);
-			}			
+			).render();			
 		}
 	},
 	
@@ -119,33 +97,22 @@ enyo.kind({
 	displayCollections: function(inSender, inEvent) {
 		this.theme = inSender.index;	
 		var length = Abcd.collections.length;
-		var x = viewConst.collections.x;
-		var y = viewConst.collections.y;
-		var count = 0;
 		this.cleanBox();
-		this.$.home.hide();		
-		this.$.back.show();
-		this.$.prev.hide();
-		this.$.next.hide();
-		this.$.pageCount.hide();		
-		this.$.startSlideshow.hide();
-		this.$.stopSlideshow.hide();		
+		Abcd.changeVisibility(this, {home: false, back: true, prev: false, next: false, pageCount: false, startSlideshow: false, stopSlideshow: false});
 		this.$.colorBar.removeClass("themeColor-1");		
-		this.$.colorBar.addClass("themeColor"+this.theme);		
+		this.$.colorBar.addClass("themeColor"+this.theme);
+		this.$.box.removeClass("box-4-theme");
+		this.$.box.addClass("box-4-collection");
 		for (var i = 0 ; i < length ; i++) {
 			if (Abcd.collections[i].theme != this.theme) continue;
-			this.$.box.createComponent({ kind: "Abcd.Collection", index: i, x: x, y: y, ontap: "displayEntries"}, {owner: this}).render();
-			x = x + viewConst.collections.dx;
-			if (++count % viewConst.collections.line == 0) {
-				y = y + viewConst.collections.dy;
-				x = viewConst.collections.x;
-			}
+			this.$.box.createComponent({ kind: "Abcd.Collection", index: i, ontap: "displayEntries"}, {owner: this}).render();
 		}
 	},
 	
 	// Display entries in a collection
 	displayEntries: function(inSender, inEvent) {
 		// Get items in collection
+		this.$.box.removeClass("box-4-collection");		
 		var index = inSender.index;		
 		this.collection = Abcd.collections[index];
 		this.collections = [];
@@ -162,6 +129,9 @@ enyo.kind({
 		
 	// Display entries from a letter
 	displayLetters: function(inSender, inEvent) {
+		// Play letter sound
+		inSender.play(Abcd.sound);
+		
 		// Get items with this letters
 		if (Abcd.letters[inSender.letter] === undefined)
 			return;
@@ -170,32 +140,28 @@ enyo.kind({
 
 		// Display it
 		this.theme = 4;
-		this.$.colorBar.addClass("themeColor"+this.theme);		
+		this.$.colorBar.addClass("themeColor"+this.theme);
+		this.$.box.removeClass("box-4-theme");		
 		this.displayEntriesFrom(0);
 	},	
 	
 	displayEntriesFrom: function(position) {
-		var x = viewConst.entries.x;
-		var y = viewConst.entries.y;
-		var count = 0;
+		// Prepare header
 		this.cleanBox();
-		this.$.home.hide();		
-		this.$.back.show();
-		this.$.startSlideshow.show();
-		this.$.stopSlideshow.hide();
-		this.$.pageCount.show();		
+		this.$.box.addClass("box-4-entry");
+		Abcd.changeVisibility(this, {home: false, back: true, pageCount: true, startSlideshow: true, stopSlideshow: false});
+		
+		// Draw N entries
 		length = this.collections.length;
+		var count = 0;
 		for (var i = position ; i < length ; i++) {
-			this.$.box.createComponent({ kind: "Abcd.Entry", index:this.collections[i], x: x, y: y, ontap: "play", onEntrySoundEnded: "soundEnd"}, {owner: this}).render();
-			x = x + viewConst.entries.dx;
-			if (++count % viewConst.entries.line == 0) {
-				y = y + viewConst.entries.dy;
-				x = viewConst.entries.x;
-			}
-			this.entry = i;			
-			if (count == viewConst.entries.screen)
+			this.$.box.createComponent({ kind: "Abcd.Entry", index:this.collections[i], ontap: "play", onEntrySoundEnded: "soundEnd"}, {owner: this}).render();
+			this.entry = i;		
+			if (++count == entriesByScreen)
 				break;
 		}	
+		
+		// Change button visibility and counter
 		if (position != 0) 
 			this.$.prev.show();
 		else
@@ -204,7 +170,7 @@ enyo.kind({
 			this.$.next.show();	
 		else
 			this.$.next.hide();	
-		this.$.pageCount.setContent(Math.ceil(i/viewConst.entries.screen)+"/"+Math.ceil(length/viewConst.entries.screen));
+		this.$.pageCount.setContent(Math.ceil(i/entriesByScreen)+"/"+Math.ceil(length/entriesByScreen));
 	},
 	
 	displayNextEntries: function() {
@@ -214,16 +180,18 @@ enyo.kind({
 	},
 	
 	displayPrevEntries: function() {
-		this.displayEntriesFrom(Math.max(0,this.entry-viewConst.entries.screen-this.entry%viewConst.entries.screen));
+		this.displayEntriesFrom(Math.max(0,this.entry-entriesByScreen-this.entry%entriesByScreen));
 	},
 	
 	backTaped: function() {
 		var current = this.$.box.getControls()[0];
 		if (current.kind == "Abcd.Entry" && this.collection.kind === undefined) {
 			this.displayCollections({index: this.theme});
+			this.$.box.removeClass("box-4-entry");
 			return;
 		}
-		this.$.colorBar.removeClass("themeColor"+this.theme);		
+		this.$.colorBar.removeClass("themeColor"+this.theme);
+		this.$.box.removeClass("box-4-collection");
 		this.displayThemes();	
 	},
 	
@@ -238,54 +206,17 @@ enyo.kind({
 		}	
 	},
 	
-	// Change current language
-	localEnglish: function() {
-		this.$.switchToEnglish.hide();
-		this.$.switchToFrench.show();
-		Abcd.setLocale(Abcd.enTexts);
-	},
-	
-	localFrench: function() {
-		this.$.switchToEnglish.show();
-		this.$.switchToFrench.hide();
-		Abcd.setLocale(Abcd.frTexts);
-	},
-	
-	// Change current case
-	localUpper: function() {
-		this.$.switchToLower.hide();
-		this.$.switchToUpper.hide();	
-		this.$.switchToScript.show();	
-		Abcd.setCase(1);
-	},
-	
-	localLower: function() {
-		this.$.switchToLower.hide();
-		this.$.switchToUpper.show();	
-		this.$.switchToScript.hide();	
-		Abcd.setCase(0);
-	},
-	
-	localScript: function() {
-		this.$.switchToLower.show();
-		this.$.switchToUpper.hide();	
-		this.$.switchToScript.hide();	
-		Abcd.setCase(2);
-	},
-	
 	// Slideshow handling
 	startSlideshow: function(inSender, inObject) {
 		this.slideshowIndex = 0;
-		this.$.startSlideshow.hide();
-		this.$.stopSlideshow.show();
+		Abcd.changeVisibility(this, {startSlideshow: false, stopSlideshow: true});
 		var first = this.$.box.getControls()[this.slideshowIndex];		
 		this.play(first);
 	},
 
 	stopSlideshow: function(inSender, inObject) {
 		this.slideshowIndex = -1;
-		this.$.startSlideshow.show();
-		this.$.stopSlideshow.hide();		
+		Abcd.changeVisibility(this, {startSlideshow: true, stopSlideshow: false});		
 	},
 		
 	// Play entry sound
@@ -305,10 +236,5 @@ enyo.kind({
 			else
 				this.stopSlideshow();
 		}
-	},
-	
-	// Go back home
-	goHome: function() {
-		Abcd.goHome();
 	}
 });
diff --git a/html/letter.js b/html/letter.js
index 5d6b34f..431e052 100644
--- a/html/letter.js
+++ b/html/letter.js
@@ -29,5 +29,10 @@ enyo.kind({
 	letterChanged: function() {
 		this.letter = this.letter.toLowerCase()	
 		this.$.itemImage.setAttribute("src", "images/letters/"+this.letter+Abcd.context.casevalue+".png");
-	}
+	},
+	
+	// Play sound for this letter
+	play: function(media) {	
+		media.play("audio/"+Abcd.context.lang+"/database/upper_"+this.letter.toUpperCase());
+	}	
 });	
\ No newline at end of file
diff --git a/html/play.js b/html/play.js
new file mode 100644
index 0000000..d0d2695
--- /dev/null
+++ b/html/play.js
@@ -0,0 +1,28 @@
+
+
+// Learn app class
+enyo.kind({
+	name: "Abcd.Play",
+	kind: enyo.Control,
+	classes: "board",
+	components: [
+		{components: [
+			{name: "home", kind: "Abcd.HomeButton"},
+			{kind: "Abcd.CaseButton"},
+			{kind: "Abcd.LanguageButton"}
+		]}
+	],
+	
+	// Constructor, save home
+	create: function() {
+		this.inherited(arguments);
+	},
+	
+	// Localization changed
+	setLocale: function() {
+	},
+	
+	// Case changed
+	setCase: function() {
+	}	
+});
diff --git a/html/styles.css b/html/styles.css
index df59f96..71cbb78 100644
--- a/html/styles.css
+++ b/html/styles.css
@@ -44,6 +44,7 @@
 }
 
 .board {
+	max-width: 1200px;
 }
 
 .colorBar {
@@ -67,16 +68,24 @@
 	position: absolute;
 	width: 50px;
 	height: 50px;
-	right: 100px;
+	left: 1050px;
 	top: 10px;
 }
 
+.switchCaseButton {
+	width: 50px;
+	height: 50px;
+}
+
 .switchLang {
 	position: absolute;
+	left: 1120px;
+	top: 10px;
+}
+
+.switchLangButton {
 	width: 50px;
 	height: 50px;
-	right: 30px;
-	top: 10px;
 }
 
 .backButton {
@@ -108,7 +117,9 @@
 
 .itemLetter {
 	background-color: white;
-	position: absolute;
+	display: inline-block;
+	margin-right: 13px;
+	margin-bottom: 10px;
 	z-index: 0;		
 }
 
@@ -124,6 +135,11 @@
 	margin-top: 10px;
 }
 
+.box-4-entry {
+	padding-left: 30px;
+	padding-top: 50px;
+}
+
 .entry {
 	border-width: 5px;
 	border-style: inset;
@@ -131,7 +147,9 @@
 	box-shadow: 5px -4px 4px 2px black;
 	width: 220px;
 	background-color: white;
-	position: absolute;
+	display: inline-block;
+	margin-left: 30px;
+	margin-bottom: 30px;
 	z-index: 0;
 	-webkit-user-select: none;
 	user-select: none;		
@@ -169,13 +187,19 @@
 	width: 50px;
 }
 
+.box-4-collection {
+	padding-left: 100px;
+	padding-top: 100px;
+}
+
 .collection {
 	border-width: 2px;
 	border-style: inset;
 	border-color: darkgray;
 	box-shadow: 2px -2px 2px 1px black;
 	width: 250px;
-	position: absolute;
+	margin-left: 30px;
+	margin-top: 30px;
 	z-index: 0;
 	-webkit-user-select: none;
 	user-select: none;	
@@ -208,6 +232,11 @@
 	font-family: Rochester;
 }
 
+.box-4-theme {
+	padding-left: 60px;
+	padding-top: 50px;
+}
+
 .theme {
 	border-width: 5px;
 	border-style: inset;
@@ -215,9 +244,13 @@
 	box-shadow: 5px -4px 4px 2px black;
 	width: 220px;
 	background-color: white;
-	position: absolute;
 	z-index: 0;
 	-webkit-user-select: none;
+	margin-left: 5px;
+	margin-right: 25px;
+	margin-top: 60px;
+	margin-bottom: 80px;
+	display: inline-block;	
 	user-select: none;		
 }
 
diff --git a/html/util.js b/html/util.js
index f678b4c..57626f2 100644
--- a/html/util.js
+++ b/html/util.js
@@ -47,4 +47,17 @@ Abcd.goHome = function() {
 		Abcd.context.home.renderInto(document.getElementById("body"));
 		Abcd.context.home.playTheme();
 	}
-};
\ No newline at end of file
+};
+
+
+//--- Utilities
+
+// Change visibility of a set of controls
+Abcd.changeVisibility = function(object, items) {
+	for(var item in items) {
+		if (items[item])
+			object.$[item].show();
+		else
+			object.$[item].hide();
+	}
+}
\ No newline at end of file