✨ Start working on Palavra Valise 1 minigame

index.html

@@ -42,6 +42,15 @@
     <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/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>
     <!-- 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/EarthMinigameSelector.js

@@ -148,7 +148,9 @@ class EarthMinigameSelector extends Object2D
 
     _onValise1Selected()
     {
-        console.log("Palavra valise 1 has been selected");
+        var vls = new Valise1LevelSelector("Valise1LevelSelector");
+        GameHandler.addRootObject(vls);
+        this.queueFree();
     }
 
     _onValise2Selected()

src/elements/earth/acrofony/game/AcrofonyGame.js

@@ -49,7 +49,7 @@ class AcrofonyGame extends Object2D
         }
 
         this.dialogue = new AcrofonyGameDialogue("AcrofonyGameDialogue");
-        this.dialogue.connect("endGame", this, "_onDialogueEndGame")
+        this.dialogue.connect("endGame", this, "_onDialogueEndGame");
         this.addChild(this.dialogue);
     }
 

src/elements/earth/acrofony/game/AcrofonyOptionCard.js

@@ -96,12 +96,6 @@ class AcrofonyOptionCard extends Object2D
         db.fill(0);
         db.textSize(50);
         db.text(this.syllable, 0, 0);
-
-        if (this.selected && !this.isAnswer)
-        {
-            db.fill(0, 80);
-            db.rect(0, 0, 250, 200, 10, 10);
-        }
     }
 
     _onMouseEntered()

src/elements/earth/valise1/Valise1CardVisualEffect.js

@@ -0,0 +1,36 @@
+class Valise1CardVisualEffect extends Object2D
+{
+    constructor(name)
+    {
+        super(name);
+
+        /** @type {number} */
+        this.glowIterations = 7;
+        /** @type {number} */
+        this.glowAmount = 0;
+    }
+
+    _draw( /** @type {number} */ delta, /** @type {p5.Graphics} */ db)
+    {
+        db.rectMode(CENTER);
+        if (this.parent.selected)
+        {
+            if (!this.parent.isAnswer)
+            {
+                db.fill(0, 80);
+                db.rect(0, 0, 275, 275, 10, 10);
+            }
+            else
+            {
+                db.noFill();
+                this.glowAmount = min(1.0, this.glowAmount + 0.03);
+                for (let i = 0; i < this.glowIterations; i++)
+                {
+                    db.stroke(255, 255, 100, this.glowAmount * 200 / (this.glowIterations + 1 - i));
+                    db.strokeWeight((this.glowIterations - i) * 6);
+                    db.rect(0, 0, 275, 275, 10);
+                }
+            }
+        }
+    }
+}

src/elements/earth/valise1/Valise1Game.js

@@ -0,0 +1,91 @@
+class Valise1Game 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 {Valise1GameDialogue} */
+        this.dialogue = null;
+
+        /** @type {Number} */
+        this.points = 3;
+        /** @type {Boolean} */
+        this.gameFinished = false;
+    }
+
+    _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;
+            this.optionCards.addChild(newCard);
+        }
+
+        this.dialogue = new Valise1GameDialogue("GameDialogue");
+        this.dialogue.connect("endGame", this, "_onDialogueEndGame");
+        this.addChild(this.dialogue);
+    }
+
+    _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);
+    }
+
+    _onDialogueEndGame()
+    {
+        this._onBackClicked();
+    }
+
+    _onBackClicked()
+    {
+        var vls = new Valise1LevelSelector("Valise1LevelSelector");
+        GameHandler.addRootObject(vls);
+        AssetHandler.clearTextureCache();
+        this.queueFree();
+    }
+}

src/elements/earth/valise1/Valise1GameDialogue.js

