added funding countdown

docs/wiki/Premium/premium.md

@@ -3,6 +3,9 @@ sidebar_position: 3
 sidebar_label: Premium Features
 ---
 
+import DateFormatter from '@site/src/components/DateFormatter/dateFormatter.js';
+import FundingCalculator from '@site/src/components/FundingCalculator/fundingCalculator.js';
+
 # Donations and Cosmetics
 
 ## About Our Donation System
@@ -21,6 +24,20 @@ Consider donating. You get some nice cosmetics and a big Thank You from the comm
 On the sidebar on the left you can explore a comprehensive documentation of all features and cosmetics you get when you buy a rank.
 :::
 
+---
+
+## Funds secured until...
+
+<!--- The first date is an initial date that I put in based on calculations that funding would end at August 28 but I don't have all of the previous transactions to put into the list. So I just added that "fake" transaction to go to Aug 28.-->
+<FundingCalculator
+  transactions={[
+    { date: '2024-06-31', amount: 10 }
+  ]}
+  monthlyCost={5.25}
+/>
+
+---
+
 ## FAQ
 
 ### Running Costs of Survival-Pi

src/components/DateFormatter/dateFormatter.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DateFormatter = ({ date, color }) => {
+  const formattedDate = new Intl.DateTimeFormat('en-US', { 
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric' }).format(new Date(date));
+  return <div style={{fontSize: '3em', textAlign: 'center', color: color}}>{formattedDate}</div>;
+};
+
+DateFormatter.propTypes = {
+  date: PropTypes.string.isRequired,
+  options: PropTypes.object,
+  color: PropTypes.string
+};
+
+export default DateFormatter;

src/components/FundingCalculator/fundingCalculator.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FundingCalculator = ({ transactions, monthlyCost }) => {
+    const calculateEndDate = (transactions, monthlyCost) => {
+        // Calculate total funds available as of the latest transaction date
+        let totalFunds = 0;
+        let latestDate = new Date(Math.max(...transactions.map(tx => new Date(tx.date))));
+    
+        transactions.forEach(transaction => {
+          const transactionDate = new Date(transaction.date);
+          if (transactionDate <= latestDate) {
+            totalFunds += transaction.amount;
+          }
+        });
+    
+        // Determine how many months the total funds will cover
+        const monthsCovered = totalFunds / monthlyCost;
+        const endDate = new Date(latestDate);
+        endDate.setMonth(endDate.getMonth() + Math.floor(monthsCovered));
+        const remainingDays = (monthsCovered - Math.floor(monthsCovered)) * 30;
+        endDate.setDate(endDate.getDate() + remainingDays);
+    
+        return endDate;
+      };
+
+    const securedUntilDate = calculateEndDate(transactions, monthlyCost);
+    const currentDate = new Date();
+
+    const dateStyle = {
+        color: securedUntilDate >= currentDate ? 'green' : 'red',
+        fontSize: '2.5em', 
+        textAlign: 'center'
+    };
+
+    return (
+        <div style={dateStyle}>{securedUntilDate.toDateString()}</div>
+    );
+};
+
+FundingCalculator.propTypes = {
+    transactions: PropTypes.arrayOf(
+        PropTypes.shape({
+        date: PropTypes.string.isRequired,
+        amount: PropTypes.number.isRequired,
+        })
+    ).isRequired,
+    monthlyCost: PropTypes.number.isRequired,
+};
+
+export default FundingCalculator;