From ffc817f13afa8c821794975d4be62ccd816473c4 Mon Sep 17 00:00:00 2001 From: Lionel LASKE Date: Sat, 06 Apr 2013 13:57:28 +0000 Subject: Use CSS instead of coordinate for positionning, play squeletton --- 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 Binary files differ 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 Binary files differ 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 -- cgit v0.9.1