From a9c9a5655530f35c7c1141fae4b768f6f2df1afc Mon Sep 17 00:00:00 2001
From: zoreet <zoreetdotcom@gmail.com>
Date: Wed, 1 May 2024 00:43:10 +0200
Subject: [PATCH] 1.3.0 - feat: streaks

---
 CHANGELOG.md        |  4 ++++
 manifest.json       |  4 ++--
 src/HabitTracker.ts | 20 ++++++++++++++++++++
 src/styles.css      | 12 +++++++++++-
 versions.json       |  5 +++--
 5 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3920243..5d99ef1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.3.0
+
+feat: Streaks - track and display the number of consecutive days a habit has been completed
+
 ## 1.2.1
 
 fix: daysToShow is converted to a number if the user passes it as a string
diff --git a/manifest.json b/manifest.json
index 0fea0fc..7dfc4fd 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,10 +1,10 @@
 {
 	"id": "habit-tracker-21",
 	"name": "Habit Tracker 21",
-	"version": "1.2.1",
+	"version": "1.3.0",
 	"minAppVersion": "1.1.0",
 	"description": "Your 21-day journey to habit formation, simplified",
 	"author": "Zoreet",
 	"authorUrl": "https://github.com/zoreet",
 	"isDesktopOnly": false
-}
+}
\ No newline at end of file
diff --git a/src/HabitTracker.ts b/src/HabitTracker.ts
index 4f67d2e..12899de 100644
--- a/src/HabitTracker.ts
+++ b/src/HabitTracker.ts
@@ -266,10 +266,30 @@ export default class HabitTracker {
 
 			habitCell.setAttribute('date', dateString)
 			habitCell.setAttribute('habit', path)
+
+			habitCell.setAttribute('streak', this.findStreak(entries, currentDate))
+
 			currentDate.setDate(currentDate.getDate() + 1)
 		}
 	}
 
+	// get streak
+	// based on an array of dates, get the current streak for the given date
+	findStreak(entries, date) {
+		let currentDate = new Date(date);
+		let streak = 0
+
+		// console.log('entries', entries)
+		// console.log('date', date)
+
+		while (entries.includes(this.getDateId(currentDate))) {
+			streak++
+			currentDate.setDate(currentDate.getDate() - 1)
+		}
+
+		return streak.toString();
+	}
+
 	async toggleHabit(el) {
 		const habit = el.getAttribute('habit')
 		const date = el.getAttribute('date')
diff --git a/src/styles.css b/src/styles.css
index 0e2c917..4e4572b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -71,7 +71,7 @@
 }
 
 .habit-tick--true:before {
-	background: var(--checkbox-color);
+  background: var(--checkbox-color);
 	border-radius: 10px;
 	content: '';
 	display: inline-block;
@@ -80,6 +80,7 @@
 	transition: all 0.3s ease;
 }
 
+
 .habit-tick--true + .habit-tick--true {
 	text-align: left;
 }
@@ -111,3 +112,12 @@
 		display: table-cell;
 	}
 }
+
+/* streaks */
+/* for every 2+ day streaks, show a counter on the most recent date */
+.habit-tick--true + .habit-tick--true:has(+ .habit-tick--false):before,
+.habit-tick--true + .habit-tick--true:last-child:before {
+	text-align: center;
+  content: attr(streak);
+  line-height: 15px;
+}
\ No newline at end of file
diff --git a/versions.json b/versions.json
index c26912b..26fdbaa 100644
--- a/versions.json
+++ b/versions.json
@@ -10,5 +10,6 @@
 	"1.1.4": "1.1.0",
 	"1.1.5": "1.1.0",
 	"1.2.0": "1.1.0",
-	"1.2.1": "1.1.0"
-}
+	"1.2.1": "1.1.0",
+	"1.3.0": "1.1.0"
+}
\ No newline at end of file