✨ Finish Valise1 Tutorial

index.html

@@ -34,23 +34,25 @@
     <script type="text/javascript" src="src/elements/earth/letterHunt/LetterHuntGame.js"></script>
     <!-- Acrofony -->
     <script type="text/javascript" src="src/elements/earth/acrofony/AcrofonyLevels.js"></script>
-    <script type="text/javascript" src="src/elements/earth/acrofony/tutorial/AcrofonyTutorialDialogue.js"></script>
-    <script type="text/javascript" src="src/elements/earth/acrofony/tutorial/AcrofonyTutorial.js"></script>
     <script type="text/javascript" src="src/elements/earth/acrofony/game/AcrofonyCardVisualEffect.js"></script>
     <script type="text/javascript" src="src/elements/earth/acrofony/game/AcrofonyOptionCard.js"></script>
     <script type="text/javascript" src="src/elements/earth/acrofony/game/AcrofonyQuestionCard.js"></script>
     <script type="text/javascript" src="src/elements/earth/acrofony/game/AcrofonyGameDialogue.js"></script>
     <script type="text/javascript" src="src/elements/earth/acrofony/game/AcrofonyGame.js"></script>
+    <script type="text/javascript" src="src/elements/earth/acrofony/tutorial/AcrofonyTutorialDialogue.js"></script>
+    <script type="text/javascript" src="src/elements/earth/acrofony/tutorial/AcrofonyTutorial.js"></script>
     <script type="text/javascript" src="src/elements/earth/acrofony/AcrofonyLevelManager.js"></script>
     <!-- Valise 1 -->
     <script type="text/javascript" src="src/elements/earth/valise1/Valise1Levels.js"></script>
     <script type="text/javascript" src="src/elements/earth/valise1/Valise1LevelButton.js"></script>
-    <script type="text/javascript" src="src/elements/earth/valise1/Valise1LevelSelector.js"></script>
     <script type="text/javascript" src="src/elements/earth/valise1/Valise1CardVisualEffect.js"></script>
     <script type="text/javascript" src="src/elements/earth/valise1/Valise1OptionCard.js"></script>
     <script type="text/javascript" src="src/elements/earth/valise1/Valise1QuestionCard.js"></script>
     <script type="text/javascript" src="src/elements/earth/valise1/Valise1GameDialogue.js"></script>
     <script type="text/javascript" src="src/elements/earth/valise1/Valise1Game.js"></script>
+    <script type="text/javascript" src="src/elements/earth/valise1/Valise1TutorialDialogue.js"></script>
+    <script type="text/javascript" src="src/elements/earth/valise1/Valise1Tutorial.js"></script>
+    <script type="text/javascript" src="src/elements/earth/valise1/Valise1LevelSelector.js"></script>
     <!-- Rébus -->
     <script type="text/javascript" src="src/elements/earth/rebus/RebusLevels.js"></script>
     <script type="text/javascript" src="src/elements/earth/rebus/level_selector/RebusLevelButton.js"></script>

src/elements/earth/valise1/Valise1LevelSelector.js

@@ -25,7 +25,7 @@ class Valise1LevelSelector extends Object2D
         this.addChild(b);
         b.setSize(200, 100);
         b.setPosition((1920 - b.getSize().x) / 2, 300);
-        b.connect("levelSelected", this, "_onLevelSelected");
+        b.connect("levelSelected", this, "_onTutorialSelected");
 
         var i = 1;
         while (VALISE1_LEVELS[`level${i}`])
@@ -62,6 +62,14 @@ class Valise1LevelSelector extends Object2D
         db.text("Escolha o nível", 1920 / 2, 200);
     }
 
