Merge pull request #3 from Galkon/chore/cleanup-ui-ux

Chore/cleanup UI ux
Galkon · Jan 17, 2024 · f327efb · f327efb
2 parents 470fe10 + ebbb012
commit f327efb
Show file tree

Hide file tree

Showing 8 changed files with 137 additions and 49 deletions.
diff --git a/main.js b/main.js
@@ -130,11 +130,12 @@ const start = async () => {
         event.reply('error', `Input file does not exist: ${inputFile.path}`)
         return
       }
-      const outputFile = filePath
+      const outputFilePath = path.resolve(filePath)
       try {
-        await exportSaveBlock(inputFile.path, {outputFile})
-        shell.showItemInFolder(outputFile)
-        event.reply('convert-success', outputFile)
+        console.log('Exporting save:', outputFilePath)
+        await exportSaveBlock(inputFile.path, {outputFilePath})
+        shell.showItemInFolder(outputFilePath)
+        event.reply('convert-success', outputFilePath)
       } catch (err) {
         event.reply('error', `Error exporting save block: ${err.message}`)
         console.error(err)

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "pokepocket-save-recovery",
   "productName": "PokePocket Save Recovery",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Recover and preview Pokemon .sav files from a corrupt Analogue Pocket .sta file.",
   "main": "main.js",
   "scripts": {

diff --git a/src/main/pkmn/gen3/Gen3Pokemon.mjs b/src/main/pkmn/gen3/Gen3Pokemon.mjs
@@ -2,6 +2,16 @@ import {readString} from './utils.mjs'
 
 const orders = ['GAEM', 'GAME', 'GEAM', 'GEMA', 'GMAE', 'GMEA', 'AGEM', 'AGME', 'AEGM', 'AEMG', 'AMGE', 'AMEG', 'EGAM', 'EGMA', 'EAGM', 'EAMG', 'EMGA', 'EMAG', 'MGAE', 'MGEA', 'MAGE', 'MAEG', 'MEGA', 'MEAG']
 
+// The level experience points need to be defined for each experience group
+const levelExpPoints = {
+  'Fast': [0, 6, 21, 51, 100, 172, 274, 409, 583, 800, 1064, 1382, 1757, 2195, 2700, 3276, 3930, 4665, 5487, 6400, 7408, 8518, 9733, 11059, 12500, 14060, 15746, 17561, 19511, 21600, 23832, 26214, 28749, 31443, 34300, 37324, 40522, 43897, 47455, 51200, 55136, 59270, 63605, 68147, 72900, 77868, 83058, 88473, 94119, 100000, 106120, 112486, 119101, 125971, 133100, 140492, 148154, 156089, 164303, 172800, 181584, 190662, 200037, 209715, 219700, 229996, 240610, 251545, 262807, 274400, 286328, 298598, 311213, 324179, 337500, 351180, 365226, 379641, 394431, 409600, 425152, 441094, 457429, 474163, 491300, 508844, 526802, 545177, 563975, 583200, 602856, 622950, 643485, 664467, 685900, 707788, 730138, 752953, 776239, 800000],
+  'Medium Fast': [0, 8, 27, 64, 125, 216, 343, 512, 729, 1000, 1331, 1728, 2197, 2744, 3375, 4096, 4913, 5832, 6859, 8000, 9261, 10648, 12167, 13824, 15625, 17576, 19683, 21952, 24389, 27000, 29791, 32768, 35937, 39304, 42875, 46656, 50653, 54872, 59319, 64000, 68921, 74088, 79507, 85184, 91125, 97336, 103823, 110592, 117649, 125000, 132651, 140608, 148877, 157464, 166375, 175616, 185193, 195112, 205379, 216000, 226981, 238328, 250047, 262144, 274625, 287496, 300763, 314432, 328509, 343000, 357911, 373248, 389017, 405224, 421875, 438976, 456533, 474552, 493039, 512000, 531441, 551368, 571787, 592704, 614125, 636056, 658503, 681472, 704969, 729000, 753571, 778688, 804357, 830584, 857375, 884736, 912673, 941192, 970299, 1000000],
+  'Medium Slow': [0, 9, 57, 96, 135, 179, 236, 314, 419, 560, 742, 973, 1261, 1612, 2035, 2535, 3120, 3798, 4575, 5460, 6458, 7577, 8825, 10208, 11735, 13411, 15244, 17242, 19411, 21760, 24294, 27021, 29949, 33084, 36435, 40007, 43808, 47846, 52127, 56660, 61450, 66505, 71833, 77440, 83335, 89523, 96012, 102810, 109923, 117360, 125126, 133229, 141677, 150476, 159635, 169159, 179056, 189334, 199999, 211060, 222522, 234393, 246681, 259392, 272535, 286115, 300140, 314618, 329555, 344960, 360838, 377197, 394045, 411388, 429235, 447591, 466464, 485862, 505791, 526260, 547274, 568841, 590969, 613664, 636935, 660787, 685228, 710266, 735907, 762160, 789030, 816525, 844653, 873420, 902835, 932903, 963632, 995030, 1027103, 1059860],
+  'Slow': [0, 10, 33, 80, 156, 270, 428, 640, 911, 1250, 1663, 2160, 2746, 3430, 4218, 5120, 6141, 7290, 8573, 10000, 11576, 13310, 15208, 17280, 19531, 21970, 24603, 27440, 30486, 33750, 37238, 40960, 44921, 49130, 53593, 58320, 63316, 68590, 74148, 80000, 86151, 92610, 99383, 106480, 113906, 121670, 129778, 138240, 147061, 156250, 165813, 175760, 186096, 196830, 207968, 219520, 231491, 243890, 256723, 270000, 283726, 297910, 312558, 327680, 343281, 359370, 375953, 393040, 410636, 428750, 447388, 466560, 486271, 506530, 527343, 548720, 570666, 593190, 616298, 640000, 664301, 689210, 714733, 740880, 767656, 795070, 823128, 851840, 881211, 911250, 941963, 973360, 1005446, 1038230, 1071718, 1105920, 1140841, 1176490, 1212873, 1250000],
+  'Erratic': [0, 15, 52, 122, 237, 406, 637, 942, 1326, 1800, 2369, 3041, 3822, 4719, 5737, 6881, 8155, 9564, 11111, 12800, 14632, 16610, 18737, 21012, 23437, 26012, 28737, 31610, 34632, 37800, 41111, 44564, 48155, 51881, 55737, 59719, 63822, 68041, 72369, 76800, 81326, 85942, 90637, 95406, 100237, 105122, 110052, 115015, 120001, 125000, 131324, 137795, 144410, 151165, 158056, 165079, 172229, 179503, 186894, 194400, 202013, 209728, 217540, 225443, 233431, 241496, 249633, 257834, 267406, 276458, 286328, 296358, 305767, 316074, 326531, 336255, 346965, 357812, 367807, 378880, 390077, 400293, 411686, 423190, 433572, 445239, 457001, 467489, 479378, 491346, 501878, 513934, 526049, 536557, 548720, 560922, 571333, 583539, 591882, 600000],
+  'Fluctuating': [0, 4, 13, 32, 65, 112, 178, 276, 393, 540, 745, 967, 1230, 1591, 1957, 2457, 3046, 3732, 4526, 5440, 6482, 7666, 9003, 10506, 12187, 14060, 16140, 18439, 20974, 23760, 26811, 30146, 33780, 37731, 42017, 46656, 50653, 55969, 60505, 66560, 71677, 78533, 84277, 91998, 98415, 107069, 114205, 123863, 131766, 142500, 151222, 163105, 172697, 185807, 196322, 210739, 222231, 238036, 250562, 267840, 281456, 300293, 315059, 335544, 351520, 373744, 390991, 415050, 433631, 459620, 479600, 507617, 529063, 559209, 582187, 614566, 639146, 673863, 700115, 737280, 765275, 804997, 834809, 877201, 908905, 954084, 987754, 1035837, 1071552, 1122660, 1160499, 1214753, 1254796, 1312322, 1354652, 1415577, 1460276, 1524731, 1571884, 1640000],
+};
+
 export default class Gen3Pokemon {
   constructor(pkm) {
     this.data = pkm;
@@ -38,6 +48,7 @@ export default class Gen3Pokemon {
     this.kantoId = this.getKantoId(this.speciesId);
     this.expGroup = this.getExpGroup(this.speciesId);
     this.level = this.getLevel(this.expGroup, this.exp);
+    this.percentageToNextLevel = this.getPercentageToNextLevel(this.exp, this.expGroup, this.level)
 
     if (!this.name) {
       this.name = this.species.toUpperCase();
@@ -94,16 +105,6 @@ export default class Gen3Pokemon {
   }
 
   getLevel(expgroup, exp) {
-    // The level experience points need to be defined for each experience group
-    const levelExpPoints = {
-      'Fast': [0, 6, 21, 51, 100, 172, 274, 409, 583, 800, 1064, 1382, 1757, 2195, 2700, 3276, 3930, 4665, 5487, 6400, 7408, 8518, 9733, 11059, 12500, 14060, 15746, 17561, 19511, 21600, 23832, 26214, 28749, 31443, 34300, 37324, 40522, 43897, 47455, 51200, 55136, 59270, 63605, 68147, 72900, 77868, 83058, 88473, 94119, 100000, 106120, 112486, 119101, 125971, 133100, 140492, 148154, 156089, 164303, 172800, 181584, 190662, 200037, 209715, 219700, 229996, 240610, 251545, 262807, 274400, 286328, 298598, 311213, 324179, 337500, 351180, 365226, 379641, 394431, 409600, 425152, 441094, 457429, 474163, 491300, 508844, 526802, 545177, 563975, 583200, 602856, 622950, 643485, 664467, 685900, 707788, 730138, 752953, 776239, 800000],
-      'Medium Fast': [0, 8, 27, 64, 125, 216, 343, 512, 729, 1000, 1331, 1728, 2197, 2744, 3375, 4096, 4913, 5832, 6859, 8000, 9261, 10648, 12167, 13824, 15625, 17576, 19683, 21952, 24389, 27000, 29791, 32768, 35937, 39304, 42875, 46656, 50653, 54872, 59319, 64000, 68921, 74088, 79507, 85184, 91125, 97336, 103823, 110592, 117649, 125000, 132651, 140608, 148877, 157464, 166375, 175616, 185193, 195112, 205379, 216000, 226981, 238328, 250047, 262144, 274625, 287496, 300763, 314432, 328509, 343000, 357911, 373248, 389017, 405224, 421875, 438976, 456533, 474552, 493039, 512000, 531441, 551368, 571787, 592704, 614125, 636056, 658503, 681472, 704969, 729000, 753571, 778688, 804357, 830584, 857375, 884736, 912673, 941192, 970299, 1000000],
-      'Medium Slow': [0, 9, 57, 96, 135, 179, 236, 314, 419, 560, 742, 973, 1261, 1612, 2035, 2535, 3120, 3798, 4575, 5460, 6458, 7577, 8825, 10208, 11735, 13411, 15244, 17242, 19411, 21760, 24294, 27021, 29949, 33084, 36435, 40007, 43808, 47846, 52127, 56660, 61450, 66505, 71833, 77440, 83335, 89523, 96012, 102810, 109923, 117360, 125126, 133229, 141677, 150476, 159635, 169159, 179056, 189334, 199999, 211060, 222522, 234393, 246681, 259392, 272535, 286115, 300140, 314618, 329555, 344960, 360838, 377197, 394045, 411388, 429235, 447591, 466464, 485862, 505791, 526260, 547274, 568841, 590969, 613664, 636935, 660787, 685228, 710266, 735907, 762160, 789030, 816525, 844653, 873420, 902835, 932903, 963632, 995030, 1027103, 1059860],
-      'Slow': [0, 10, 33, 80, 156, 270, 428, 640, 911, 1250, 1663, 2160, 2746, 3430, 4218, 5120, 6141, 7290, 8573, 10000, 11576, 13310, 15208, 17280, 19531, 21970, 24603, 27440, 30486, 33750, 37238, 40960, 44921, 49130, 53593, 58320, 63316, 68590, 74148, 80000, 86151, 92610, 99383, 106480, 113906, 121670, 129778, 138240, 147061, 156250, 165813, 175760, 186096, 196830, 207968, 219520, 231491, 243890, 256723, 270000, 283726, 297910, 312558, 327680, 343281, 359370, 375953, 393040, 410636, 428750, 447388, 466560, 486271, 506530, 527343, 548720, 570666, 593190, 616298, 640000, 664301, 689210, 714733, 740880, 767656, 795070, 823128, 851840, 881211, 911250, 941963, 973360, 1005446, 1038230, 1071718, 1105920, 1140841, 1176490, 1212873, 1250000],
-      'Erratic': [0, 15, 52, 122, 237, 406, 637, 942, 1326, 1800, 2369, 3041, 3822, 4719, 5737, 6881, 8155, 9564, 11111, 12800, 14632, 16610, 18737, 21012, 23437, 26012, 28737, 31610, 34632, 37800, 41111, 44564, 48155, 51881, 55737, 59719, 63822, 68041, 72369, 76800, 81326, 85942, 90637, 95406, 100237, 105122, 110052, 115015, 120001, 125000, 131324, 137795, 144410, 151165, 158056, 165079, 172229, 179503, 186894, 194400, 202013, 209728, 217540, 225443, 233431, 241496, 249633, 257834, 267406, 276458, 286328, 296358, 305767, 316074, 326531, 336255, 346965, 357812, 367807, 378880, 390077, 400293, 411686, 423190, 433572, 445239, 457001, 467489, 479378, 491346, 501878, 513934, 526049, 536557, 548720, 560922, 571333, 583539, 591882, 600000],
-      'Fluctuating': [0, 4, 13, 32, 65, 112, 178, 276, 393, 540, 745, 967, 1230, 1591, 1957, 2457, 3046, 3732, 4526, 5440, 6482, 7666, 9003, 10506, 12187, 14060, 16140, 18439, 20974, 23760, 26811, 30146, 33780, 37731, 42017, 46656, 50653, 55969, 60505, 66560, 71677, 78533, 84277, 91998, 98415, 107069, 114205, 123863, 131766, 142500, 151222, 163105, 172697, 185807, 196322, 210739, 222231, 238036, 250562, 267840, 281456, 300293, 315059, 335544, 351520, 373744, 390991, 415050, 433631, 459620, 479600, 507617, 529063, 559209, 582187, 614566, 639146, 673863, 700115, 737280, 765275, 804997, 834809, 877201, 908905, 954084, 987754, 1035837, 1071552, 1122660, 1160499, 1214753, 1254796, 1312322, 1354652, 1415577, 1460276, 1524731, 1571884, 1640000],
-    };
-
     // Get the array of experience points for the given experience group
     const expPoints = levelExpPoints[expgroup];
 
@@ -117,6 +118,27 @@ export default class Gen3Pokemon {
     return 100; // If the loop completes, the Pokémon is at maximum level
   }
 
+  getPercentageToNextLevel(currentExp, expGroup, currentLevel) {
+    // Get the array of experience points for the given experience group
+    const expPoints = levelExpPoints[expGroup];
+
+    // Current level's experience threshold
+    const currentLevelExp = expPoints[currentLevel - 1];
+
+    // Next level's experience threshold
+    const nextLevelExp = expPoints[currentLevel];
+
+    // Calculate the difference between the next level and current level thresholds
+    const expToLevelUp = nextLevelExp - currentLevelExp;
+
+    // Calculate the difference between current exp and the current level's threshold
+    const expIntoCurrentLevel = currentExp - currentLevelExp;
+
+    // Calculate the percentage towards the next level
+    return (expIntoCurrentLevel / expToLevelUp) * 100;
+  }
+
+
   getIvs(value) {
     // Convert the value to a 32-bit binary string, padding with zeros if necessary
     const bitString = value.toString(2).padStart(32, '0');

diff --git a/src/main/utils/export.mjs b/src/main/utils/export.mjs
@@ -25,11 +25,14 @@ export const exportSaveBlock = async (
   if (outputFilePath) {
     try {
       // save the file
+      console.log('Writing save block:', outputFilePath)
       await fs.writeFile(outputFilePath, saveBlock)
     } catch (err) {
       console.error(err)
       throw new Error('Error writing Pokemon save block to .sav')
     }
+  } else {
+    console.log('No output file specified, skipped write')
   }
   return saveBlock
 }
diff --git a/src/renderer/components/Pokemon.jsx b/src/renderer/components/Pokemon.jsx
@@ -1,28 +1,72 @@
 import React from 'react'
 import styled from 'styled-components'
-import {BlueContainer} from './Styles'
+import {BlueContainer, Colors} from './Styles'
 
-const Pokemon = ({name, level, speciesId, kantoId}) => {
+const Pokemon = ({name, level, exp, percentageToNextLevel, speciesId, kantoId, moves, nature, ivs, evs}) => {
   return (
     <Container>
-      {/*<span className={`pokesprite pokemon ${name.toLowerCase()}`}/>*/}
       <SpriteContainer>
         <Sprite src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-v/black-white/animated/${kantoId}.gif`}/>
       </SpriteContainer>
-      <Text>
+      <Info>
         <span>{name}</span>
         <Level>Lv. {level}</Level>
-      </Text>
+        <ExpContainer>
+          EXP
+          <ExpBar>
+            <ExpFill $percentage={percentageToNextLevel}/>
+          </ExpBar>
+        </ExpContainer>
+      </Info>
+      <Hovered>
+        <span>{nature}</span>
+        {
+          moves.filter(move => !!move.name).map(move => {
+            return <span>{move.name} {move.pp}PP</span>
+          })
+        }
+      </Hovered>
     </Container>
   )
 }
 
 export default Pokemon
 
+const Hovered = styled.div`
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  padding: 4px;
+  border-radius: 4px;
+  outline: 1px solid black;
+  border: 1px solid white;
+  background-color: ${Colors.PRIMARY_DARK};
+  color: white;
+  font-size: 15px;
+  font-family: "Pokemon", sans-serif;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.64);
+`
+
 const Container = styled(BlueContainer)`
   line-height: 0.75;
   flex-direction: row;
   gap: 6px;
+  flex-grow: 1;
+  height: fit-content;
+  position: relative;
+
+  ${Hovered} {
+    display: none;
+  }
+  
+  &:hover {
+    ${Hovered} {
+      display: flex;
+    }
+  }
 `
 
 const spriteSize = 48
@@ -37,12 +81,41 @@ const Sprite = styled.img`
   object-fit: contain;
 `
 
-const Text = styled.div`
+const Info = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
+  width: 100%;
 `
 
 const Level = styled.span`
   font-size: 15px;
 `
+
+const ExpContainer = styled.div`
+  display: flex;
+  align-items: center;
+  //background-color: rgb(81, 104, 96);
+  background-color: ${Colors.PRIMARY_DARK};
+  border: 1px solid black;
+  color: rgb(248, 225, 47);
+  padding: 2px 4px;
+  border-radius: 2px;
+  font-size: 12.5px;
+  gap: 5px;
+  margin-top: 5px;
+`
+
+const ExpBar = styled.div`
+  background-color: rgb(192, 185, 116);
+  height: 3px;
+  width: 100%;
+  position: relative;
+`
+
+const ExpFill = styled.div`
+  background-color: rgb(70, 199, 246);
+  position: absolute;
+  width: ${({$percentage}) => `${$percentage}%`};
+  height: 100%;
+`
diff --git a/src/renderer/components/Styles.js b/src/renderer/components/Styles.js
@@ -16,7 +16,7 @@ export const BlueContainer = styled.div`
   padding: 2px 4px;
   display: flex;
   flex-direction: column;
-  background: linear-gradient(to bottom, rgba(56, 144, 216) 65%, rgba(128, 191, 216) 100%); // Replace with the exact color codes from the image
+  background: linear-gradient(to bottom, ${Colors.PRIMARY_MEDIUM} 65%, ${Colors.PRIMARY_LIGHT} 100%);
   font-family: "Pokemon", sans-serif;
   font-size: 15px;
   text-shadow: 1px 1px black;

diff --git a/src/renderer/components/Trainer.jsx b/src/renderer/components/Trainer.jsx
@@ -3,17 +3,6 @@ import styled from 'styled-components'
 import Pokemon from './Pokemon'
 import {BlueContainer, Colors} from './Styles'
 
-// const Colors = {
-//   boy: {
-//     primary: 'rgb(73, 190, 168)',
-//     secondary: 'rgb(47, 152, 144)'
-//   },
-//   girl: {
-//     primary: 'rgb(223, 139, 78)',
-//     secondary: 'rgb(207, 95, 40)'
-//   }
-// }
-
 const Base = styled.div`
   display: flex;
   flex-direction: row;
@@ -33,12 +22,12 @@ const Base = styled.div`
 
 const Card = styled.div`
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   width: 100%;
   height: 100%;
+  padding: 12px;
   gap: 8px;
+  align-items: center;
+  justify-content: center;
 `
 
 const Player = styled.div`
@@ -48,29 +37,29 @@ const Player = styled.div`
 `
 
 const Character = styled(BlueContainer)`
+  padding: 3px;
   aspect-ratio: 1/1;
+  gap: 6px;
   align-items: center;
   justify-content: center;
-  min-width: 107px;
-  min-height: 107px;
-  max-width: 128px;
-  max-height: 128px;
+  width: 112px;
+  height: 112px;
   margin: 0;
 `
 
 const Name = styled(BlueContainer)`
   width: 100%;
+  background: linear-gradient(to bottom, ${Colors.PRIMARY_DARK} 65%, ${Colors.PRIMARY_MEDIUM} 100%);
 `
 
 const Team = styled.div`
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* Three columns */
+  grid-auto-rows: min-content; /* Make row height only as tall as the content requires */
   gap: 4px;
 `
 
-const Trainer = ({game, name, gender, teamcount, team}) => {
+const Trainer = ({game, name, gender, teamcount, team, boxes}) => {
   if (!game && !name) {
     return <Base/>
   }
@@ -89,10 +78,10 @@ const Trainer = ({game, name, gender, teamcount, team}) => {
                 size={96}
               />
           }
+          <Name>
+            {name}
+          </Name>
         </Character>
-        <Name>
-          {name}
-        </Name>
       </Player>
       <Team>
         {

diff --git a/src/renderer/layout/Layout.jsx b/src/renderer/layout/Layout.jsx
@@ -51,7 +51,7 @@ const Layout = () => {
                 fill="white"
               />
             </svg>
-            Save
+            Export
           </Button>
         }
       </Navigation>
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,7 +51,7 @@ const Layout = () => { @@
                     fill="white"
                   />
                 </svg>
-                Save
+                Export
               </Button>
             }
           </Navigation>
@@ Expand Down @@