Add some minor details to summary screen

public/images/types.json

@@ -4,11 +4,32 @@
 			"image": "types.png",
 			"format": "RGBA8888",
 			"size": {
-				"w": 612,
+				"w": 32,
-				"h": 16
+				"h": 266
 			},
 			"scale": 1,
 			"frames": [
+				{
+					"filename": "unknown",
+					"rotated": false,
+					"trimmed": false,
+					"sourceSize": {
+						"w": 32,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 32,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 32,
+						"h": 14
+					}
+				},
 				{
 					"filename": "bug",
 					"rotated": false,
@@ -24,8 +45,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 1,
+						"x": 0,
-						"y": 1,
+						"y": 14,
 						"w": 32,
 						"h": 14
 					}
@@ -45,8 +66,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 35,
+						"x": 0,
-						"y": 1,
+						"y": 28,
 						"w": 32,
 						"h": 14
 					}
@@ -66,8 +87,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 69,
+						"x": 0,
-						"y": 1,
+						"y": 42,
 						"w": 32,
 						"h": 14
 					}
@@ -87,8 +108,29 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 103,
+						"x": 0,
-						"y": 1,
+						"y": 56,
+						"w": 32,
+						"h": 14
+					}
+				},
+				{
+					"filename": "fairy",
+					"rotated": false,
+					"trimmed": false,
+					"sourceSize": {
+						"w": 32,
+						"h": 14
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 32,
+						"h": 14
+					},
+					"frame": {
+						"x": 0,
+						"y": 70,
 						"w": 32,
 						"h": 14
 					}
@@ -108,8 +150,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 137,
+						"x": 0,
-						"y": 1,
+						"y": 84,
 						"w": 32,
 						"h": 14
 					}
@@ -129,8 +171,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 171,
+						"x": 0,
-						"y": 1,
+						"y": 98,
 						"w": 32,
 						"h": 14
 					}
@@ -150,8 +192,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 205,
+						"x": 0,
-						"y": 1,
+						"y": 112,
 						"w": 32,
 						"h": 14
 					}
@@ -171,8 +213,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 239,
+						"x": 0,
-						"y": 1,
+						"y": 126,
 						"w": 32,
 						"h": 14
 					}
@@ -192,8 +234,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 273,
+						"x": 0,
-						"y": 1,
+						"y": 140,
 						"w": 32,
 						"h": 14
 					}
@@ -213,8 +255,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 307,
+						"x": 0,
-						"y": 1,
+						"y": 154,
 						"w": 32,
 						"h": 14
 					}
@@ -234,8 +276,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 341,
+						"x": 0,
-						"y": 1,
+						"y": 168,
 						"w": 32,
 						"h": 14
 					}
@@ -255,8 +297,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 375,
+						"x": 0,
-						"y": 1,
+						"y": 182,
 						"w": 32,
 						"h": 14
 					}
@@ -276,8 +318,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 409,
+						"x": 0,
-						"y": 1,
+						"y": 196,
 						"w": 32,
 						"h": 14
 					}
@@ -297,8 +339,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 443,
+						"x": 0,
-						"y": 1,
+						"y": 210,
 						"w": 32,
 						"h": 14
 					}
@@ -318,8 +360,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 477,
+						"x": 0,
-						"y": 1,
+						"y": 224,
 						"w": 32,
 						"h": 14
 					}
@@ -339,8 +381,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 511,
+						"x": 0,
-						"y": 1,
+						"y": 238,
 						"w": 32,
 						"h": 14
 					}
@@ -360,29 +402,8 @@
 						"h": 14
 					},
 					"frame": {
-						"x": 545,
-						"y": 1,
-						"w": 32,
-						"h": 14
-					}
-				},
-				{
-					"filename": "unknown",
-					"rotated": false,
-					"trimmed": false,
-					"sourceSize": {
-						"w": 32,
-						"h": 14
-					},
-					"spriteSourceSize": {
 						"x": 0,
-						"y": 0,
+						"y": 252,
-						"w": 32,
-						"h": 14
-					},
-					"frame": {
-						"x": 579,
-						"y": 1,
 						"w": 32,
 						"h": 14
 					}
@@ -393,6 +414,6 @@
 	"meta": {
 		"app": "https://www.codeandweb.com/texturepacker",
 		"version": "3.0",
-		"smartupdate": "$TexturePacker:SmartUpdate:487be8bed12f0ec062283a698524f491:d47bd2a8523f360e898c134601ed66bd:5961efbfbf4c56b8745347e7a663a32f$"
+		"smartupdate": "$TexturePacker:SmartUpdate:194223c9662d1ecd87e27433f731e65a:63fb5df5cbaa3edbf6f88332a579bdac:5961efbfbf4c56b8745347e7a663a32f$"
 	}
 }

src/ui/summary-ui-handler.ts

@@ -4,7 +4,7 @@ import UiHandler from "./uiHandler";
 import * as Utils from "../utils";
 import { PlayerPokemon } from "../pokemon";
 import { Type } from "../data/type";
-import { TextStyle, addTextObject } from "./text";
+import { TextStyle, addTextObject, getTextColor } from "./text";
 import Move, { MoveCategory } from "../data/move";
 import { getPokeballAtlasKey } from "../data/pokeball";
 import { getGenderColor, getGenderSymbol } from "../data/gender";
