From e46c65d02dabc4aa658b76cdd29dbb5cc3eb6b9a Mon Sep 17 00:00:00 2001
From: brickeddroid <48839682+brickeddroid@users.noreply.github.com>
Date: Sun, 18 Jul 2021 10:44:20 +0200
Subject: [PATCH 1/3] [UNTESTED] Break code into functions

Divide main code into smaller tasks
---
 learningmap.html | 92 +++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 88 insertions(+), 4 deletions(-)

diff --git a/learningmap.html b/learningmap.html
index c4907b8..d2d2a76 100644
--- a/learningmap.html
+++ b/learningmap.html
@@ -60,7 +60,8 @@
             let mapPointsValue = Math.round(checklistState);
             $("#mapPoints").html(mapPointsValue);
             
-            /* Emblem */
+            $("#mapEmblem").addClass(getEmblem(mapPointsValue));
+            /*
             switch (true) {
                 case mapPointsValue >= 0 && mapPointsValue < 33:
                     $("#mapEmblem").addClass("fa-compass");
@@ -75,8 +76,9 @@
                     $("#mapEmblem").addClass("fa-diamond");
                     break;
             }      
-            
-            /* Stars */
+            */
+            $("#mapStars").html(getMapStarValue(mapPointsValue));
+            /*
             switch (true) {
                 case mapPointsValue == 0:
                     $("#mapStars").html("0");
@@ -97,8 +99,11 @@
                     $("#mapStars").html("5");
                     break;
             }
+            */
             
             /* Days */
+            let dow = getDow();
+            /*
             var mapDateValue = new Date();
             var mapTodayValue = mapDateValue.getDay();
             if (mapTodayValue == 0) {
@@ -114,8 +119,11 @@
             } else {
                 $("#mapLeftdays").html(mapLeftdaysValue + " Tage");
             }
-
+            */
+            
             /* Chart */
+            $("#mapChart").html(getMotivationCall(mapPointsValue, dow);
+            /*
             mapChartValue = mapPointsValue / mapTodayValue;
             switch (true) {
                 case mapChartValue >= 20 && mapChartValue < 100:
@@ -131,6 +139,7 @@
                     $("#mapChart").html("Starke Leistung!");
                     break;
             }
+            */
             
             /* Loading animation */
             $(".mapLoadingfield").css("filter", "opacity(1)");
@@ -140,6 +149,81 @@
             }, 2200);
         }
     };
+    
+    /* Emblem */
+    function getEmblem(mapPts){
+        /* Better would be, check if mapPts is less than 0 or greater than 100, then raise an "error":
+           if(mapPts < 0 || mapPts > 100) {
+                console.log("[ERR] Value out of range");
+                return "fa-question"
+           } else if ....
+        */ 
+        if(mapPts >= 0 && mapPts < 33) {
+            return "fa-compass";
+        } else if(mapPts < 66){
+            return "fa-flask";   
+        } else if(mapPts < 100) {
+            return "fa-magic";  
+        } else if(mapPts == 100){
+            return "fa-diamond";   
+        }
+    }
+    
+    /* Stars */
+    function getMapStarValue(mapPts){
+        if(mapPts == 0){
+            return "0";
+        } else if(mapPts < 25) {
+            return "1";
+        } else if(mapPts < 50) {
+            return "2";   
+        } else if(mapPts < 75) {
+            return "3";   
+        } else if(mapPts < 100) {
+            return "4";
+        } else if(mapPts == 100) {
+            return "5";   
+        } else {
+            console.log("[ERR] Value out of range");
+            return "0";
+        }
+    }
+    
+    /* Days */
+    function getDOW(){
+        var mapDateValue = new Date();
+        var mapTodayValue = mapDateValue.getDay();
+        if (mapTodayValue == 0) {
+            mapTodayValue = 7;
+        }
+        $("#mapToday").html(mapTodayValue);
+        if (mapTodayValue > 5) {
+            mapTodayValue = 5;
+        }
+        var mapLeftdaysValue = 5 - mapTodayValue;
+        if (mapLeftdaysValue == 1) {
+            $("#mapLeftdays").html(mapLeftdaysValue + " Tag");
+        } else {
+            $("#mapLeftdays").html(mapLeftdaysValue + " Tage");
+        }
+        return mapTodayValue;
+    }
+    
+    /* Chart */
+    function getMotivationCall(mapPts, today){
+        let mapChartValue = mapPts / today;
+        if(mapChartValue >= 20 && mapChartValue < 100){
+            return "Weiter so!";
+        } else if(mapChartValue < 20 && today < 5){
+            return "Halte dich ran!";
+        } else if(mapPts < 100 && today == 5){
+            return "Letzte Chance!";
+        } else if(mapPts >= 100){
+            return "Starke Leistung!";
+        }
+        /* In case if not any of the above checks is true */
+        return $("#mapChart").html();
+    }
 </script>
 
 <!-- H T M L - P A R T -->

