Giter VIP home page Giter VIP logo

hexagon-quilt-map's People

Contributors

ballin98 avatar dependabot[bot] avatar izhuravlev avatar knitcodemonkey avatar thelucasanderson avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

hexagon-quilt-map's Issues

Right Triangles has an odd extra row of disconnected triangles at the bottom

Describe the bug
Number of rows incorrect on right triangles

Additional context
In order to show the half hexagons and second half of the right triangles, we are adding an additional row to the row selected, and then cutting off the top half row and bottom half row.

For Right triangles, though, we, at the very least, to always end on an even row, either the number selected or number selected + 1.

Ideally, we'd have twice the number of rows selected, which would always result in an even number. We are passing in the shape to the functions that generate the list of fabrics. We may be able to utilize that section to allow for twice the number of fabrics to be generated based on the shape.

Only randomize on button press

Issue

Current Behavior

Selecting any form fields or refreshing the page re-randomizes the quilt.

Desired Behavior

It will only randomize on first load, or when pressing a "Randomize" button.

  • Save the imageList as a JSON string to localstorage?

Allow new Square shape

Issue

Current Behavior

Hexagon is the only shape

Desired Behavior

Add a Square shape:

[ ] Add a form select to include Square
[ ] Create a Square component
[ ] Allow prop to load either the Hexagon or Square layout
[ ] Default to Hexagon

Different Patterns based on hue

Issue

Right now, it is random, but what if we could do gradients, or tesselating patterns?

Current Behavior

Desired Behavior

Step-by-step Instructions to Reproduce Behavior

Screenshots

Reconsider CSS for shapes

Issue

Current Behavior

Hexagons are formed using CSS and background images.

Desired Behavior

Hexagonal Grids from Red Blob Games

The Hexagonal Grids website has some great info on how to format hexagons, diamonds, and other shapes in a grid-like gaming system. The same layouts would work well for our purposes. It would be work exploring if CSS really is the best option, or if we should be implementing the grid with canvas or SVGs.

Update README.md

Issue

Current behavior

Currently, the README.md is the default from create-react-app

Desired Behavior

  • Explains problem trying to solve
  • Describes solution to problem
  • Includes scripts for running project
  • Link to CONTRIBUTING.md

Populate quilt with more fabric when form fields change

Issue

Current Behavior

Quilt fails to update number of spaces when form is used to adjust width and height.

Desired Behavior

Adjusting width and/or height also runs generateAllImages()

Step-by-step Instructions to Reproduce Behavior

  • Randomize quilt fabric
  • Use form to increase width and height of quilt

Quilt doesn't add more spaces

  • Randomize quilt fabric after using form to increase width and height

Quilt now has the appropriate number of spaces for the size of the quilt.

Upload custom image set

Issue

Current Behavior

There is only one image set: "Bee Creative"

Desired Behavior

  • Instructions on how to upload image(s) with your own quilt fabric
  • Form to upload images
  • Form to select/use your image set
  • Images upload to their own folder. Name of folder should be included in name of file.

Questions

  • Do we allow all image sets to become public?
  • Does this require a user profile?

Include form field selections in localStorage

Issue

Currently the current image order for the quilt saves to localStorage, but not any of the form fields. Those are important to maintaining the same quilt you'd previously generated

Current Behavior

When you refresh page, all form fields revert to their defaults

Desired Behavior

When you refresh the page, all selections stay as you selected them.

Step-by-step Instructions to Reproduce Behavior

  • Change the height, width, shape of the quilt, and refresh.
  • All form fields revert back to defaults.

Save Quilt Sample and Key

Issue

Current Behavior

Currently, the only way to save the current layout is to screenshot it

Desired Behavior

A button to save image/pdf that includes

  • Header with title, link, and hexagon counts
  • Quilt layout
  • Image Key

Randomize erases manually populated fabrics

Describe the bug
Though you can place fabrics in specific spaces, randomize clears those.

Expected behavior
It would be nice to have a new button that says something like "randomize others" so that you can keep the ones you've selected, and populate the rest based on those manually specified fabric placements.

Describe "Change fabrics feature" in documentation and on the web-page

Problem

As I stated in comments to #21,

It took me to go through specks, HomePage, QuiltSection, and one of the shapes components to realize what **"you can place fabrics in specific spaces" actually means, and that by selecting one of the fabrics below and clicking on the tiles we can change them to the fabric selected below!

Possible solution

That feature should be stated somewhere on the web page or in documentation because it is totally not obvious.

Select new fabric for individual hexagon

Issue

Current Behavior

Currently, the layouts are randomly generated, and you can only change the entire layout.

Desired Behavior

If you click on a single space, you can choose a different fabric from the set, and save it, allowing you to come up with your own layouts.

AND/OR

You can choose a fabric, and click on the spaces to change them to that fabric.

Accept number of hexagons wide and tall

Issue

Current behavior

At the moment, the form accepts hexagons wide and tall, and adjusts the number of hexagons correctly, but the layout only works if you use an even number for width.

Desired behavior

Accepts any whole number of hexagons wide and tall.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.