Continuation du récit - Objet Sentence

- Objet Sentence
- Meilleure gestion de la police pour l'objet Word
- Modifications diverses sur les deux classes Word et Line.

main.html

@@ -16,8 +16,8 @@
 		<script defer type="text/javascript" src="scripts/libs/separation_toolkit/intro.js"></script>
 
 		<!-- scripts/libs/separation_toolkit/word -->
+		<script type="text/javascript" src="scripts/libs/separation_toolkit/word/constantes.js"></script>
 		<script defer type="text/javascript" src="scripts/libs/separation_toolkit/word/word.js"></script>
-		<script defer type="text/javascript" src="scripts/libs/separation_toolkit/word/config.js"></script>
 
 		<!-- scripts/libs/separation_toolkit/gesture -->
 		<script defer type="text/javascript" src="scripts/libs/separation_toolkit/gesture/horizontal_move.js"></script>

scripts/libs/separation_toolkit/word/constantes.js

@@ -0,0 +1,36 @@
+function setPolice(rct, police) {
+	rct.police = police;
+}
+
+// Selon le choix (exemple : '24px'), deviendra la variable rct (RecitConsTantes)
+var fontConst = {
+	'24px': {
+		car: {						// Caractère (lettre)
+			size: 24,					// Taille de la police
+			color: "white",				// Couleur
+			height: 40,					// Hauteur réelle du caractère
+			margin: {					// Marge...
+				up: 12,					// ... supérieure (size/2)
+				down: 12,				// ... inférieure
+			},
+		},
+		police: {
+			name: 'coupable_haut',	// Police (par défaut coupable_haut)
+			coupable_haut: {			// Police coupable_haut en deux parties
+				offset: {				// Décalage y
+					up: -2,					// Distance en y pour la partie haute
+					down: 19,				// Distance en y pour la partie basse
+				},
+				name: {					// Nom des deux parties
+					up: "DemiHautH",
+					down: "DemiHautB",
+				},
+			},
+		},
+		line: {						// Ligne
+			height: 64,					// Hauteur
+			nb: 1,						// Nombre de lignes
+		},
+	},
+
+}

scripts/libs/separation_toolkit/word/word.js

@@ -1,18 +1,26 @@
-/*
+/**
 	Class Word
 */
