class Example extends Phaser.Scene {

  preload() {

    this.load.setBaseURL("https://assets.codepen.io/9367036/");

    this.load.image("morning", "backyard_morning.jpg");

    this.load.image("npc2neutral", "Character+01+Class+03+-+Smile.png");

    this.load.image("npc2blush", "Character+01+Class+03+-+Blush.png");

    this.load.image("npc2sad", "Character+01+Class+03+-+Sad.png");

    this.load.image("npc1neutral", "Character+04+Class+03+-+Smile.png");

    this.load.image("npc1blush", "Character+04+Class+03+-+Blush.png");

    this.load.image("npc1sad", "Character+04+Class+03+-Panic.png");

  }

​

  create() {

    // Sauvegarde

    let savedState = localStorage.getItem("gameState");

    let gameState = savedState ? JSON.parse(savedState) : undefined;

​

    // Background

    let background = this.add.image(0, 0, "morning").setOrigin(0, 0);

    background.displayWidth = config.width;

    background.displayHeight = config.height;

​

    // Save button graphics

    let buttonGraphics = this.add.graphics();

    let rectWidth = 160;

    let rectHeight = 40;

    buttonGraphics.fillStyle(0xffffff, 0.8);

    buttonGraphics.fillRoundedRect(

      -rectWidth / 2,

      -rectHeight / 2,

      rectWidth,

      rectHeight,

      5

    );

    let saveButton = this.add

      .text(0, -rectHeight / 2 + 12, "Sauvegarder", {

        fontSize: "16px",

        color: "#000000"

      })

      .setOrigin(0.5, 0);

    let buttonContainer = this.add.container(config.width / 2, 35, [

      buttonGraphics,

      saveButton

    ]);

    buttonContainer.setSize(rectWidth, rectHeight);

    buttonContainer.setInteractive({ useHandCursor: true });

    buttonContainer.on("pointerdown", (pointer, localX, localY, event) => {

      event.stopPropagation();

      this.sauvegarde();

    });

​

    // Dialogue

    this.dialogueIndex = gameState ? gameState.dialogueIndex : 0;

    let dialogGraphics = this.add.graphics();

    let dialogWidth = config.width * 0.8;

    let dialogHeight = 100;

    let dialogX = config.width * 0.1;

    let dialogY = config.height - 120;

    dialogGraphics.fillStyle(0x000000, 0.7);

    dialogGraphics

      .fillRoundedRect(dialogX, dialogY, dialogWidth, dialogHeight, 10)

      .setDepth(1);

    this.dialogText = this.add

      .text(dialogX + 20, dialogY + 20, "", {

        fontSize: "18px",

        wordWrap: { width: dialogWidth - 40 }

      })

      .setDepth(2);

​

    // Click to proceed to next dialogue

    this.input.on("pointerdown", () => {

      this.dialogueIndex = (this.dialogueIndex + 1) % dialogue.length;

      this.updateDialogue();

    });

​

    // NPC

    this.npc1 = this.add

      .image(config.width, config.height, "npc1neutral")

      .setScale(0.25)

      .setOrigin(0, 0.55);

    this.tweens.add({

      targets: this.npc1,

      x: this.npc1.x - this.npc1.displayWidth * 0.825,

      duration: 1000,

      ease: "Power2"

    });

    if (gameState) {

      this.npc1.setTexture(gameState.npc1Expression || "npc1neutral");

    }

    this.npc2 = this.add

      .image(0, config.height, "npc2neutral")

      .setScale(0.25)

      .setOrigin(1, 0.55)

      .setFlipX(true);

    this.tweens.add({

      targets: this.npc2,

      x: this.npc2.x + this.npc2.displayWidth * 0.825,

      duration: 1000,

      ease: "Power2"

    });

    if (gameState) {

      this.npc2.setTexture(gameState.npc2Expression || "npc2neutral");

    }

​

    this.currentNpc = undefined;

    this.updateDialogue();

  }

​

  updateDialogue() {

    let currentDialogue = dialogue[this.dialogueIndex];

    let character = currentDialogue.npc === "npc1" ? this.npc1 : this.npc2;

    character.setTexture(`${currentDialogue.npc}${currentDialogue.expression}`);

​

    if (this.currentNpc && this.currentNpc != character) {

      this.tweens.add({

        targets: this.currentNpc,

        scale: 0.24,

        duration: 100,

        ease: "Power1"

      });

    }

    this.tweens.add({

      targets: character,

      scale: 0.27,

      duration: 200,

      ease: "Power1"

    });

    this.currentNpc = character;

​

    let textColor = currentDialogue.npc === "npc1" ? "#C7D3CD" : "#C7BBDE";

    let npcName = currentDialogue.npc === "npc1" ? "Elinora" : "Morwenna";

    this.dialogText.setColor(textColor);

    this.dialogText.setText(`${npcName}\n${currentDialogue.text}`);

  }

​

  sauvegarde() {

    let gameState = {

      dialogueIndex: this.dialogueIndex,

      npc1Expression: this.npc1.texture.key,

      npc2Expression: this.npc2.texture.key

    };

    localStorage.setItem("gameState", JSON.stringify(gameState));

    console.log("Partie sauvegardée");

  }

​

  update() {}

}

​

const config = {

  type: Phaser.AUTO,

  width: 800,

  height: 400,

  scene: Example

};

​

const game = new Phaser.Game(config);

let dialogue = [

  {

    npc: "npc1",

    expression: "neutral",

    text: "Sinon, ça va toi?"

  },

  {

    npc: "npc2",

    expression: "neutral",

    text: "Je vais bien oui. Toi aussi ?"

  },

  {

    npc: "npc1",

    expression: "blush",

    text: "Oui, je suis contente de te voir."

  },

  {

    npc: "npc2",

    expression: "blush",

    text: "Oh, moi aussi ! Cela fait longtemps."

  },

  {

    npc: "npc1",

    expression: "sad",

    text:

      "Par contre, j'espère juste que tout va s'arranger bientôt. Ça commence à être lourd."

  },

  {

    npc: "npc2",

    expression: "sad",

    text: "Je suis sûre que ça ira. Nous devons garder espoir."

  },

  {

    npc: "npc1",

    expression: "neutral",

    text: "Alors, que dirais-tu d'aller prendre un café ?"

  },

  {

    npc: "npc2",

    expression: "blush",

    text: "J'adorerais ça !"

  }

];

​