histogram width divide by mode, not total #2
5 changed files with 50 additions and 37 deletions
29
src/App.tsx
29
src/App.tsx
|
@ -15,7 +15,7 @@ import {
|
||||||
saveGameStateToLocalStorage,
|
saveGameStateToLocalStorage,
|
||||||
} from './lib/localStorage'
|
} from './lib/localStorage'
|
||||||
|
|
||||||
const ALERT_TIME_MS = 2000;
|
const ALERT_TIME_MS = 2000
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [currentGuess, setCurrentGuess] = useState('')
|
const [currentGuess, setCurrentGuess] = useState('')
|
||||||
|
@ -50,16 +50,18 @@ function App() {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isGameWon) {
|
if (isGameWon) {
|
||||||
setSuccessAlert(WIN_MESSAGES[Math.floor(Math.random()*WIN_MESSAGES.length)]);
|
setSuccessAlert(
|
||||||
|
WIN_MESSAGES[Math.floor(Math.random() * WIN_MESSAGES.length)]
|
||||||
|
)
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setSuccessAlert('');
|
setSuccessAlert('')
|
||||||
setIsStatsModalOpen(true);
|
setIsStatsModalOpen(true)
|
||||||
}, ALERT_TIME_MS);
|
}, ALERT_TIME_MS)
|
||||||
}
|
}
|
||||||
if (isGameLost) {
|
if (isGameLost) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setIsStatsModalOpen(true);
|
setIsStatsModalOpen(true)
|
||||||
}, ALERT_TIME_MS);
|
}, ALERT_TIME_MS)
|
||||||
}
|
}
|
||||||
}, [isGameWon, isGameLost])
|
}, [isGameWon, isGameLost])
|
||||||
|
|
||||||
|
@ -74,7 +76,9 @@ function App() {
|
||||||
}
|
}
|
||||||
|
|
||||||
const onEnter = () => {
|
const onEnter = () => {
|
||||||
if (isGameWon || isGameLost) { return; }
|
if (isGameWon || isGameLost) {
|
||||||
|
return
|
||||||
|
}
|
||||||
if (!(currentGuess.length === 5)) {
|
if (!(currentGuess.length === 5)) {
|
||||||
setIsNotEnoughLetters(true)
|
setIsNotEnoughLetters(true)
|
||||||
return setTimeout(() => {
|
return setTimeout(() => {
|
||||||
|
@ -139,8 +143,8 @@ function App() {
|
||||||
isGameLost={isGameLost}
|
isGameLost={isGameLost}
|
||||||
isGameWon={isGameWon}
|
isGameWon={isGameWon}
|
||||||
handleShare={() => {
|
handleShare={() => {
|
||||||
setSuccessAlert("Game copied to clipboard");
|
setSuccessAlert('Game copied to clipboard')
|
||||||
return setTimeout(() => setSuccessAlert(''), ALERT_TIME_MS);
|
return setTimeout(() => setSuccessAlert(''), ALERT_TIME_MS)
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<AboutModal
|
<AboutModal
|
||||||
|
@ -158,10 +162,7 @@ function App() {
|
||||||
|
|
||||||
<Alert message="Not enough letters" isOpen={isNotEnoughLetters} />
|
<Alert message="Not enough letters" isOpen={isNotEnoughLetters} />
|
||||||
<Alert message="Word not found" isOpen={isWordNotFoundAlertOpen} />
|
<Alert message="Word not found" isOpen={isWordNotFoundAlertOpen} />
|
||||||
<Alert
|
<Alert message={`The word was ${solution}`} isOpen={isGameLost} />
|
||||||
message={`The word was ${solution}`}
|
|
||||||
isOpen={isGameLost}
|
|
||||||
/>
|
|
||||||
<Alert
|
<Alert
|
||||||
message={successAlert}
|
message={successAlert}
|
||||||
isOpen={successAlert !== ''}
|
isOpen={successAlert !== ''}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import Countdown from "react-countdown"
|
import Countdown from 'react-countdown'
|
||||||
import { StatBar } from '../stats/StatBar'
|
import { StatBar } from '../stats/StatBar'
|
||||||
import { Histogram } from '../stats/Histogram'
|
import { Histogram } from '../stats/Histogram'
|
||||||
import { GameStats } from '../../lib/localStorage'
|
import { GameStats } from '../../lib/localStorage'
|
||||||
|
@ -16,7 +16,15 @@ type Props = {
|
||||||
handleShare: () => void
|
handleShare: () => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export const StatsModal = ({ isOpen, handleClose, guesses, gameStats, isGameLost, isGameWon, handleShare }: Props) => {
|
export const StatsModal = ({
|
||||||
|
isOpen,
|
||||||
|
handleClose,
|
||||||
|
guesses,
|
||||||
|
gameStats,
|
||||||
|
isGameLost,
|
||||||
|
isGameWon,
|
||||||
|
handleShare,
|
||||||
|
}: Props) => {
|
||||||
if (gameStats.totalGames <= 0) {
|
if (gameStats.totalGames <= 0) {
|
||||||
return (
|
return (
|
||||||
<BaseModal title="Statistics" isOpen={isOpen} handleClose={handleClose}>
|
<BaseModal title="Statistics" isOpen={isOpen} handleClose={handleClose}>
|
||||||
|
@ -31,11 +39,15 @@ export const StatsModal = ({ isOpen, handleClose, guesses, gameStats, isGameLost
|
||||||
Guess Distribution
|
Guess Distribution
|
||||||
</h4>
|
</h4>
|
||||||
<Histogram gameStats={gameStats} />
|
<Histogram gameStats={gameStats} />
|
||||||
{(isGameLost || isGameWon) &&
|
{(isGameLost || isGameWon) && (
|
||||||
<div className="mt-5 sm:mt-6 columns-2">
|
<div className="mt-5 sm:mt-6 columns-2">
|
||||||
<div>
|
<div>
|
||||||
<h5>New word in</h5>
|
<h5>New word in</h5>
|
||||||
<Countdown className="text-lg font-medium text-gray-900" date={tomorrow} daysInHours={true} />
|
<Countdown
|
||||||
|
className="text-lg font-medium text-gray-900"
|
||||||
|
date={tomorrow}
|
||||||
|
daysInHours={true}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
@ -48,7 +60,7 @@ export const StatsModal = ({ isOpen, handleClose, guesses, gameStats, isGameLost
|
||||||
Share
|
Share
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
)}
|
||||||
</BaseModal>
|
</BaseModal>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
export const WIN_MESSAGES = ["Great Job!", "Awesome", "Well done!"];
|
export const WIN_MESSAGES = ['Great Job!', 'Awesome', 'Well done!']
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { solutionIndex } from './words'
|
||||||
|
|
||||||
export const shareStatus = (guesses: string[], lost: boolean) => {
|
export const shareStatus = (guesses: string[], lost: boolean) => {
|
||||||
navigator.clipboard.writeText(
|
navigator.clipboard.writeText(
|
||||||
`Not Wordle ${solutionIndex} ${lost?"X":guesses.length}/6\n\n` +
|
`Not Wordle ${solutionIndex} ${lost ? 'X' : guesses.length}/6\n\n` +
|
||||||
generateEmojiGrid(guesses)
|
generateEmojiGrid(guesses)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,7 +18,7 @@ export const getWordOfDay = () => {
|
||||||
const now = Date.now()
|
const now = Date.now()
|
||||||
const msInDay = 86400000
|
const msInDay = 86400000
|
||||||
const index = Math.floor((now - epochMs) / msInDay)
|
const index = Math.floor((now - epochMs) / msInDay)
|
||||||
const nextday = (index+1)*msInDay + epochMs;
|
const nextday = (index + 1) * msInDay + epochMs
|
||||||
|
|
||||||
return {
|
return {
|
||||||
solution: WORDS[index].toUpperCase(),
|
solution: WORDS[index].toUpperCase(),
|
||||||
|
|
Loading…
Add table
Reference in a new issue