draw two house and a hill, fix styling

[amnindersingh12]

Regarding #46

• [x] Add two houses
• [x] Add a hill
• [x] Attachments of the changes

Updated View

Crash on drilling into hill (same is applicable for houses)

[shiffman]

Thank you for contributing @amnindersingh12!

[alin256]

@amnindersingh12 thank you for your contribution. Can you fix the roof of the right house? It looks off by some pixels.

@shiffman I will try to review and merge before the end of the week.

[amnindersingh12]

Hi @alin256 , I have fixed that distorted pixel for the house. Thank you

[alin256]

@amnindersingh12, would your changes work with the 600x400 canvas that was there before?

Currently, the styling is slightly inconsistent between the desktop and mobile versions, and the instruction fonts have become too small on mobile.

@shiffman, maybe we should create a feature branch [CodingTrain:houses] to collaboratively refine it further before merging it into [main].

[alin256]

@amnindersingh12, do you want to create a pull request to CodingTrain:houses-feature

I can advertise it, e.g. in the Readme, if you want some help with the styling/scaling.

[amnindersingh12]

@amnindersingh12, would your changes work with the 600x400 canvas that was there before?

Currently, the styling is slightly inconsistent between the desktop and mobile versions, and the instruction fonts have become too small on mobile.

@shiffman, maybe we should create a feature branch [CodingTrain:houses] to collaboratively refine it further before merging it into [main].

I have checked in mobile and desktop, the scaling is inconsistent. And my changes are not working with 600x400 canvas. Can you guide me through styling/scaling or provide any resources to learn more about scaling and mobile/desktop thing ?

[alin256]

@amnindersingh12 I commented regarding the scaling in CSS in the pull request to your branch that I made earlier today.

In the sketch itself, the scaling is adjusted down if needed during the setup:

  const allowedWidth = min(windowWidth, screen.width);
  if (allowedWidth > defaultWidth) {
    canvas = createCanvas(defaultWidth, defaultHeight);
  } else {
    ratio = allowedWidth / defaultWidth;
    canvas = createCanvas(defaultWidth * ratio, defaultHeight * ratio);
    // scale(ratio);
  }

[shiffman]

@alin256 your plan sounds great to me!