From d9328136d11e6250b02227a47911a478dd3c4c70 Mon Sep 17 00:00:00 2001
From: Dan <Quildra@gmail.com>
Date: Wed, 30 Oct 2024 11:47:41 +0000
Subject: [PATCH]  - Improve the plan layout

---
 Site/OriginDex.py         |  19 ++++
 Site/templates/index.html | 193 ++++++++++++++++++++++++++++++++------
 2 files changed, 183 insertions(+), 29 deletions(-)

diff --git a/Site/OriginDex.py b/Site/OriginDex.py
index 0930d3f..dfdb710 100644
--- a/Site/OriginDex.py
+++ b/Site/OriginDex.py
@@ -114,6 +114,25 @@ def index():
     try:
         with open('efficiency_plan.json', 'r', encoding='utf-8') as f:
             efficiency_plan = json.load(f)
+            
+        # Enhance the plan with evolution methods
+        conn = sqlite3.connect('pokemon_forms.db')
+        cursor = conn.cursor()
+        
+        for game in efficiency_plan:
+            for pokemon in game['pokemon']:
+                if pokemon.get('evolve_to'):
+                    for evolution in pokemon['evolve_to']:
+                        cursor.execute('''
+                            SELECT method 
+                            FROM evolution_chains 
+                            WHERE from_pfic = ? AND to_pfic = ?
+                        ''', (pokemon['pfic'], evolution['pfic']))
+                        result = cursor.fetchone()
+                        evolution['method'] = result[0] if result else 'Evolution'
+        
+        conn.close()
+            
     except FileNotFoundError:
         efficiency_plan = []
     
diff --git a/Site/templates/index.html b/Site/templates/index.html
index 607e384..29d65c6 100644
--- a/Site/templates/index.html
+++ b/Site/templates/index.html
@@ -261,6 +261,20 @@
             transition: background-color 0.3s ease;
         }
 
