Skip to content

[1] Maze Layout#2

Merged
Thenlie merged 9 commits intomainfrom
1-layout
Jul 25, 2022
Merged

[1] Maze Layout#2
Thenlie merged 9 commits intomainfrom
1-layout

Conversation

@Thenlie
Copy link
Copy Markdown
Owner

@Thenlie Thenlie commented Jul 23, 2022

HTML layout for the Maze component has been completed to MVP standards.

The maze is now generated with a v-for loop instead of being hardcoded. It takes a length and width parameter on lines 3 & 4 of Maze.vue. If these values are the same, the maze will output all square cells. Each cell contains a unique ID that will relate to that cells position in the 2D array. For example [0][1] is represented as id="01". The start and finish cell are given content of S and F respectively. They are also styled with a green or red background.

All styling (and code in general) is done within Maze.vue to follow Vue.js' Single-File Component (SFC) format. More information about this format can be found here.

Closes #1

Screenshot

image

@Thenlie Thenlie added type: enhancement Additions to existing code type: styling Adding or improving styles priority: medium labels Jul 23, 2022
@Thenlie Thenlie added this to the Maze Generation Component milestone Jul 23, 2022
@Thenlie Thenlie requested a review from phillpeters July 23, 2022 17:53
@Thenlie Thenlie self-assigned this Jul 23, 2022
@Thenlie Thenlie linked an issue Jul 23, 2022 that may be closed by this pull request
@Thenlie Thenlie marked this pull request as draft July 23, 2022 19:16
@Thenlie
Copy link
Copy Markdown
Owner Author

Thenlie commented Jul 23, 2022

🆕 UPDATE

  • Moved length and width definition to props
  • Improved styling
  • Added media queries for mobile responsiveness

@Thenlie Thenlie marked this pull request as ready for review July 23, 2022 19:49
@Thenlie Thenlie requested a review from maxh1231 July 25, 2022 03:00
@Thenlie Thenlie merged commit 07ac488 into main Jul 25, 2022
@Thenlie Thenlie deleted the 1-layout branch July 25, 2022 03:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

type: enhancement Additions to existing code type: styling Adding or improving styles

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create basic HTML layout

2 participants