1 files changed, 12 insertions, 13 deletions

diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
index 686652a..ba91f57 100644
--- a/frontend/src/components/Summary.tsx
+++ b/frontend/src/components/Summary.tsx
@@ -175,24 +175,23 @@ const Summary: React.FC<SummaryProps> = ({
       <section id="section4" className="summary1">
         <div id="difficulty">
           <span className="">Difficulty</span>
-          {data.summary.routes[selectedRun].rating === 0 && <span className="text-foreground">N/A</span>}
-          {data.summary.routes[selectedRun].rating === 1 && (
-            <span style={{ color: "lime" }}>Very easy</span>
+          {data.map.difficulty <= 2 && (
+            <span style={{ color: "lime" }}>Very Easy</span>
           )}
-          {data.summary.routes[selectedRun].rating === 2 && (
+          {data.map.difficulty > 2 && data.map.difficulty <= 4 && (
             <span style={{ color: "green" }}>Easy</span>
           )}
-          {data.summary.routes[selectedRun].rating === 3 && (
+          {data.map.difficulty > 4 && data.map.difficulty <= 6 && (
             <span style={{ color: "yellow" }}>Medium</span>
           )}
-          {data.summary.routes[selectedRun].rating === 4 && (
+          {data.map.difficulty > 6 && data.map.difficulty <= 8 && (
             <span style={{ color: "orange" }}>Hard</span>
           )}
-          {data.summary.routes[selectedRun].rating === 5 && (
-            <span style={{ color: "red" }}>Very hard</span>
+          {data.map.difficulty > 8 && data.map.difficulty <= 10 && (
+            <span style={{ color: "red" }}>Very Hard</span>
           )}
           <div>
-            {data.summary.routes[selectedRun].rating === 1 ? (
+            {data.map.difficulty <= 2 && ? (
               <div
                 className="difficulty-rating"
                 style={{ backgroundColor: "lime" }}
@@ -200,7 +199,7 @@ const Summary: React.FC<SummaryProps> = ({
             ) : (
               <div className="difficulty-rating"></div>
             )}
-            {data.summary.routes[selectedRun].rating === 2 ? (
+            {data.map.difficulty > 2 && data.map.difficulty <= 4 && ? (
               <div
                 className="difficulty-rating"
                 style={{ backgroundColor: "green" }}
@@ -208,7 +207,7 @@ const Summary: React.FC<SummaryProps> = ({
             ) : (
               <div className="difficulty-rating"></div>
             )}
-            {data.summary.routes[selectedRun].rating === 3 ? (
+            {data.map.difficulty > 4 && data.map.difficulty <= 6 && ? (
               <div
                 className="difficulty-rating"
                 style={{ backgroundColor: "yellow" }}
@@ -216,7 +215,7 @@ const Summary: React.FC<SummaryProps> = ({
             ) : (
               <div className="difficulty-rating"></div>
             )}
-            {data.summary.routes[selectedRun].rating === 4 ? (
+            {data.map.difficulty > 6 && data.map.difficulty <= 8 && ? (
               <div
                 className="difficulty-rating"
                 style={{ backgroundColor: "orange" }}
@@ -224,7 +223,7 @@ const Summary: React.FC<SummaryProps> = ({
             ) : (
               <div className="difficulty-rating"></div>
             )}
-            {data.summary.routes[selectedRun].rating === 5 ? (
+            {data.map.difficulty > 8 && data.map.difficulty <= 10 && ? (
               <div
                 className="difficulty-rating"
                 style={{ backgroundColor: "red" }}