highlight card names in generated text

.firebase/hosting.YnVpbGQ.cache

@@ -5,11 +5,21 @@ AI_tarot_final1_female.png,1704749862374,dc2502f449227f69a42c8187431564dcff9e0de
 AI_tarot_final1_female_animation.png,1704749870513,d09d6397971c384e1c7765c9c52d10c8a24e28b4d568118cc887c70333b5d6b2
 AI_tarot_final1_female_animation_big.png,1703632333349,4a68acb7cda86af6c269897588cd18262c232450fd3b4e1b3c77cb96f2e08d14
 AI_tarot_final1_female_big.png,1703632333346,c1f0e31a3cbfa58cb1efa0781be9f9f727468a2669314bb79d8bfdfc6f66d695
+AI_tarot_final1_female_v2.png,1704800202486,950a1b0a9f2616dcd18878293facd0dbd87b9dd462538e8e2128f9cc4ab1444a
+AI_tarot_final1_female_v2_animation.png,1704800569035,35c13353022c7f29fa8dbf04fde420aa32c63db404b9586c47e75920d53110df
+AI_tarot_final1_oldman.png,1704794681456,39dbbf149319aab36eef9bfe16a4190021c89451449e334cd1563b259dbb6d44
+AI_tarot_final1_oldman_animation.png,1704796909383,6298cf55fd2db72dbc4964e312b18f3686a2d8bc095bbae982aa1f4abec9af0f
 AI_tarot_final1_purple.png,1704749830482,aeb48ccded407b03e94b1f561cd12d82d6d5ce68499284110fd7427c0f68fd7f
 AI_tarot_final1_purple_big.png,1704299996855,3897994d558a16e402dbd45db9e8708a6877c4eac447ce5cd15bdb7b30dba45f
+AI_tarot_final1_wise_man.png,1704813388022,6b5549271d6d8d4d394b5c3c432d36864ba2b880f0de8aea256821798f5267d0
+AI_tarot_final1_wise_manv2.png,1704829280115,a6da62d4cd121dc979586518bf400291ea77a857acc9243e978a0a83137c0c96
+AI_tarot_final1_wise_manv2_animation.png,1704829345362,40fcecb689a72475f7acb1a54272cb332c254a8c94ef66048057d5dc6bdc5c94
+AI_tarot_final1_wise_manv2_animation.xcf,1704829140416,2447887a68ecd4b947afe22e58646e14d15ee3defed4aa45ea5b09d80522a99d
 AI_tarot_final1_wise_woman.png,1703632333369,aa0dfe78861d78ea49887744ce54ab5eb47fa360bfacb37f99b72cf9858dffa2
 AI_tarot_final1_wise_woman2.png,1704749878133,5849b65e8e592ccb6df22237e1adad10b05839b781191c6bbecd5609695ac61c
+AI_tarot_final1_wise_woman2.xcf,1704813268952,eaadc87d8176a376650646b29374a5c8d2ff08fe319cfd2f3ed6005bee52b524
 AI_tarot_final1_wise_woman2_big.png,1703632333377,5fcdcb8f02e726b7da1d4ebd0a438dccadccb06b8e26d979757c207f59f5f5df
+AI_tarot_final1_wise_woman3.png,1704808737885,762e9b12d0d386a8fe0515df748a428ed956fee73bd31faa4c8f4910f619aadc
 AI_tarot_final1_wise_woman_animation.png,1703632333381,e2b93fd4d31d52b7415cd0136f4d63e1849646e2862d08179499d72f294c83e4
 AI_tarot_final1_wise_woman_animation2.png,1704749885889,5e431f37ba10863b1b2abc7dd6538a4b2049f69f626a477d75500182fb5e98f9
 AI_tarot_final1_wise_woman_animation2_big.png,1703632333384,2d86efee7864c06fb867c257d7da9c7ab745515db25ae524b6c16410fe40234d
@@ -282,22 +292,14 @@ tarot_deck_one/Two of Swords.jpg,1703632333606,e24e343ae9f7bc7e3e3f79fe29a6d3bc7
 tarot_deck_one/Two of Wands.jpg,1703632333608,8fc348698321f5c68aff09a56d33ddab24296d3d75f2b39f62e5e72eec1c1919
 tarot_deck_one/Wheel of Fortune.jpg,1703632333609,12b9bd953ea36fb6c7d108888f416330c78adadc3220cbf1a60212250a9d4239
 tarot_deck_one/z00.jpg,1703632333611,5734e942155f1d608372674459d7c34db5bdd6c164f395ebcd8de13cb91e5fb9