@@ -0,0 +1,65 @@
+class Valise1GameDialogue extends Object2D
+{
+    constructor(name)
+    {
+        super(name);
+
+        /** @type {Button} */
+        this.continueButton = null;
+        /** @type {Timer} */
+        this.timer;
+
+        /** @type {String} */
+        this.suffix = "";
+        /** @type {number} */
+        this.bgOpacity = 0;
+        /** @type {number} */
+        this.textOpacity = 0;
+    }
+
+    _initSignals()
+    {
+        this.addSignal("endGame");
+    }
+
+    _setup()
+    {
+        this.timer = new Timer("Timer", 2, false, true);
+        this.timer.connect("timeout", this, "_onTimerTimeout");
+        this.addChild(this.timer);
+
+        this.continueButton = new Button("ContinueButton", "Continuar");
+        this.continueButton.setFontSize(40);
+        this.continueButton.setPosition(1920 / 2 - this.continueButton.getSize().x / 2, 600);
+        this.continueButton.connect("mouseClicked", this, "_onContinueButtonClicked");
+        this.addChild(this.continueButton);
+        this.continueButton.hide();
+    }
+
+    _draw( /** @type {number} */ delta, /** @type {p5.Graphics} */ db)
+    {
+        if (this.parent.gameFinished)
+        {
+            this.timer.start();
+            db.noStroke();
+            db.fill(0, min(this.bgOpacity += 75 * delta, 200));
+            db.rectMode(CENTER);
+            db.rect(db.width / 2, db.height / 2, 1800, 600, 40, 40);
+            db.textAlign(CENTER, CENTER);
+            db.fill(255, min(this.textOpacity += 80 * delta, 255));
+            db.textSize(40);
+            this.parent.points > 1 ? this.suffix = "S" : this.suffix = "";
+            db.text(`PARABÉNS, NÍVEL CONCLUÍDO\n\nVOCÊ GANHOU ${this.parent.points} PONTO${this.suffix}!`, db.width / 2, db.height / 2 - 100);
+        }
+    }
+
+    _onTimerTimeout()
+    {
+        this.continueButton.show();
+    }
+
+    _onContinueButtonClicked()
+    {
+        this.emitSignal("endGame");
+    }
+}

src/elements/earth/valise1/Valise1LevelButton.js

@@ -0,0 +1,20 @@
+class Valise1LevelButton extends Button
+{
+    constructor(name)
+    {
+        super(name);
+
+        /** @type {Object} */
+        this.levelData = null;
+    }
+
+    _initSignals()
+    {
+        this.addSignal("levelSelected");
+    }
+
+    _onMouseClicked()
+    {
+        this.emitSignal("levelSelected", this.levelData);
+    }
+}

src/elements/earth/valise1/Valise1LevelSelector.js

@@ -0,0 +1,79 @@
+class Valise1LevelSelector extends Object2D
+{
+    constructor(name)
+    {
+        super(name);
+
+        /** @type {Object} */
+        this.gridMargins = {
+            left: 0,
+            right: 0,
+            up: 500,
+            down: 0
+        };
+
+        /** @type {number} */
+        this.gridCols = 4;
+    }
+
+    _setup()
+    {
+        var b = new RebusLevelButton("Tutorial");
+        b.levelData = VALISE1_LEVELS.tutorial;
+        b.setLabel("Tutorial");
+        b.setFontSize(40);
+        this.addChild(b);
+        b.setSize(200, 100);
+        b.setPosition((1920 - b.getSize().x) / 2, 300);
+        b.connect("levelSelected", this, "_onLevelSelected");
+
+        var i = 1;
+        while (VALISE1_LEVELS[`level${i}`])
+        {
+            var b = new Valise1LevelButton(`level${i}`);
+            b.levelData = VALISE1_LEVELS[`level${i}`];
+            b.setLabel(`${i}`);
+            b.setFontSize(40);
+            this.addChild(b);
+            b.setSize(100, 100);
+            b.setPosition((((i - 1) % this.gridCols) + 1) * 1920 / (this.gridCols + 1) - b.getSize().x / 2, this.gridMargins.up + 200 * int((i - 1) / this.gridCols));
+            b.connect("levelSelected", this, "_onLevelSelected");
+            i++;
+        }
+
+        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);
+    }
+
+    _draw( /** @type {number} */ delta, /** @type {p5.Graphics} */ db)
+    {
+        background(52);
+
+        db.textAlign(CENTER, CENTER);
+        db.fill(255);
+        db.textSize(100);
+        db.text("PALAVRA VALISE 1", 1920 / 2, 125);
+        db.textSize(40);
+        db.text("Escolha o nível", 1920 / 2, 200);
+    }
+
+    _onLevelSelected( /** @type {Object} */ levelData)
+    {
+        var vg = new Valise1Game("Valise1Game");
+        vg.levelData = levelData;
+        GameHandler.addRootObject(vg);
+        this.queueFree();
+    }
+
+    _onBackClicked()
+    {
+        var ems = new EarthMinigameSelector("EarthMinigameSelector");
+        GameHandler.addRootObject(ems);
+        this.queueFree();
+    }
+}

src/elements/earth/valise1/Valise1Levels.js

