cmcrawford2
commented
10 months ago Yes go for it! I think that's a great idea. I won't be able to merge until later today, but that shouldn't be a problem. Cris
On Tue, Oct 31, 2023 at 7:28 AM Alex Palade @.***> wrote:
Currently, each Card adds their image to the DOM only when clicked. This introduces a slight delay while the game downloads the image (the first time) from the server. This lag depends on the server and Internet speed.
I suggest adding the img with the src to the DOM and just toggle the display CSS property. This way, the game loads all images at the beginning, and they're ready to go during the game. It makes the game feel snappier. Something like this in Card.jsx:
<img src={props.imageUrl} alt={props.value} style={{display: props.isFlipped ? 'block' : 'none'}} />
If you agree to this idea, I have a branch ready for a PR.
— Reply to this email directly, view it on GitHub https://github.com/cmcrawford2/memory-game/issues/16, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQUYJELOSWOLCS4TMCN42Y3YCDOFDAVCNFSM6AAAAAA6XQZXGOVHI2DSMVQWIX3LMV43ASLTON2WKOZRHE3TAMRUHAYTQOA . You are receiving this because you are subscribed to this thread.Message ID: @.***>
alexpalade
Currently, each Card adds their image to the DOM only when clicked. This introduces a slight delay while the game downloads the image (the first time) from the server. This lag depends on the server and Internet speed.
https://github.com/cmcrawford2/memory-game/blob/11f4d47328d83239de33c2254c27641caf3a0f9e/src/Card.jsx#L16
I suggest adding the
imgwith the src to the DOM and just toggle thedisplayCSS property. This way, the game loads all images at the beginning, and they're ready to go during the game. It makes the game feel snappier. Something like this inCard.jsx:<img src={props.imageUrl} alt={props.value} style={{display: props.isFlipped ? 'block' : 'none'}} />If you agree to this idea, I have a branch ready for a PR.