-
 function Word(value) {
 	this.x = 0; // Position x en pixel
 	this.y = 0; // Position y en pixel
-	this.police = "coupable_haut"; // Police
-	this.color = "white"; // Couleur
-	this.fontSize = fontUsed.fontSize; // Hauteur du mot en pixel
+	this.police = rct.police.name; // Police
+	this.fontSize = rct.car.size; // Hauteur du mot en pixel
+	this.color = rct.car.color; // Couleur
 
 	this.value = value; // Valeur du mot actuel
-	//this.next_value = false; // Valeur du mot après transformation
-	this.font = false; // Groupe Kinetic qui sera affiché
+	//this.next_value = false; // Valeur du mot après transformation
+	this.font = null; // Groupe Kinetic qui sera affiché
 	//this.animation = false; // Objet Animation
+
+	WordConstruct(this);
+}
+
+/*
+	Constructeur
+*/
+function WordConstruct(word) {
+	word.generate();
 }
 
 Word.prototype.generate = function() {
@@ -27,7 +35,7 @@ Word.prototype.generate = function() {
 Word.prototype.display = function(layer) {
 	this.font.group.setX(this.x);
 	this.font.group.setY(this.y);
-	
+
 	layer.add(this.font.group);
 }
 
@@ -37,22 +45,24 @@ Word.prototype.getWidth = function() { return this.font.group.getWidth(); }
 Word.prototype.setX = function(data) { this.x = data; }
 Word.prototype.setY = function(data) { this.y = data; }
 
-/////////////////////
+/**********************
+	Groupe Kinetic en fonction de la police
+***********************/
 
 function Word_DemiHaut(data) {
 	this.up = new Kinetic.Text({
-		y: fontUsed.police[data.police].up,
+		y: rct.police[data.police].offset.up,
 		text: data.value,
 		fontSize: data.fontSize,
-		fontFamily: policeName[data.police].up,
+		fontFamily: rct.police[data.police].name.up,
 		fill: data.color,
 	});
 
 	this.down = new Kinetic.Text({
-		y: fontUsed.police[data.police].down,
+		y: rct.police[data.police].offset.down,
 		text: data.value,
 		fontSize: data.fontSize,
-		fontFamily: policeName[data.police].down,
+		fontFamily: rct.police[data.police].name.down,
 		fill: data.color,
 	});
 

scripts/main/main.js

@@ -38,8 +38,9 @@ function checkDevice() {
 	initImages();
 	initSounds();
 
-	introductionStage();
+	//introductionStage();
 	//initMainMenu();
+	Recit.start();
 
 	stage.add(mainLayer);
 	stage.add(actionLayer);

scripts/menu/menu.js

@@ -194,7 +194,7 @@ function initMainMenu() {
 		if(activeLang == en) {
 			langue = "en";
 		}
-		recit_start();
+		Recit.start();
 	} );
 	laboratoire.on(events['tap'], function() {
 		if(navigator.connection.type == Connection.NONE)

scripts/recit/line.js

@@ -1,8 +1,21 @@
+/**
+	Classe Line
+*/
 function Line() {
 	this.words = new Array(); // Tableau des mots
 	this.nb = 0; // Nombre de mots
+	this.center = true; // Booléen pour savoir si la ligne doit être centrée ou non
 	this.width = 0; // Largeur totale des mots
-	this.offsetY = 0; // 
+	this.y = 0; // Distance y à laquelle la ligne sera affichée
+
+	LineConstruct();
+}
+
+/*
+	Constructeur
+*/
+function LineConstruct() {
+
 }
 
 /*
@@ -11,8 +24,6 @@ function Line() {
 	@return (true/false) : Si la largeur du mot est trop grande, on retourne false, sinon true.
 */
 Line.prototype.add = function(word) {
-	word.generate();
-
 	if(this.width + word.getWidth() < screenWidth) {
 		this.width += word.getWidth();
 		this.nb++;
@@ -25,32 +36,39 @@ Line.prototype.add = function(word) {
 	}
 }
 
+/*
+	Ajoute un espace à la ligne
+*/
 Line.prototype.addSpace = function() {
-	var word = new Word(' ');
-	this.add(word);
+	this.add(new Word(' '));
 }
 
-Line.prototype.addTab = function() {
-	var word = new Word('    ');
-	this.add(word);
+/*
+	Ajoute une tabulation à la ligne
+*/
+Line.prototype.addTab = function(police) {
+	this.add(new Word('    '));
 }
 
-Line.prototype.reset = function() {
-	this.words = new Array();
-	this.nb = 0;
-	this.width = 0;
-}
+/*
+	Génère la ligne en générant tous les mots et en centrant la ligne si demandé
+*/
+Line.prototype.generate = function(y) {
+	var x = this.center ? (screenWidth - this.width) / 2 : 0;
+	this.y = y;
 
-Line.prototype.display = function(layer) {
 	for(var i = 0; i < this.nb; i++) {
-		this.words[i].display(layer);
+		this.words[i].setX(x);
+		this.words[i].setY(y);
+		x += this.words[i].getWidth();
 	}
 }
 
-Line.prototype.generate = function() {
-	var x = (screenWidth - this.width) / 2;
+/*
+	Affiche la ligne en affichant tous les mots
+*/
+Line.prototype.display = function(layer) {
 	for(var i = 0; i < this.nb; i++) {
-		this.words[i].setX(x);
-		x += this.words[i].getWidth();
+		this.words[i].display(layer);
 	}
 }

scripts/recit/recit.js

@@ -1,58 +1,57 @@
-var heightLine; // Hauteur d'une ligne
-var heightFont; // Hauteur des polices
-var heightChar; // Hauteur d'un caractère
-var heightMarginUp; // Hauteur de la marge (au dessus des caractères)
-var heightMarginDown; // Hauteur de la marge (en dessous des caractères)
-var fontUsed; // Constantes en rapport avec la police utilisée
+/**
+	Namespace recit
+*/
+var Recit = {};
+var rct; // RecitConsTantes (RCT) : Constantes (taille de la police, etc.) utilisées pour le récit
+var DEBUG = true;
 
-function recit_start() {
+/*
+	Point d'entrée du récit
+*/
+Recit.start = function() {
 	clearStage();
 
-	heightLine = Math.round(screenHeight / 8);
-	heightChar = Math.round(heightLine * 0.6);
-	if(heightChar % 2 == 1)
-		heightChar--;
-	heightMarginUp = Math.round(heightLine * 0.2);
-	heightMarginDown = heightLine - heightMarginUp - heightChar;
-	fontUsed = fontConst['24'];
+	this.computeSizes();
+	if(DEBUG) this.addLines();
 
-	add_lines();
+	var sentence = new Sentence();
 
-	/* DEBUG /
-		alert("heightLine = " + heightLine + " ; heightChar = " + heightChar + " ; heightMarginUp = "
-		+ heightMarginUp + " ; heightMarginDown = " + heightMarginDown + " ; heightFont = " + heightFont["coupable_haut"]);
-	//*/
+	sentence.add(new Word('LA'));
+	sentence.addSpace();
+	sentence.add(new Word('SEPARATION'));
+	sentence.newLine();
+	sentence.newLine();
+	sentence.add(new Word('CLEF'));
+	sentence.addTab();
+	sentence.add(new Word('CIEL'));
 
-	var line = new Line();
-	line.add(new Word("CLEF"));
-	line.addTab();
-	line.add(new Word("CIEL"));
-	line.generate();
-
-	line.display(mainLayer);
-
-	//test_mot.display(mainLayer);
-	/*test_mot.set({
-		value: "clef",
-		next_value: "ciel",
-		police: "coupable_haut",
-	});*/
-
-	/*var test_phrase = new Sentence();
-	test_phrase.addWord(test_mot);
-	test_phrase.generate();
-	*/
+	sentence.generate(12);
+	sentence.display(mainLayer);
+
 	mainLayer.draw();
 }
 
-function add_lines() {
-	for(var i = 0; i < 9; i++)
+/*
+	Détermination de la taille de la police en fonction de la hauteur du canvas
+*/
+Recit.computeSizes = function() {
+	rct = fontConst['24px'];
+	rct.line.nb = Math.floor(screenHeight / rct.line.height);
+}
+
+/** DEBUG **/
+
+/*
+	Ajoute des marges inter-lignes en rouge pour visualiser les lignes
+*/
+Recit.addLines = function() {
+	for(var i = 0; i < rct.line.nb+1; i++)
 	{
 		var rect = new Kinetic.Rect({
 			x: 0,
-			y: heightLine*i - heightMarginDown,
+			y: rct.line.height * i - rct.car.margin.down,
 			width: screenWidth,
-			height: heightMarginDown + heightMarginUp,
+			height: rct.car.margin.down + rct.car.margin.up,
 			fill: "red",
 			opacity: 0.2,
 		});