search

Aatmaj-Zephyr / Basic-memory-game

This is a basic "memory game" which is implemented for practising java script
MIT License
5 stars 15 forks source link

FIXED Issue 104: All images are now rendered at the same size. #105

Closed a-parris21 closed 1 year ago

a-parris21 commented 1 year ago

What does this PR do?

Resolves issue-104 where flipping tiles "face-up", can be jarring and makes it harder to play due to character images having drastically different sizes.

Screenshots of changes made to the webapp.

Before my edit (Live Link from README.md)

Start of a new game

image

After clicking a tile with a large character:

image

After my edit (index.html file)

Start of a new game:

image

After clicking a tile with a large character:

image

Description of code changes

As I was looking through the code I noticed that there was already CSS implemented which would render all the images at the same size, and when testing the app via VSC's live-server feature — the images were indeed rendered at the same size. However, I compered this to the Live Link provided in the repo's README.md file.
If one accesses the web app via the live link (as shown in the first two screenshots) or loads the index.html file directly from their local machine, then the page ignores the CSS outlined in the styles.css stylesheet.

I changed the value of the href attribute as mentioned previously, from "/styles.css" to "./styles.css" and the page is now rendered with the CSS correctly implemented. I suspect this is because VSC's live server feature recognizes "/styles.css" as a valid file path, but the browsers I tested this in (Chrome, Firefox, Opera) do not recognize it as a valid file path. Adjusting it to include the period (.) before the forward-slash (/) resolves the issue with the HTML content not being rendered with the CSS applied correctly as it is considered a valid file path by the browsers and also by VSC's live server testing feature.

I verified my changes worked by opening the index.html file directly in my browser (Chrome, Firefox, Opera), instead of using the live server test - and the rendering issue is gone. (See screenshots above, note the file paths listed in the browser's address bar).

Related PRs and Issues

Aatmaj-Zephyr/Basic-memory-game/issues/104

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

Have you updated the README.md file?

Have you made any big breakthrough change?

Is the code beautified?

Is the code clear to understand with proper variable naming and comments?

a-parris21 commented 1 year ago

The actual change I had to make to the code was smaller than I was expecting. I spent some time testing other possible solutions I had in mind before I considered that the file path to styles.css might have been the problem - and it was.