@@ -0,0 +1,231 @@
+const VALISE1_LEVELS = {
+    tutorial:
+    {
+        questionCard:
+        {
+            path: "assets/textures/monke.png",
+            name: "Cutia"
+        },
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Tia"
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Avô"
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Avó"
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Irmão"
+        }, ],
+    },
+
+    level1:
+    {
+        questionCard:
+        {
+            path: "assets/textures/monke.png",
+            name: "Mandioca"
+        },
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Oca"
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Mão"
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Ovo"
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Manga"
+        }, ],
+
+        tip: "É o nome de uma moradia que está escondida dentro da palavra MANDIOCA."
+    },
+
+    level2:
+    {
+        questionCard:
+        {
+            path: "assets/textures/monke.png",
+            name: "Mamão"
+        },
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Mão"
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Pente"
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Maçã"
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Avião"
+        }, ],
+
+        tip: "É o nome de uma parte do corpo que está escondido dentro da palavra MAMÃO."
+    },
+
+    level3:
+    {
+        questionCard:
+        {
+            path: "assets/textures/monke.png",
+            name: "Jabuticaba"
+        },
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Jabuti"
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Jaca"
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Casa"
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Bruxa"
+        }, ],
+
+        tip: "É o nome de um animal que está escondido dentro da palavra JABUTICABA."
+    },
+
+    level4:
+    {
+        questionCard:
+        {
+            path: "assets/textures/monke.png",
+            name: "Repolho"
+        },
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Olho"
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Ovo"
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Rede"
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Galho"
+        }, ],
+
+        tip: "É o nome de uma parte do rosto que está escondida dentro da palavra REPOLHO."
+    },
+
+    level5:
+    {
+        questionCard:
+        {
+            path: "assets/textures/monke.png",
+            name: "Carambola"
+        },
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Bola"
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Casa"
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Mão"
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Oca"
+        }, ],
+
+        tip: "É o nome de um brinquedo que está escondido dentro da palavra CARAMBOLA."
+    },
+
+    level6:
+    {
+        questionCard:
+        {
+            path: "assets/textures/monke.png",
+            name: "Galho"
+        },
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Alho"
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Gato"
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Repolho"
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Jabuti"
+        }, ],
+
+        tip: "É o nome de um tempero ou alimento que está escondido dentro da palavra GALHO."
+    },
+
+    level7:
+    {
+        questionCard:
+        {
+            path: "assets/textures/monke.png",
+            name: "Pepino"
+        },
+
+        optionCards: [
+        {
+            path: "assets/textures/monke.png",
+            name: "Pino"
+        },
+        {
+            path: "assets/textures/glasses.png",
+            name: "Pente"
+        },
+        {
+            path: "assets/textures/house.png",
+            name: "Bruxa"
+        },
+        {
+            path: "assets/textures/key.png",
+            name: "Rede"
+        }, ],
+
+        tip: "É o nome de um objeto de jogo que está escondido dentro da palavra PEPINO."
+    },
+}

src/elements/earth/valise1/Valise1OptionCard.js

@@ -0,0 +1,119 @@
+class Valise1OptionCard extends Object2D
+{
+    constructor(name)
+    {
+        super(name);
+
+        /** @type {String} */
+        this.str = "";
+        /** @type {Boolean} */
+        this.isAnswer = false;
+        /** @type {Boolean} */
+        this.selected = false;
+        /** @type {Boolean} */
+        this.selectable = true;
+        /** @type {Boolean} */
+        this.mouseOver = false;
+        /** @type  {Boolean} */
+        this.mousePress = false;
+
+        /** @type {TextureRes} */
+        this.thumb = null;
+        /** @type {Color} */
+        this.fillColor = new Color(200, 200, 200);
+        /** @type {Boolean} */
+        this.tweenStarted = false;
+        /** @type {Tween} */
+        this.tween = null;
+        /** @type {Timer} */
+        this.timer = null;
+    }
+
+    _initSignals()
+    {
+        this.addSignal("selected");
+    }
+
+    _setup()
+    {
+        var sprite = new Sprite2D("Sprite", this.thumb);
+        sprite.width = 250;
+        sprite.height = 250;
+        this.addChild(sprite);
+
+        var area = new Area2D("area", SHAPES.RECT, new Rect(275, 275), true);
+        area.connect("mouseEntered", this, "_onMouseEntered");
+        area.connect("mouseExited", this, "_onMouseExited");
+        this.addChild(area);
+
+        this.addChild(new Valise1CardVisualEffect("CardVfx"));
+
+        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.timer = new Timer("Timer", 1, false, true);
+        this.timer.connect("timeout", this, "_onTimerTimeout");
+        this.addChild(this.timer);
+    }
+
+    _update( /** @type {Number} */ delta)
+    {
+        if (this.visible && !this.tweenStarted)
+        {
+            this.timer.start();
+            this.tween.startAll();
+            this.tweenStarted = true;
+        }
+
+        if (this.selectable && this.mouseOver)
+        {
+            if (InputHandler.mouseIsClicked)
+            {
+                this.selected = true;
+                this.selectable = false;
+                this.emitSignal("selected", this.isAnswer);
+
+            }
+
+            if (InputHandler.mouseIsPressed)
+            {
+                this.scale.x = max(this.scale.x - 3.0 * delta, 0.95);
+                this.scale.y = max(this.scale.y - 3.0 * delta, 0.95);
+            }
+            else
+            {
+                this.scale.x = min(this.scale.x + 2.0 * delta, 1.2);
+                this.scale.y = min(this.scale.y + 2.0 * delta, 1.2);
+            }
+        }
+
+        else
+        {
+            this.scale.x = max(this.scale.x - 2.0 * delta, 1);
+            this.scale.y = max(this.scale.y - 2.0 * delta, 1);
+        }
+    }
+
+    _draw( /** @type {Number} */ delta, /** @type {p5.Graphics} */ db)
+    {
+        db.rectMode(CENTER);
+        db.fill(this.fillColor.getP5Color());
+        db.rect(0, 0, 275, 275, 10, 10);
+    }
+
+    _onMouseEntered()
+    {
+        this.mouseOver = true;
+    }
+
+    _onMouseExited()
+    {
+        this.mouseOver = false;
+    }
+
+    _onTimerTimeout()
+    {
+        this.tween.stopAll();
+    }
+}