@@ -30,6 +30,7 @@ export default class SummaryUiHandler extends UiHandler {
 
   private summaryContainer: Phaser.GameObjects.Container;
   private tabSprite: Phaser.GameObjects.Sprite;
+  private shinyOverlay: Phaser.GameObjects.Image;
   private numberText: Phaser.GameObjects.Text;
   private pokemonSprite: Phaser.GameObjects.Sprite;
   private nameText: Phaser.GameObjects.Text;
@@ -81,6 +82,10 @@ export default class SummaryUiHandler extends UiHandler {
     this.tabSprite.setOrigin(1, 1);
     this.summaryContainer.add(this.tabSprite);
 
+    this.shinyOverlay = this.scene.add.image(6, -54, 'summary_overlay_shiny');
+    this.shinyOverlay.setOrigin(0, 1);
+    this.summaryContainer.add(this.shinyOverlay);
+
     this.numberText = addTextObject(this.scene, 17, -150, '000', TextStyle.SUMMARY);
     this.numberText.setOrigin(0, 1);
     this.summaryContainer.add(this.numberText);
@@ -152,7 +157,11 @@ export default class SummaryUiHandler extends UiHandler {
     this.summaryContainer.setVisible(true);
     this.cursor = -1;
 
+    this.shinyOverlay.setVisible(this.pokemon.shiny);
+
     this.numberText.setText(Utils.padInt(this.pokemon.species.speciesId, 3));
+    this.numberText.setColor(getTextColor(!this.pokemon.shiny ? TextStyle.SUMMARY : TextStyle.SUMMARY_GOLD));
+    this.numberText.setShadowColor(getTextColor(!this.pokemon.shiny ? TextStyle.SUMMARY : TextStyle.SUMMARY_GOLD, true));
 
     this.pokemonSprite.play(this.pokemon.getSpriteKey());
     this.pokemon.cry();

src/ui/text.ts

@@ -4,75 +4,45 @@ export enum TextStyle {
   BATTLE_INFO,
   PARTY,
   SUMMARY,
-  SUMMARY_RED
+  SUMMARY_RED,
+  SUMMARY_GOLD
 };
 
 export function addTextObject(scene: Phaser.Scene, x: number, y: number, content: string, style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle) {
-  let styleOptions: Phaser.Types.GameObjects.Text.TextStyle;
   let shadowColor: string;
   let shadowSize = 6;
 
+  let styleOptions: Phaser.Types.GameObjects.Text.TextStyle = {
+    fontFamily: 'emerald',
+    fontSize: '96px',
+    color: getTextColor(style, false),
+    padding: {
+      bottom: 6
+    }
+  };
+
   switch (style) {
+    case TextStyle.SUMMARY:
+    case TextStyle.SUMMARY_RED:
+    case TextStyle.SUMMARY_GOLD:
+      styleOptions.padding = undefined;
     case TextStyle.WINDOW:
-      styleOptions = {
-        fontFamily: 'emerald',
-        fontSize: '96px',
-        color: '#484848',
-        padding: {
-          bottom: 6
-        }
-      };
-      shadowColor = '#d0d0c8';
-      break;
     case TextStyle.MESSAGE:
-      styleOptions = {
+      styleOptions.fontSize = '96px';
-        fontFamily: 'emerald',
-        fontSize: '96px',
-        color: '#f8f8f8',
-        padding: {
-          bottom: 6
-        }
-      };
-      shadowColor = '#6b5a73';
       break;
     case TextStyle.BATTLE_INFO:
-      styleOptions = {
+      styleOptions.fontSize = '72px';
-        fontFamily: 'emerald',
+      styleOptions.padding = undefined;
-        fontSize: '72px',
-        color: '#404040'
-      };
-      shadowColor = '#ded6b5';
       shadowSize = 4;
       break;
     case TextStyle.PARTY:
-      styleOptions = {
+      styleOptions.fontFamily = 'pkmnems';
-        fontFamily: 'pkmnems',
+      styleOptions.fontSize = '66px';
-        fontSize: '66px',
-        color: '#f8f8f8',
-        padding: {
-          bottom: 6
-        }
-      };
-      shadowColor = '#707070';
-      break;
-    case TextStyle.SUMMARY:
-      styleOptions = {
-        fontFamily: 'emerald',
-        fontSize: '96px',
-        color: '#ffffff'
-      };
-      shadowColor = '#636363';
-      break;
-    case TextStyle.SUMMARY_RED:
-      styleOptions = {
-        fontFamily: 'emerald',
-        fontSize: '96px',
-        color: '#f89890'
-      };
-      shadowColor = '#984038';
       break;
   }
 
+  shadowColor = getTextColor(style, true);
+
   if (extraStyleOptions)
     styleOptions = Object.assign(styleOptions, extraStyleOptions);
 
@@ -82,4 +52,23 @@ export function addTextObject(scene: Phaser.Scene, x: number, y: number, content
   ret.setLineSpacing(5);
 
   return ret;
+}
+
+export function getTextColor(textStyle: TextStyle, shadow?: boolean) {
+  switch (textStyle) {
+    case TextStyle.MESSAGE:
+      return !shadow ? '#f8f8f8' : '#6b5a73';
+    case TextStyle.WINDOW:
+      return !shadow ? '#484848' : '#d0d0c8';
+    case TextStyle.BATTLE_INFO:
+      return !shadow ? '#404040' : '#ded6b5';
+    case TextStyle.PARTY:
+      return !shadow ? '#f8f8f8' : '#707070';
+    case TextStyle.SUMMARY:
+      return !shadow ? '#ffffff' : '#636363';
+    case TextStyle.SUMMARY_RED:
+      return !shadow ? '#f89890' : '#984038';
+    case TextStyle.SUMMARY_GOLD:
+      return !shadow ? '#e8e8a8' : '#a0a060'
+  }
 }