Oka 46 interactive html 2 #9
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/rafkhan/lowstepper/JEAyvi1Z7XDzXAisqj4TYnEhwBbX |
| "react": "17.0.0", | ||
| "react-dom": "17.0.0", | ||
| "react-p5-wrapper": "2.3.0", | ||
| "react-rotary-knob": "^1.1.8", |
| } | ||
|
|
||
| #root .white_hole{ | ||
| position:absolute; |
There was a problem hiding this comment.
you legend lol
I would suggest doing it with flexbox... but I can't imagine that's very easy. This seems to work fine.
|
|
||
| return ( | ||
|
|
||
| <div className="App"> |
There was a problem hiding this comment.
We will have to eventually move this to it's own component
| <div className="trigWrapper"> | ||
| <div> | ||
| <div className="buttonWrapper red"> | ||
| <button className="button" onMouseDown={(e) => { |
There was a problem hiding this comment.
wrap setState({ ...state, "gate": true }) in some function
you can use a react component as well for the repetition of onMouseUp / onMouseOut, etc
| if (distance > maxDistance) { | ||
| return; | ||
| } else { | ||
| this.setState({ value: val }); |
There was a problem hiding this comment.
add onUpdate prop here, call with value
| <div className="bg_potentiometer"></div> | ||
| <h2 className="parameterName"> {currentKnob.name}</h2> | ||
| <div className="bgKnob knobB"> | ||
| <LimitedKnob |
There was a problem hiding this comment.
add onUpdate to this component, then update corresponding props value per knob
There was a problem hiding this comment.
validate by seeing rate / morph / chunks change
| } | ||
|
|
||
| .container { | ||
| width: 440px; |
There was a problem hiding this comment.
for some reason this looks enormous on my screen currently... not sure why, maybe 2x monitor?
New Interactive HTML v1.0.
All triggers not connected to their functions right now, only the trig.