src/elements/earth/valise1/Valise1QuestionCard.js

@@ -0,0 +1,47 @@
+class Valise1QuestionCard extends Object2D
+{
+    constructor(name)
+    {
+        super(name);
+
+        /** @type {TextureRes} */
+        this.thumb = null;
+        /** @type {String} */
+        this.imgName = "";
+
+        /** @type {Color} */
+        this.fillColor = new Color(200, 200, 200);
+        /** @type {Tween} */
+        this.tween = null;
+    }
+
+    _setup()
+    {
+        var sprite = new Sprite2D("sprite", this.thumb);
+        sprite.width = 250;
+        sprite.height = 250;
+        this.addChild(sprite);
+        this.scale = Vector2.ZERO();
+
+        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);
+    }
+
+    _update( /** @type {Number} */ delta)
+    {
+        if (this.visible) this.tween.startAll();
+    }
+
+    _draw( /** @type {Number} */ delta, /** @type {p5.Graphics} */ db)
+    {
+        db.strokeWeight(10);
+        db.rectMode(CENTER);
+        db.fill(this.fillColor.getP5Color());
+        db.rect(0, 0, 275, 275, 10, 10);
+        // db.textAlign(CENTER, CENTER);
+        // db.fill(0);
+        // db.textSize(40);
+        // db.text(this.imgName, 0, 100);
+    }
+}

src/elements/earth/valise1/acrofonyleveldata.txt

@@ -0,0 +1,20 @@
+Mandioca    Mão, Oca, Ovo, Manga            
+É o nome de uma moradia que está escondida dentro da palavra MANDIOCA.
+
+Mamão       Mão, Pente, Maçã, Avião         
+É o nome de uma parte do corpo que está escondido dentro da palavra MAMÃO.
+
+Jabuticaba  Jabuti, Jaca, Casa, Bruxa       
+É o nome de um animal que está escondido dentro da palavra JABUTICABA.
+
+Repolho     Olho, Ovo, Rede, Galho          
+É o nome de uma parte do rosto que está escondida dentro da palavra REPOLHO.
+
+Carambola   Bola, Casa, Mão, Oca            
+É o nome de um brinquedo que está escondido dentro da palavra CARAMBOLA.
+
+Galho       Alho, Gato, Repolho, Jabuti     
+É o nome de um tempero ou alimento que está escondido dentro da palavra GALHO.
+
+Pepino      Pino, Pente, Bruxa, Rede        
+É o nome de um objeto de jogo que está escondido dentro da palavra PEPINO.

src/main.js

@@ -30,11 +30,9 @@ GameHandler._setup = function()
     GameHandler.drawDebugBufferBounds(true);
     textFont("Lato");
 
-    // var ag = new AcrofonyGame("AcrofonyGame");
-    // GameHandler.addRootObject(ag);
+    var vg = new Valise1LevelSelector("Valise1Game");
+    GameHandler.addRootObject(vg);
 
-    // var alm = new AcrofonyLevelManager("AcrofonyLevelManager");
-    // GameHandler.addRootObject(alm);
-    var menu = new EelementSelector("ElementSelector");
-    GameHandler.addRootObject(menu);
+    // var menu = new EelementSelector("ElementSelector");
+    // GameHandler.addRootObject(menu);
 }