updated conditional styling

assets/main.css

@@ -555,18 +555,10 @@ video {
   display: table;
 }
 
-.h-6 {
-  height: 1.5rem;
-}
-
 .h-8 {
   height: 2rem;
 }
 
-.w-6 {
-  width: 1.5rem;
-}
-
 .w-8 {
   width: 2rem;
 }
@@ -596,14 +588,14 @@ video {
   border-color: rgb(3 7 18 / var(--tw-border-opacity));
 }
 
-.bg-gray-300 {
+.bg-blue-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
 }
 
-.bg-gray-500 {
+.bg-blue-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
 .bg-purple-500 {
@@ -611,11 +603,26 @@ video {
   background-color: rgb(168 85 247 / var(--tw-bg-opacity));
 }
 
+.bg-red-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
+
 .bg-slate-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(51 65 85 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
+}
+
+.bg-green-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -643,6 +650,10 @@ video {
   font-weight: 700;
 }
 
+.capitalize {
+  text-transform: capitalize;
+}
+
 .text-gray-100 {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));

justfile

@@ -1,7 +1,5 @@
 tailwind:
-    export PATH=${pkgs.nodejs_20}/bin:${pkgs.nodePackages_latest.pnpm}/bin:$PATH
+    nix .#tailwind
-    pnpm dlx tailwindcss -i src/styles/tailwind.css -o assets/main.css --watch
-
 dev:
     cargo watch -x 'run test_data/test.json'
 

src/cards.rs

@@ -27,7 +27,7 @@ pub struct CardFromFile {
 pub struct CardForTemplate {
     pub name: String,
     pub count: i32,
-    pub usd_value: String, // No longer an Option
+    pub usd_value: f32, // No longer an Option
 }
 
 

src/handlers.rs

@@ -6,7 +6,7 @@ use crate::templates::RootTemplate;
 use crate::util::HtmlTemplate;
 
 pub async fn root() -> Result<HtmlTemplate<RootTemplate>, (StatusCode, String)> {
-    let file_path = "test_data/test.json";
+    let file_path = "test_data/cards.json";
     match read_card_file(file_path).await {
         Ok(card_file) => {
             let cards_for_template: Vec<_> = card_file.cards
@@ -14,7 +14,7 @@ pub async fn root() -> Result<HtmlTemplate<RootTemplate>, (StatusCode, String)>
                 .map(|card| CardForTemplate {
                     name: card.name,
                     count: card.count,
-                    usd_value: card.usd_value.unwrap_or_else(|| "N/A".into()),
+                    usd_value: card.usd_value.and_then(|value| value.parse::<f32>().ok()).unwrap_or(0.0),
                 })
                 .collect();
             let template = RootTemplate {

src/templates.rs

@@ -15,7 +15,3 @@ pub struct RootTemplate {
 #[derive(Template)]
 #[template(path="base.html")]
 pub struct BaseTemplate;
-
-#[derive(Template)]
-#[template(path="head.html")]
-pub struct  HeadTemplate;

templates/root.html

@@ -6,7 +6,7 @@
     <h1 class="text-2xl text-white">{{ name }}'s SK TCG Trader</h1>
     
     <table id="card_table" class="my-4 border-collapse text-center">
-      <tr class="text-gray-100 bg-gray-500 font-bold text-xl">
+      <tr class="text-gray-100 bg-blue-500 font-bold text-xl">
         <th class="p-2 border-2 border-gray-950">Card Name</th>
         <th class="p-2 border-2 border-gray-950">Card Value</th>
         <th class="p-2 border-2 border-gray-950">Card Count</th>
@@ -14,13 +14,21 @@
       </tr>
       <!-- TODO: Add for loop for cards in data -->
       {% for card in cards %}
-        <tr class="text-gray-900 bg-gray-300 text-lg">
+        <tr class="text-gray-900 bg-blue-400 text-lg">
-          <td class="p-2 border-2 border-gray-950">{{ card.name }}</td>
+          <td class="p-2 border-2 border-gray-950">{{ card.name|capitalize }}</td>
-          <td class="p-2 border-2 border-gray-950">{{ card.usd_value }}</td>
+          {% if card.usd_value > 5.00 %}
+            <td class="p-2 border-2 bg-green-400 border-gray-950">{{ card.usd_value }}</td>
+          {% else if card.usd_value < 1.00 %}
+            <td class="p-2 border-2 bg-red-400 border-gray-950">{{ card.usd_value }}</td>
+          {% else %}
+            <td class="p-2 border-2 bg-yellow-400 border-gray-950">{{ card.usd_value }}</td>
+          {% endif %}
             <td class="p-2 border-2 border-gray-950">{{ card.count }}</td>
           <td class="p-2 border-2 border-gray-950">
-            <button class="p-2 rounded-xl bg-purple-500 text-lg font-bold text-gray-100">
+            <button class="p-2 rounded-xl bg-purple-500 text-lg text-gray-100">
-              {% include "icons/data.html"%}
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25M9 16.5v.75m3-3v3M15 12v5.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+              </svg>
             </button>
           </td>
         </tr>