+    _onTutorialSelected( /** @type {Object} */ levelData)
+    {
+        var vt = new Valise1Tutorial("Valise1Tutorial");
+        vt.levelData = levelData;
+        GameHandler.addRootObject(vt);
+        this.queueFree();
+    }
+
     _onLevelSelected( /** @type {Object} */ levelData)
     {
         var vg = new Valise1Game("Valise1Game");

src/elements/earth/valise1/Valise1OptionCard.js

@@ -51,6 +51,7 @@ class Valise1OptionCard extends Object2D
         this.tween = new Tween("Tween");
         this.tween.interpolateProperty(this, "scale", PROPERTY_TYPE.VECTOR2, Vector2.ZERO(), Vector2.ONE(), 2, TRANS_TYPE.ELASTIC, EASE_TYPE.OUT);
         this.addChild(this.tween);
+        this.setScale(0, 0);
 
         this.timer = new Timer("Timer", 1, false, true);
         this.timer.connect("timeout", this, "_onTimerTimeout");

src/elements/earth/valise1/Valise1Tutorial.js

@@ -0,0 +1,182 @@
+class Valise1Tutorial extends Object2D
+{
+    constructor(name)
+    {
+        super(name);
+
+        /** @type {Object} */
+        this.levelData = null;
+        /** @type {Valise1QuestionCard} */
+        this.questionCard = null;
+        /** @type {Object2D} */
+        this.optionCards = null;
+        /** @type {Button} */
+        this.backButton = null;
+        /** @type {Valise1TutorialDialogue} */
+        this.dialogue = null;
+        /** @type {Timer} */
+        this.timer = null;
+
+        /** @type {Number} */
+        this.points = 3;
+        /** @type {Boolean} */
+        this.gameFinished = false;
+        /** @type {Number} */
+        this.tutorialStep = 0;
+    }
+
+    _setup()
+    {
+        this.backButton = new Button("BackButton");
+        this.backButton.setLabel("Voltar");
+        this.backButton.setFontSize(30);
+        this.backButton.setPosition(20, 20);
+        this.backButton.setSize(110, 75);
+        this.backButton.connect("mouseClicked", this, "_onBackClicked");
+        this.addChild(this.backButton);
+
+        AssetHandler.loadTexture(this.levelData.questionCard.name, this.levelData.questionCard.path);
+        this.questionCard = new Valise1QuestionCard("QuestionCard");
+        this.questionCard.thumb = AssetHandler.getTextureByName(this.levelData.questionCard.name);
+        this.questionCard.setPosition(1920 / 2, 300);
+        this.addChild(this.questionCard);
+
+        this.optionCards = new Object2D("OptionCards");
+        this.addChild(this.optionCards);
+        var idx = [0, 1, 2, 3];
+        randomSeed(Date.now());
+        idx = shuffle(idx);
+        for (let i = 0; i < 4; i++)
+        {
+            AssetHandler.loadTexture(this.levelData.optionCards[idx[i]].name, this.levelData.optionCards[idx[i]].path);
+            var newCard = new Valise1OptionCard(`OptionCard${i}`);
+            newCard.thumb = AssetHandler.getTextureByName(this.levelData.optionCards[idx[i]].name);
+            newCard.setPosition((i + 1) * 1920 / 5, 800);
+            newCard.isAnswer = idx[i] == 0;
+            newCard.connect("selected", this, "_onCardSelected");
+            newCard.str = this.levelData.optionCards[idx[i]].name;
+            newCard.selectable = false;
+            this.optionCards.addChild(newCard);
+        }
+
+        this.dialogue = new Valise1TutorialDialogue("TutorialDialogue");
+        this.dialogue.connect("continue", this, "_onTutorialContinue");
+        this.addChild(this.dialogue);
+
+        this.timer = new Timer("Timer", 2, false, true);
+        this.timer.connect("timeout", this, "_onTimerTimeout");
+        this.addChild(this.timer);
+        this.timer.start();
+    }
+
+    _draw( /** @type {Number} */ delta, /** @type {p5.Graphics} */ db)
+    {
+        background(52);
+    }
+
+    _onCardSelected( /** @type {Boolean} */ isAnswer)
+    {
+        if (!isAnswer) this.points--;
+        else
+        {
+            this.gameFinished = true;
+            for (let i = 0; i < 4; i++)
+                this.optionCards.children[i].selectable = false;
+        }
+        console.log(isAnswer);
+    }
+
+    _onTutorialContinue()
+    {
+        this.tutorialStep++;
+
+        switch (this.tutorialStep)
+        {
+            case 2:
+                this.timer.start(2);
+                break;
+            case 10:
+                this._onBackClicked();
+                break;
+        }
+    }
+
+    _onTimerTimeout()
+    {
+        this.tutorialStep++;
+
+        switch (this.tutorialStep)
+        {
+            case 3:
+                this.optionCards.children[0].selectable = true;
+                this.optionCards.children[0].mouseOver = true;
+                this.optionCards.children[1].selectable = false;
+                this.optionCards.children[1].mouseOver = false;
+                this.optionCards.children[2].selectable = false;
+                this.optionCards.children[2].mouseOver = false;
+                this.optionCards.children[3].selectable = false;
+                this.optionCards.children[3].mouseOver = false;
+                this.timer.start(0.5);
+                break;
+            case 4:
+                this.optionCards.children[0].selectable = false;
+                this.optionCards.children[0].mouseOver = false;
+                this.optionCards.children[1].selectable = true;
+                this.optionCards.children[1].mouseOver = true;
+                this.optionCards.children[2].selectable = false;
+                this.optionCards.children[2].mouseOver = false;
+                this.optionCards.children[3].selectable = false;
+                this.optionCards.children[3].mouseOver = false;
+                this.timer.start(0.5);
+                break;
+            case 5:
+                this.optionCards.children[0].selectable = false;
+                this.optionCards.children[0].mouseOver = false;
+                this.optionCards.children[1].selectable = false;
+                this.optionCards.children[1].mouseOver = false;
+                this.optionCards.children[2].selectable = true;
+                this.optionCards.children[2].mouseOver = true;
+                this.optionCards.children[3].selectable = false;
+                this.optionCards.children[3].mouseOver = false;
+                this.timer.start(0.5);
+                break;
+            case 6:
+                this.optionCards.children[0].selectable = false;
+                this.optionCards.children[0].mouseOver = false;
+                this.optionCards.children[1].selectable = false;
+                this.optionCards.children[1].mouseOver = false;
+                this.optionCards.children[2].selectable = false;
+                this.optionCards.children[2].mouseOver = false;
+                this.optionCards.children[3].selectable = true;
+                this.optionCards.children[3].mouseOver = true;
+                this.timer.start(0.5);
+                break;
+            case 7:
+                this.optionCards.children[0].selectable = false;
+                this.optionCards.children[0].mouseOver = false;
+                this.optionCards.children[1].selectable = false;
+                this.optionCards.children[1].mouseOver = false;
+                this.optionCards.children[2].selectable = false;
+                this.optionCards.children[2].mouseOver = false;
+                this.optionCards.children[3].selectable = false;
+                this.optionCards.children[3].mouseOver = false;
+                this.timer.start(2);
+                break;
+            case 8:
+                this.optionCards.children[0].selected = true;
+                this.optionCards.children[1].selected = true;
+                this.optionCards.children[2].selected = true;
+                this.optionCards.children[3].selected = true;
+                this.timer.start(1);
+                break;
+        }
+    }
+
+    _onBackClicked()
+    {
+        var vls = new Valise1LevelSelector("Valise1LevelSelector");
+        GameHandler.addRootObject(vls);
+        AssetHandler.clearTextureCache();
+        this.queueFree();
+    }
+}

src/elements/earth/valise1/Valise1TutorialDialogue.js

@@ -0,0 +1,81 @@
+class Valise1TutorialDialogue extends Object2D
+{
+    constructor(name)
+    {
+        super(name);
+
+        /** @type {Button} */
+        this.continueButton = null;
+        /** @type {Timer} */
+        this.timer;
+
+        /** @type {String} */
+        this.text = "";
+        /** @type {number} */
+        this.bgOpacity = 0;
+        /** @type {number} */
+        this.textOpacity = 0;
+    }
+
+    _initSignals()
+    {
+        this.addSignal("continue");
+    }
+
+    _setup()
+    {
+        this.continueButton = new Button("ContinueButton", "Continuar");
+        this.continueButton.connect("mouseClicked", this, "_onContinueButtonMouseClicked");
+        this.continueButton.hide();
+        this.continueButton.setFontSize(40);
+        this.continueButton.setPosition(1920 / 2 - this.continueButton.getSize().x / 2, 600);
+        this.addChild(this.continueButton);
+    }
+
+    _draw( /** @type {number} */ delta, /** @type {p5.Graphics} */ db)
+    {
+        switch (this.parent.tutorialStep)
+        {
+            case 0:
+                this.bgOpacity = 0;
+                this.textOpacity = 0;
+                break;
+            case 1:
+                this.bgOpacity = min(this.bgOpacity + 150 * delta, 200);
+                this.textOpacity = min(this.textOpacity + 150 * delta, 255);
+                this.text = "Qual é a palavra escondida em CUTIA?"
+                if (this.textOpacity == 255) this.continueButton.show();
+                break;
+            case 2:
+                this.continueButton.hide();
+                this.bgOpacity = max(this.bgOpacity - 150 * delta, 0);
+                this.textOpacity = max(this.textOpacity - 150 * delta, 0);
+                this.text = "Qual é a palavra escondida em CUTIA?"
+                break;
+            case 3:
+                this.bgOpacity = 0;
+                this.textOpacity = 0;
+                break;
+            case 9:
+                this.bgOpacity = min(this.bgOpacity + 150 * delta, 200);
+                this.textOpacity = min(this.textOpacity + 150 * delta, 255);
+                this.text = "A palavra escondida em CUTIA é TIA.\n\nAgora é sua vez!"
+                if (this.textOpacity == 255) this.continueButton.show();
+                break;
+        }
+
+        db.noStroke();
+        db.fill(0, this.bgOpacity);
+        db.rectMode(CENTER);
+        db.rect(db.width / 2, db.height / 2, 1800, 600, 40, 40);
+        db.textAlign(CENTER, CENTER);
+        db.fill(255, this.textOpacity);
+        db.textSize(40);
+        db.text(this.text, db.width / 2, db.height / 2 - 100);
+    }
+
+    _onContinueButtonMouseClicked()
+    {
+        this.emitSignal("continue");
+    }
+}