histogram width divide by mode, not total #2

Merged
christofsteel merged 47 commits from honigle into main 2022-02-02 13:59:36 +01:00
5 changed files with 50 additions and 37 deletions
Showing only changes of commit 4188d796ef - Show all commits

View file

@ -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 !== ''}

View file

@ -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>
) )
} }

View file

@ -1 +1 @@
export const WIN_MESSAGES = ["Great Job!", "Awesome", "Well done!"]; export const WIN_MESSAGES = ['Great Job!', 'Awesome', 'Well done!']

View file

@ -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)
) )
} }

View file

@ -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(),