From f458d973ede78d18cc4bcb143cb558883464699c Mon Sep 17 00:00:00 2001
From: brickeddroid <48839682+brickeddroid@users.noreply.github.com>
Date: Sun, 18 Jul 2021 11:50:11 +0200
Subject: [PATCH 2/3] [UNTESTED] Divide main function into smaller pieces pt.2

Extract determination of checklistState into its own function => getChecklistState()
Extract map cover adaptation into its own function => coverMap(chklistState)
Rename getDow() function to getDayOfWeek() and extract the task of setting the left days into its own function => setLeftDays(today)
---
 learningmap.html | 80 ++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 71 insertions(+), 9 deletions(-)

diff --git a/learningmap.html b/learningmap.html
index d2d2a76..339e96c 100644
--- a/learningmap.html
+++ b/learningmap.html
@@ -18,12 +18,15 @@
 
         function learningmap() {
             /* Get information from the checklist */
+            let checklistState = getChecklistState();
+            /*
             checklistFinish = parseFloat(
                 $(".checklist_progress_outer")
                 .css("width")
                 .replace("%", "")
                 .replace(",", ".")
             );
+            
             checklistProgress = Math.ceil(
                 parseFloat(
                     $(".checklist_progress_inner")
@@ -32,8 +35,10 @@
                     .replace(",", ".")
                 )
             );
+            */
             
             /* Use checklistRoundup to exclude a result of eg 99%; Change border-radius if progress > o */
+            /*
             var checklistRoundup = 0; 
             if (checklistProgress > 0) {
                 checklistRoundup = 0.5;
@@ -41,20 +46,25 @@
                     "border-radius": "0px 15px 15px 0px"
                 });
             }
+            */
             
             /* Calculate the state */
+            /*
             checklistState = Math.ceil(checklistRoundup + checklistProgress / (checklistFinish / 100));
             if (checklistState > 100) {
                 checklistState = 100;
             }
+            */
             
-            /* Cover the map depending on the state */
+            coverMap(checklistState);
+            /*
             $("#mapCover").css({
                 "margin-left": checklistState + "%"
             });
             $("#mapCover").css({
                 width: 100 - checklistState + "%"
-            }); 
+            });
+            */
             
             /* Points */
             let mapPointsValue = Math.round(checklistState);
@@ -102,7 +112,8 @@
             */
             
             /* Days */
-            let dow = getDow();
+            let dow = getDayOfWeek();
+            setLeftDays(dow);
             /*
             var mapDateValue = new Date();
             var mapTodayValue = mapDateValue.getDay();
@@ -150,6 +161,52 @@
         }
     };
     
+    /* Cover map */
+    function coverMap(chklistState){
+        /* Cover the map depending on the state */
+        $("#mapCover").css({
+            "margin-left": chklistState + "%"
+        });
+        $("#mapCover").css({
+            width: 100 - chklistState + "%"
+        }); 
+    }
+    
+	/* Checklist state */
+	function getChecklistState(){
+		/* Get information from the checklist */
+		let checklistFinish = parseFloat(
+			$(".checklist_progress_outer")
+			.css("width")
+			.replace("%", "")
+			.replace(",", ".")
+		);
+		let checklistProgress = Math.ceil(
+			parseFloat(
+				$(".checklist_progress_inner")
+				.css("width")
+				.replace("%", "")
+				.replace(",", ".")
+			)
+		);
+			
+		/* Use checklistRoundup to exclude a result of eg 99%; Change border-radius if progress > o */
+		var checklistRoundup = 0; 
+		if (checklistProgress > 0) {
+			checklistRoundup = 0.5;
+			$("#mapCover").css({
+				"border-radius": "0px 15px 15px 0px"
+			});
+		}
+			
+		/* Calculate the state */
+		let checklistState = Math.ceil(checklistRoundup + checklistProgress / (checklistFinish / 100));
+		if (checklistState > 100) {
+			checklistState = 100;
+		}
+		return checklistState;
+	}
+    
     /* Emblem */
     function getEmblem(mapPts){
         /* Better would be, check if mapPts is less than 0 or greater than 100, then raise an "error":
@@ -190,23 +247,28 @@
     }
     
     /* Days */
-    function getDOW(){
+    function getDayOfWeek(){
         var mapDateValue = new Date();
         var mapTodayValue = mapDateValue.getDay();
         if (mapTodayValue == 0) {
             mapTodayValue = 7;
         }
-        $("#mapToday").html(mapTodayValue);
-        if (mapTodayValue > 5) {
-            mapTodayValue = 5;
+        return mapTodayValue;
+    }
+    
+    function setLeftDays(today){
+        const DAYS_OF_WEEK = 5;
+        
+        $("#mapToday").html(today);
+        if (today > DAYS_OF_WEEK) {
+            today = DAYS_OF_WEEK;
         }
-        var mapLeftdaysValue = 5 - mapTodayValue;
+        var mapLeftdaysValue = DAYS_OF_WEEK - today;
         if (mapLeftdaysValue == 1) {
             $("#mapLeftdays").html(mapLeftdaysValue + " Tag");
         } else {
             $("#mapLeftdays").html(mapLeftdaysValue + " Tage");
         }
-        return mapTodayValue;
     }
     
     /* Chart */

From 557a7d894eaf72ce0e20151a1345e0f490a0fc89 Mon Sep 17 00:00:00 2001
From: brickeddroid <48839682+brickeddroid@users.noreply.github.com>
Date: Sun, 18 Jul 2021 19:04:11 +0200
Subject: [PATCH 3/3] [UNTESTED] Several things done

Extract load animation in its own function
Clean up code
---
 learningmap.html | 207 ++++++++++++-----------------------------------
 1 file changed, 51 insertions(+), 156 deletions(-)

diff --git a/learningmap.html b/learningmap.html
index 339e96c..5beafbf 100644
--- a/learningmap.html
+++ b/learningmap.html
@@ -5,9 +5,10 @@
 <!-- J A V A S C R I P T - P A R T -->
 <script>
     window.onload = function() {
+		/* Wouldn't there a setTimeout call be better? */
         jquery_load_check_interval = setInterval(function() {
             if (window.jQuery) {
-                learningmap();
+                loadLearningmap();
                 console.log("jquery successfully loaded...");
                 console.log($.fn.jquery);
                 clearInterval(jquery_load_check_interval);
@@ -16,148 +17,24 @@
             }
         }, 150);
 
-        function learningmap() {
-            /* Get information from the checklist */
+        function loadLearningmap() {
+			
             let checklistState = getChecklistState();
-            /*
-            checklistFinish = parseFloat(
-                $(".checklist_progress_outer")
-                .css("width")
-                .replace("%", "")
-                .replace(",", ".")
-            );
-            
-            checklistProgress = Math.ceil(
-                parseFloat(
-                    $(".checklist_progress_inner")
-                    .css("width")
-                    .replace("%", "")
-                    .replace(",", ".")
-                )
-            );
-            */
-            
-            /* Use checklistRoundup to exclude a result of eg 99%; Change border-radius if progress > o */
-            /*
-            var checklistRoundup = 0; 
-            if (checklistProgress > 0) {
-                checklistRoundup = 0.5;
-                $("#mapCover").css({
-                    "border-radius": "0px 15px 15px 0px"
-                });
-            }
-            */
-            
-            /* Calculate the state */
-            /*
-            checklistState = Math.ceil(checklistRoundup + checklistProgress / (checklistFinish / 100));
-            if (checklistState > 100) {
-                checklistState = 100;
-            }
-            */
             
             coverMap(checklistState);
-            /*
-            $("#mapCover").css({
-                "margin-left": checklistState + "%"
-            });
-            $("#mapCover").css({
-                width: 100 - checklistState + "%"
-            });
-            */
             
-            /* Points */
             let mapPointsValue = Math.round(checklistState);
-            $("#mapPoints").html(mapPointsValue);
             
-            $("#mapEmblem").addClass(getEmblem(mapPointsValue));
-            /*
-            switch (true) {
-                case mapPointsValue >= 0 && mapPointsValue < 33:
-                    $("#mapEmblem").addClass("fa-compass");
-                    break;
-                case mapPointsValue >= 33 && mapPointsValue < 66:
-                    $("#mapEmblem").addClass("fa-flask");
-                    break;
-                case mapPointsValue >= 66 && mapPointsValue < 100:
-                    $("#mapEmblem").addClass("fa-magic");
-                    break;
-                case mapPointsValue == 100:
-                    $("#mapEmblem").addClass("fa-diamond");
-                    break;
-            }      
-            */
-            $("#mapStars").html(getMapStarValue(mapPointsValue));
-            /*
-            switch (true) {
-                case mapPointsValue == 0:
-                    $("#mapStars").html("0");
-                    break;
-                case mapPointsValue > 0 && mapPointsValue < 25:
-                    $("#mapStars").html("1");
-                    break;
-                case mapPointsValue >= 25 && mapPointsValue < 50:
-                    $("#mapStars").html("2");
-                    break;
-                case mapPointsValue >= 50 && mapPointsValue < 75:
-                    $("#mapStars").html("3");
-                    break;
-                case mapPointsValue >= 75 && mapPointsValue < 100:
-                    $("#mapStars").html("4");
-                    break;
-                case mapPointsValue == 100:
-                    $("#mapStars").html("5");
-                    break;
-            }
-            */
+			$("#mapPoints").html(mapPointsValue);
+            
+			setEmblem(mapPointsValue);
+			setMapStarValue(mapPointsValue);
             
-            /* Days */
             let dow = getDayOfWeek();
             setLeftDays(dow);
-            /*
-            var mapDateValue = new Date();
-            var mapTodayValue = mapDateValue.getDay();
-            if (mapTodayValue == 0) {
-                mapTodayValue = 7;
-            }
-            $("#mapToday").html(mapTodayValue);
-            if (mapTodayValue > 5) {
-                mapTodayValue = 5;
-            }
-            var mapLeftdaysValue = 5 - mapTodayValue;
-            if (mapLeftdaysValue == 1) {
-                $("#mapLeftdays").html(mapLeftdaysValue + " Tag");
-            } else {
-                $("#mapLeftdays").html(mapLeftdaysValue + " Tage");
-            }
-            */
-            
-            /* Chart */
-            $("#mapChart").html(getMotivationCall(mapPointsValue, dow);
-            /*
-            mapChartValue = mapPointsValue / mapTodayValue;
-            switch (true) {
-                case mapChartValue >= 20 && mapChartValue < 100:
-                    $("#mapChart").html("Weiter so!");
-                    break;
-                case mapChartValue < 20 && mapTodayValue < 5:
-                    $("#mapChart").html("Halte dich ran!");
-                    break;
-                case mapPointsValue < 100 && mapTodayValue == 5:
-                    $("#mapChart").html("Letzte Chance!");
-                    break;
-                case mapPointsValue >= 100:
-                    $("#mapChart").html("Starke Leistung!");
-                    break;
-            }
-            */
+			setMotivationCall(mapPointsValue, dow);
             
-            /* Loading animation */
-            $(".mapLoadingfield").css("filter", "opacity(1)");
-            mapLoading = setInterval(function() {
-                clearInterval(mapLoading);
-                $("#mapContent").css("cursor", "auto");
-            }, 2200);
+			loadAnimation();
         }
     };
     
@@ -206,48 +83,55 @@
 		}
 		return checklistState;
 	}
-    
+	
     /* Emblem */
-    function getEmblem(mapPts){
+    function setEmblem(mapPts){
         /* Better would be, check if mapPts is less than 0 or greater than 100, then raise an "error":
            if(mapPts < 0 || mapPts > 100) {
                 console.log("[ERR] Value out of range");
                 return "fa-question"
            } else if ....
+		   
+		   => Error handling first
         */ 
+		let emblem = "";
         if(mapPts >= 0 && mapPts < 33) {
-            return "fa-compass";
+            emblem = "fa-compass";
         } else if(mapPts < 66){
-            return "fa-flask";   
+            emblem = "fa-flask";   
         } else if(mapPts < 100) {
-            return "fa-magic";  
+            emblem = "fa-magic";  
         } else if(mapPts == 100){
-            return "fa-diamond";   
+            emblem = "fa-diamond";   
         }
+		
+        $("#mapEmblem").addClass(emblem);
     }
     
     /* Stars */
-    function getMapStarValue(mapPts){
-        if(mapPts == 0){
-            return "0";
+    function setMapStarValue(mapPts){
+        let mapStar = "0";
+		
+		if(mapPts == 0){
+			
         } else if(mapPts < 25) {
-            return "1";
+            mapStar = "1";
         } else if(mapPts < 50) {
-            return "2";   
+            mapStar = "2";   
         } else if(mapPts < 75) {
-            return "3";   
+            mapStar = "3";   
         } else if(mapPts < 100) {
-            return "4";
+            mapStar = "4";
         } else if(mapPts == 100) {
-            return "5";   
+            mapStar = "5";   
         } else {
             console.log("[ERR] Value out of range");
-            return "0";
         }
+        $("#mapStars").html(mapStarValue);
     }
     
     /* Days */
-    function getDayOfWeek(){
+    function setDayOfWeek(){
         var mapDateValue = new Date();
         var mapTodayValue = mapDateValue.getDay();
         if (mapTodayValue == 0) {
@@ -272,20 +156,31 @@
     }
     
     /* Chart */
-    function getMotivationCall(mapPts, today){
+    function setMotivationCall(mapPts, today){
         let mapChartValue = mapPts / today;
+		let mapChart = $("#mapChart").html();
         if(mapChartValue >= 20 && mapChartValue < 100){
-            return "Weiter so!";
+            mapChart = "Weiter so!";
         } else if(mapChartValue < 20 && today < 5){
-            return "Halte dich ran!";
+            mapChart = "Halte dich ran!";
         } else if(mapPts < 100 && today == 5){
-            return "Letzte Chance!";
+            mapChart = "Letzte Chance!";
         } else if(mapPts >= 100){
-            return "Starke Leistung!";
+            mapChart = "Starke Leistung!";
         }
-        /* In case if not any of the above checks is true */
-        return $("#mapChart").html();
+		$("#mapChart").html(mapChart);
     }
+	
+	function loadAnimation(){
+        /* Loading animation */
+        $(".mapLoadingfield").css("filter", "opacity(1)");
+		
+		/* Wouldn't there a setTimeout call be better? */
+        mapLoading = setInterval(function() {
+            clearInterval(mapLoading);
+           	$("#mapContent").css("cursor", "auto");
+    	}, 2200);
+	}
 </script>
 
 <!-- H T M L - P A R T -->