improve display of stats/boosts in debug ui

pkmn · Sep 19, 2024 · f93dd39 · f93dd39
1 parent d493b9d
commit f93dd39
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/tools/display/ui.css b/src/tools/display/ui.css
@@ -233,6 +233,9 @@ th, td {
   text-align: center;
   width: 100%;
 }
+.boosts {
+  margin: 0 5px;
+}
 .types {
   display: inherit;
 }
@@ -278,9 +281,6 @@ th, td {
     justify-content: center;
     padding: 0;
   }
-  .boosts {
-    margin-left: 5px;
-  }
   .moves ul {
     grid-template-columns: repeat(2, auto);
   }
@@ -320,7 +320,7 @@ th, td {
   .boosts {
     display: flex;
     justify-content: space-between;
-    margin-top: 0.5em;
+    margin: 0.5em 0 0 0;
   }
 }
 @media(max-width: 550px) {

diff --git a/src/tools/display/ui.tsx b/src/tools/display/ui.tsx
@@ -197,9 +197,9 @@ export const Pokemon = ({pokemon, battle, active, gen, showdown, last}: {
 
   const boosts = active ? <div className='boosts'>
     {!!pokemon.boosts.accuracy &&
-      <div><strong>Accuracy:</strong><Boost value={pokemon.boosts.accuracy} /></div>}
+      <div><strong>Accuracy:</strong> <Boost value={pokemon.boosts.accuracy} /></div>}
     {!!pokemon.boosts.evasion &&
-      <div><strong>Evasion:</strong><Boost value={pokemon.boosts.evasion} /></div>}
+      <div><strong>Evasion:</strong> <Boost value={pokemon.boosts.evasion} /></div>}
   </div> : '';
 
   const lis = [];
@@ -311,14 +311,14 @@ export const Status = ({pokemon}: {pokemon: engine.Pokemon}) => {
 };
 
 export const Stat = ({value, boost}: {value: number; boost: number}) => {
-  if (!boost) return value.toString();
-  if (boost > 0) return <span className='good'>{value} (+{boost})</span>;
-  return <span className='bad'>{value} ({boost})</span>;
+  if (!boost) return <span className='stat'>{value}</span>;
+  if (boost > 0) return <span className='stat good'>{value}&nbsp;(+{boost})</span>;
+  return <span className='stat bad'>{value}&nbsp;({boost})</span>;
 };
 
 export const Boost = ({value}: {value: number}) => {
-  if (value > 0) return <span className='good'>+{value}</span>;
-  return <span className='bad'>{value}</span>;
+  if (value > 0) return <span className='boost good'>+{value}</span>;
+  return <span className='boost bad'>{value}</span>;
 };
 
 export const PokemonIcon = ({pokemon, side}: {pokemon: engine.Pokemon; side: 'p1' | 'p2'}) => {