-asset-manifest.json,1704830341931,88c9efde66d39163dd8d998202ef6e967fd644dee195a38d85f114e0d0f44525
-static/css/main.1987bbf4.css,1704830341944,4f8e5277be4b675c3d08e6e5481fa1ef652626a5a1721e4bc622a322ab9718aa
-index.html,1704830341931,c1541761cbcaa60d7877e90f45852805578e0515eb7390c0c81472284a7feec6
-static/js/787.7a370507.chunk.js,1704830341945,a5ad7c8ca915cee3d676c117243014a97a7000f942f49b65eb23e9db2840c0d8
-static/js/787.7a370507.chunk.js.map,1704830341945,e5a84b156d17a81448d9679190c7ebd0f6c907bf576ec1bc1191b190a6ebab3b
-static/css/main.1987bbf4.css.map,1704830341944,7056b7d9233d0ca534c250638bb695759beca66486df34cd43aad9ea8a52ef88
-static/js/main.cc895a9f.js.LICENSE.txt,1704830341945,719399c1ef490fedd4063fa1b9dbfd640c4c0258e1718108586e19f9dd4fca70
-AI_tarot_final1_female_v2_animation.png,1704800569035,35c13353022c7f29fa8dbf04fde420aa32c63db404b9586c47e75920d53110df
-AI_tarot_final1_oldman_animation.png,1704796909383,6298cf55fd2db72dbc4964e312b18f3686a2d8bc095bbae982aa1f4abec9af0f
-static/js/main.cc895a9f.js,1704830341945,a3f339dcc52a22b97e8e91bf9de43b9e359d195626ca85cfb04cd144eeb56a58
-AI_tarot_final1_oldman.png,1704794681456,39dbbf149319aab36eef9bfe16a4190021c89451449e334cd1563b259dbb6d44
-AI_tarot_final1_wise_man.png,1704813388022,6b5549271d6d8d4d394b5c3c432d36864ba2b880f0de8aea256821798f5267d0
-AI_tarot_final1_wise_woman3.png,1704808737885,762e9b12d0d386a8fe0515df748a428ed956fee73bd31faa4c8f4910f619aadc
-AI_tarot_final1_wise_manv2_animation.png,1704829345362,40fcecb689a72475f7acb1a54272cb332c254a8c94ef66048057d5dc6bdc5c94
-AI_tarot_final1_female_v2.png,1704800202486,950a1b0a9f2616dcd18878293facd0dbd87b9dd462538e8e2128f9cc4ab1444a
-AI_tarot_final1_wise_manv2.png,1704829280115,a6da62d4cd121dc979586518bf400291ea77a857acc9243e978a0a83137c0c96
-AI_tarot_final1_wise_manv2_animation.xcf,1704829140416,2447887a68ecd4b947afe22e58646e14d15ee3defed4aa45ea5b09d80522a99d
-AI_tarot_final1_wise_woman2.xcf,1704813268952,eaadc87d8176a376650646b29374a5c8d2ff08fe319cfd2f3ed6005bee52b524
-static/js/main.cc895a9f.js.map,1704830341948,caf04a425d70ea1d115dcc6140a390b39445563445774255b691b64ea423d031
+asset-manifest.json,1704888814961,f0e619ff2bbc7fb84f0d635156c421cb2fee40b8acee43c5820fdc8af0006af6
+index.html,1704888814961,13746fa8065af37f101633ca0e9fa88e0666ff769065e6614282936fdfee096c
+static/js/787.7a370507.chunk.js,1704888814973,a5ad7c8ca915cee3d676c117243014a97a7000f942f49b65eb23e9db2840c0d8
+static/css/main.fbf4596b.css,1704888814973,f6b8fe26036502f6682da0e7f3c599e6ddb25f5b57cb49dfbc84a1f9afa72b1b
+static/js/787.7a370507.chunk.js.map,1704888814973,e5a84b156d17a81448d9679190c7ebd0f6c907bf576ec1bc1191b190a6ebab3b
+static/js/main.2b3ad308.js.LICENSE.txt,1704888814973,719399c1ef490fedd4063fa1b9dbfd640c4c0258e1718108586e19f9dd4fca70
+static/css/main.fbf4596b.css.map,1704888814973,0073378141f622b82cba101c341dc0a7f0eb6b708cf2a87a27d115cd446f8dfa
+AI_tarot_final1_young_womanv2_animation.png,1704881889899,360de9d90e45a3a791b0f1fe26341d835a4f42030dc1dff5666c115f991f8b80
+AI_tarot_final1_young_womanv2.png,1704881864858,54d7c5cc0edb77f46b6cea262fe04ccf5ab5f42ab1d1e8a503df534e8cef856c
+static/js/main.2b3ad308.js,1704888814973,aad698e22d97cc5fb2972f8acb1b8fe9c3b847e10933b88487327b7c07b0731f
+static/js/main.2b3ad308.js.map,1704888814975,0298e00e7dc53c16772f7588fa12fc615309d07a817d5ce27c9d00dc6ea3a0e3

