Adding an image library because i apparently need TGAs

CMakeLists.txt

@@ -28,6 +28,7 @@ add_executable(${PROJECT_NAME}
     src/main.cpp
     src/database.cpp
     src/ui.cpp
+    src/image_utils.cpp
 
     vendor/rmlui_backend/RmlUi_Backend_GLFW_GL3.cpp
     vendor/rmlui_backend/RmlUi_Platform_GLFW.cpp

assets/images/icon.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
+   sodipodi:docname="icon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.7376459"
+     inkscape:cx="555.14441"
+     inkscape:cy="475.16024"
+     inkscape:window-width="2560"
+     inkscape:window-height="1380"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" /><defs
+     id="defs1" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><rect
+       style="fill:none;fill-opacity:1;stroke-width:1.32595"
+       id="rect1"
+       width="110.58241"
+       height="110.58241"
+       x="51.994026"
+       y="45.906918"
+       inkscape:export-filename="icon-400x400.png"
+       inkscape:export-xdpi="91.877167"
+       inkscape:export-ydpi="91.877167" /><image
+       width="162.95058"
+       height="91.659683"
+       preserveAspectRatio="none"
+       xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAYAAADo08FDAAABg2lDQ1BJQ0MgcHJvZmlsZQAAKJF9&#10;kT1Iw0AcxV/TSkUqRewg4pChOlkQFXGUKhbBQmkrtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB&#10;8APE0clJ0UVK/F9SaBHjwXE/3t173L0DhGaVqWZgAlA1y0gn4mIuvyoGXxFAGH4MABIz9WRmMQvP&#10;8XUPH1/vYjzL+9yfo18pmAzwicRzTDcs4g3imU1L57xPHGFlSSE+Jx436ILEj1yXXX7jXHJY4JkR&#10;I5ueJ44Qi6UulruYlQ2VeJo4qqga5Qs5lxXOW5zVap2178lfGCpoKxmu0xxBAktIIgURMuqooAoL&#10;MVo1UkykaT/u4R92/ClyyeSqgJFjATWokBw/+B/87tYsTk26SaE40PNi2x+jQHAXaDVs+/vYtlsn&#10;gP8ZuNI6/loTmP0kvdHRokdAeBu4uO5o8h5wuQMMPemSITmSn6ZQLALvZ/RNeWDwFuhbc3tr7+P0&#10;AchSV8s3wMEhMFai7HWPd/d29/bvmXZ/P/DicnNG6xVaAAAABmJLR0QAbQBtAG3r7U0VAAAACXBI&#10;WXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH5gQPEy4qb/Y5egAAABl0RVh0Q29tbWVudABDcmVhdGVk&#10;IHdpdGggR0lNUFeBDhcAACAASURBVHja7N3Jb6TXnub353feGDgmyZxHpZSSeG/d27dvVQPVld1l&#10;A+VaGH0Bwri34X3VvhfVQP8dXgiGN14Y0sZLdzc6gfbCC+8s24DRntQwa9AtKZVKKScOQUa80zle&#10;nHPyfRliakxmMjO/H+hVkMHgFPFGMDKe9/kdCQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA&#10;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&#10;/znkfGO1H/z2xzr3RLine truncated
+       id="image1"
+       x="29.755487"
+       y="50.346672" /></g></svg>

assets/main.rml

@@ -2,6 +2,10 @@
   <head>
     <title>Critterfolio</title>
     <link type="text/rcss" href="styles/main.rcss" />
+
+    <script>
+      
+    </script>
   </head>
 
   <body data-model="app_data">
@@ -11,11 +15,23 @@
 
     <!-- Critter Cards -->
     <div class="critter-list">
-      <div data-for="entry : critters" class="critter-card">
+      <button data-for="entry : critters" class="critter-card">
-        <h3>#{{entry.key}} - {{entry.value.name}}</h3>
+        <div class="critter-card-header">
-        <p><strong>Species:</strong> {{entry.value.species}}</p>
+          <span class="critter-id">ID: #{{entry.key}}</span>
-        <p><strong>Gender:</strong> {{entry.value.gender}}</p>
+          <button class="btn-delete">X</button>
-      </div>
+        </div>
+
+        <div class="critter-card-body">
+          <img class="critter-thumb" 
+            src="images/icon.tga" />
+          
+          <div class="critter-info">
+            <h3 class="critter-name">{{entry.value.name}}</h3>
+            <p><strong>Species:</strong> {{entry.value.species}}</p>
+            <p><strong>Gender:</strong> {{entry.value.gender}}</p>
+          </div>
+        </div>
+      </button>
     </div>
 
     <!-- Modal Dialog Overlay -->

assets/styles/main.rcss

@@ -272,7 +272,92 @@ progress-value {
     Specific app stuff 
     =================================== */
 
-/* Critter cards */
+/* Critter Cards Container */
+.critter-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 10px;
+}
+
+/* Interactive Card Base */
+.critter-card {
+    display: block;
+    width: 220px;
+    margin: 10px;
+    padding: 10px;
+    background-color: #2b2b2b;
+    color: #ffffff;
+    border: 1px #444444;
+    border-radius: 6px;
+    text-align: left;
+}
+
+.critter-card:hover {
+    background-color: #383838;
+    border: 1px #005aff;
+}
+
+.critter-card:active {
+    background-color: #222222;
+}
+
+/* Header with Small ID & Delete Button */
+.critter-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px #444444;
+    padding-bottom: 4px;
+    margin-bottom: 8px;
+}
+
+.critter-id {
+    font-size: 11px;
+    color: #aaaaaa;
+}
+
+.btn-delete {
+    padding: 2px 6px;
+    min-width: 0px;
+    font-size: 10px;
+    background-color: #aa2222;
+    color: #ffffff;
+    border: 0px;
+}
+
+.btn-delete:hover {
+    background-color: #ff3333;
+}
+
+/* Body & Thumbnail */
+.critter-card-body {
+    display: flex;
+    align-items: center;
+}
+
+.critter-thumb {
+    width: 48px;
+    height: 48px;
+    margin-right: 10px;
+    background-color: #1a1a1a;
+    border: 1px #555555;
+}
+
+.critter-info {
+    flex: 1;
+}
+
+.critter-name {
+    margin: 0px 0px 4px 0px;
+    font-size: 16px;
+    color: #ffffff;
+}
+
+.critter-info p {
+    margin: 2px 0px;
+    font-size: 12px;
+    color: #dddddd;
+}
 
 /* Modals */
 .modal-overlay {

src/image_utils.cpp

@@ -0,0 +1,38 @@
+// image_utils.cpp
+#define STB_IMAGE_IMPLEMENTATION
+#include "../vendor/stb/stb_image.h"
+
+#define STB_IMAGE_WRITE_IMPLEMENTATION
+#include "../vendor/stb/stb_image_write.h"
+
+#include <iostream>
+#include <string>
+
+bool ConvertToThumbnailTGA(const std::string& input_path, const std::string& output_tga_path) {
+    int width, height, channels;
+
+    stbi_uc* data = stbi_load(input_path.c_str(), &width, &height, &channels, 4);
+    if (!data) {
+        std::cout << "[ERROR] Failed to decode image: " << input_path << std::endl;
+        return false;
+    }
+
+    int result = stbi_write_tga(output_tga_path.c_str(), width, height, 4, data);
+
+    stbi_image_free(data);
+
+    if (!result) {
+        std::cout << "[ERROR] Failed to save TGA thumbnail to: " << output_tga_path << std::endl;
+        return false;
+    }
+
+    return true;
+}
+
+void ProcessUserThumbnail(int critter_id, const std::string& user_selected_file_path) {
+    std::string target_tga_path = "./data/thumbnails/" + std::to_string(critter_id) + ".tga";
+
+    if (ConvertToThumbnailTGA(user_selected_file_path, target_tga_path)) {
+        std::cout << "[INFO] Thumbnail successfully generated for Critter #" << critter_id << std::endl;
+    }
+}

src/main.cpp

@@ -1,6 +1,8 @@
 #include "critter.hpp"
 #include "database.hpp"
 #include "ui.hpp"
+#include "../vendor/stb/stb_image.h"
+#include "../vendor/stb/stb_image_write.h"
 
 #include <RmlUi/Core.h>
 #include <RmlUi/Debugger/Debugger.h>
@@ -55,6 +57,8 @@ bool initialize() {
     return true;
 }
 
+
+
 int main() {
     std::cout << "[INFO] Starting CritterFolio...\n";