add unvisited area reveal animation

Similarly to how it is done for final-dng and beach in the DLC.

prestart.js

@@ -7,23 +7,23 @@ ig.module('game.feature.world-map-overhaul')
   .defines(() => {
     const ASSETS_DIR = 'media/gui/better-world-map';
 
-    const CHANGED_BUTTON_POSITIONS = {
-      'autumn-area': { x: 259, y: 158 },
-      'autumn-fall': { x: 329, y: 163 },
-      'bergen-trails': { x: 189, y: 168 },
-      'cargo-ship': { x: 370, y: 260 },
-      'cold-dng': { x: 204, y: 68 },
-      'final-dng': { x: 40, y: 139 },
-      'jungle-city': { x: 313, y: 128 },
-      'rhombus-sqr': { x: 275, y: 248 },
-      'rookie-harbor': { x: 273, y: 198 },
-      arid: { x: 454, y: 213 },
-      beach: { x: 175, y: 277 },
-      forest: { x: 415, y: 153 },
-      jungle: { x: 279, y: 113 },
-    };
+    const CHANGED_BUTTON_POSITIONS = new Map([
+      ['autumn-area', { x: 259, y: 158 }],
+      ['autumn-fall', { x: 329, y: 163 }],
+      ['bergen-trails', { x: 189, y: 168 }],
+      ['cargo-ship', { x: 370, y: 260 }],
+      ['cold-dng', { x: 204, y: 68 }],
+      ['final-dng', { x: 40, y: 139 }],
+      ['jungle-city', { x: 313, y: 128 }],
+      ['rhombus-sqr', { x: 275, y: 248 }],
+      ['rookie-harbor', { x: 273, y: 198 }],
+      ['arid', { x: 454, y: 213 }],
+      ['beach', { x: 175, y: 277 }],
+      ['forest', { x: 415, y: 153 }],
+      ['jungle', { x: 279, y: 113 }],
+    ]);
 
-    const AREAS_WITH_REVEAL = new Set([
+    const COLORED_AREAS = new Set([
       'arid',
       'autumn-area',
       'autumn-fall',
@@ -66,7 +66,7 @@ ig.module('game.feature.world-map-overhaul')
     sc.MapModel.inject({
       initAreas() {
         this.parent();
-        for (let [id, pos] of Object.entries(CHANGED_BUTTON_POSITIONS)) {
+        for (let [id, pos] of CHANGED_BUTTON_POSITIONS) {
           this.areas[id].position = pos;
         }
       },
@@ -123,28 +123,103 @@ ig.module('game.feature.world-map-overhaul')
       _areaVisitStatuses: null,
 
       _addAreas() {
+        let visitedAreas = [];
         for (let [id, area] of Object.entries(sc.map.areas)) {
           let visited =
             (!area.condition || new ig.VarCondition(area.condition).evaluate()) &&
             sc.map.getVisitedArea(id);
           if (visited) {
-            this.addChildGui(this._addAreaButton(id, area));
+            visitedAreas.push([id, area]);
           }
-          if (AREAS_WITH_REVEAL.has(id)) {
-            let overlayType = visited ? 'colored' : 'default';
-            this._areasGfx.push(new ig.Image(`${ASSETS_DIR}/overlays/${overlayType}/${id}.png`));
+          if (COLORED_AREAS.has(id)) {
+            this.addChildGui(new sc.MapBetterWorldMapArea(id, visited));
           }
         }
+        for (let [id, area] of visitedAreas) {
+          this.addChildGui(this._addAreaButton(id, area));
+        }
       },
 
       updateDrawables(renderer) {
         let size = this.hook.size;
         renderer.addColor('black', 0, 0, size.x, size.y);
         renderer.addGfx(this._seaGfx, 0, 0, 0, 0, size.x, size.y);
+      },
+    });
+
+    sc.MapBetterWorldMapArea = ig.GuiElementBase.extend({
+      id: '',
+      defaultGfx: null,
+      revealGfx: null,
+      coloredGfx: null,
+      defaultGui: null,
+      revealGui: null,
+      coloredGui: null,
+
+      init(id, visited) {
+        this.parent();
+        this.id = id;
+
+        let revealVarName = `menu.circuit.start.${id}`;
+        let showRevealAnimation = !ig.vars.get(revealVarName);
+        ig.vars.set(revealVarName, true);
+
+        let size = Vec2.createC(ig.system.width, ig.system.height);
+        this.setSize(size.x, size.y);
+        this.setPivot(size.x / 2, size.y / 2);
 
-        let gfxs = this._areasGfx;
-        for (let i = 0, len = gfxs.length; i < len; i++) {
-          renderer.addGfx(gfxs[i], 0, 0, 0, 0, size.x, size.y);
+        let timeFunction = KEY_SPLINES.LINEAR;
+
+        // The children must be added in this exact order:
+
+        if (!visited || showRevealAnimation) {
+          this.defaultGfx = new ig.Image(`${ASSETS_DIR}/overlays/default/${id}.png`);
+          this.defaultGui = new ig.ImageGui(this.defaultGfx, 0, 0, size.x, size.y);
+          this.defaultGui.hook.transitions = {
+            DEFAULT: { state: {}, time: 0.2, timeFunction },
+            HIDDEN: { state: { alpha: 0 }, time: 0.2, timeFunction },
+          };
+          this.addChildGui(this.defaultGui);
+        }
+
+        if (visited) {
+          this.coloredGfx = new ig.Image(`${ASSETS_DIR}/overlays/colored/${id}.png`);
+          this.coloredGui = new ig.ImageGui(this.coloredGfx, 0, 0, size.x, size.y);
+          this.coloredGui.hook.transitions = {
+            DEFAULT: { state: {}, time: 0.3, timeFunction },
+            HIDDEN: { state: { alpha: 0 }, time: 0.5, timeFunction },
+          };
+          this.addChildGui(this.coloredGui);
+        }
+
+        if (visited && showRevealAnimation) {
+          this.revealGfx = new ig.Image(`${ASSETS_DIR}/overlays/reveal/${id}.png`);
+          this.revealGui = new ig.ImageGui(this.revealGfx, 0, 0, size.x, size.y);
+          this.revealGui.renderMode = 'lighter';
+          this.revealGui.hook.transitions = {
+            DEFAULT: { state: {}, time: 0.2, timeFunction },
+            HIDDEN: { state: { alpha: 0 }, time: 0.2, timeFunction },
+          };
+          this.addChildGui(this.revealGui);
+        }
+
+        if (visited && showRevealAnimation) {
+          // doStateTransition(name, skipTransition, removeAfter, callback, initDelay)
+          this.defaultGui.doStateTransition('DEFAULT', true);
+          this.coloredGui.doStateTransition('HIDDEN', true);
+          this.revealGui.doStateTransition('HIDDEN', true);
+
+          this.revealGui.doStateTransition(
+            'DEFAULT',
+            false,
+            false,
+            () => {
+              this.defaultGui.doStateTransition('HIDDEN', false);
+              this.coloredGui.doStateTransition('DEFAULT', true);
+              this.revealGui.doStateTransition('HIDDEN', false, false, null, 0.2);
+            },
+            0.4,
+          );
         }
       },
     });