jp-history/*: User adjustable EN schedule offset

src/components/DopeAssTable.svelte

@@ -99,7 +99,11 @@
 		<tr>
 		{#each columns as column}
 			<th class="heading" class:top={!!column.helpText} on:click={changeSort(column)}>
-				{column.displayName}
+				{#if column.html}
+					{@html column.displayName}
+				{:else}
+					{column.displayName}
+				{/if}
 				{#if sort.attr === column.attr}
 					{#if sort.ascending}
 					▲
@@ -174,10 +178,10 @@ div.table-wrap {
 /*	background:
 		linear-gradient(white 30%, rgba(255,255,255,0)),
 		linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
-		
+
 		linear-gradient(rgba(22,59,90,0.25) 0%, rgba(22,59,90,0)),
 		linear-gradient(rgba(22,59,90,0), rgba(22,59,90,0.25) 100%) 0 100%;
-	
+
 	background-repeat: no-repeat;
 	background-size: 100% 50px, 100% 50px, 100% 15px, 100% 15px;
 	background-attachment: local, local, scroll, scroll;
@@ -194,4 +198,4 @@ td.negative {
 	color: red;
 }
 
-</style>
+</style>

src/components/Settings.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { includeExSkillStats, hideImpossibleRarities, dataSource, theme } from "@src/settings.js";
+	import { includeExSkillStats, hideImpossibleRarities, enScheduleOffset, dataSource, theme } from "@src/settings.js";
 	import { getAssetVersions, SERVER_OPTIONS } from "@src/data";
 	import { onMount, onDestroy } from "svelte";
 	import { closeModal } from "@src/components/Modal.svelte";
@@ -146,6 +146,21 @@
 			</select>
 		</td></tr>
 	</table>
+
+	<h3>EN Schedule Offsets</h3>
+	<table>
+		<tr><td>Banner:</td><td><input bind:value={$enScheduleOffset.banner} type="number" size="2"> days</td></tr>
+		<tr><td>Quest:</td><td><input bind:value={$enScheduleOffset.quest} type="number" size="2"> days</td></tr>
+		<tr><td>Feature:</td><td><input bind:value={$enScheduleOffset.feature} type="number" size="2"> days</td></tr>
+		<tr><td>Dungeon:</td><td><input bind:value={$enScheduleOffset.dungeon} type="number" size="2"> days</td></tr>
+		<tr><td>Grotto:</td><td><input bind:value={$enScheduleOffset.grotto} type="number" size="2"> days</td></tr>
+		<tr><td>Shards:</td><td><input bind:value={$enScheduleOffset.shards} type="number" size="2"> days</td></tr>
+		<tr><td>Arena Shuffle:</td><td><input bind:value={$enScheduleOffset.arenaShuffle} type="number" size="2"> days</td></tr>
+		<tr><td>Furniture Level Cap:</td><td><input bind:value={$enScheduleOffset.furnitureLevelCap} type="number" size="2"> days</td></tr>
+		<tr><td>Six Stars:</td><td><input bind:value={$enScheduleOffset.sixStars} type="number" size="2"> days</td></tr>
+		<tr><td>Unique Equipment:</td><td><input bind:value={$enScheduleOffset.uniqueEquipment} type="number" size="2"> days</td></tr>
+	</table>
+
 	<div class="button" on:click={closeModal}>OK</div>
 </div>
 
@@ -163,4 +178,4 @@
 		margin-left: 150px;
 		margin-right: 150px;
 	}
-</style>
+</style>

src/routes/jp-history/characters.svelte

@@ -1,7 +1,8 @@
 <script>
 	import { jpContentHistory } from "@src/data";
 	import { getUnlockedUnits, getUnitImg } from "@src/logic";
-	import { escAttr } from "@src/utils";
+	import { enScheduleOffset } from "@src/settings.js";
+	import { escAttr, formatDate, determineOffsetWord } from "@src/utils";
 	import DopeAssTable from "@src/components/DopeAssTable.svelte";
 	import DataComponent from "@src/components/DataComponent.svelte";
 	import JPContentHeader from "@src/components/JPContentHeader.svelte";
@@ -13,8 +14,9 @@
 	let unlockedIds = [];
 
 	const jpLaunchDate = new Date(jpContentHistory.jpLaunchDate);
+	const enLaunchDate = new Date(jpContentHistory.enLaunchDate);
 
-	$: data = getData(hideUnlockedUnits);
+	$: data = getData(hideUnlockedUnits, $enScheduleOffset.banner);
 
 	let columns = [
 		{
@@ -32,16 +34,27 @@
 			sort: "default"
 		}, {
 			attr: "jpDate",
-			displayName: "JP Release Date",
+			displayName: "JP Release Date‎",
 			sort: "default"
 		}, {
+			html: true,
 			attr: "jpDaysAfterLaunch",
-			displayName: "Days After JP Launch",
+			displayName: "Days since<br/>JP Launch",
 			sort: "numeric"
+		}, {
+			html: true,
+			attr: "enDaysToRelease",
+			displayName: "Days to<br/>EN Release",
+			sort: "numeric"
+		}, {
+			html: true,
+			attr: "enReleaseDate",
+			displayName: "Expected EN<br/>Release Date",
+			sort: "default"
 		}
 	];
 
-	function getData(hideUnlockedUnits) {
+	function getData(hideUnlockedUnits, offset = $enScheduleOffset.banner) {
 		let unitsAdded = jpContentHistory.units;
 		if (hideUnlockedUnits) {
 			unitsAdded = jpContentHistory.units.filter(function(unitAdded) {
@@ -53,13 +66,20 @@
 			if (unitAdded.unitId > -1) {
 				iconHtml = "<img class=\"table-icon\" src=\"" + escAttr(getUnitImg(unitAdded.unitId, { rarity: 3, server: "jp" })) + "\" />";
 			}
-
+
+			const jpDaysAfterLaunch = Math.round((new Date(unitAdded.jpDate) - jpLaunchDate) / 1000 / 60 / 60 / 24);
+			const enDaysAfterLaunch = Math.round((Date.now() - enLaunchDate) / 1000 / 60 / 60 / 24);
+			const enDaysToRelease = jpDaysAfterLaunch - enDaysAfterLaunch + offset;
+			const enReleaseDate = new Date((Date.now() + (enDaysToRelease * 1000 * 60 * 60 * 24)));
+
 			return {
 				icon: iconHtml,
 				name: unitAdded.name,
 				pool: capitalize(unitAdded.pool),
-				jpDate: unitAdded.jpDate,
-				jpDaysAfterLaunch: Math.round((new Date(unitAdded.jpDate) - jpLaunchDate) / 1000 / 60 / 60 / 24)
+				jpDate: formatDate(new Date(unitAdded.jpDate)),
+				jpDaysAfterLaunch,
+				enDaysToRelease,
+				enReleaseDate: formatDate(enReleaseDate),
 			}
 		});
 	}
@@ -78,7 +98,8 @@
 
 <h2>JP Characters Added Timeline</h2>
 <DataComponent requiredTables={requiredTables} onDataReady={onDataReady} >
-	<JPContentHeader />
+	<JPContentHeader/>
+	<p>This page assumes EN schedule is <strong>{determineOffsetWord($enScheduleOffset.banner)}</strong> by <strong>{Math.abs($enScheduleOffset.banner)}</strong> days.</p>
 
 	<p><input type="checkbox" bind:checked={hideUnlockedUnits} /> Hide characters that are in current data source</p>