alenia / planned-pooling Goto Github PK

Mom still doesn’t understand it
There’s other issues about making it make sense
Could be copy or usability or design change

Everyone should be able to access basic stitch patterns: moss and stacked
Certain users should be able to choose from styled stitch patterns (shell, v-stitch, granny, hdc)
Certain users should be able to choose from clustered stitch patterns (jasmine, ripple, vstitchCluster, ablockCluster) which should show you what the cluster's stitch count is

This is in the other planned pooling apps and I haven't felt like building it myself. Just leaving this here in case we want to add it later.
This means we don't swap the direction of stitches every other row.

Some sort of checkbox, exact wording is important but I'm not sure how to describe it.
This would be useful for my class

Maybe if there was a recent tab in the colorpicker

There's a trick to planned pooling where you can add an extra stitch to a specific color every other time you do this. I think the users of the other planned pooling calculators just manually add the same colors over and over. A button to "double the colors" would be cool, just copy and add in the same color config then you can tweak it again.

Even numbered crows get an extra stitch when supported
Does not work for ripple, vstitch, or vstitchCluster

@alenia Needs to provide list of 8 ish default colors that are standard yarn colors, like a cream, red, blue, green, etc. Look at Duna colors for reference

Be able to specify number of stitches in a ripple and number of ripples in the form

Is it more performant? does it look better on more browsers/other devices? Does it make it easier to have more stitches/rows/whatever?

small buttons with icons on them allows a user to either mirror with something like <-> and rotate it to horizontal with something like ^->

Looking at the behavior of SketchPicker on https://casesandberg.github.io/react-color/ I can drag around or slide my slider before the complete event fires. This is how I expect a color picker to work. For some reason, there's no dragging on the color picker in our app right now.

Right now, className="vertical" switches from the default horizontal direction to the vertical. This should probably be a prop instead.
Design: It would be cool to just have a button with a arrow image that makes it clear you're rotating the swatch and a tooltip that says something like "switch swatch orientation from horizontal to vertical" or "vertical to horizontal" depending on current state. This should be above the upper left hand corner of the swatch

If I could make the app animate in each stitch (just for me, on my browser) I could use this in videos.

Two column form on top on big
One column form on iPhone
Color segment interactions all on one line
Add color button should clearly be part of the color section of the form
Labels and inputs line up

I like to use circles of each color to display the color sequence so that I can use it in my patterns.
This should shift as you change the shift

hdc and granny are just rectangular stitches, similarly to moss and stacked. They just have different spacing between rows and sizes of stitches. I wonder if I can consider sliders for making your stitches look more like the stitches in your project, and turn these into a set of props/configuration numbers instead of classes in the code

Is this easier if we do #21

I think this fix would make it more clear what color shift means. Also negative color shifts don’t actually work.
Behavior: Loop between zero and stitchesInSequence -1, then go back to zero
Easier behavior: ONly go up to stitchesInSequence - 1 (but then you don’t get to press the button and make it shift forever and I love that behavior)

The first row starts with a ch1 space not a sc

make things look like chains, sc, dc etc so that chart is real

Sometimes I use this in "advanced mode" to see a bunch of weird things as I'm designing something. I shouldn't be doing that at the index endpoint but I'd love to be able to expose these special charts

Number inputs should be narrow and you should be able to click up and down buttons or change the number in text
This should behave the same on mobile and web
All number inputs should have a unified look that does this.
Up arrow on right, down arrow on left of spinner input box

Pulling this out of #1

Possibly just do for first 6 rows. display odd numbers on one side and even on the other. should be very light text. Ideally, this should be hideable.

Dropdown to switch stitch pattern. Two items in dropdown. Current copy should say moss and stacked but I want to change this copy later. This will switch the stitchPattern going into the Swatch fro StitichPattern.moss to StitchPattern.stacked
Label for dropdown is stitch pattern, the copy that's going to change is the moss vs stacked wording

I need to figure out how to do the wording on this one, I think it's confusing because I'd say that moss stitches are interlaced together? but you also have staggered lengths as a different concept? Ask me for more info

Build each row by clicking a button
Numbers at the top to help out
"Flip this swatch" setting?

On an ipad, when I try choosing colors and I tap somewhat too low (abvoe the labels, below the slider) the box closes. I think the box should only close/lose focus when you tap outside of it.

• Print out Preview to PDF or expose the computed HTML somehow
• Make sure that there are no js errors/warnings loading Preview
• Diff Preview somehow

color config should end up looking like

[
  {color: "#C274B3", length: 2},
  {color: "#4ECDC4", length: 3},
  {color: "#FFE66D", length: 1},
  {color: "#FF6B6B", length: 2},
  {color: "#EEEEEE", length: 13},
]

You should be able to add and remove colors and put in the color picker and length number input for each color (similar to https://plannedpooling.com/)

"Number of stitches per row" should be a number input that changes stitchesPerCrow

Semantic Versioning:

• Change version in package.json when deploying
• Tag the version change
• Add it to build script

CI:

• Fail PR if linting or tests or tsx fails

Deploy Script:

• Turn deploying into a script instead of a list of instructions in the README

This might be better if we automatically put in a "stretch" and "swallow" and set the number of stitches in a row to the color sequence length

Dropdown that will auto-populate color config form with reasonable lengths and colors of the colorways used in my class
Circulo Duna Colorways:
9391 (light green, dark green, and cream)
9128 (dark blue, light blue, and cream)
9642 (cream, light blue, dark blue, and red)
9482 (Three shades of blue)
9687 (brown family)
9165 (yellow, orange and red)

Maybe also include Circulo's names for the colorways
note that 9642 is the current default color config

This is the sum of the lengths in the color config

If you have like yellow: 5, green: 3, light blue: 2, dark blue: 4, some option to mirror colors that will add light blue: 2 and green: 3 at the end with the same color values?

Oh man this would be so fun