1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
import React from "react";
import { Song } from "../types/song";
import { GuessType } from "../types/guess";
import { getDailySolution } from "../helpers/fetchSolution";
import { useGameState } from "../hooks/useGameState";
import { Header, InfoPopUp, Game, Footer } from "../components";
import * as Styled from "../app.styled";
export function DailyPage() {
const [todaysSolution, setTodaysSolution] = React.useState<Song | null>(null);
const firstRun = localStorage.getItem("firstRun") === null;
const initialGuess = {
song: undefined,
state: undefined,
} as GuessType;
// --- Stats import logic ---
function reloadWithoutQueryParameters() {
location.replace(location.pathname);
}
const urlHash = window.location.hash;
const urlQueryParametersStart = urlHash.indexOf("?");
const statsImportQueryParameter =
new URLSearchParams(urlHash.substring(urlQueryParametersStart)).get(
"statsImport"
) || "";
function importStats() {
if (statsImportQueryParameter) {
const importedStats = JSON.parse(statsImportQueryParameter);
if (Array.isArray(importedStats)) {
importedStats.forEach((day) => {
if (Array.isArray(day.guesses)) {
if (day.guesses.length == 5) {
day.guesses.push(initialGuess);
}
}
});
}
localStorage.setItem("stats", JSON.stringify(importedStats));
reloadWithoutQueryParameters();
}
}
if (statsImportQueryParameter) {
if (
confirm(
"Do you want to import your previous stats? This will overwrite any stats on this site."
)
) {
importStats();
} else {
reloadWithoutQueryParameters();
}
}
React.useEffect(() => {
getDailySolution().then((solution) => setTodaysSolution(solution));
}, []);
const {
guesses,
currentTry,
setSelectedSong,
didGuess,
skip,
guess,
} = useGameState({ solution: todaysSolution, persist: true });
const [isInfoPopUpOpen, setIsInfoPopUpOpen] =
React.useState<boolean>(firstRun);
const openInfoPopUp = React.useCallback(() => {
setIsInfoPopUpOpen(true);
}, []);
const closeInfoPopUp = React.useCallback(() => {
if (firstRun) {
localStorage.setItem("firstRun", "false");
}
setIsInfoPopUpOpen(false);
}, [localStorage.getItem("firstRun")]);
if (todaysSolution === null) {
return null;
}
return (
<main>
<Header openInfoPopUp={openInfoPopUp} />
{isInfoPopUpOpen && <InfoPopUp onClose={closeInfoPopUp} />}
<Styled.Container>
<Game
guesses={guesses}
didGuess={didGuess}
todaysSolution={todaysSolution}
currentTry={currentTry}
setSelectedSong={setSelectedSong}
skip={skip}
guess={guess}
/>
</Styled.Container>
<Footer />
</main>
);
}
|
