Pesky tabs

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/player/Player.java

@@ -33,7 +33,6 @@ public class Player {
     
     public void resetDreamInfo() {
         status = PlayerStatus.AWAKE;
-        gameVersion = null;
         dreamerInfo = null;
         encounters.clear();
         items.clear();

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

@@ -92,7 +92,7 @@ public class DashboardHandler implements HttpHandler {
                     
                     // Cache the result
                     skinPreviewCache.put("%s/%s".formatted(player.getGameSyncId(), version2 ? "CGEAR2" : "CGEAR"), image);
-                } catch(IOException | IndexOutOfBoundsException e) {
+                } catch(IOException | IndexOutOfBoundsException | NullPointerException e) {
                     logger.error("Could not load custom C-Gear skin preview for player {}", player.getGameSyncId(), e);
                 }
             }
@@ -284,6 +284,12 @@ public class DashboardHandler implements HttpHandler {
             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));

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

@@ -425,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();
             

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

@@ -128,7 +128,12 @@ public class TiledImageUtility {
         // 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++) {
-            colorPalette[i] = ColorUtility.convertBGR555ToRGB888(inputStream.readShort());
+            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.
@@ -153,7 +158,7 @@ public class TiledImageUtility {
                 int flipBits = rightBits & 12;
                 
                 // The normalized tile index is the index of the in-memory tile index in the lookup table.
-                int tileIndex = 0;
+                int tileIndex = -1;
                 
                 for(int k = 0; k < tileIndices.length; k++) {
                     if(memoryIndex == tileIndices[k]) {
@@ -162,6 +167,12 @@ public class TiledImageUtility {
                     }
                 }
                 
+                // 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.

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>
@@ -127,21 +127,21 @@
           <div class="grid-container">
             <div>
               <label>C-Gear Skin | </label><a href="#" onclick="return previewSkin('cgear-skin', 'CGEAR')">Preview</a>
-              <select id="cgear-skin" style="margin-bottom:0px;">
+              <select id="cgear-skin">
                 <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="image/*" onchange="uploadSkin('CGEAR', this.files[0])" onclick="this.value = null;" hidden/>
+              <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>
-              <select id="dex-skin" style="margin-bottom:0px;">
+              <select id="dex-skin">
                 <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="image/*" onchange="uploadSkin('ZUKAN', this.files[0])" onclick="this.value = null;" hidden/>
+              <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>
@@ -164,122 +164,144 @@
     </div>
     <!-- Entree Forest Encounter Configuration Form -->
     <div id="encounter-config" 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">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 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="item-config" class="popup">
-      <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 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="visitor-config" 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-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 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

@@ -32,6 +32,9 @@ const ELEMENT_VISITOR_SUBREGION = document.getElementById("visitor-form-subregio
 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");
@@ -532,10 +535,21 @@ 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) => {

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;
 }
@@ -87,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;
@@ -110,21 +107,18 @@ a:link, a:visited {
     background: rgba(0, 0, 0, 0.6);
 }
 
-.popup .close-button {
-    position: absolute;
-    background-color: #3D3D3D;
-    top: 10px;
-    right: 10px;
+.content {
+    position: relative;
+    background-color: #191919;
+    width: 500px;
+    padding: 20px 20px 0px 20px;
 }
 
-.popup .content {
-    background-color: #191919;
+.close-button {
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    padding: 20px;
-    width: 500px;
+    top: 8px;
+    right: 8px;
+    background-color: #3D3D3D;
 }
 
 .encounter-image-table {
@@ -187,5 +181,25 @@ a:link, a:visited {
 .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;
 }