+        .game-title-right {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .game-catch-total {
+            background-color: #4CAF50;
+            color: white;
+            padding: 4px 8px;
+            border-radius: 12px;
+            font-size: 0.9em;
+        }
+
         .game-title:hover {
             background-color: #e9e9e9;
         }
@@ -281,15 +295,50 @@
 
         .pokemon-entry {
             margin: 15px 0;
-            padding: 15px;
-            background-color: #f9f9f9;
-            border-radius: 5px;
             border: 1px solid #eee;
+            border-radius: 5px;
+            overflow: hidden;
         }
 
-        .pokemon-entry h3 {
-            margin-top: 0;
-            color: #333;
+        .pokemon-header {
+            background-color: #f9f9f9;
+            padding: 10px 15px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .pokemon-header:hover {
+            background-color: #f0f0f0;
+        }
+
+        .pokemon-header-content {
+            flex-grow: 1;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .pokemon-details {
+            display: none;
+            padding: 15px;
+            background-color: white;
+        }
+
+        .pokemon-details.show {
+            display: block;
+        }
+
+        .pokemon-thumbnail {
+            width: 48px;
+            height: 48px;
+            object-fit: contain;
+        }
+
+        .catch-count {
+            color: #666;
+            font-size: 0.9em;
         }
 
         .evolution-list, .breeding-list {
@@ -312,6 +361,51 @@
             border-radius: 3px;
             font-size: 0.9em;
         }
+
+        .pokemon-targets-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+            gap: 15px;
+            padding: 15px;
+        }
+
+        .target-card {
+            background-color: #f9f9f9;
+            border: 1px solid #eee;
+            border-radius: 8px;
+            padding: 10px;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .target-name {
+            font-weight: bold;
+            font-size: 0.9em;
+            line-height: 1.2;
+            margin: 0;
+        }
+
+        .target-image {
+            width: 64px;
+            height: 64px;
+            object-fit: contain;
+        }
+
+        .target-method {
+            font-size: 0.8em;
+            color: #666;
+            background-color: #e9e9e9;
+            padding: 3px 8px;
+            border-radius: 12px;
+        }
+
+        .target-count {
+            font-size: 0.8em;
+            color: #4CAF50;
+        }
     </style>
 </head>
 <body>
@@ -368,37 +462,65 @@
                     <div class="game-section">
                         <div class="game-title" onclick="toggleGameContent(this)">
                             {{ game.game_name }}
-                            <span class="toggle-icon">▼</span>
+                            <div class="game-title-right">
+                                <span class="game-catch-total">
+                                    Catch: {{ game.pokemon|sum(attribute='catch_count') }}
+                                </span>
+                                <span class="toggle-icon">▼</span>
+                            </div>
                         </div>
                         <div class="game-content">
                             {% for pokemon in game.pokemon %}
                             <div class="pokemon-entry">
-                                <h3>{{ pokemon.name }}{% if pokemon.form_name %} ({{ pokemon.form_name }}){% endif %}</h3>
-                                <p>Catch Count: {{ pokemon.catch_count }}</p>
-                                
-                                {% if pokemon.evolve_to %}
-                                <div class="evolution-list">
-                                    <h4>Evolves To:</h4>
-                                    {% for evolution in pokemon.evolve_to %}
-                                    <div class="evolution-item">
-                                        {{ evolution.name }}{% if evolution.form_name %} ({{ evolution.form_name }}){% endif %} 
-                                        - Count: {{ evolution.count }}
+                                <div class="pokemon-header" onclick="togglePokemonDetails(this)">
+                                    <img src="{{ url_for('static', filename='images/pokemon/' + pokemon.pfic + '.png') }}" 
+                                         alt="{{ pokemon.name }}" 
+                                         class="pokemon-thumbnail">
+                                    <div class="pokemon-header-content">
+                                        <h3 style="margin: 0;">
+                                            {{ pokemon.name }}{% if pokemon.form_name %} ({{ pokemon.form_name }}){% endif %}
+                                        </h3>
+                                        <span class="catch-count">Catch: {{ pokemon.catch_count }}</span>
+                                        <span class="toggle-icon">▼</span>
                                     </div>
-                                    {% endfor %}
                                 </div>
-                                {% endif %}
-                                
-                                {% if pokemon.breed_for %}
-                                <div class="breeding-list">
-                                    <h4>Breed For:</h4>
-                                    {% for breeding in pokemon.breed_for %}
-                                    <div class="breeding-item">
-                                        {{ breeding.name }}{% if breeding.form_name %} ({{ breeding.form_name }}){% endif %} 
-                                        - Count: {{ breeding.count }}
+                                <div class="pokemon-details">
+                                    {% if pokemon.evolve_to or pokemon.breed_for %}
+                                    <div class="pokemon-targets-grid">
+                                        {% if pokemon.evolve_to %}
+                                            {% for evolution in pokemon.evolve_to %}
+                                            <div class="target-card">
+                                                <div class="target-name">
+                                                    {{ evolution.name }}
+                                                    {% if evolution.form_name %}({{ evolution.form_name }}){% endif %}
+                                                </div>
+                                                <img src="{{ url_for('static', filename='images/pokemon/' + evolution.pfic + '.png') }}" 
+                                                     alt="{{ evolution.name }}" 
+                                                     class="target-image">
+                                                <span class="target-method">{{ evolution.method }}</span>
+                                                <span class="target-count">Need: {{ evolution.count }}</span>
+                                            </div>
+                                            {% endfor %}
+                                        {% endif %}
+                                        
+                                        {% if pokemon.breed_for %}
+                                            {% for breeding in pokemon.breed_for %}
+                                            <div class="target-card">
+                                                <div class="target-name">
+                                                    {{ breeding.name }}
+                                                    {% if breeding.form_name %}({{ breeding.form_name }}){% endif %}
+                                                </div>
+                                                <img src="{{ url_for('static', filename='images/pokemon/' + breeding.pfic + '.png') }}" 
+                                                     alt="{{ breeding.name }}" 
+                                                     class="target-image">
+                                                <span class="target-method">Breed</span>
+                                                <span class="target-count">Need: {{ breeding.count }}</span>
+                                            </div>
+                                            {% endfor %}
+                                        {% endif %}
                                     </div>
-                                    {% endfor %}
+                                    {% endif %}
                                 </div>
-                                {% endif %}
                             </div>
                             {% endfor %}
                         </div>
@@ -589,6 +711,19 @@
                 }
             }
         }
+
+        function togglePokemonDetails(headerElement) {
+            const detailsElement = headerElement.nextElementSibling;
+            const icon = headerElement.querySelector('.toggle-icon');
+            
+            if (detailsElement.classList.contains('show')) {
+                detailsElement.classList.remove('show');
+                icon.textContent = '▼';
+            } else {
+                detailsElement.classList.add('show');
+                icon.textContent = '▲';
+            }
+        }
     </script>
 </body>
 </html>