How to Add more Banner

Sometimes I can't update the new banner on-time, so this guide for you who want to update your WishSim App.

Note / Rules:

1. All Images use the .webp extension, so you need to convert them first before they are ready to be used in the application
2. Each filename is lowercase and doesn't include whitespace and singlequote, you need to replace whitespace with dash - and replace singlequote with underscore _. ie. Wolf's Gravestone item filename is wolf_s-gravestone

Add New Images

1. First Take the banner pictures from Genshin Fanpage, then remove all text from them. You can use Photoshop or any other tools.

2. Then place the image into a separate folder according to the type of banner on /static/images/banner/ folder.

3. Resize the original picture to 200x99 pixel, put it to /static/images/thumbnail/ folder.

4. Don't forget to set the filename same as the banner name, put a number at the end, this number shows how many times the banner has been released.

5. Get the Splash Art, character's face, weapon images from Hoyo Wiki or Genshin Fandom Wiki or Honey Impact. Convert it to webp

6. Put them to separate folder according to their rarity in /static/images/characters and /static/images/weapons

Modify Files

There are 6 files that required to modify /src/lib/data/character.json, /src/lib/data/weapons.json, /src/lib/data/banners/events/{version}.json, /src/lib/setup/wish-setup.json, /src/locale/characters/en-US.json and /src/locale/weapons/en-US.json

1. First, navigate to src/data/characters.json, insert new object to list according the character's rarity with format below

   {
   	"name": "name-of-character", // (Rule 2)
   	"vision": "caracter_s-vision",
   	"limited": true, // set to "false" if non-limited character (available in standard wish)
   	"release": "{version}-{phase}",
   	"wishBoxPosition": { }
   }

   wishBoxPosition used for placing every splash art when user do multi roll. wishBoxPosition has 6 optional properties:

   props	stands for	Notes	default value
   h	Height (%)	Picture Height based on wishbox	180
   w	Width (%)	Picture Width based on wishbox	unset
   t	Top (%)	the picture position from top edge of the wishbox	75
   b	Bottom (%)	the picture position from bottom edge of the wishbox	unset
   l	Left (%)	the picture position from top left of the wishbox	50
   r	Right (&)	the picture position from right edge of the wishbox	unset

   example of implementation :

   

2. Then go to /src/lib/data/weapons.json, insert new weapons to list according the character's rarity with format below

   {
   	"name": "name-of-weapon", // (Rule 2)
   	"weaponType": "catalyst",
   	"limited": true
   }

3. Now navigate to /src/lib/data/banners/events/, if you want to add first phase banner, you need to create new file, named with version number that you want to add. if you want to add the second phase banner, just open an existing file and insert new data.

   {
   	"patch": 2.8,
   	"data": [{
   			"phase": 1,
   			"banners": {
   				"standardVersion": 3, // Which standard banner to use for this version
   				"events": {
   					"item": [{
   							"name": "{banner-name}-{number-of-releases}", // rule 2
   							"character": "character-name", // rule 2
   							"buttonBoxPosition": {}
   						},
   						{
   							"name": "{banner-name}-{number-of-releases}", // rule 2
   							"character": "character-name", // rule 2
   							"buttonBoxPosition": {}
   						}],
   					"rateup": ["character-1", "character-2", "character-3"] // Rule 2
   				},
   				"weapons": {
   					"name": "epitome-invocation-{number-of-releases}",
   					"fatepointsystem": true, // set to 'false' if doesn't use fatepoint system
   					"featured": [
   						{
   							"name": "1st-weapon-name", // rule 2
   							"type": "weapon-type",
   							"buttonBoxPosition": {}
   						},
   						{
   							"name": "2nd-weapon-name", // rule 2
   							"type": "weapon-type",
   							"buttonBoxPosition": {}
   						}
   					],
   					"rateup": ["rateup-weapon-1", "rateup-weapon-2", "rateup-weapon-3", "rateup-weapon-4", "rateup-weapon-5"] // Rule 2
   				}
   			}
   		}]
   }

   ButtonBoxPosition has 6 optional properties,

   props	stands for	Notes	default value
   h	Height (%)	Picture Height based on button box	unset
   w	Width (%)	Picture Width based on button box	unset
   t	Top (%)	the picture position from top edge of the button box	unset
   b	Bottom (%)	the picture position from bottom edge of the button box	unset
   l	Left (%)	the picture position from top left of the button box	50
   r	Right (&)	the picture position from right edge of the button box	unset

   This is the example of implementation

   

4. And then navigate to /src/lib/setup/wish-setup.json, open it and edit.

   {
   	"version": "2.8",
   	"wishPhase": 2,
   	"storageVersion": "2.8.3",
   	"allPatch": [1.0, 1.1, 1.2, 1.3, 1.4, 1.5, 1.6, 2.0, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6, 2.7, 2.8]
   }

   • Change version to the latest version or the version that you want to display once the app loaded
   • Change wishPhase to which phase that you want to show once the app loaded
   • Change storageVersion every time when you made changes to the app, the value is random, up to you
   • Insert All available version / patch to allPatch. every version that you put on this will appear in Banner List Page.

5. Last file to edit. open /src/locale/characters/en-US.json and /src/locale/weapons/en-US.json, insert new data here.

6. Nice, So that way the WishSim can load the latest Banner, but you also can modify /src/lib/setup/updates.json and update other locales.