Added debug date.

Add date based check in JS
Change cookie expiry based on debug mode.

inc/class-advent-calendar-settings-page.php

@@ -97,6 +97,14 @@ class Advent_Calendar_Settings_Page {
 			'cac_settings_name_section'
 		);
 
+		add_settings_field(
+			'cac-debug_date',
+			__( 'debug date', 'codeup-advent-calendar' ),
+			[ $this, 'render_cac_debug_date_field' ],
+			'cac_settings_name',
+			'cac_settings_name_section'
+		);
+
 		add_settings_field(
 			'cac-create_days_checkbox',
 			__( 'Create default days?', 'codeup-advent-calendar' ),
@@ -193,6 +201,21 @@ class Advent_Calendar_Settings_Page {
 		echo '<p class="description">' . __( 'Checking this will allow you to click all days on the calendar', 'codeup-advent-calendar' ) . '</p>';
 	}
 
+
+	/**
+	 * Render the debug date field.
+	 */
+	function render_cac_debug_date_field() {
+		// Get current value.
+		$options       = get_option( 'cac_settings_name' );
+		$current_value = isset( $options['cac-debug_date'] ) ? $options['cac-debug_date'] : '';
+
+		echo '<input type="number" name="cac_settings_name[cac-debug_date]" class="cac-debug_date_checkbox_field" value="'. esc_attr( $current_value ).'" > ' .
+		     __( 'pretend this is today\'s date in debug mode', 'codeup-advent-calendar' ) . '<br>';
+		echo '<p class="description">' . __( 'This will determine which days you can click on on the calendar', 'codeup-advent-calendar' ) . '</p>';
+	}
+
+
 	/**
 	 * Validate input.
 	 * Check whether to action the create days checkboxes.

templates/archive-advent_day.php

@@ -28,6 +28,7 @@ wp_enqueue_style(
 $options          = get_option( 'cac_settings_name' );
 $page_title       = isset( $options['cac-calendar_title'] ) ? $options['cac-calendar_title'] : '';
 $cac_debug_mode   = isset( $options['cac-debug_mode'] ) ? $options['cac-debug_mode'] : '';
+$cac_debug_date   = isset( $options['cac-debug_date'] ) ? $options['cac-debug_date'] : '';
 $image_id         = isset( $options['cac-calendar_background_id'] ) ? intval( $options['cac-calendar_background_id'] ) : 0;
 $background_image = wp_get_attachment_image_src( $image_id, 'full' );
 
@@ -68,6 +69,7 @@ wp_enqueue_script(
 wp_localize_script( 'advent-calendar', 'advent_calendar_data',
 	[
 		'debug_mode' => $cac_debug_mode ?? '0',
+		'debug_date' => $cac_debug_date ?? '0',
 	]
 );
 

templates/assets/js/advent-calendar.js

 /* JavaScript for front end advent calendar */
-
 'use strict';
 
 jQuery( document ).ready( function ( $ ) {
 
+	// Set up some values;
+	let todays_date = new Date();
+	let this_day    = todays_date.getDate();
+	let cookie_life = 30;
+
+	// Check for debug mode and a pretend date
+	if ( advent_calendar_data.debug_mode ) {
+
+		console.log( 'In debug mode' );
+		cookie_life = 3 / ( 24 * 60 );  // 3 minutes
+
+		if ( advent_calendar_data.debug_date ) {
+			this_day = advent_calendar_data.debug_date;
+			this_day = parseInt( this_day );
+			console.log( 'Pretend day of month ', this_day );
+		}
+	}
+
 	/**
 	 * Open an advent door. Display the image/video and motto/joke.
 	 * Remember that is was opened in the cookie.
@@ -11,6 +28,17 @@ jQuery( document ).ready( function ( $ ) {
 	 * @param door
 	 */
 	let open_door = function ( door ) {
+		let day_name = $( door ).data( 'dayName' );
+		let day_num  = day_name.replace( 'day-', '' );
+
+		// don't open the door is it's too early.
+		if ( day_num > this_day ) {
+			if ( advent_calendar_data.debug_mode ) {
+				console.log( 'Cant open day ', day_num, ' Too early' );
+			}
+			return;
+		}
+
 		// find the image or video
 		let cell_image = $( door ).children( '.day-image.hidden' );
 		// if we found it, remove the hidden class to show it.
@@ -39,21 +67,23 @@ jQuery( document ).ready( function ( $ ) {
 				joke_answer.removeClass( 'hidden2' );
 			} );
 		}
+
+		// Mark it as open and save the cookie.
 		// if we don't yet have any opened initialise the array.
 		if ( !cookie_data.opened ) {
 			cookie_data.opened = {};
 		}
-
-		// mark it as open and save the cookie.
-		cookie_data.opened[ $( door ).data( 'dayName' ) ] = true;
+		cookie_data.opened[ day_name ] = true;
 		Cookies.set( cookie_name, cookie_data );
+
+		// all done...
 	};
 
 
 	// Set our cookie name and default options
 	const cookie_name = 'wp_advent_cookie';
 	Cookies.defaults  = {
-		expires: 3 / ( 24 * 60 ),  // 5 minutes  0.003472222222222
+		expires: cookie_life,
 		path: '/',
 		// domain: '',
 		secure: true,