build/asset-manifest.json

@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/static/css/main.fbf4596b.css",
-    "main.js": "/static/js/main.2b3ad308.js",
+    "main.js": "/static/js/main.ffd15ba7.js",
     "static/js/787.7a370507.chunk.js": "/static/js/787.7a370507.chunk.js",
     "index.html": "/index.html",
     "main.fbf4596b.css.map": "/static/css/main.fbf4596b.css.map",
-    "main.2b3ad308.js.map": "/static/js/main.2b3ad308.js.map",
+    "main.ffd15ba7.js.map": "/static/js/main.ffd15ba7.js.map",
     "787.7a370507.chunk.js.map": "/static/js/787.7a370507.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.fbf4596b.css",
-    "static/js/main.2b3ad308.js"
+    "static/js/main.ffd15ba7.js"
   ]
 }

build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/star92.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/star.png"/><link rel="manifest" href="/manifest.json"/><title>Divination by AI</title><script defer="defer" src="/static/js/main.2b3ad308.js"></script><link href="/static/css/main.fbf4596b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/star92.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/star.png"/><link rel="manifest" href="/manifest.json"/><title>Divination by AI</title><script defer="defer" src="/static/js/main.ffd15ba7.js"></script><link href="/static/css/main.fbf4596b.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

src/components/tarotcards.js

@@ -1,20 +1,9 @@
 //import React, { useState, useEffect } from 'react';
 
 function TarotCards({ reading }) {
-    //const [, setImagesLoaded] = useState({ past: false, present: false, future: false });
-
     const encodeFileName = (fileName) => {
         return fileName.split(' ').join('%20');
     };
-
-    //const handleImageLoad = (card) => {
-    //    setImagesLoaded(prevState => ({ ...prevState, [card]: true }));
-    //};
-
-    //useEffect(() => {
-    //    setImagesLoaded({ past: false, present: false, future: false });
-    //}, [reading]);
-
     return (
         <div className="tarot-cards">
             <div className="card-animation card-delay-1">

src/components/tarotreading.js

@@ -103,6 +103,29 @@ function Tarotgen({ profile, setLoading, loading, choice, setChoice, setShowPass
         //setChoice('');
         setResult("");
     };
+    const highlightCardNames = (text, reading) => {
+        let modifiedText = text;
+        const cardNames = [reading.current.past.name, reading.current.present.name, reading.current.future.name];
+
+        // Highlight the card names
+        cardNames.forEach(card => {
+            const regex = new RegExp(`\\b${card}\\b`, 'gi');
+            modifiedText = modifiedText.replace(regex, `<span style="color:#b98145;">${card}</span>`);
+        });
+        return modifiedText;
+    };
+
+
+
+
+
+
+
+
+
+
+
+
 
     const resetReading_alt = () => {
         setInputsDisabled(false);
@@ -431,7 +454,7 @@ function Tarotgen({ profile, setLoading, loading, choice, setChoice, setShowPass
                 <div className="generated-text">
                     <p style={{ textAlign: "right", color: "#6a567b" }}>{new Date().toLocaleString("en-US", { hour: '2-digit', minute: '2-digit', year: 'numeric', month: 'numeric', day: 'numeric', hour12: true })}</p>
                     <p style={{ textAlign: "center", fontSize: "18px" }}>Generated Reading</p>
-                    <p dangerouslySetInnerHTML={{ __html: generatedText.replace(/\n/g, '<br />') }} style={{ fontSize: "16px" }}></p>
+                    <p dangerouslySetInnerHTML={{ __html: highlightCardNames(generatedText, reading).replace(/\n/g, '<br />') }} style={{ fontSize: "16px" }}></p>
                     <p style={{ textAlign: "center", color: "grey", fontStyle: "italic" }}>Disclaimer: Our AI tarot readers can offer guidance, but the path you choose is your own. Embrace the mystery, trust your intuition, and follow your heart.</p>
                 </div>
             )}