Pesky tabs

.gitattributes

@@ -1,6 +1,2 @@
-#
-# https://help.github.com/articles/dealing-with-line-endings/
-#
-# These are explicitly windows files and should use crlf
 *.bat           text eol=crlf
-
+src/main/resources/dashboard/scripts/pokedata.js linguist-vendored

README.md

@@ -1,5 +1,6 @@
 # Entralinked
 [![build](https://github.com/kuroppoi/entralinked/actions/workflows/dist-upload-artifact.yml/badge.svg)](https://github.com/kuroppoi/entralinked/actions)
+[![release](https://img.shields.io/github/v/release/kuroppoi/entralinked?labelColor=30373D&label=Release&logoColor=959DA5&logo=github)](https://github.com/kuroppoi/entralinked/releases/latest)
 
 Entralinked is a standalone Game Sync emulator developed for use with Pokémon Black & White and its sequels.\
 Its purpose is to serve as a simple utility for downloading Pokémon, Items, C-Gear skins, Pokédex skins, Musicals\
@@ -28,5 +29,5 @@ Entralinked has a built-in DNS server.\
 In order for your game to connect, you must configure the DNS settings of your DS.\
 By default, Entralinked is configured to automatically use the local host of the system.\
 This approach is not always accurate, however, and you may need to manually configure it in `config.json`.\
-If you receive error code `60000` when trying to connect, erase the Nintendo WFC Configuration of your DS and try again.\
-After tucking in a Pokémon, navigate to `http://localhost/dashboard/profile.html` in a web browser to configure Game Sync settings.
+If you receive error code `60000` when trying to connect, erase the WFC Configuration of your DS and try again.\
+After tucking in a Pokémon, navigate to http://localhost/dashboard/profile.html to configure Game Sync settings.

build.gradle

@@ -24,7 +24,7 @@ dependencies {
     implementation 'org.apache.logging.log4j:log4j-api:2.20.0'
     implementation 'com.fasterxml.jackson.core:jackson-databind:2.15.2'
     implementation 'com.fasterxml.jackson.datatype:jackson-datatype-jsr310:2.15.2'
-	implementation 'io.netty:netty-all:4.1.79.Final'
+    implementation 'io.netty:netty-all:4.1.79.Final'
     implementation 'io.javalin:javalin:5.5.0'
     implementation 'org.apache.logging.log4j:log4j-slf4j2-impl:2.20.0'
 }

src/main/java/entralinked/Configuration.java

@@ -1,14 +1,14 @@
 package entralinked;
 
 import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
-import com.fasterxml.jackson.annotation.JsonProperty;
 
 @JsonIgnoreProperties(ignoreUnknown = true)
 public record Configuration(
-        @JsonProperty(required = true) String hostName,
-        @JsonProperty(required = true) boolean clearPlayerDreamInfoOnWake,
-        @JsonProperty(required = true) boolean allowOverwritingPlayerDreamInfo,
-        @JsonProperty(required = true) boolean allowWfcRegistrationThroughLogin) {
+        String hostName,
+        boolean clearPlayerDreamInfoOnWake,
+        boolean allowOverwritingPlayerDreamInfo,
+        boolean allowPlayerGameVersionMismatch,
+        boolean allowWfcRegistrationThroughLogin) {
     
-    public static final Configuration DEFAULT = new Configuration("local", true, false, true);
+    public static final Configuration DEFAULT = new Configuration("local", true, false, false, true);
 }

src/main/java/entralinked/Entralinked.java

@@ -143,21 +143,25 @@ public class Entralinked {
     
     private Configuration loadConfigFile() {
         logger.info("Loading configuration ...");
+        Configuration configuration = null;
         
         try {
             File configFile = new File("config.json");
             
             if(!configFile.exists()) {
                 logger.info("No configuration file exists - default configuration will be used");
-                mapper.writeValue(configFile, Configuration.DEFAULT);
-                return Configuration.DEFAULT;
+                configuration = Configuration.DEFAULT;
             } else {
-                return mapper.readValue(configFile, Configuration.class);
+                configuration = mapper.readValue(configFile, Configuration.class);
             }
+            
+            mapper.writeValue(configFile, configuration);
         } catch(IOException e) {
             logger.error("Could not load configuration - default configuration will be used", e);
-            return Configuration.DEFAULT;
+            configuration = Configuration.DEFAULT;
         }
+        
+        return configuration;
     }
     
     public Configuration getConfiguration() {

src/main/java/entralinked/model/dlc/DlcList.java

@@ -79,6 +79,15 @@ public class DlcList {
                 
                 // DLC Content level
                 for(File dlcFile : subFile.listFiles()) {
+                    String name = dlcFile.getName();
+                    
+                    // Check if DLC name is reserved as an internal identifier
+                    if(name.equals("none") || name.equals("custom")) {
+                        logger.warn("DLC '{}/{}/{}' could not be loaded because it uses a reserved name.",
+                                file.getName(), subFile.getName(), name);
+                        continue;
+                    }
+                    
                     // Load DLC data
                     Dlc dlc = loadDlcFile(file.getName(), subFile.getName(), index, dlcFile);
                     

src/main/java/entralinked/model/pkmn/PkmnInfo.java

@@ -7,17 +7,18 @@ import com.fasterxml.jackson.annotation.JsonProperty;
  * Record containing information about a Pokémon
  */
 public record PkmnInfo(
-        @JsonProperty(required = true) int personality,
-        @JsonProperty(required = true) int species,
-        @JsonProperty(required = true) int heldItem,
-        @JsonProperty(required = true) int trainerId,
-        @JsonProperty(required = true) int trainerSecretId,
-        @JsonProperty(required = true) int level,
-        @JsonProperty(required = true) int form,
-        @JsonProperty(required = true) PkmnNature nature,
-        @JsonProperty(required = true) PkmnGender gender,
-        @JsonProperty(required = true) String nickname,
-        @JsonProperty(required = true) String trainerName) {
+        @JsonProperty(required = true)  String nickname,
+        @JsonProperty(required = true)  String trainerName,
+        @JsonProperty(required = true)  PkmnNature nature,
+        @JsonProperty(required = true)  PkmnGender gender,
+        @JsonProperty(required = true)  int species,
+        @JsonProperty(required = true)  int personality,
+        @JsonProperty(required = true)  int trainerId,
+        @JsonProperty(required = true)  int trainerSecretId,
+        @JsonProperty(required = true)  int level,
+        @JsonProperty(required = false) int form,
+        @JsonProperty(required = false) int ability,
+        @JsonProperty(required = false) int heldItem) {
     
     @JsonIgnore
     public boolean isShiny() {

src/main/java/entralinked/model/pkmn/PkmnInfoReader.java

@@ -58,7 +58,7 @@ public class PkmnInfoReader {
         
         // Read Pokémon data
         int species = buffer.getShortLE(8);
-        int item = buffer.getShortLE(10) & 0xFFFF;
+        int heldItem = buffer.getShortLE(10) & 0xFFFF;
         int trainerId = buffer.getShortLE(12) & 0xFFFF;
         int trainerSecretId = buffer.getShortLE(14) & 0xFFFF;
         int level = buffer.getByte(140);
@@ -78,14 +78,14 @@ public class PkmnInfoReader {
         
         // Loosely verify data
         if(species < 1 || species > 649) throw new IOException("Invalid species");
-        if(item < 0 || item > 638) throw new IOException("Invalid held item");
+        if(heldItem < 0 || heldItem > 638) throw new IOException("Invalid held item");
         if(ability < 1 || ability > 164) throw new IOException("Invalid ability");
         if(level < 1 || level > 100) throw new IOException("Level is out of range");
         if(nature == null) throw new IOException("Invalid nature");
         
         // Create record
-        PkmnInfo info = new PkmnInfo(personality, species, item, trainerId, trainerSecretId, level, form, nature, gender, nickname, trainerName);
-        return info;
+        return new PkmnInfo(nickname, trainerName, nature, gender, species, personality,
+                trainerId, trainerSecretId, level, form, ability, heldItem);
     }
     
     private static void decryptData(ByteBuf buffer, int offset, int length, int seed) throws IOException {

src/main/java/entralinked/model/player/Player.java

@@ -1,5 +1,6 @@
 package entralinked.model.player;
 
+import java.io.File;
 import java.util.ArrayList;
 import java.util.Collection;
 import java.util.Collections;
@@ -22,6 +23,9 @@ public class Player {
     private String cgearSkin;
     private String dexSkin;
     private String musical;
+    private String customCGearSkin;
+    private String customDexSkin;
+    private File dataDirectory;
     
     public Player(String gameSyncId) {
         this.gameSyncId = gameSyncId;
@@ -29,7 +33,6 @@ public class Player {
     
     public void resetDreamInfo() {
         status = PlayerStatus.AWAKE;
-        gameVersion = null;
         dreamerInfo = null;
         encounters.clear();
         items.clear();
@@ -132,4 +135,46 @@ public class Player {
     public String getMusical() {
         return musical;
     }
+    
+    public void setCustomCGearSkin(String customCGearSkin) {
+        this.customCGearSkin = customCGearSkin;
+    }
+    
+    public String getCustomCGearSkin() {
+        return customCGearSkin;
+    }
+    
+    public void setCustomDexSkin(String customDexSkin) {
+        this.customDexSkin = customDexSkin;
+    }
+    
+    public String getCustomDexSkin() {
+        return customDexSkin;
+    }
+    
+    // IO stuff
+    
+    public void setDataDirectory(File dataDirectory) {
+        this.dataDirectory = dataDirectory;
+    }
+    
+    public File getDataDirectory() {
+        return dataDirectory;
+    }
+    
+    public File getDataFile() {
+        return new File(dataDirectory, "data.json");
+    }
+    
+    public File getSaveFile() {
+        return new File(dataDirectory, "save.bin");
+    }
+    
+    public File getCGearSkinFile() {
+        return new File(dataDirectory, "cgear.bin");
+    }
+    
+    public File getDexSkinFile() {
+        return new File(dataDirectory, "zukan.bin");
+    }
 }

src/main/java/entralinked/model/player/PlayerDto.java

@@ -21,6 +21,8 @@ public record PlayerDto(
         String cgearSkin,
         String dexSkin,
         String musical,
+        String customCGearSkin,
+        String customDexSkin,
         int levelsGained,
         @JsonDeserialize(contentAs = DreamEncounter.class) Collection<DreamEncounter> encounters,
         @JsonDeserialize(contentAs = DreamItem.class)      Collection<DreamItem> items,
@@ -28,8 +30,9 @@ public record PlayerDto(
     
     public PlayerDto(Player player) {
         this(player.getGameSyncId(), player.getGameVersion(), player.getStatus(), player.getDreamerInfo(), 
-                player.getCGearSkin(), player.getDexSkin(), player.getMusical(), player.getLevelsGained(), 
-                player.getEncounters(), player.getItems(),player.getAvenueVisitors());
+                player.getCGearSkin(), player.getDexSkin(), player.getMusical(), player.getCustomCGearSkin(),
+                player.getCustomDexSkin(), player.getLevelsGained(), player.getEncounters(), player.getItems(),
+                player.getAvenueVisitors());
     }
     
     /**
@@ -43,6 +46,8 @@ public record PlayerDto(
         player.setCGearSkin(cgearSkin);
         player.setDexSkin(dexSkin);
         player.setMusical(musical);
+        player.setCustomCGearSkin(customCGearSkin);
+        player.setCustomDexSkin(customDexSkin);
         player.setLevelsGained(levelsGained);
         player.setEncounters(encounters == null ? Collections.emptyList() : encounters);
         player.setItems(items == null ? Collections.emptyList() : items);

src/main/java/entralinked/model/player/PlayerManager.java

@@ -5,6 +5,7 @@ import java.io.FileOutputStream;
 import java.io.IOException;
 import java.io.InputStream;
 import java.nio.file.Files;
+import java.nio.file.StandardCopyOption;
 import java.util.Collection;
 import java.util.Collections;
 import java.util.Map;
@@ -25,7 +26,6 @@ public class PlayerManager {
     private final ObjectMapper mapper = new ObjectMapper().enable(SerializationFeature.INDENT_OUTPUT);
     private final Map<String, Player> playerMap = new ConcurrentHashMap<>();
     private final File dataDirectory = new File("players");
-    private final File gameSaveDirectory = new File(dataDirectory, "savedata");
     
     public PlayerManager() {
         logger.info("Loading player data ...");
@@ -35,16 +35,76 @@ public class PlayerManager {
             return;
         }
         
+        // Migrate player data if necessary
+        migrateLegacyData();
+        
         // Load player data
         for(File file : dataDirectory.listFiles()) {
-            if(!file.isDirectory()) {
-                loadPlayer(file);
+            if(file.isDirectory()) {
+                loadPlayer(new File(file, "data.json"));
             }
         }
         
         logger.info("Loaded {} player(s)", playerMap.size());
     }
     
+    /**
+     * Migrates player data from the old storage format.
+     */
+    private void migrateLegacyData() {
+        // Migrate player configuration files
+        for(File file : dataDirectory.listFiles()) {
+            if(!file.isDirectory()) {
+                try {
+                    PlayerDto player = mapper.readValue(file, PlayerDto.class);
+                    File outputDirectory = new File(dataDirectory, player.gameSyncId());
+                    outputDirectory.mkdirs();
+                    Files.copy(file.toPath(), new File(outputDirectory, "data.json").toPath(), StandardCopyOption.REPLACE_EXISTING);
+                    file.delete();
+                } catch(IOException e) {
+                    logger.error("Could not migrate player data {}", file.getName());
+                }
+            }
+        }
+        
+        // Migrate game save data files
+        File gameSaveDirectory = new File(dataDirectory, "savedata");
+        
+        if(gameSaveDirectory.exists()) {
+            for(File file : gameSaveDirectory.listFiles()) {
+                if(!file.isDirectory()) {
+                    String name = file.getName();
+                    
+                    try {
+                        // Skip if game save data file has an invalid name
+                        if(!name.matches("^SAV-[A-HJ-NP-Z2-9]{10}.bin$")) {
+                            logger.warn("Game save data {} will not be migrated because the file name is invalid", name);
+                            file.delete();
+                            continue;
+                        }
+                        
+                        String gameSyncId = name.split("-")[1].replace(".bin", "");
+                        File outputDirectory = new File(dataDirectory, gameSyncId);
+                        
+                        // Skip if game save data does not belong to any existing Game Sync data
+                        if(!outputDirectory.isDirectory()) {
+                            logger.warn("Game save data {} will not be migrated because no Game Sync data exists for it", name);
+                            file.delete();
+                            continue;
+                        }
+                        
+                        Files.copy(file.toPath(), new File(outputDirectory, "save.bin").toPath(), StandardCopyOption.REPLACE_EXISTING);
+                        file.delete();
+                    } catch(IOException e) {
+                        logger.error("Could not migrate game save data {}", name, e);
+                    }
+                }
+            }
+            
+            gameSaveDirectory.delete();
+        }
+    }
+    
     /**
      * Loads a {@link Player} from the specified input file.
      * The loaded player instance is automatically mapped, unless it has an already-mapped Game Sync ID.
@@ -60,6 +120,7 @@ public class PlayerManager {
                 throw new IOException("Duplicate Game Sync ID %s".formatted(gameSyncId));
             }
             
+            player.setDataDirectory(inputFile.getParentFile());
             playerMap.put(gameSyncId, player);
         } catch(IOException e) {
             logger.error("Could not load player data at {}", inputFile.getAbsolutePath(), e);
@@ -75,12 +136,9 @@ public class PlayerManager {
     
     /**
      * Saves the data of the specified player to disk, and returns {@code true} if it succeeds.
-     * The output file is generated as follows:
-     * 
-     * {@code new File(dataDirectory, "PGL-%s".formatted(gameSyncId))}
      */
     public boolean savePlayer(Player player) {
-        return savePlayer(player, new File(dataDirectory, "PGL-%s.json".formatted(player.getGameSyncId())));
+        return savePlayer(player, player.getDataFile());
     }
     
     /**
@@ -124,9 +182,18 @@ public class PlayerManager {
             return null;
         }
         
+        // Create data directory
+        File playerDataDirectory = new File(dataDirectory, gameSyncId);
+        
+        if(playerDataDirectory.exists()) {
+            logger.warn("Can't register player {} because the data directory already exists!", gameSyncId);
+            return null;
+        }
+        
         // Construct player object
         Player player = new Player(gameSyncId);
         player.setStatus(PlayerStatus.AWAKE);
+        player.setDataDirectory(playerDataDirectory);
         
         // Try to save player data
         if(!savePlayer(player)) {
@@ -140,20 +207,11 @@ public class PlayerManager {
     
     /**
      * Stores a game save file read from the specified input stream to a file.
-     * The output file is generated as follows:
-     * 
-     * {@code new File(gameSaveDirectory, "SAV-%s.bin".formatted(gameSyncId))}
      * 
      * @return {@code true} if the game save file was written successfully, otherwise {@code false}.
      */
     public boolean storePlayerGameSaveFile(Player player, InputStream inputStream) {
-        // Try create directories
-        if(!gameSaveDirectory.exists() && !gameSaveDirectory.mkdirs()) {
-            return false;
-        }
-        
-        // Write the save data        
-        try(FileOutputStream outputStream = new FileOutputStream(getPlayerGameSaveFile(player))) {
+        try(FileOutputStream outputStream = new FileOutputStream(player.getSaveFile())) {
             inputStream.transferTo(outputStream);
             return true;
         } catch(IOException e) {
@@ -162,13 +220,6 @@ public class PlayerManager {
         }
     }
     
-    /**
-     * @return The game save data {@link File} object associated with this player.
-     */
-    public File getPlayerGameSaveFile(Player player) {
-        return new File(gameSaveDirectory, "SAV-%s.bin".formatted(player.getGameSyncId()));
-    }
-    
     /**
      * @return {@code true} if a player with the specified Game Sync ID exists, {@code false} otherwise.
      */

src/main/java/entralinked/model/user/User.java

@@ -5,11 +5,14 @@ import java.util.Collections;
 import java.util.HashMap;
 import java.util.Map;
 
+import entralinked.model.dlc.Dlc;
+
 public class User {
     
     private final String id;
     private final String password; // I debated hashing it, but.. it's a 3-digit password...
     private final Map<String, GameProfile> profiles = new HashMap<>();
+    private final Map<String, Dlc> dlcOverrides = new HashMap<>();
     
     public User(String id, String password) {
         this.id = id;
@@ -47,4 +50,24 @@ public class User {
     protected Map<String, GameProfile> getProfileMap() {
         return Collections.unmodifiableMap(profiles);
     }
+    
+    public void setDlcOverride(String type, Dlc target) {
+        if(target == null) {
+            dlcOverrides.remove(type);
+        } else {
+            dlcOverrides.put(type, target);
+        }
+    }
+    
+    public void removeDlcOverride(String type) {
+        dlcOverrides.remove(type);
+    }
+    
+    public boolean hasDlcOverride(String type) {
+        return dlcOverrides.containsKey(type);
+    }
+    
+    public Dlc getDlcOverride(String type) {
+        return dlcOverrides.get(type);
+    }
 }

src/main/java/entralinked/network/http/dashboard/DashboardHandler.java

@@ -1,7 +1,11 @@
 package entralinked.network.http.dashboard;
 
 import java.awt.image.BufferedImage;
+import java.io.ByteArrayInputStream;
+import java.io.ByteArrayOutputStream;
+import java.io.File;
 import java.io.FileInputStream;
+import java.io.FileOutputStream;
 import java.io.IOException;
 import java.util.Collections;
 import java.util.HashMap;
@@ -15,6 +19,7 @@ import javax.imageio.ImageIO;
 
 import org.apache.logging.log4j.LogManager;
 import org.apache.logging.log4j.Logger;
+import org.bouncycastle.util.Arrays;
 
 import com.fasterxml.jackson.databind.ObjectMapper;
 
@@ -30,8 +35,11 @@ import entralinked.model.player.Player;
 import entralinked.model.player.PlayerManager;
 import entralinked.model.player.PlayerStatus;
 import entralinked.network.http.HttpHandler;
+import entralinked.utility.ColorUtility;
+import entralinked.utility.Crc16;
 import entralinked.utility.GsidUtility;
-import entralinked.utility.TiledImageReader;
+import entralinked.utility.LEOutputStream;
+import entralinked.utility.TiledImageUtility;
 import io.javalin.Javalin;
 import io.javalin.config.JavalinConfig;
 import io.javalin.http.Context;
@@ -45,7 +53,7 @@ import io.javalin.json.JavalinJackson;
 public class DashboardHandler implements HttpHandler {
     
     private static final Logger logger = LogManager.getLogger();
-    private final Map<Dlc, BufferedImage> skinPreviewCache = new HashMap<>();
+    private final Map<Object, BufferedImage> skinPreviewCache = new HashMap<>();
     private final DlcList dlcList;
     private final PlayerManager playerManager;
     
@@ -57,18 +65,52 @@ public class DashboardHandler implements HttpHandler {
         logger.info("Loading C-Gear and Pokédex skin previews ...");
         List<Dlc> skins = dlcList.getDlcList(dlc -> dlc.type().startsWith("CGEAR") || dlc.type().equals("ZUKAN"));
         
+        // Cache default skins
         for(Dlc skin : skins) {
             try(FileInputStream inputStream = new FileInputStream(skin.path())) {
-                BufferedImage image = 
-                        skin.type().equals("ZUKAN") ? TiledImageReader.readDexSkin(inputStream) :
-                        skin.type().equals("CGEAR") ? TiledImageReader.readCGearSkin(inputStream, true) :
-                        TiledImageReader.readCGearSkin(inputStream, false); // CGEAR2
+                BufferedImage image = skin.type().equals("ZUKAN") ? TiledImageUtility.readDexSkin(inputStream, true)
+                        : skin.type().equals("CGEAR") ? TiledImageUtility.readCGearSkin(inputStream, true)
+                        : TiledImageUtility.readCGearSkin(inputStream, false); // CGEAR2
                 skinPreviewCache.put(skin, image);
             } catch(IOException | IndexOutOfBoundsException e) {
                 logger.error("Could not load image for skin {} of type {}", skin.name(), skin.type(), e);
             }
         }
         
+        // Cache custom skins for each player
+        for(Player player : playerManager.getPlayers()) {
+            File cgearSkinFile = player.getCGearSkinFile();
+            File dexSkinFile = player.getDexSkinFile();
+            
+            // Cache custom C-Gear skin preview if it exists
+            if(cgearSkinFile.exists()) {
+                try(FileInputStream inputStream = new FileInputStream(cgearSkinFile)) {
+                    boolean version2 = player.getGameVersion().isVersion2();
+                    
+                    // Read the C-Gear skin image
+                    BufferedImage image = TiledImageUtility.readCGearSkin(inputStream, !version2);
+                    
+                    // Cache the result
+                    skinPreviewCache.put("%s/%s".formatted(player.getGameSyncId(), version2 ? "CGEAR2" : "CGEAR"), image);
+                } catch(IOException | IndexOutOfBoundsException | NullPointerException e) {
+                    logger.error("Could not load custom C-Gear skin preview for player {}", player.getGameSyncId(), e);
+                }
+            }
+            
+            // Cache custom Pokédex skin preview if it exists
+            if(dexSkinFile.exists()) {
+                try(FileInputStream inputStream = new FileInputStream(dexSkinFile)) {
+                    // Read the Pokédex skin image
+                    BufferedImage image = TiledImageUtility.readDexSkin(inputStream, true);
+                    
+                    // Cache the result
+                    skinPreviewCache.put("%s/ZUKAN".formatted(player.getGameSyncId()), image);
+                } catch(IOException | IndexOutOfBoundsException e) {
+                    logger.error("Could not load custom Pokédex skin preview for player {}", player.getGameSyncId(), e);
+                }
+            }
+        }
+        
         logger.info("Cached {} skin previews", skinPreviewCache.size());
     }
     
@@ -77,6 +119,7 @@ public class DashboardHandler implements HttpHandler {
         javalin.get("/dashboard/previewskin", this::handlePreviewSkin);
         javalin.get("/dashboard/dlc", this::handleRetrieveDlcList);
         javalin.get("/dashboard/profile", this::handleRetrieveProfile);
+        javalin.post("/dashboard/uploadskin", this::handleUploadSkin);
         javalin.post("/dashboard/profile", this::handleUpdateProfile);
         javalin.post("/dashboard/login", this::handleLogin);
         javalin.post("/dashboard/logout", this::handleLogout);
@@ -111,15 +154,38 @@ public class DashboardHandler implements HttpHandler {
         
         // Make sure query parameters are present
         if(type == null || name == null) {
-            ctx.status(404);
+            ctx.status(HttpStatus.NOT_FOUND);
             return;
         }
         
+        // Handle custom skin preview
+        if(name.equals("custom")) {
+            Player player = ctx.sessionAttribute("player");
+            
+            // Check if player exists
+            if(player == null) {
+                ctx.status(HttpStatus.NOT_FOUND);
+                return;
+            }
+            
+            BufferedImage previewImage = skinPreviewCache.get("%s/%s".formatted(player.getGameSyncId(), type));
+            
+            // Check if preview image exists
+            if(previewImage == null) {
+                ctx.status(HttpStatus.NOT_FOUND);
+                return;
+            }
+            
+            ImageIO.write(previewImage, "png", ctx.outputStream());
+            return;
+        }
+        
+        // Handle DLC skin preview
         Dlc dlc = dlcList.getDlc("IRAO", type, name);
         
         // Check if DLC exists
         if(dlc == null) {
-            ctx.status(404);
+            ctx.status(HttpStatus.NOT_FOUND);
             return;
         }
         
@@ -188,7 +254,124 @@ public class DashboardHandler implements HttpHandler {
         
         // Store session attribute and send response
         ctx.sessionAttribute("player", player);
-        ctx.json(new DashboardStatusMessage("ok")); // heh
+        ctx.json(Collections.EMPTY_MAP);
+    }
+    
+    /**
+     * POST request handler for {@code /dashboard/uploadskin}
+     */
+    private void handleUploadSkin(Context ctx) throws IOException {
+        Player player = ctx.sessionAttribute("player");
+        
+        // Check if player exists
+        if(player == null) {
+            ctx.json(new DashboardStatusMessage("Unauthorized", true));
+            ctx.status(HttpStatus.UNAUTHORIZED);
+            return;
+        }
+        
+        String type = ctx.queryParam("type");
+        String fileName = ctx.queryParam("filename");
+        
+        // Check if type & file name are present and are valid
+        if(type == null || fileName == null ||
+                (!type.equals("CGEAR") && !type.equals("CGEAR2") && !type.equals("ZUKAN"))) {
+            ctx.status(HttpStatus.BAD_REQUEST);
+            return;
+        }
+        
+        try {
+            BufferedImage image = ImageIO.read(ctx.bodyInputStream());
+            BufferedImage previewImage = null;
+            
+            // Make sure file is a valid image
+            if(image == null) {
+                ctx.json(new DashboardStatusMessage("File is either not an image or uses an unsupported format.", true));
+                return;
+            }
+            
+            // Make sure image has the correct dimensions
+            if(image.getWidth() != 256 || image.getHeight() != 192) {
+                ctx.json(new DashboardStatusMessage("Image must be 256 x 192 pixels.", true));
+                return;
+            }
+            
+            File outputFile = type.equals("ZUKAN") ? player.getDexSkinFile() : player.getCGearSkinFile();
+            ByteArrayOutputStream byteOutputStream = new ByteArrayOutputStream();
+            byte[] skinBytes = null;
+            
+            // Write skin data to buffer and generate a preview image
+            switch(type) {
+                case "CGEAR":
+                case "CGEAR2":
+                    boolean offsetIndices = type.equals("CGEAR");
+                    TiledImageUtility.writeCGearSkin(byteOutputStream, image, offsetIndices);
+                    skinBytes = byteOutputStream.toByteArray();
+                    previewImage = TiledImageUtility.readCGearSkin(new ByteArrayInputStream(skinBytes), offsetIndices);
+                    break;
+                case "ZUKAN":
+                    // Generate some background colors based roughly on what's in the image
+                    int[] backgroundColors = Arrays.copyOf(TiledImageUtility.DEFAULT_DEX_BACKGROUND_COLORS, 64);
+                    int backgroundColor = image.getRGB(0, 0);
+                    int dexColor = image.getRGB(0, 134);
+                    int buttonColor = image.getRGB(128, 134);
+                    
+                    // Background colors (58, 59, 60)
+                    for(int i = 0; i < 3; i++) {
+                        backgroundColors[i + 58] = ColorUtility.multiplyColor(backgroundColor, 0.7 + i * 0.15);
+                    }
+                    
+                    // Pokédex colors (48, 49, 50, 51, 52)
+                    for(int i = 0; i < 5; i++) {
+                        backgroundColors[i + 48] = ColorUtility.multiplyColor(dexColor, 1.15 - i * 0.15);
+                    }
+                    
+                    // Pokédex button colors (53, 54, 55, 56)
+                    for(int i = 0; i < 4; i++) {
+                        backgroundColors[i + 53] = ColorUtility.multiplyColor(buttonColor, 0.55 + i * 0.15);
+                    }
+                    
+                    // Process skin data
+                    TiledImageUtility.writeDexSkin(byteOutputStream, image, backgroundColors);
+                    skinBytes = byteOutputStream.toByteArray();
+                    previewImage = TiledImageUtility.readDexSkin(new ByteArrayInputStream(skinBytes), true);
+                    break;
+            }
+            
+            // Write custom skin to output file
+            try(LEOutputStream outputStream = new LEOutputStream(new FileOutputStream(outputFile))) {
+                outputStream.write(skinBytes);
+                outputStream.writeShort(Crc16.calc(skinBytes));
+            }
+            
+            // Cache preview image
+            skinPreviewCache.put("%s/%s".formatted(player.getGameSyncId(), type), previewImage);
+        } catch(IOException e) {
+            logger.error("An error occured while processing custom skin data", e);
+            ctx.status(HttpStatus.INTERNAL_SERVER_ERROR);
+            return;
+        } catch(IllegalArgumentException e) {
+            // Silently discard exception, only send feedback to the client
+            ctx.json(new DashboardStatusMessage(e.getMessage(), true));
+            return;
+        }
+        
+        // Update player information
+        if(type.equals("ZUKAN")) {
+            player.setDexSkin("custom");
+            player.setCustomDexSkin(fileName);
+        } else {
+            player.setCGearSkin("custom");
+            player.setCustomCGearSkin(fileName);
+        }
+        
+        // Try to save player data
+        if(!playerManager.savePlayer(player)) {
+            ctx.json(new DashboardStatusMessage("Profile data could not be saved due to an error.", true));
+            return;
+        }
+        
+        ctx.json(Collections.EMPTY_MAP);
     }
     
     /**

src/main/java/entralinked/network/http/dashboard/DashboardProfileMessage.java

@@ -15,6 +15,8 @@ public record DashboardProfileMessage(
         String cgearSkin, 
         String dexSkin, 
         String musical, 
+        String customCGearSkin,
+        String customDexSkin,
         int levelsGained,
         Collection<DreamEncounter> encounters,
         Collection<DreamItem> items,
@@ -22,7 +24,8 @@ public record DashboardProfileMessage(
     
     public DashboardProfileMessage(String dreamerSprite, Player player) {
         this(player.getGameVersion().getDisplayName(), dreamerSprite, player.getDreamerInfo(), 
-                player.getCGearSkin(), player.getDexSkin(), player.getMusical(), player.getLevelsGained(), 
-                player.getEncounters(), player.getItems(), player.getAvenueVisitors());
+                player.getCGearSkin(), player.getDexSkin(), player.getMusical(), player.getCustomCGearSkin(), 
+                player.getCustomDexSkin(), player.getLevelsGained(),  player.getEncounters(), player.getItems(),
+                player.getAvenueVisitors());
     }
 }

src/main/java/entralinked/network/http/dls/DlsHandler.java

@@ -2,6 +2,7 @@ package entralinked.network.http.dls;
 
 import java.io.FileInputStream;
 import java.io.IOException;
+import java.util.List;
 
 import com.fasterxml.jackson.databind.ObjectMapper;
 
@@ -9,6 +10,7 @@ import entralinked.Entralinked;
 import entralinked.model.dlc.Dlc;
 import entralinked.model.dlc.DlcList;
 import entralinked.model.user.ServiceSession;
+import entralinked.model.user.User;
 import entralinked.model.user.UserManager;
 import entralinked.network.http.HttpHandler;
 import entralinked.network.http.HttpRequestHandler;
@@ -59,6 +61,9 @@ public class DlsHandler implements HttpHandler {
             default -> throw new IllegalArgumentException("Invalid POST request action: " + request.action());
         };
         
+        // Store user attribute for subsequent handlers
+        ctx.attribute("user", session.user());
+        
         // Handle the request
         handler.process(request, ctx);
     }
@@ -67,9 +72,16 @@ public class DlsHandler implements HttpHandler {
      * POST handler for {@code /download action=list}
      */
     private void handleRetrieveDlcList(DlsRequest request, Context ctx) throws IOException {
+        User user = ctx.attribute("user");
         String gameCode = getDlcGameCode(request.dlcGameCode());
         String type = getRegionlessDlcType(request.dlcType());
         
+        // If an overriding DLC is present, send the data for that instead.
+        if(user.hasDlcOverride(type)) {
+            ctx.result(dlcList.getDlcListString(List.of(user.getDlcOverride(type))));
+            return;
+        }
+        
         // TODO NOTE: I assume that in a conventional implementation, certain DLC attributes may be omitted from the request.
         ctx.result(dlcList.getDlcListString(dlcList.getDlcList(gameCode, type, request.dlcIndex())));
     }
@@ -78,9 +90,10 @@ public class DlsHandler implements HttpHandler {
      * POST handler for {@code /download action=contents}
      */
     private void handleRetrieveDlcContent(DlsRequest request, Context ctx) throws IOException {
+        User user = ctx.attribute("user");
         String gameCode = getDlcGameCode(request.dlcGameCode());
         String type = getRegionlessDlcType(request.dlcType());
-        Dlc dlc = dlcList.getDlc(gameCode, type, request.dlcName());
+        Dlc dlc = user.hasDlcOverride(type) ? user.getDlcOverride(type) : dlcList.getDlc(gameCode, type, request.dlcName());
         
         // Check if the requested DLC exists
         if(dlc == null) {

src/main/java/entralinked/network/http/nas/NasHandler.java

@@ -117,6 +117,14 @@ public class NasHandler implements HttpHandler {
      * POST handler for {@code /ac action=SVCLOC}
      */
     private void handleRetrieveServiceLocation(NasRequest request, Context ctx) throws IOException {
+        // Authenticate user
+        User user = userManager.authenticateUser(request.userId(), request.password());
+        
+        if(user == null) {
+            result(ctx, NasReturnCode.USER_NOT_FOUND);
+            return;
+        }
+        
         // Determine service location from type
         String service = switch(request.serviceType()) {
             case "0000" -> "external"; // External game-specific service
@@ -125,7 +133,7 @@ public class NasHandler implements HttpHandler {
         };
         
         // Prepare user credentials
-        ServiceCredentials credentials = userManager.createServiceSession(null, service, null);
+        ServiceCredentials credentials = userManager.createServiceSession(user, service, null);
         result(ctx, new NasServiceLocationResponse(true, service, credentials.authToken()));
     }
     

src/main/java/entralinked/network/http/pgl/PglHandler.java

@@ -16,6 +16,7 @@ import com.fasterxml.jackson.databind.ObjectMapper;
 import entralinked.Configuration;
 import entralinked.Entralinked;
 import entralinked.model.avenue.AvenueVisitor;
+import entralinked.model.dlc.Dlc;
 import entralinked.model.dlc.DlcList;
 import entralinked.model.pkmn.PkmnInfo;
 import entralinked.model.pkmn.PkmnInfoReader;
@@ -26,6 +27,7 @@ import entralinked.model.player.Player;
 import entralinked.model.player.PlayerManager;
 import entralinked.model.player.PlayerStatus;
 import entralinked.model.user.ServiceSession;
+import entralinked.model.user.User;
 import entralinked.model.user.UserManager;
 import entralinked.network.http.HttpHandler;
 import entralinked.network.http.HttpRequestHandler;
@@ -108,8 +110,9 @@ public class PglHandler implements HttpHandler {
             return;
         }
         
-        // Store request object for subsequent handlers
+        // Store attributes for subsequent handlers
         ctx.attribute("request", request);
+        ctx.attribute("user", session.user());
     }
     
     /**
@@ -142,7 +145,7 @@ public class PglHandler implements HttpHandler {
             writeStatusCode(outputStream, 1); // Unauthorized
             return;
         }
-                
+        
         // Create bitlist
         byte[] bitlist = new byte[128]; // TODO pool? maybe just cache
         
@@ -187,6 +190,7 @@ public class PglHandler implements HttpHandler {
     private void handleDownloadSaveData(PglRequest request, Context ctx) throws IOException {
         LEOutputStream outputStream = new LEOutputStream(ctx.outputStream());
         Player player = playerManager.getPlayer(request.gameSyncId());
+        User user = ctx.attribute("user");
         
         // Check if player exists
         if(player == null) {
@@ -207,6 +211,33 @@ public class PglHandler implements HttpHandler {
         List<DreamEncounter> encounters = player.getEncounters();
         List<DreamItem> items = player.getItems();
         
+        // Prepare DLC information
+        String cgearType = player.getGameVersion().isVersion2() ? "CGEAR2" : "CGEAR";
+        String cgearSkin = player.getCGearSkin();
+        String dexSkin = player.getDexSkin();
+        int cgearSkinIndex = 0;
+        int dexSkinIndex = 0;
+        
+        // Create or remove custom C-Gear skin DLC override
+        if("custom".equals(cgearSkin)) {
+            cgearSkinIndex = 1;
+            user.setDlcOverride(cgearType, new Dlc(player.getCGearSkinFile().getAbsolutePath(),
+                    "custom", "IRAO", cgearType, cgearSkinIndex, 9730, 0, true));
+        } else {
+            cgearSkinIndex = dlcList.getDlcIndex("IRAO", cgearType, cgearSkin);
+            user.removeDlcOverride(cgearType);
+        }
+        
+        // Create or remove custom Pokédex skin DLC override
+        if("custom".equals(dexSkin)) {
+            dexSkinIndex = 1;
+            user.setDlcOverride("ZUKAN", new Dlc(player.getDexSkinFile().getAbsolutePath(),
+                    "custom", "IRAO", "ZUKAN", dexSkinIndex, 25090, 0, true));
+        } else {
+            dexSkinIndex = dlcList.getDlcIndex("IRAO", "ZUKAN", dexSkin);
+            user.removeDlcOverride("ZUKAN");
+        }
+        
          // When waking up a Pokémon, these 4 bytes are written to 0x1D304 in the save file.
          // If the bytes in the game's save file match the new bytes, they will be set to 0x00000000
          // and no content will be downloaded.
@@ -229,8 +260,8 @@ public class PglHandler implements HttpHandler {
         outputStream.writeShort(player.getLevelsGained());
         outputStream.write(0); // Unknown
         outputStream.write(dlcList.getDlcIndex("IRAO", "MUSICAL", player.getMusical()));
-        outputStream.write(dlcList.getDlcIndex("IRAO", player.getGameVersion().isVersion2() ? "CGEAR2" : "CGEAR", player.getCGearSkin()));
-        outputStream.write(dlcList.getDlcIndex("IRAO", "ZUKAN", player.getDexSkin()));
+        outputStream.write(cgearSkinIndex);
+        outputStream.write(dexSkinIndex);
         outputStream.write(decorList.isEmpty() ? 0 : 1); // Seems to be a flag for indicating whether or not decor data is present
         outputStream.write(0); // Must be zero?
         
@@ -326,7 +357,7 @@ public class PglHandler implements HttpHandler {
         }
         
         // Check if the game save data exists
-        File file = playerManager.getPlayerGameSaveFile(player);
+        File file = player.getSaveFile();
         
         if(!file.exists()) {
             writeStatusCode(outputStream, 5); // No game save data exists for this Game Sync ID
@@ -394,10 +425,13 @@ public class PglHandler implements HttpHandler {
         // Prepare response
         LEOutputStream outputStream = new LEOutputStream(ctx.outputStream());
         
-        // Check if the player exists and does not already have a Pokémon tucked in
+        // Check if the player exists, has no Pokémon tucked in already and uses the same game version
         Player player = playerManager.getPlayer(request.gameSyncId());
         
-        if(player == null || (player.getStatus() != PlayerStatus.AWAKE && !configuration.allowOverwritingPlayerDreamInfo())) {
+        if(player == null
+                || (!configuration.allowOverwritingPlayerDreamInfo() && player.getStatus() != PlayerStatus.AWAKE)
+                || (!configuration.allowPlayerGameVersionMismatch() && player.getGameVersion() != null 
+                        && request.gameVersion() != player.getGameVersion())) {
             // Skip everything
             ServletInputStream inputStream = ctx.req().getInputStream();
             
@@ -419,7 +453,7 @@ public class PglHandler implements HttpHandler {
         // Read save data
         PkmnInfo dreamerInfo = null;
         
-        try(FileInputStream inputStream = new FileInputStream(playerManager.getPlayerGameSaveFile(player))) {
+        try(FileInputStream inputStream = new FileInputStream(player.getSaveFile())) {
             inputStream.skip(0x1D300); // Skip to dream world data
             inputStream.skip(8); // Skip to Pokémon data
             dreamerInfo = PkmnInfoReader.readPokeInfo(inputStream);

src/main/java/entralinked/utility/ColorUtility.java

@@ -0,0 +1,48 @@
+package entralinked.utility;
+
+/**
+ * Utility class for various color-related shenanigans.
+ */
+public class ColorUtility {
+    
+    /**
+     * Multiplies the red, green and blue components of the specified RGB888 color value by the given factor.
+     * 
+     * @param color The color to multiply.
+     * @param factor The factor to use.
+     * @return The multiplied color.
+     */
+    public static int multiplyColor(int color, double factor) {
+        int red = color >> 16 & 0xFF;
+        int green = color >> 8 & 0xFF;
+        int blue = color & 0xFF;
+        red = Math.max(0, Math.min(255, (int)(red * factor)));
+        green = Math.max(0, Math.min(255, (int)(green * factor)));
+        blue = Math.max(0, Math.min(255, (int)(blue * factor)));
+        return (red << 16) | (green << 8) | blue;
+    }
+    
+    /**
+     * Converts the input BGR555 color value to an RGB888 color value.
+     * 
+     * @return The RGB888 color value.
+     */
+    public static int convertBGR555ToRGB888(int color) {
+        int red = (color & 0x1F) << 3;
+        int green = ((color & 0x3E0) >> 5) << 3;
+        int blue = ((color & 0x7C00) >> 10) << 3;
+        return (red << 16) | (green << 8) | blue;
+    }
+    
+    /**
+     * Converts the input RGB888 color value to a BGR555 color value.
+     * 
+     * @return The BGR555 color value.
+     */
+    public static int convertRGB888ToBGR555(int color) {
+        int red = color >> 16 & 0xFF;
+        int green = color >> 8 & 0xFF;
+        int blue = color & 0xFF;
+        return (red >> 3) | (green >> 3 << 5) | (blue >> 3 << 10);
+    }
+}

src/main/java/entralinked/utility/LEInputStream.java

@@ -0,0 +1,51 @@
+package entralinked.utility;
+
+import java.io.FilterInputStream;
+import java.io.IOException;
+import java.io.InputStream;
+
+/**
+ * Like {@link LEOutputStream}, but {@link InputStream}.
+ */
+public class LEInputStream extends FilterInputStream {
+    
+    protected final byte[] buffer = new byte[8];
+    
+    public LEInputStream(InputStream inputStream) {
+        super(inputStream);
+    }
+    
+    public short readShort() throws IOException {
+        in.read(buffer, 0, 2);
+        return (short)(buffer[0] & 0xFF
+                   | ((buffer[1] & 0xFF) << 8));
+    }
+    
+    public int readInt() throws IOException {
+        in.read(buffer, 0, 4);
+        return buffer[0] & 0xFF
+            | ((buffer[1] & 0xFF) << 8)
+            | ((buffer[2] & 0xFF) << 16)
+            | ((buffer[3] & 0xFF) << 24);
+    }
+    
+    public double readFloat() throws IOException {
+        return Float.intBitsToFloat(readInt());
+    }
+    
+    public long readLong() throws IOException {
+        in.read(buffer, 0, 8);
+        return buffer[0] & 0xFF
+            | ((buffer[1] & 0xFF) << 8)
+            | ((buffer[2] & 0xFF) << 16)
+            | ((long)(buffer[3] & 0xFF) << 24)
+            | ((long)(buffer[4] & 0xFF) << 32)
+            | ((long)(buffer[5] & 0xFF) << 40)
+            | ((long)(buffer[6] & 0xFF) << 48)
+            | ((long)(buffer[7] & 0xFF) << 56);
+    }
+    
+    public double readDouble() throws IOException {
+        return Double.longBitsToDouble(readLong());
+    }
+}

src/main/java/entralinked/utility/TiledImageReader.java

@@ -1,130 +0,0 @@
-package entralinked.utility;
-
-import java.awt.image.BufferedImage;
-import java.io.IOException;
-import java.io.InputStream;
-
-/**
- * Utility class for reading tiled images (C-Gear & Pokédex skin data) into a usable {@link BufferedImage}.
- */
-public class TiledImageReader {
-    
-    public static final int TILE_WIDTH = 8;
-    public static final int TILE_HEIGHT = 8;
-    public static final int TILE_SIZE = TILE_WIDTH * TILE_HEIGHT;
-    public static final int COLOR_PALETTE_SIZE = 16;
-    public static final int SCREEN_WIDTH = 256;
-    public static final int SCREEN_HEIGHT = 192;
-    public static final int SCREEN_TILE_COUNT = SCREEN_WIDTH * SCREEN_HEIGHT / TILE_SIZE;
-    
-    /**
-     * Calls {@link #readTiledImage(InputStream, int, boolean)} with a tile count of 255.
-     * 
-     * @param normalizeIndices Should be {@code true} if the provided C-Gear skin data is from the original Black & White.
-     * @return A {@link BufferedImage} representing the read C-Gear skin data.
-     */
-    public static BufferedImage readCGearSkin(InputStream inputStream, boolean normalizeIndices) throws IOException {
-        return readTiledImage(inputStream, 255, normalizeIndices);
-    }
-    
-    /**
-     * Calls {@link #readTiledImage(InputStream, int, boolean)} with a tile count of 768 and index normalization disabled.
-     * 
-     * @return A {@link BufferedImage} representing the read Pokédex skin data.
-     */
-    public static BufferedImage readDexSkin(InputStream inputStream) throws IOException {
-        return readTiledImage(inputStream, 768, false);
-    }
-    
-    /**
-     * Reads tiled image data from the provided {@link InputStream} and returns a {@link BufferedImage} representing the read image data.
-     * 
-     * @param tileCount The number of tiles to be read. This should be equal to the maximum number of tiles for this image.
-     * @param normalizedIndices Indicates that tile indices are not linear (Black & White C-Gear skins) and should be normalized.
-     * @return A {@link BufferedImage} representing the read image data.
-     */
-    public static BufferedImage readTiledImage(InputStream inputStream, int tileCount, boolean normalizeIndices) throws IOException {
-        BufferedImage image = new BufferedImage(SCREEN_WIDTH, SCREEN_HEIGHT, BufferedImage.TYPE_INT_RGB); // Result image
-        int[] tileData = new int[tileCount * TILE_SIZE];
-        int[] tileIndices = new int[tileCount]; // Tile index lookup table
-        int[] colorPalette = new int[COLOR_PALETTE_SIZE];
-        
-        // Read tile data.
-        for(int i = 0; i < tileCount; i++) {
-            for(int j = 0; j < TILE_SIZE / 2; j++) {
-                int paletteIndices = inputStream.read(); // Contains color palette indices for 2 adjacent pixels.
-                tileData[i * TILE_SIZE + j * 2] = paletteIndices & (COLOR_PALETTE_SIZE - 1);
-                tileData[i * TILE_SIZE + j * 2 + 1] = (paletteIndices >> 4) & (COLOR_PALETTE_SIZE - 1);
-            }
-            
-            // Store the index of the tile as it would be in memory so we can look it up later when we're mapping the tiles.
-            tileIndices[i] = normalizeIndices ? i + i / 17 * 15 + 0xA0A0 : i;
-        }
-        
-        // Read color data.
-        // Pokédex skins contain room for 240 extra colors, 64 of which are defined and appear to be used as the 
-        // 'background' colors in cases where the skin is only an overlay that is displayed on top of the 'true' Pokédex.
-        for(int i = 0; i < COLOR_PALETTE_SIZE; i++) {
-            int color = inputStream.read() | inputStream.read() << 8;
-            
-            // Convert BGR555 to RGB888
-            int red = (color & 0x1F) << 3;
-            int green = ((color & 0x3E0) >> 5) << 3;
-            int blue = ((color & 0x7C00) >> 10) << 3;
-            colorPalette[i] = (red << 16) | (green << 8) | blue;
-        }
-        
-        // Map tiles to the resulting image.
-        // In cases where the tile count is 768 or greater, which is exactly enough tiles to fill the entire screen,
-        // the tiles will be applied in the order they are provided and no additional mapping data will be read.
-        // This is always the case for Pokédex skins, and never the case for C-Gear skins.
-        if(tileCount < SCREEN_TILE_COUNT) {
-            // Not enough tiles -- read additional mapping data to figure out their placement.
-            for(int i = 0; i < SCREEN_TILE_COUNT; i++) {
-                int x = i * TILE_WIDTH % SCREEN_WIDTH;
-                int y = i * TILE_WIDTH / SCREEN_WIDTH * TILE_HEIGHT;
-                int leftBits = inputStream.read();
-                int rightBits = inputStream.read();
-                int memoryIndex = leftBits | (rightBits & ~12) << 8;
-                int flipBits = rightBits & 12;
-                
-                // The normalized tile index is the index of the in-memory tile index in the lookup table.
-                int tileIndex = 0;
-                
-                for(int k = 0; k < tileIndices.length; k++) {
-                    if(memoryIndex == tileIndices[k]) {
-                        tileIndex = k;
-                        break;
-                    }
-                }
-                
-                // Apply the pixels of this tile to the resulting image.
-                for(int j = 0; j < TILE_SIZE; j++) {
-                    // Get the color index for this pixel based on how the tile is flipped.
-                    int tilePixelIndex = switch(flipBits) {
-                        case 4 -> (TILE_WIDTH * (j / TILE_WIDTH) + TILE_WIDTH) - j % TILE_WIDTH - 1; // Flip horizontally
-                        case 8 -> TILE_SIZE - (TILE_WIDTH * (j / TILE_WIDTH) + TILE_WIDTH) + j % TILE_WIDTH; // Flip vertically
-                        case 12 -> TILE_SIZE - j - 1; // Flip horizontally & vertically
-                        default -> j; // Don't flip
-                    };
-                                        
-                    // Finally, set the pixel!
-                    int paletteIndex = tileData[tileIndex * TILE_SIZE + tilePixelIndex];
-                    image.setRGB(x + j % TILE_WIDTH, y + j / TILE_WIDTH, colorPalette[paletteIndex]);
-                }
-            }
-        } else {
-            // There are enough tiles to fill up the entire screen, so let's just place them in order.
-            for(int i = 0; i < SCREEN_TILE_COUNT; i++) {
-                int x = i * TILE_WIDTH % SCREEN_WIDTH;
-                int y = i * TILE_WIDTH / SCREEN_WIDTH * TILE_WIDTH;
-                
-                for(int j = 0; j < TILE_SIZE; j++) {
-                    image.setRGB(x + j % TILE_WIDTH, y + j / TILE_WIDTH, colorPalette[tileData[i * TILE_SIZE + j]]);
-                }
-            }
-        }
-        
-        return image;
-    }
-}

src/main/java/entralinked/utility/TiledImageUtility.java

@@ -0,0 +1,378 @@
+package entralinked.utility;
+
+import java.awt.image.BufferedImage;
+import java.io.IOException;
+import java.io.InputStream;
+import java.io.OutputStream;
+
+import org.apache.logging.log4j.LogManager;
+import org.apache.logging.log4j.Logger;
+
+/**
+ * Utility class for reading/writing tiled images to/from {@link BufferedImage} objects.
+ */
+public class TiledImageUtility {
+    
+    public static final int[] DEFAULT_DEX_BACKGROUND_COLORS = {
+            0xE8E8E8, 0xE0E0E0, 0xD8D8D8, 0xD0D0D0, 0xD0C8C8, 0xC8C8C8, 0xC0C0C0, 0xB8B8B8, 0xB0B0B0, 0xA8A8A8, 0xA0A0A0,
+            0xA0A098, 0x989898, 0x909090, 0x888888, 0x808080, 0x787878, 0x707070, 0x686868, 0x606060, 0x585858, 0x505050,
+            0x484850, 0x484848, 0x484840, 0x404040, 0xF800F8, 0xF800F8, 0xF800F8, 0xF800F8, 0xF800F8, 0xF800F8, 0x282828,
+            0x202020, 0x181818, 0x101010, 0xF800F8, 0x303030, 0x404040, 0x505050, 0xF800F8, 0xF800F8, 0xF800F8, 0xF800F8,
+            0xF800F8, 0xF800F8, 0xF800F8, 0xF800F8, 0xF870A0, 0xF84878, 0xC03860, 0x802848, 0x482030, 0x505858, 0x909090,
+            0xC8C8C8, 0xE0E8E8, 0xF800F8, 0x404848, 0x707878, 0xA8B0B0, 0xF800F8, 0xF800F8, 0xF800F8}; // Unsafe
+    public static final int TILE_WIDTH = 8;
+    public static final int TILE_HEIGHT = 8;
+    public static final int TILE_SIZE = TILE_WIDTH * TILE_HEIGHT;
+    public static final int COLOR_PALETTE_SIZE = 16;
+    public static final int SCREEN_WIDTH = 256;
+    public static final int SCREEN_HEIGHT = 192;
+    public static final int SCREEN_SIZE = SCREEN_WIDTH * SCREEN_HEIGHT;
+    public static final int SCREEN_TILE_COUNT = SCREEN_SIZE / TILE_SIZE;
+    private static final byte[] dexBackgroundColorIndices = new byte[SCREEN_SIZE];
+    private static final boolean[] dexBackgroundOverrides = new boolean[SCREEN_SIZE];
+    private static final Logger logger = LogManager.getLogger();
+    
+    static {
+        // Load Pokédex skin background data
+        try(LEInputStream inputStream = new LEInputStream(TiledImageUtility.class.getResourceAsStream("/zukan.bin"))) {
+            int index = 0;
+            int pairs = inputStream.readShort();
+            
+            // Read background color indices
+            for(int i = 0; i < pairs; i++) {
+                int amount = inputStream.read();
+                int value = inputStream.read();
+                
+                for(int j = 0; j < amount; j++) {
+                    dexBackgroundColorIndices[index++] = (byte)(value & 63);
+                }
+            }
+            
+            index = 0;
+            pairs = inputStream.readShort();
+            
+            // Read background override bits
+            for(int i = 0; i < pairs; i++) {
+                int amount = inputStream.readShort();
+                int value = inputStream.read();
+                
+                for(int j = 0; j < amount; j++) {
+                    for(int k = 0; k < 8; k++) {
+                        dexBackgroundOverrides[index++] = (value & 1 << k) != 0;
+                    }
+                }
+            }
+        } catch(IOException e) {
+            logger.error("Could not load Pokédex background data", e);
+        }
+    }
+    
+    /**
+     * Reads a C-Gear skin from the specified {@link InputStream}.
+     * 
+     * @param inputStream The input stream to read from.
+     * @param normalizeIndices Should be {@code true} if the provided C-Gear skin data is from the original Black & White.
+     * @return A {@link BufferedImage} representing the read C-Gear skin data.
+     */
+    public static BufferedImage readCGearSkin(InputStream inputStream, boolean normalizeIndices) throws IOException {
+        return readTiledImage(new LEInputStream(inputStream), 255, 0, null, null, normalizeIndices);
+    }
+    
+    /**
+     * Reads a Pokédex skin from the specified {@link InputStream}.
+     * If the skin in question is an overlay, the Pokédex background will be applied to the resulting image automatically.
+     * 
+     * @param inputStream The input stream to read from.
+     * @param applyBackground Whether to apply the Pokédex background to the result image, or read the data as-is.
+     * @return A {@link BufferedImage} representing the read Pokédex skin data.
+     */
+    public static BufferedImage readDexSkin(InputStream inputStream, boolean applyBackground) throws IOException {
+        return readTiledImage(new LEInputStream(inputStream), 768, 64,
+                applyBackground ? dexBackgroundColorIndices : null, applyBackground ? dexBackgroundOverrides : null, false);
+    }
+    
+    /**
+     * Reads tiled image data from the provided {@link InputStream} and returns a {@link BufferedImage} representing the read image data.
+     * 
+     * @param inputStream The input stream to read from.
+     * @param tileCount The number of tiles to be read. This should be equal to the maximum number of tiles for this image.
+     * @param backgroundColorCount The number of background colors this image has.
+     * @param backgroundColorIndices The background color indices of the background image. If {@code null}, no background will be used.
+     * @param backgroundOverrides An array of booleans representing pixels that forcibly use the background color. Can be {@code null}.
+     * @param normalizedIndices Indicates that tile indices are not linear (Black & White C-Gear skins) and should be normalized.
+     * @return A {@link BufferedImage} representing the read image data.
+     */
+    private static BufferedImage readTiledImage(LEInputStream inputStream, int tileCount, int backgroundColorCount,
+            byte[] backgroundColorIndices, boolean[] backgroundOverrides, boolean normalizeIndices) throws IOException {
+        BufferedImage image = new BufferedImage(SCREEN_WIDTH, SCREEN_HEIGHT, BufferedImage.TYPE_INT_RGB); // Result image
+        int[] tileData = new int[tileCount * TILE_SIZE];
+        int[] tileIndices = new int[tileCount]; // Tile index lookup table
+        int[] colorPalette = new int[COLOR_PALETTE_SIZE];
+        int[] backgroundColorPalette = new int[backgroundColorCount];
+        
+        // Read tile data.
+        for(int i = 0; i < tileCount; i++) {
+            byte[] rawTileData = inputStream.readNBytes(TILE_SIZE / 2);
+            
+            for(int j = 0; j < rawTileData.length; j++) {
+                int paletteIndices = rawTileData[j]; // Contains color palette indices for 2 adjacent pixels.
+                tileData[i * TILE_SIZE + j * 2] = paletteIndices & (COLOR_PALETTE_SIZE - 1);
+                tileData[i * TILE_SIZE + j * 2 + 1] = (paletteIndices >> 4) & (COLOR_PALETTE_SIZE - 1);
+            }
+            
+            // Store the index of the tile as it would be in memory so we can look it up later when we're mapping the tiles.
+            tileIndices[i] = normalizeIndices ? i + i / 17 * 15 + 0xA0A0 : i;
+        }
+        
+        // Read foreground color data.
+        // In cases where background colors are present, pixels that use the *first* foreground color
+        // will be replaced by the background color at that pixel's location.
+        for(int i = 0; i < COLOR_PALETTE_SIZE; i++) {
+            int color = inputStream.readShort();
+            
+            // The game seems to always replace the first color of the foreground with the background,
+            // so let's just set it to black so that C-Gear skin previews are more accurate.
+            // This won't do anything for Pokédex skins, as they use a special background color palette.
+            colorPalette[i] = i == 0 ? 0 : ColorUtility.convertBGR555ToRGB888(color);
+        }
+        
+        // Read background color data.
+        // Pokédex skins contain room for 240 extra colors, 64 of which are defined and appear to be used as the 
+        // 'background' colors in cases where the skin is only an overlay that is displayed on top of the 'true' Pokédex.
+        for(int i = 0; i < backgroundColorCount; i++) {
+            backgroundColorPalette[i] = ColorUtility.convertBGR555ToRGB888(inputStream.readShort());
+        }
+        
+        // Map tiles to the resulting image.
+        // In cases where the tile count is 768 or greater, which is exactly enough tiles to fill the entire screen,
+        // the tiles will be applied in the order they are provided and no additional mapping data will be read.
+        // This is always the case for Pokédex skins, and never the case for C-Gear skins.
+        if(tileCount < SCREEN_TILE_COUNT) {
+            // Not enough tiles -- read additional mapping data to figure out their placement.
+            for(int i = 0; i < SCREEN_TILE_COUNT; i++) {
+                int x = i * TILE_WIDTH % SCREEN_WIDTH;
+                int y = i * TILE_WIDTH / SCREEN_WIDTH * TILE_HEIGHT;
+                int leftBits = inputStream.read();
+                int rightBits = inputStream.read();
+                int memoryIndex = leftBits | (rightBits & ~12) << 8;
+                int flipBits = rightBits & 12;
+                
+                // The normalized tile index is the index of the in-memory tile index in the lookup table.
+                int tileIndex = -1;
+                
+                for(int k = 0; k < tileIndices.length; k++) {
+                    if(memoryIndex == tileIndices[k]) {
+                        tileIndex = k;
+                        break;
+                    }
+                }
+                
+                // If no tile could be found, then just skip it.
+                // TODO It is possible that it uses background colors in this case, but just leaving the tile black should be good enough.
+                if(tileIndex == -1) {
+                    continue;
+                }
+                
+                // Apply the pixels of this tile to the resulting image.
+                for(int j = 0; j < TILE_SIZE; j++) {
+                    // Get the color index for this pixel based on how the tile is flipped.
+                    int tilePixelIndex = switch(flipBits) {
+                        case 4 -> (TILE_WIDTH * (j / TILE_WIDTH) + TILE_WIDTH) - j % TILE_WIDTH - 1; // Flip horizontally
+                        case 8 -> TILE_SIZE - (TILE_WIDTH * (j / TILE_WIDTH) + TILE_WIDTH) + j % TILE_WIDTH; // Flip vertically
+                        case 12 -> TILE_SIZE - j - 1; // Flip horizontally & vertically
+                        default -> j; // Don't flip
+                    };
+                    
+                    int pixelX = x + j % TILE_WIDTH;
+                    int pixelY = y + j / TILE_WIDTH;
+                    int pixelIndex = pixelY * SCREEN_WIDTH + pixelX;
+                    int paletteIndex = tileData[tileIndex * TILE_SIZE + tilePixelIndex];
+                    
+                    // Determine whether the foreground or background color should be used.
+                    int color = backgroundColorIndices == null || 
+                            (paletteIndex > 0 && (backgroundOverrides == null || !backgroundOverrides[pixelIndex])) 
+                            ? colorPalette[paletteIndex] : backgroundColorPalette[backgroundColorIndices[pixelIndex]];
+                    
+                    // Finally, set the pixel!
+                    image.setRGB(pixelX, pixelY, color);
+                }
+            }
+        } else {
+            // There are enough tiles to fill up the entire screen, so let's just place them in order.
+            for(int i = 0; i < SCREEN_TILE_COUNT; i++) {
+                int x = i * TILE_WIDTH % SCREEN_WIDTH;
+                int y = i * TILE_WIDTH / SCREEN_WIDTH * TILE_WIDTH;
+                
+                for(int j = 0; j < TILE_SIZE; j++) {
+                    int pixelX = x + j % TILE_WIDTH;
+                    int pixelY = y + j / TILE_WIDTH;
+                    int pixelIndex = pixelY * SCREEN_WIDTH + pixelX;
+                    int paletteIndex = tileData[i * TILE_SIZE + j];
+                    int color = backgroundColorIndices == null || 
+                            (paletteIndex > 0 && (backgroundOverrides == null || !backgroundOverrides[pixelIndex])) 
+                            ? colorPalette[paletteIndex] : backgroundColorPalette[backgroundColorIndices[pixelIndex]];
+                    image.setRGB(pixelX, pixelY, color);
+                }
+            }
+        }
+        
+        return image;
+    }
+    
+    /**
+     * Writes a {@link BufferedImage} to the specified {@link OutputStream} as a C-Gear skin.
+     * 
+     * @param outputStream The output stream to write to.
+     * @param image The image to write.
+     * @param offsetIndices Should be {@code true} if the C-Gear skin is intended for use with the original Black & White games.
+     */
+    public static void writeCGearSkin(OutputStream outputStream, BufferedImage image, boolean offsetIndices) throws IOException {
+        writeTiledImage(new LEOutputStream(outputStream), image, 255, null, offsetIndices);
+    }
+    
+    /**
+     * Writes a {@link BufferedImage} to the specified {@link OutputStream} as a Pokédex skin.
+     * 
+     * @param outputStream The output stream to write to.
+     * @param image The image to write.
+     * @param backgroundColors The background colors this skin will use in-game. Should contain 64 RGB888 color values.
+     */
+    public static void writeDexSkin(OutputStream outputStream, BufferedImage image, int[] backgroundColors) throws IOException {
+        if(backgroundColors == null || backgroundColors.length != 64) {
+            throw new IllegalArgumentException("Background color array must contain 64 colors");
+        }
+        
+        writeTiledImage(new LEOutputStream(outputStream), image, 768, backgroundColors, false);
+        outputStream.write(new byte[352]); // Extra data that writeTiledImage doesn't write
+    }
+    
+    /**
+     * Writes a {@link BufferedImage} to the specified {@link OutputStream} as a tiled image.
+     * 
+     * @param outputStream The output stream to write to.
+     * @param image The image to write.
+     * @param tileCount The maximum number of unique tiles that can be used.
+     * @param backgroundColors Additional background colors that the game might use. Can be {@code null}.
+     * @param offsetIndices Indicates that tile indices are not linear (Black & White C-Gear skins) and should be offset.
+     */
+    private static void writeTiledImage(LEOutputStream outputStream, BufferedImage image,
+            int tileCount, int[] backgroundColors, boolean offsetTileIndices) throws IOException {
+        int[] tileData = new int[TILE_SIZE * tileCount]; // Stores colors, NOT indices!
+        int[] tileMappingData = new int[SCREEN_TILE_COUNT];
+        int[] colorPalette = new int[COLOR_PALETTE_SIZE];
+        int currentTileCount = 0;
+        int currentColorCount = 0;
+        
+        // Create tile data
+        for(int i = 0; i < SCREEN_TILE_COUNT; i++) {
+            // If tile count is limited, check if we can replicate this tile by flipping an existing tile.
+            if(tileCount < SCREEN_TILE_COUNT) {
+                boolean duplicateTile = false;
+                
+                for(int j = 0; j < currentTileCount; j++) {
+                    boolean equal = true;
+                    boolean flipX = true;
+                    boolean flipY = true;
+                    boolean flipXY = true;
+                    
+                    for(int k = 0; k < TILE_SIZE; k++) {
+                        int x = i * TILE_WIDTH % SCREEN_WIDTH;
+                        int y = i * TILE_WIDTH / SCREEN_WIDTH * TILE_WIDTH;
+                        int color = image.getRGB(x + k % TILE_WIDTH, y + k / TILE_WIDTH);
+                        equal &= color == tileData[j * TILE_SIZE + k];
+                        flipX &= color == tileData[j * TILE_SIZE + ((TILE_WIDTH * (k / TILE_WIDTH) + TILE_WIDTH) - k % TILE_WIDTH - 1)];
+                        flipY &= color == tileData[j * TILE_SIZE + (TILE_SIZE - (TILE_WIDTH * (k / TILE_WIDTH) + TILE_WIDTH) + k % TILE_WIDTH)];
+                        flipXY &= color == tileData[j * TILE_SIZE + (TILE_SIZE - k - 1)];
+                    }
+                    
+                    int flipBits = equal ? 0 : flipX ? 4 : flipY ? 8 : flipXY ? 12 : -1;
+                    
+                    // If this tile is equal to an existing tile or can be replicated by flipping another tile,
+                    // create mapping data for it and skip to the next tile.
+                    if(flipBits != -1) {
+                        tileMappingData[i] = (offsetTileIndices ? (j + (15 * (j / 17)) + 0xA0A0) : j) | flipBits << 8;
+                        duplicateTile = true;
+                        break;
+                    }
+                }
+                
+                // Skip to next tile if it is duplicate.
+                if(duplicateTile) {
+                    continue;
+                }
+            }
+            
+            // Throw exception if a new tile needs to be added but we have reached the limit.
+            if(currentTileCount >= tileCount) {
+                throw new IllegalArgumentException(
+                        "Image is too complex. Only %s unique tiles (8x8 pixel sections) are permitted.".formatted(tileCount));
+            }
+            
+            int x = i * TILE_WIDTH % SCREEN_WIDTH;
+            int y = i * TILE_WIDTH / SCREEN_WIDTH * TILE_WIDTH;
+            
+            for(int j = 0; j < TILE_SIZE; j++) {
+                int pixelX = x + j % TILE_WIDTH;
+                int pixelY = y + j / TILE_WIDTH;
+                int color = image.getRGB(pixelX, pixelY);
+                int paletteIndex = indexOf(colorPalette, color);
+                
+                 // Add color to the palette if it hasn't been already.
+                if(paletteIndex == -1) {
+                    // Throw exception if we have already reached the maximum amount of colors.
+                    if(currentColorCount >= COLOR_PALETTE_SIZE) {
+                        throw new IllegalArgumentException(
+                                "Too many unique colors. Only %s unique colors are permitted.".formatted(COLOR_PALETTE_SIZE));
+                    }
+                    
+                    paletteIndex = currentColorCount++;
+                    colorPalette[paletteIndex] = color;
+                }
+                
+                tileData[currentTileCount * TILE_SIZE + j] = color;
+            }
+            
+            // Create mapping data for this tile.
+            tileMappingData[i] = offsetTileIndices ? (currentTileCount + currentTileCount / 17 * 15 + 0xA0A0) : currentTileCount;
+            currentTileCount++;
+        }
+        
+        // Write tile data.
+        for(int i = 0; i < tileData.length; i += 2) {
+            int paletteIndices = indexOf(colorPalette, tileData[i]) | (indexOf(colorPalette, tileData[i + 1]) << 4);
+            outputStream.write(paletteIndices);
+        }
+        
+        // Write foreground color data.
+        for(int color : colorPalette) {
+            outputStream.writeShort(ColorUtility.convertRGB888ToBGR555(color));
+        }
+        
+        // Write background color data if it is present.
+        if(backgroundColors != null) {
+            for(int color : backgroundColors) {
+                outputStream.writeShort(ColorUtility.convertRGB888ToBGR555(color));
+            }
+        }
+        
+        // Write tile mapping data.
+        if(tileCount < SCREEN_TILE_COUNT) {
+            for(int i = 0; i < SCREEN_TILE_COUNT; i++) {
+                outputStream.writeShort(tileMappingData[i]);
+            }
+        }
+    }
+    
+    /**
+     * @return The index of the element in the array, or {@code -1} if no such element exists.
+     */
+    private static int indexOf(int[] array, int element) {
+        for(int i = 0; i < array.length; i++) {
+            if(element == array[i]) {
+                return i;
+            }
+        }
+        
+        return -1;
+    }
+}

src/main/resources/dashboard/login.html

@@ -6,11 +6,11 @@
   <body>
     <div class="root-container">
       <div>
-	      <label for="gsid">Game Sync ID</label><br>
+        <label for="gsid">Game Sync ID</label><br>
         <input type='text' id="gsid" name='gsid' placeholder='XXXXXXXXXX'>
         <button id="login" onclick="postLogin()">Login</button>
       </div>
-	  </div>
+    </div>
   </body>
   <script src="scripts/utility.js"></script>
   <script src="scripts/login.js"></script>

src/main/resources/dashboard/profile.html

@@ -4,7 +4,7 @@
     <link rel="stylesheet" href="styles/profile.css">
   </head>
   <body>
-    <div id="main-container" class="root-container" style="display:none;">
+    <div id="main-container" class="centered-container" style="display:none;">
       <div>
         <div>
           <label id="game-summary" class="header-text"></label>
@@ -21,24 +21,26 @@
             <tr>
               <th>Species</th>
               <td id="dreamer-species"></td>
-              <th>Nature</th>
-              <td id="dreamer-nature"></td>
+              <th>Ability</th>
+              <td id="dreamer-ability"></td>
             </tr>
             <tr>
               <th>Name</th>
               <td id="dreamer-name"></td>
-              <th>Gender</th>
-              <td id="dreamer-gender"></td>
+              <th>Nature</th>
+              <td id="dreamer-nature"></td>
             </tr>
             <tr>
               <th>Trainer</th>
               <td id="dreamer-trainer"></td>
-              <th>Level</th>
-              <td id="dreamer-level"></td>
+              <th>Gender</th>
+              <td id="dreamer-gender"></td>
             </tr>
             <tr>
               <th>Trainer ID</th>
               <td id="dreamer-trainer-id"></td>
+              <th>Level</th>
+              <td id="dreamer-level"></td>
             </tr>
           </table>
         </div>
@@ -48,18 +50,18 @@
           <div>
             <table id="encounter-table" class="encounter-image-table">
               <tr>
-                <td><a id="encounter0" href="#configureEncounter" onclick="configureEncounter(0)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter1" href="#configureEncounter" onclick="configureEncounter(1)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter2" href="#configureEncounter" onclick="configureEncounter(2)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter3" href="#configureEncounter" onclick="configureEncounter(3)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter4" href="#configureEncounter" onclick="configureEncounter(4)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
+                <td id="encounter0" onclick="configureEncounter(0)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter1" onclick="configureEncounter(1)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter2" onclick="configureEncounter(2)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter3" onclick="configureEncounter(3)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter4" onclick="configureEncounter(4)"><image src="/sprites/pokemon/normal/0.png"/></td>
               </tr>
               <tr>
-                <td><a id="encounter5" href="#configureEncounter" onclick="configureEncounter(5)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter6" href="#configureEncounter" onclick="configureEncounter(6)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter7" href="#configureEncounter" onclick="configureEncounter(7)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter8" href="#configureEncounter" onclick="configureEncounter(8)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
-                <td><a id="encounter9" href="#configureEncounter" onclick="configureEncounter(9)"><image src="/sprites/pokemon/normal/0.png"/></a></td>
+                <td id="encounter5" onclick="configureEncounter(5)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter6" onclick="configureEncounter(6)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter7" onclick="configureEncounter(7)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter8" onclick="configureEncounter(8)"><image src="/sprites/pokemon/normal/0.png"/></td>
+                <td id="encounter9" onclick="configureEncounter(9)"><image src="/sprites/pokemon/normal/0.png"/></td>
               </tr>
             </table>
           </div>
@@ -70,20 +72,20 @@
           <div>
             <table id="visitor-table" class="visitor-table">
               <tr>
-                <td><a id="visitor0" href="#configureVisitor" onclick="configureVisitor(0)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor1" href="#configureVisitor" onclick="configureVisitor(1)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor2" href="#configureVisitor" onclick="configureVisitor(2)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor3" href="#configureVisitor" onclick="configureVisitor(3)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor4" href="#configureVisitor" onclick="configureVisitor(4)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor5" href="#configureVisitor" onclick="configureVisitor(5)"><image src="/sprites/trainers/none.png"/></a></td>
+                <td id="visitor0" onclick="configureVisitor(0)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor1" onclick="configureVisitor(1)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor2" onclick="configureVisitor(2)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor3" onclick="configureVisitor(3)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor4" onclick="configureVisitor(4)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor5" onclick="configureVisitor(5)"><image src="/sprites/trainers/none.png"/></td>
               </tr>
               <tr>
-                <td><a id="visitor6" href="#configureVisitor" onclick="configureVisitor(6)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor7" href="#configureVisitor" onclick="configureVisitor(7)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor8" href="#configureVisitor" onclick="configureVisitor(8)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor9" href="#configureVisitor" onclick="configureVisitor(9)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor10" href="#configureVisitor" onclick="configureVisitor(10)"><image src="/sprites/trainers/none.png"/></a></td>
-                <td><a id="visitor11" href="#configureVisitor" onclick="configureVisitor(11)"><image src="/sprites/trainers/none.png"/></a></td>
+                <td id="visitor6" onclick="configureVisitor(6)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor7" onclick="configureVisitor(7)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor8" onclick="configureVisitor(8)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor9" onclick="configureVisitor(9)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor10" onclick="configureVisitor(10)"><image src="/sprites/trainers/none.png"/></td>
+                <td id="visitor11" onclick="configureVisitor(11)"><image src="/sprites/trainers/none.png"/></td>
               </tr>
             </table>
           </div>
@@ -94,28 +96,28 @@
           <div>
             <table id="item-table" class="item-table">
               <tr>
-                <td><a id="item0" href="#configureItem" onclick="configureItem(0)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item1" href="#configureItem" onclick="configureItem(1)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item2" href="#configureItem" onclick="configureItem(2)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item3" href="#configureItem" onclick="configureItem(3)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item4" href="#configureItem" onclick="configureItem(4)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item5" href="#configureItem" onclick="configureItem(5)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item6" href="#configureItem" onclick="configureItem(6)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item7" href="#configureItem" onclick="configureItem(7)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item8" href="#configureItem" onclick="configureItem(8)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item9" href="#configureItem" onclick="configureItem(9)"><image src="/sprites/items/0.png"/></a></td>
+                <td id="item0" onclick="configureItem(0)"><image src="/sprites/items/0.png"/></td>
+                <td id="item1" onclick="configureItem(1)"><image src="/sprites/items/0.png"/></td>
+                <td id="item2" onclick="configureItem(2)"><image src="/sprites/items/0.png"/></td>
+                <td id="item3" onclick="configureItem(3)"><image src="/sprites/items/0.png"/></td>
+                <td id="item4" onclick="configureItem(4)"><image src="/sprites/items/0.png"/></td>
+                <td id="item5" onclick="configureItem(5)"><image src="/sprites/items/0.png"/></td>
+                <td id="item6" onclick="configureItem(6)"><image src="/sprites/items/0.png"/></td>
+                <td id="item7" onclick="configureItem(7)"><image src="/sprites/items/0.png"/></td>
+                <td id="item8" onclick="configureItem(8)"><image src="/sprites/items/0.png"/></td>
+                <td id="item9" onclick="configureItem(9)"><image src="/sprites/items/0.png"/></td>
               </tr>
               <tr>
-                <td><a id="item10" href="#configureItem" onclick="configureItem(10)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item11" href="#configureItem" onclick="configureItem(11)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item12" href="#configureItem" onclick="configureItem(12)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item13" href="#configureItem" onclick="configureItem(13)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item14" href="#configureItem" onclick="configureItem(14)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item15" href="#configureItem" onclick="configureItem(15)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item16" href="#configureItem" onclick="configureItem(16)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item17" href="#configureItem" onclick="configureItem(17)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item18" href="#configureItem" onclick="configureItem(18)"><image src="/sprites/items/0.png"/></a></td>
-                <td><a id="item19" href="#configureItem" onclick="configureItem(19)"><image src="/sprites/items/0.png"/></a></td>
+                <td id="item10" onclick="configureItem(10)"><image src="/sprites/items/0.png"/></td>
+                <td id="item11" onclick="configureItem(11)"><image src="/sprites/items/0.png"/></td>
+                <td id="item12" onclick="configureItem(12)"><image src="/sprites/items/0.png"/></td>
+                <td id="item13" onclick="configureItem(13)"><image src="/sprites/items/0.png"/></td>
+                <td id="item14" onclick="configureItem(14)"><image src="/sprites/items/0.png"/></td>
+                <td id="item15" onclick="configureItem(15)"><image src="/sprites/items/0.png"/></td>
+                <td id="item16" onclick="configureItem(16)"><image src="/sprites/items/0.png"/></td>
+                <td id="item17" onclick="configureItem(17)"><image src="/sprites/items/0.png"/></td>
+                <td id="item18" onclick="configureItem(18)"><image src="/sprites/items/0.png"/></td>
+                <td id="item19" onclick="configureItem(19)"><image src="/sprites/items/0.png"/></td>
               </tr>
             </table>
           </div>
@@ -129,6 +131,8 @@
                 <option value="none">Do not change</option>
                 <option disabled>──────────────────────</option>
               </select>
+              <button onclick="openFileChooser('cgear-file-input')">Upload Custom</button>
+              <input id="cgear-file-input" type="file" accept=".png, .bmp, .jpg, .jpeg" onchange="uploadSkin('CGEAR', this.files[0])" onclick="this.value = null;" hidden/>
             </div>
             <div>
               <label>Pokédex Skin | </label><a href="#" onclick="return previewSkin('dex-skin', 'ZUKAN')">Preview</a>
@@ -136,6 +140,8 @@
                 <option value="none">Do not change</option>
                 <option disabled>──────────────────────</option>
               </select>
+              <button onclick="openFileChooser('dex-file-input')">Upload Custom</button>
+              <input id="dex-file-input" type="file" accept=".png, .bmp, .jpg, .jpeg" onchange="uploadSkin('ZUKAN', this.files[0])" onclick="this.value = null;" hidden/>
             </div>
             <div>
               <label>Musical Show</label>
@@ -155,116 +161,147 @@
           <button id="logout" class="big-button" onclick="postLogout()">Log Out</button>
         </div>
       </div>
-	  </div>
+    </div>
     <!-- Entree Forest Encounter Configuration Form -->
-    <div id="configureEncounter" class="popup">
-      <div class="content">
-        <button class="close-button" onclick="closeEncounterForm()">X</button>
-        <form id="encounter-form">
-          <label for="encounter-form-species">Species</label>
-          <select id="encounter-form-species" name="species" value="1">
-            <!-- Filled by profile.js -->
-          </select>
-          <label for="encounter-form-move">Special Move</label>
-          <select id="encounter-form-move" name="move" value="0">
-            <option value="0">None</option>
-            <!-- Filled by profile.js -->
-          </select>
-          <label for="encounter-form-form">Form</label>
-          <select id="encounter-form-form" name="form" value="0">
-            <option value="0">Normal</option>
-            <!-- Filled by profile.js -->
-          </select>
-          <label for="encounter-form-gender">Gender</label>
-          <select id="encounter-form-gender" name="gender" value="GENDERLESS">
-            <option value="MALE">Male</option>
-            <option value="FEMALE">Female</option>
-            <option value="GENDERLESS">Random</option>
-          </select>
-          <label for="encounter-form-animation">Animation</label>
-          <select id="encounter-form-animation" name="animation">
-            <option value="LOOK_AROUND">Look Around</option>
-            <option value="WALK_AROUND">Walk Around</option>
-            <option value="WALK_LOOK_AROUND">Walk and Look Around</option>
-            <option value="WALK_VERTICALLY">Walk Vertically</option>
-            <option value="WALK_HORIZONTALLY">Walk Horizontally</option>
-            <option value="WALK_HORIZONTALLY_LOOK_AROUND">Walk Horizontally and Look Around</option>
-            <option value="SPIN_RIGHT">Spin Right</option>
-            <option value="SPIN_LEFT">Spin Left</option>
-          </select>
-        </form>
-        <button class="big-button" onclick="saveEncounter()">Confirm</button>
-        <button class="big-button" onclick="removeEncounter()">Remove</button>
+    <div id="encounter-config" class="popup">
+      <div class="centered-container">
+        <div class="content">
+          <button class="close-button" onclick="closeEncounterForm()">X</button>
+          <form id="encounter-form">
+            <label for="encounter-form-species">Species</label>
+            <select id="encounter-form-species" name="species" value="1">
+              <!-- Filled by profile.js -->
+            </select>
+            <label for="encounter-form-move">Special Move</label>
+            <select id="encounter-form-move" name="move" value="0">
+              <option value="0">None</option>
+              <!-- Filled by profile.js -->
+            </select>
+            <label for="encounter-form-form">Form</label>
+            <select id="encounter-form-form" name="form" value="0">
+              <option value="0">N/A</option>
+              <!-- Filled by profile.js -->
+            </select>
+            <label for="encounter-form-gender">Gender</label>
+            <select id="encounter-form-gender" name="gender" value="GENDERLESS">
+              <option value="MALE">Male</option>
+              <option value="FEMALE">Female</option>
+              <option value="GENDERLESS">Random</option>
+            </select>
+            <label for="encounter-form-animation">Animation</label>
+            <select id="encounter-form-animation" name="animation">
+              <option value="LOOK_AROUND">Look Around</option>
+              <option value="WALK_AROUND">Walk Around</option>
+              <option value="WALK_LOOK_AROUND">Walk and Look Around</option>
+              <option value="WALK_VERTICALLY">Walk Vertically</option>
+              <option value="WALK_HORIZONTALLY">Walk Horizontally</option>
+              <option value="WALK_HORIZONTALLY_LOOK_AROUND">Walk Horizontally and Look Around</option>
+              <option value="SPIN_RIGHT">Spin Right</option>
+              <option value="SPIN_LEFT">Spin Left</option>
+            </select>
+          </form>
+          <button class="big-button" onclick="saveEncounter()">Confirm</button>
+          <button class="big-button" onclick="removeEncounter()">Remove</button>
+        </div>
       </div>
     </div>
     <!-- Item Configuration Form -->
-    <div id="configureItem" class="popup">
-      <div class="content">
-        <button class="close-button" onclick="closeEncounterForm()">X</button>
-        <form id="item-form">
-          <label for="item-form-id">Item</label>
-          <select id="item-form-id" name="id" value="1">
-            <!-- Filled by profile.js -->
-          </select>
-          <label for="item-form-quantity">Quantity</label>
-          <input id="item-form-quantity" name="quantity" type="number" value="1" min="1" max="20"/>
-        </form>
-        <button class="big-button" onclick="saveItem()">Confirm</button>
-        <button class="big-button" onclick="removeItem()">Remove</button>
+    <div id="item-config" class="popup">
+      <div class="centered-container">
+        <div class="content">
+          <button class="close-button" onclick="closeItemForm()">X</button>
+          <form id="item-form">
+            <label for="item-form-id">Item</label>
+            <select id="item-form-id" name="id" value="1">
+              <!-- Filled by profile.js -->
+            </select>
+            <label for="item-form-quantity">Quantity</label>
+            <input id="item-form-quantity" name="quantity" type="number" value="1" min="1" max="20"/>
+          </form>
+          <button class="big-button" onclick="saveItem()">Confirm</button>
+          <button class="big-button" onclick="removeItem()">Remove</button>
+        </div>
       </div>
     </div>
     <!-- Join Avenue Visitor Configuration Form -->
-    <div id="configureVisitor" class="popup">
-      <div class="content">
-        <button class="close-button" onclick="closeVisitorForm()">X</button>
-        <form id="visitor-form">
-          <label for="visitor-form-name">Name (Max. 7 characters)</label>
-          <input id="visitor-form-name" name="name" placeholder="Trainer" maxlength="7"/>
-          <label for="visitor-form-type">Trainer Class</label>
-          <select id="visitor-form-type" name="type" value="ACE_TRAINER_MALE">
-            <option value="YOUNGSTER">Youngster</option>
-            <option value="LASS">Lass</option>
-            <option value="ACE_TRAINER_MALE">Ace Trainer (Male)</option>
-            <option value="ACE_TRAINER_FEMALE">Ace Trainer (Female)</option>
-            <option value="RANGER_MALE">Pokémon Ranger (Male)</option>
-            <option value="RANGER_FEMALE">Pokémon Ranger (Female)</option>
-            <option value="BREEDER_MALE">Pokémon Breeder (Male)</option>
-            <option value="BREEDER_FEMALE">Pokémon Breeder (Female)</option>
-            <option value="SCIENTIST_MALE">Scientist (Male)</option>
-            <option value="SCIENTIST_FEMALE">Scientist (Female)</option>
-            <option value="HIKER">Hiker</option>
-            <option value="PARASOL_LADY">Parasol Lady</option>
-            <option value="ROUGHNECK">Roughneck</option>
-            <option value="NURSE">Nurse</option>
-            <option value="PRESCHOOLER_MALE">Preschooler (Male)</option>
-            <option value="PRESCHOOLER_FEMALE">Preschooler (Female)</option>
-          </select>
-          <label for="visitor-form-shop-type">Shop Type</label>
-          <select id="visitor-form-shop-type" name="shopType" value="RAFFLE">
-            <option value="RAFFLE">Raffle Shop</option>
-            <option value="FLORIST">Flower Shop</option>
-            <option value="SALON">Beauty Salon</option>
-            <option value="ANTIQUE">Antique Shop</option>
-            <option value="DOJO">Training Dojo</option>
-            <option value="CAFE">Café</option>
-            <option value="MARKET">Market</option>
-          </select>
-          <label for="visitor-form-game">Game of Origin (Affects which goods/services are sold)</label>
-          <select id="visitor-form-game" name="gameVersion" value="BLACK_ENGLISH">
-            <option value="BLACK_ENGLISH">Black Version</option>
-            <option value="WHITE_ENGLISH">White Version</option>
-            <option value="BLACK_2_ENGLISH">Black Version 2</option>
-            <option value="WHITE_2_ENGLISH">White Version 2</option>
-          </select>
-          <label for="visitor-form-personality">Personality (Affects phrases used)</label>
-          <input id="visitor-form-personality" name="personality" type="number" value="0" min="0" max="7"/>
-          <label for="visitor-form-dreamer">Tucked-in Pokémon Species</label>
-          <select id="visitor-form-dreamer" name="dreamerSpecies" value="1">
-            <!-- Filled by profile.js -->
-          </select>
-        </form>
-        <button class="big-button" onclick="saveVisitor()">Confirm</button>
-        <button class="big-button" onclick="removeVisitor()">Remove</button>
+    <div id="visitor-config" class="popup">
+      <div class="centered-container">
+        <div class="content">
+          <button class="close-button" onclick="closeVisitorForm()">X</button>
+          <form id="visitor-form">
+            <label for="visitor-form-name">Name (Max. 7 characters)</label>
+            <input id="visitor-form-name" type="text" name="name" placeholder="Trainer" maxlength="7"/>
+            <label for="visitor-form-type">Trainer Class</label>
+            <select id="visitor-form-type" name="type" value="ACE_TRAINER_MALE">
+              <option value="YOUNGSTER">Youngster</option>
+              <option value="LASS">Lass</option>
+              <option value="ACE_TRAINER_MALE">Ace Trainer (Male)</option>
+              <option value="ACE_TRAINER_FEMALE">Ace Trainer (Female)</option>
+              <option value="RANGER_MALE">Pokémon Ranger (Male)</option>
+              <option value="RANGER_FEMALE">Pokémon Ranger (Female)</option>
+              <option value="BREEDER_MALE">Pokémon Breeder (Male)</option>
+              <option value="BREEDER_FEMALE">Pokémon Breeder (Female)</option>
+              <option value="SCIENTIST_MALE">Scientist (Male)</option>
+              <option value="SCIENTIST_FEMALE">Scientist (Female)</option>
+              <option value="HIKER">Hiker</option>
+              <option value="PARASOL_LADY">Parasol Lady</option>
+              <option value="ROUGHNECK">Roughneck</option>
+              <option value="NURSE">Nurse</option>
+              <option value="PRESCHOOLER_MALE">Preschooler (Male)</option>
+              <option value="PRESCHOOLER_FEMALE">Preschooler (Female)</option>
+            </select>
+            <label for="visitor-form-shop-type">Shop Type</label>
+            <select id="visitor-form-shop-type" name="shopType" value="RAFFLE">
+              <option value="RAFFLE">Raffle Shop</option>
+              <option value="FLORIST">Flower Shop</option>
+              <option value="SALON">Beauty Salon</option>
+              <option value="ANTIQUE">Antique Shop</option>
+              <option value="DOJO">Training Dojo</option>
+              <option value="CAFE">Café</option>
+              <option value="MARKET">Market</option>
+            </select>
+            <label for="visitor-form-game">Game of Origin (Affects which goods/services are sold)</label>
+            <select id="visitor-form-game" name="gameVersion" value="BLACK_ENGLISH">
+              <option value="BLACK_ENGLISH">Black Version</option>
+              <option value="WHITE_ENGLISH">White Version</option>
+              <option value="BLACK_2_ENGLISH">Black Version 2</option>
+              <option value="WHITE_2_ENGLISH">White Version 2</option>
+            </select>
+            <label for="visitor-form-region">Country</label>
+            <select id="visitor-form-region" name="region" value="1">
+              <!-- Filled by profile.js -->
+            </select>
+            <label for="visitor-form-subregion">State/Province</label>
+            <select id="visitor-form-subregion" name="subregion" value="0">
+              <option value="0">N/A</option>
+              <!-- Filled by profile.js -->
+            </select>
+            <label for="visitor-form-personality">Personality (Affects phrases used)</label>
+            <input id="visitor-form-personality" name="personality" type="number" value="0" min="0" max="7"/>
+            <label for="visitor-form-dreamer">Tucked-in Pokémon Species</label>
+            <select id="visitor-form-dreamer" name="dreamerSpecies" value="1">
+              <!-- Filled by profile.js -->
+            </select>
+          </form>
+          <button class="big-button" onclick="saveVisitor()">Confirm</button>
+          <button class="big-button" onclick="removeVisitor()">Remove</button>
+        </div>
+      </div>
+    </div>
+    <div id="skin-preview" class="popup">
+      <div class="centered-container">
+        <div id="skin-preview-content" class="content">
+          <button class="close-button" onclick="closeSkinPreview()">X</button>
+          <label>Skin Preview</label><br>
+          <img id="skin-preview-image" width=256 height=192/>
+          <div>
+            <label>Resolution</label><br>
+            <input id="resolution-x1" type="radio" name="resolution" onclick="setSkinPreviewResolution(256, 192);" checked/>
+            <label for="resolution-x1">x1</label>
+            <input id="resolution-x2" type="radio" name="resolution" onclick="setSkinPreviewResolution(512, 384);"/>
+            <label for="resolution-x2">x2</label>
+          </div>
+        </div>
       </div>
     </div>
   </body>

src/main/resources/dashboard/scripts/profile.js

@@ -3,6 +3,7 @@ const ELEMENT_GAME_SUMMARY = document.getElementById("game-summary");
 
 const ELEMENT_DREAMER_SPRITE = document.getElementById("dreamer-sprite");
 const ELEMENT_DREAMER_SPECIES = document.getElementById("dreamer-species");
+const ELEMENT_DREAMER_ABILITY = document.getElementById("dreamer-ability");
 const ELEMENT_DREAMER_NATURE = document.getElementById("dreamer-nature");
 const ELEMENT_DREAMER_NAME = document.getElementById("dreamer-name");
 const ELEMENT_DREAMER_GENDER = document.getElementById("dreamer-gender");
@@ -10,22 +11,30 @@ const ELEMENT_DREAMER_TRAINER = document.getElementById("dreamer-trainer");
 const ELEMENT_DREAMER_TRAINER_ID = document.getElementById("dreamer-trainer-id");
 const ELEMENT_DREAMER_LEVEL = document.getElementById("dreamer-level");
 
+const ELEMENT_ENCOUNTER_CONFIG = document.getElementById("encounter-config");
 const ELEMENT_ENCOUNTER_SPECIES = document.getElementById("encounter-form-species");
 const ELEMENT_ENCOUNTER_MOVE = document.getElementById("encounter-form-move");
 const ELEMENT_ENCOUNTER_FORM = document.getElementById("encounter-form-form");
 const ELEMENT_ENCOUNTER_GENDER = document.getElementById("encounter-form-gender");
 const ELEMENT_ENCOUNTER_ANIMATION = document.getElementById("encounter-form-animation");
 
+const ELEMENT_ITEM_CONFIG = document.getElementById("item-config");
 const ELEMENT_ITEM_ID = document.getElementById("item-form-id");
 const ELEMENT_ITEM_QUANTITY = document.getElementById("item-form-quantity");
 
+const ELEMENT_VISITOR_CONFIG = document.getElementById("visitor-config");
 const ELEMENT_VISITOR_NAME = document.getElementById("visitor-form-name");
 const ELEMENT_VISITOR_TYPE = document.getElementById("visitor-form-type");
 const ELEMENT_VISITOR_SHOP_TYPE = document.getElementById("visitor-form-shop-type");
 const ELEMENT_VISITOR_GAME = document.getElementById("visitor-form-game");
+const ELEMENT_VISITOR_REGION = document.getElementById("visitor-form-region");
+const ELEMENT_VISITOR_SUBREGION = document.getElementById("visitor-form-subregion");
 const ELEMENT_VISITOR_PERSONALITY = document.getElementById("visitor-form-personality");
 const ELEMENT_VISITOR_DREAMER = document.getElementById("visitor-form-dreamer");
 
+const ELEMENT_SKIN_PREVIEW = document.getElementById("skin-preview");
+const ELEMENT_SKIN_PREVIEW_IMAGE = document.getElementById("skin-preview-image");
+
 const ELEMENT_CGEAR_SKIN_INPUT = document.getElementById("cgear-skin");
 const ELEMENT_DEX_SKIN_INPUT = document.getElementById("dex-skin");
 const ELEMENT_MUSICAL_INPUT = document.getElementById("musical");
@@ -57,7 +66,8 @@ var profile = {
         if(response.dreamerInfo) {
             let dreamerInfo = response.dreamerInfo;
             ELEMENT_DREAMER_SPRITE.innerHTML = "<image src='" + response.dreamerSprite + "'/>";
-            ELEMENT_DREAMER_SPECIES.innerHTML = POKE_SPECIES_LIST[dreamerInfo.species - 1].name;
+            ELEMENT_DREAMER_SPECIES.innerHTML = SPECIES_MAP[dreamerInfo.species] ? (SPECIES_MAP[dreamerInfo.species].name) : "N/A";
+            ELEMENT_DREAMER_ABILITY.innerHTML = ABILITY_MAP[dreamerInfo.ability] ? ABILITY_MAP[dreamerInfo.ability].name : "N/A";
             ELEMENT_DREAMER_NATURE.innerHTML = stringToWord(dreamerInfo.nature);
             ELEMENT_DREAMER_NAME.innerHTML = dreamerInfo.nickname;
             ELEMENT_DREAMER_GENDER.innerHTML = stringToWord(dreamerInfo.gender);
@@ -88,6 +98,17 @@ var profile = {
         profile.cgearSkin = response.cgearSkin ? response.cgearSkin : "none";
         profile.dexSkin = response.dexSkin ? response.dexSkin : "none";
         profile.musical = response.musical ? response.musical : "none";
+        
+        if(response.customCGearSkin) {
+            profile.customCGearSkin = response.customCGearSkin;
+            ELEMENT_CGEAR_SKIN_INPUT.add(new Option(response.customCGearSkin, "custom"), 1);
+        }
+        
+        if(response.customDexSkin) {
+            profile.customDexSkin = response.customDexSkin;
+            ELEMENT_DEX_SKIN_INPUT.add(new Option(response.customDexSkin, "custom"), 1);
+        }
+        
         fetchDlcData();
         ELEMENT_LEVEL_GAIN_INPUT.value = response.levelsGained;
         
@@ -100,38 +121,51 @@ var profile = {
         document.getElementById("main-container").style.display = "flex";
     });
     
+    // Sort data lists alphabetically
+    let sortedSpecies = [...SPECIES_LIST].sort((a, b) => a.name.localeCompare(b.name));
+    let sortedMoves = [...MOVE_LIST].sort((a, b) => a.name.localeCompare(b.name));
+    let sortedItems = [...ITEM_LIST].sort((a, b) => a.name.localeCompare(b.name));
+    
     // Add species data
-    for(let i in POKE_SPECIES_LIST) {
-        let species = POKE_SPECIES_LIST[i];
-        let formattedName = "#" + ("00" + species.id).slice(-3) + " - " + species.name;
-        ELEMENT_VISITOR_DREAMER.options[ELEMENT_VISITOR_DREAMER.options.length] = new Option(formattedName, species.id);
+    for(let i in sortedSpecies) {
+        let species = sortedSpecies[i];
+        ELEMENT_VISITOR_DREAMER.options[ELEMENT_VISITOR_DREAMER.options.length] = new Option(species.name, species.id);
         
         if(species.downloadable && (isVersion2() || species.id <= 493)) {
-            ELEMENT_ENCOUNTER_SPECIES.options[ELEMENT_ENCOUNTER_SPECIES.options.length] = new Option(formattedName, species.id);
+            ELEMENT_ENCOUNTER_SPECIES.options[ELEMENT_ENCOUNTER_SPECIES.options.length] = new Option(species.name, species.id);
         }
     }
     
     // Add move data
-    for(let i in POKE_MOVE_LIST) {
-        let move = POKE_MOVE_LIST[i];
-        let formattedName = "#" + ("00" + move.id).slice(-3) + " - " + move.name;
-        ELEMENT_ENCOUNTER_MOVE.options[ELEMENT_ENCOUNTER_MOVE.options.length] = new Option(formattedName, move.id);
+    for(let i in sortedMoves) {
+        let move = sortedMoves[i];
+        ELEMENT_ENCOUNTER_MOVE.options[ELEMENT_ENCOUNTER_MOVE.options.length] = new Option(move.name, move.id);
     }
     
     // Add item data
-    for(let i in ITEM_LIST) {
-        let item = ITEM_LIST[i];
+    for(let i in sortedItems) {
+        let item = sortedItems[i];
         
         if(isVersion2() || item.id <= 626) {
-            let formattedName = "#" + ("00" + item.id).slice(-3) + " - " + item.name;
-            ELEMENT_ITEM_ID.options[ELEMENT_ITEM_ID.options.length] = new Option(formattedName, item.id);
+            ELEMENT_ITEM_ID.options[ELEMENT_ITEM_ID.options.length] = new Option(item.name, item.id);
         }
     }
     
-    // Event listener for changing the form selector contents when species changes
+    // Add region data (already sorted alphabetically)
+    for(let i in REGION_LIST) {
+        let region = REGION_LIST[i];
+        ELEMENT_VISITOR_REGION.options[ELEMENT_VISITOR_REGION.options.length] = new Option(region.name, region.id);
+    }
+    
+    // Event listener for changing the form & gender selector contents when species changes
     ELEMENT_ENCOUNTER_SPECIES.addEventListener("change", function() {
-        updateEncounterFormOptions();
-        ELEMENT_ENCOUNTER_FORM.value = 0;
+        ELEMENT_ENCOUNTER_FORM.value = updateEncounterFormOptions();
+        ELEMENT_ENCOUNTER_GENDER.value = updateEncounterGenderOptions();
+    });
+    
+    // Same thing, but for Join Avenue visitor region & subregion
+    ELEMENT_VISITOR_REGION.addEventListener("change", function() {
+        ELEMENT_VISITOR_SUBREGION.value = updateVisitorSubregionOptions();
     });
 })();
 
@@ -141,7 +175,7 @@ var profile = {
 
 function updateEncounterFormOptions() {
     clearSelectOptions(ELEMENT_ENCOUNTER_FORM);
-    let species = POKE_SPECIES_LIST[ELEMENT_ENCOUNTER_SPECIES.value - 1];
+    let species = SPECIES_MAP[ELEMENT_ENCOUNTER_SPECIES.value];
     
     // Update special form options
     if(species.forms) {
@@ -149,19 +183,49 @@ function updateEncounterFormOptions() {
             ELEMENT_ENCOUNTER_FORM.options[ELEMENT_ENCOUNTER_FORM.options.length] = new Option(species.forms[i], i);
         }
     } else {
-        ELEMENT_ENCOUNTER_FORM.options[ELEMENT_ENCOUNTER_FORM.options.length] = new Option("Normal", 0);
+        ELEMENT_ENCOUNTER_FORM.options[ELEMENT_ENCOUNTER_FORM.options.length] = new Option("N/A", 0);
     }
+    
+    return 0;
+}
+
+function updateEncounterGenderOptions() {
+    clearSelectOptions(ELEMENT_ENCOUNTER_GENDER);
+    let species = SPECIES_MAP[ELEMENT_ENCOUNTER_SPECIES.value];
+    
+    // Update gender options
+    if(species.gender) {
+        console.log(species.gender);
+        switch(species.gender) {
+            case "male":
+                ELEMENT_ENCOUNTER_GENDER.options[0] = new Option("Male", "MALE");
+                return "MALE";
+            case "female":
+                ELEMENT_ENCOUNTER_GENDER.options[0] = new Option("Female", "FEMALE");
+                return "FEMALE";
+            case "unknown":
+                ELEMENT_ENCOUNTER_GENDER.options[0] = new Option("N/A", "GENDERLESS");
+                return "GENDERLESS";
+        }
+    }
+    
+    ELEMENT_ENCOUNTER_GENDER.options[0] = new Option("Male", "MALE");
+    ELEMENT_ENCOUNTER_GENDER.options[1] = new Option("Female", "FEMALE");
+    ELEMENT_ENCOUNTER_GENDER.options[2] = new Option("Random", "GENDERLESS");
+    return "GENDERLESS";
 }
 
 function configureEncounter(index) {
     encounterTableIndex = Math.min(10, Math.min(index, profile.encounters.length));
     let encounter = profile.encounters[encounterTableIndex];
-    ELEMENT_ENCOUNTER_SPECIES.value = encounter ? encounter.species : 1;
-    updateEncounterFormOptions();
+    ELEMENT_ENCOUNTER_SPECIES.value = encounter ? encounter.species : 493;
+    let form = updateEncounterFormOptions();
+    let gender = updateEncounterGenderOptions();
     ELEMENT_ENCOUNTER_MOVE.value = encounter ? encounter.move : 0;
-    ELEMENT_ENCOUNTER_FORM.value = encounter ? encounter.form : 0;
-    ELEMENT_ENCOUNTER_GENDER.value = encounter ? encounter.gender : "GENDERLESS";
-    ELEMENT_ENCOUNTER_ANIMATION.value = encounter ? encounter.animation : "WALK_AROUND";
+    ELEMENT_ENCOUNTER_FORM.value = encounter ? encounter.form : form;
+    ELEMENT_ENCOUNTER_GENDER.value = encounter ? encounter.gender : gender;
+    ELEMENT_ENCOUNTER_ANIMATION.value = encounter ? encounter.animation : "LOOK_AROUND";
+    ELEMENT_ENCOUNTER_CONFIG.style.display = "block";
 }
 
 function saveEncounter() {
@@ -208,13 +272,20 @@ function updateEncounterCell(index) {
     if(encounterData) {
         spriteImage = spriteBase + encounterData.species + ".png";
         
-        // Use unique form sprite if it exists
         if(encounterData.form > 0) {
+            // Use unique form sprite if it exists
             let formSpriteImage = spriteBase + encounterData.species + "-" + encounterData.form + ".png";
             
             if(checkURL(formSpriteImage)){
                 spriteImage = formSpriteImage;
             }
+        } else if(encounterData.gender == "FEMALE") {
+            // Otherwise, use female sprite if it exists
+            let femaleSpriteImage = spriteBase + "female/" + encounterData.species + ".png";
+            
+            if(checkURL(femaleSpriteImage)){
+                spriteImage = femaleSpriteImage;
+            }
         }
     }
     
@@ -223,12 +294,33 @@ function updateEncounterCell(index) {
 
 function closeEncounterForm() {
     encounterTableIndex = -1;
-    window.location.href = "#";
+    ELEMENT_ENCOUNTER_CONFIG.style.display = "none";
 }
 
 /**
  * Join Avenue visitor configuration stuff
  */
+ 
+ function updateVisitorSubregionOptions() {
+    clearSelectOptions(ELEMENT_VISITOR_SUBREGION);
+    let region = REGION_MAP[ELEMENT_VISITOR_REGION.value];
+    
+    // Update subregion options
+    if(region.subregions) {
+        let sortedSubregions = [...region.subregions].sort((a, b) => a.name.localeCompare(b.name));
+        
+        for(let i in sortedSubregions) {
+            let subregion = sortedSubregions[i];
+            ELEMENT_VISITOR_SUBREGION.options[ELEMENT_VISITOR_SUBREGION.options.length] = new Option(subregion.name, subregion.id);
+        }
+        
+        return 1;
+    } else {
+        ELEMENT_VISITOR_SUBREGION.options[ELEMENT_VISITOR_SUBREGION.options.length] = new Option("N/A", 0);
+    }
+    
+    return 0;
+}
 
 function configureVisitor(index) {
     visitorTableIndex = Math.min(12, Math.min(index, profile.visitors.length));
@@ -237,8 +329,12 @@ function configureVisitor(index) {
     ELEMENT_VISITOR_TYPE.value = visitor ? visitor.type : "ACE_TRAINER_MALE";
     ELEMENT_VISITOR_SHOP_TYPE.value = visitor ? visitor.shopType : "RAFFLE";
     ELEMENT_VISITOR_GAME.value = visitor ? visitor.gameVersion : "BLACK_ENGLISH";
+    ELEMENT_VISITOR_REGION.value = visitor ? visitor.countryCode : 1;
+    updateVisitorSubregionOptions();
+    ELEMENT_VISITOR_SUBREGION.value = visitor ? visitor.stateProvinceCode : 0;
     ELEMENT_VISITOR_PERSONALITY.value = visitor ? visitor.personality : 0;
     ELEMENT_VISITOR_DREAMER.value = visitor ? visitor.dreamerSpecies : 1;
+    ELEMENT_VISITOR_CONFIG.style.display = "block";
 }
 
 function saveVisitor() {
@@ -265,18 +361,16 @@ function saveVisitor() {
         }
     }
     
-    // I'll make country codes configurable later... probably
     profile.visitors[visitorTableIndex] = {
         name: ELEMENT_VISITOR_NAME.value,
         type: ELEMENT_VISITOR_TYPE.value,
         shopType: ELEMENT_VISITOR_SHOP_TYPE.value,
         gameVersion: ELEMENT_VISITOR_GAME.value,
-        countryCode: 220, // United States
-        stateProvinceCode: 48, // Washington, D.C.
+        countryCode: ELEMENT_VISITOR_REGION.value,
+        stateProvinceCode: ELEMENT_VISITOR_SUBREGION.value,
         personality: ELEMENT_VISITOR_PERSONALITY.value,
         dreamerSpecies: ELEMENT_VISITOR_DREAMER.value
     };
-    console.log(profile.visitors[visitorTableIndex]);
     updateVisitorCell(visitorTableIndex);
     closeVisitorForm();
 }
@@ -318,7 +412,7 @@ function updateVisitorCell(index) {
 
 function closeVisitorForm() {
     visitorTableIndex = -1;
-    window.location.href = "#";
+    ELEMENT_VISITOR_CONFIG.style.display = "none";
 }
 
 /**
@@ -330,6 +424,7 @@ function configureItem(index) {
     let item = profile.items[itemTableIndex];
     ELEMENT_ITEM_ID.value = item ? item.id : 1;
     ELEMENT_ITEM_QUANTITY.value = item ? item.quantity : 1;
+    ELEMENT_ITEM_CONFIG.style.display = "block";
 }
 
 function saveItem() {
@@ -385,13 +480,49 @@ function updateItemCell(index) {
 
 function closeItemForm() {
     itemTableIndex = -1;
-    window.location.href = "#";
+    ELEMENT_ITEM_CONFIG.style.display = "none";
 }
 
 /**
  * Miscellaneous stuff
  */
 
+function openFileChooser(inputDocumentId) {
+    document.getElementById(inputDocumentId).click();
+}
+
+function uploadSkin(type, file) {
+    fetchData("POST", "/dashboard/uploadskin?type=" + (type == "CGEAR" && isVersion2() ? "CGEAR2" : type)
+            + "&filename=" + file.name, file).then((response) => {
+        if(!response) {
+            return;
+        }
+        
+        // Display message if there is one
+        if(response.message) {
+            window.alert(response.message);
+        }
+        
+        // Return if error
+        if(response.error) {
+            return;
+        }
+        
+        // Update selector option
+        let selectElement = type == "CGEAR" ? ELEMENT_CGEAR_SKIN_INPUT : ELEMENT_DEX_SKIN_INPUT;
+        
+        // Add option for custom skin if one does not already exist
+        // Otherwise, update the existing one
+        if(selectElement.options[1].value == "custom") {
+            selectElement.options[1].innerHTML = file.name;
+        } else{
+            selectElement.add(new Option(file.name, "custom"), 1);
+        }
+        
+        selectElement.value = "custom";
+    });
+}
+
 function previewSkin(inputElementId, type) {
     let value = document.getElementById(inputElementId).value;
     
@@ -404,27 +535,46 @@ function previewSkin(inputElementId, type) {
         type = "CGEAR2";
     }
     
-    window.open("/dashboard/previewskin?type=" + type + "&name=" + value);
+    let revisionParam = value == "custom" ? "&revision=" + new Date().getTime() : ""; // Hack to work around the browser cache
+    ELEMENT_SKIN_PREVIEW_IMAGE.src = "/dashboard/previewskin?type=" + type + "&name=" + value + revisionParam;
+    ELEMENT_SKIN_PREVIEW.style.display = "block";
     return false;
 }
 
+function setSkinPreviewResolution(width, height) {
+    ELEMENT_SKIN_PREVIEW_IMAGE.width = width;
+    ELEMENT_SKIN_PREVIEW_IMAGE.height = height;
+}
+
+function closeSkinPreview() {
+    ELEMENT_SKIN_PREVIEW.style.display = "none";
+}
+
 function fetchDlcData() {
     // Fetch C-Gear skins
     fetchData("GET", "/dashboard/dlc?type=" + (isVersion2() ? "CGEAR2" : "CGEAR")).then((response) => {
-        addDlcNames(ELEMENT_CGEAR_SKIN_INPUT, response);
-        ELEMENT_CGEAR_SKIN_INPUT.value = response.includes(profile.cgearSkin) ? profile.cgearSkin : "none";
+        if(response) {
+            addDlcNames(ELEMENT_CGEAR_SKIN_INPUT, response);
+            ELEMENT_CGEAR_SKIN_INPUT.value = profile.cgearSkin == "custom" && profile.customCGearSkin ? "custom" 
+                    : response.includes(profile.cgearSkin) ? profile.cgearSkin : "none";
+        }
     });
     
     // Fetch Dex skins
     fetchData("GET", "/dashboard/dlc?type=ZUKAN").then((response) => {
-        addDlcNames(ELEMENT_DEX_SKIN_INPUT, response);
-        ELEMENT_DEX_SKIN_INPUT.value = response.includes(profile.dexSkin) ? profile.dexSkin : "none";
+        if(response) {
+            addDlcNames(ELEMENT_DEX_SKIN_INPUT, response);
+            ELEMENT_DEX_SKIN_INPUT.value = profile.dexSkin == "custom" && profile.customDexSkin ? "custom" 
+                    : response.includes(profile.dexSkin) ? profile.dexSkin : "none";
+        }
     });
     
     // Fetch musicals
     fetchData("GET", "/dashboard/dlc?type=MUSICAL").then((response) => {
-        addDlcNames(ELEMENT_MUSICAL_INPUT, response);
-        ELEMENT_MUSICAL_INPUT.value = response.includes(profile.musical) ? profile.musical : "none";
+        if(response) {
+            addDlcNames(ELEMENT_MUSICAL_INPUT, response);
+            ELEMENT_MUSICAL_INPUT.value = response.includes(profile.musical) ? profile.musical : "none";
+        }
     });
 }
 
@@ -445,7 +595,9 @@ function postProfileData() {
         musical: ELEMENT_MUSICAL_INPUT.value,
         gainedLevels: ELEMENT_LEVEL_GAIN_INPUT.value
     })).then((response) => {
-        alert(response.message);
+        if(response) {
+            alert(response.message);
+        }
     });
 }
 

src/main/resources/dashboard/scripts/utility.js

@@ -42,11 +42,11 @@ async function fetchData(method, path, body) {
     if(response.status != 200) {
         if(response.status == 401) {
             window.location.href = "/dashboard/login.html"; // TODO not epic idea to put this here
-            return {};
+            return false;
         }
         
         window.alert("Server returned status code " + response.status + " while fetching " + path);
-        return {};
+        return false;
     }
     
     try {
@@ -55,5 +55,5 @@ async function fetchData(method, path, body) {
         window.alert("Could not deserialize JSON response: " + error);
     }
     
-    return {};
+    return false;
 }

src/main/resources/dashboard/styles/profile.css

@@ -12,12 +12,15 @@ img {
     image-rendering: pixelated;
 }
 
-input, select {
-    color: white;
-    background-color: #262626;
+input[type=text], input[type=number], select {
     border: 0px;
     border-radius: 10px;
     width: 100%;
+}
+
+input, select {
+    color: white;
+    background-color: #262626;
     margin-top: 4px;
     margin-bottom: 16px;
     padding: 4px 4px;
@@ -39,14 +42,14 @@ a:link, a:visited {
     color: white;
 }
 
-.root-container {
+.centered-container {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
 }
 
-.root-container div:first-child {
+.centered-container div:first-child {
     max-width: 532px;
     margin: auto;
 }
@@ -57,7 +60,8 @@ a:link, a:visited {
     gap: 5px 10px;
 }
 
-.grid-container input {
+.grid-container input,
+.grid-container button {
     width: 100%;
     margin-top: 4px;
     margin-bottom: 16px;
@@ -86,12 +90,6 @@ a:link, a:visited {
     padding-left: 5px;
 }
 
-.dreamer-summary td#dreamer-sprite {
-    width: 96px;
-    text-align: center;
-    padding-left: 0px;
-}
-
 .header-text {
     text-align: center;
     font-weight: bold;
@@ -100,37 +98,27 @@ a:link, a:visited {
 }
 
 .popup {
+    display: none;
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0, 0, 0, 0.6);
-    opacity: 0;
-    transition: opacity 200ms;
-    visibility: hidden;
 }
 
-.popup:target {
-    opacity: 1;
-    visibility: visible;
-}
-
-.popup .close-button {
-    position: absolute;
-    background-color: #3D3D3D;
-    top: 10px;
-    right: 10px;
-}
-
-.popup .content {
+.content {
+    position: relative;
     background-color: #191919;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    padding: 20px;
     width: 500px;
+    padding: 20px 20px 0px 20px;
+}
+
+.close-button {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background-color: #3D3D3D;
 }
 
 .encounter-image-table {
@@ -147,6 +135,7 @@ a:link, a:visited {
     width: 96px;
     height: 96px;
     text-align: center;
+    cursor: pointer;
 }
 
 .item-table {
@@ -163,6 +152,7 @@ a:link, a:visited {
     width: 48px;
     height: 48px;
     text-align: center;
+    cursor: pointer;
 }
 
 .item-table td a {
@@ -185,10 +175,31 @@ a:link, a:visited {
     width: 80px;
     height: 80px;
     text-align: center;
+    cursor: pointer;
 }
 
 .big-button {
     font-size: 16px;
     padding: 16px 32px;
-    margin-bottom: 8px;
+    margin-bottom: 16px;
+}
+
+#cgear-skin, #dex-skin {
+    margin-bottom: 0px;
+}
+
+#dreamer-sprite {
+    width: 96px;
+    text-align: center;
+    padding-left: 0px;
+}
+
+#skin-preview-content {
+    width: auto;
+}
+
+#skin-preview-image {
+    box-shadow: 0px 0px 10px 3px #0A0A0A;
+    margin-top: 4px;
+    margin-bottom: 12px;
 }