Create a player token web component - Githubissues

jkomoros / boardgame

An in-progress framework in golang to easily build boardgame Progressive Web Apps

Apache License 2.0

31 stars 4 forks source link

Create a player token web component #373

Open jkomoros opened 7 years ago

jkomoros commented 7 years ago

That takes a few flavors with different SVG assets and hue/saturates them for color.

jkomoros commented 7 years ago

Could have multiple pawn types- a basic little chip, a meeple, and a tall, ornate one. Can be hue-shifted.

An active, secondaryActive, highlighted property that different games would use for different things.

To start would just be mildly perspective-y SVGs. But as time goes on they'd be WebGL tokens that would animate a pick up, swing, put down animation as they go.

jkomoros commented 6 years ago

Having a specific token component would allow the animation logic to be factored reasonably.

For example, there's a boardgame-component element where most animation logic lives, with boardgame-card and boardgame-token subclasses. Components get their position from their container either directly or implicitly. Tokens would be contained within the game board, and it would set their position based on which region they were supposed to be in. Decks obviously set them based on existing postiion routines.

jkomoros commented 6 years ago

[x] Create boardgame-component and factor as much positioning logic out of it as possible
[x] boardgame-component.card-tapped -> boardgame-component.component-tapped
[x] Create boardgame-token subclass of boardgame-component
[x] compute_classes IN PROGRESS can't land because _classes doesn't appear to override super's _classes so it's called on the subclass's compute_classes but with the wrong arguments. It's because you can't override properties in a subclass? the subclasses's properties are initialized once
[x] Figure out a way to factor the classes computation into the subclass but put into the template on the one we're deriving from. observer would run both, I think.
[x] Factor shadow/animation logic into boardgame-component (merge templates?)
[x] Add token.active, token.secondaryActive, highlighted properties
[x] Animate shadow for active tokens (throb)
[x] fix box-shadow on cube
[x] Animations and webGL-y tokens when moving
[x] Add color property for token
[x] Token scale
[x] on hover components lift up (translate, not just shadow. should happen to cards too?)
[x] Allow arbitrary color setting for token (but keep prebaked defaults) with hue shifting filters
[x] Add type for tokens (chip, meeple, cube, ornate)
[x] most token types shouldn't allow a custom aspect ratio, only cards (the asset is fixed normally)
[x] Setting component type and color in debuganimations shoudl change stackDefault for the faux components, but doesn't
[x] Create boardgame-component-stack, which card stack subclasses.
[x] DebugAnimations gets a stack of tokens for animation testing
[x] Make component-animator work for components
[x] visual assets for various types
[x] larger set of random values for rotation offsets. Should they be a global in a closure for all stacks? Then the random offset could be sized correctly to them. And we could just have one canonical set that all random offset stuff uses and transforms their own way.
[x] Classes observer triggers twice for boardgame-cards and boardgame-token, I think. How to factor that out?
[ ] use boardgame-token in monroe
[ ] aren't chip, token, cube, and pawn assets all way too front ward? the perspective seems like it should be more top down but a bit off (to match cards)
[x] Make piles have more of a triangular stack. Ideally we'd map a random x/y (that's constant for the id) to a location in a triangle smoothly. Can have them be in a rectangle and top half cut off the edges and put them on the outside below. See here for the math. (see diagram in comment below)
[x] margins set correctly for the stack so there's breathing room (not a constant in the offset geneator)
[ ] margins should be set based on size of the components. Test with cards in a pile, almost certainly won't work correctly.
[x] Active/highlighted shadows should throb
[ ] components in pile should z-index from bottom to top from back to front
[ ] Add a normal pawn asset and rename this tall-pawn
[ ] The triangularization of pile should be able to be disabled. Perhaps components vote for whether they want it with diableTrianguliarzation? For cards it's not necesary. But look at stacks with many cards, it might be fine.
[x] The types for all tokens are tied to the stack they're part of. Doesn't that imply setting things like default values via a mechanism like boardgame-card cardType?
[x] components should get a stable location in the stack for that stack size. As stack size changes they should be in a similar position.
[x] boardgame-component-stack stack=pile
[x] should boardgame-die be a subclass of boardgame-component?

jkomoros commented 6 years ago

[x] top to bottom of JS class change cards --> components
[x] top to bottom of CSS class cards --> components
[x] animator handles boardgame-component-stack
[x] Update all uses of boardgame-card-stack (including in games repo)
[x] Way to stamp out faux components/spacer (type)
[x] Stamp out faux cards and spacer using newComponent, not databinding
[x] token.type --> tokenType, or card.cardType --> type to be aligned. The plus of the latter is that we can always just copy over type. the LATTER
[x] cardsRotated --> stackDefault(boolProp)
[x] Figure out a way to generalize effectiveCardType; e.g. token needs the token type auto-set. boardgame-component define animatingProperties (for things that change in animation and should be copied over) and configurationProperties (for things that don't change but are material, like tokenType and cardType; although if we make them both type then it's fine we can just set those).
[x] element. animatingPropValues(), animatingPropDefaults(), which both read from animatingProperties() []string
[x] Bug when you flip the single card. When was that introduced? It doesn't affect memory game.
[x] in boardgame-component-animator, replace before after bundles with animatingProp{Values,Defaults} and startAnimation, endAnimation. (Currently stashed)
[x] replace before/after values with prop bundles from animatingPropValues()
[x] faceUp can be fully handled by stackDefault('faceUp') and animatingProperties() in animator
[x] Disentangle rotation as well (override, basicRotation, rotation) as an expensiveAnimatingProperty (?)... no, it needs something else on the element to animate, because the height/width have to be flipped
[x] Some way to select components that's not boardgame-card (shoould boardgame-component reflect to attribute boardgame-component?
[x] animator learns how to handle non-cards (mostly in faceUp, rotated, noContent)
[x] debuganimations grows a stack of tokens that you can toggle between (real component move), and another stack that has a token to a pile that is non-empty or len)
[x] Fix faux-components bug with token stamping. stack.componentType isn't nearly resilient enough, especially at the very beginning, a spacer is stamped as a card to start)
[x] moves/buttons to move tokens back and forth between the stacks
[x] README.md x2 update
[x] Get the tokens to animate when moving back and forth between stacks

jkomoros commented 6 years ago

The logic in boardgame-animator should defer more of the complicated calculations to the element being animated. that's the only way to scalably handle animating things. ele.beforeProperties(stack) result {}, ele.afterProperties(afterStack, beforeProperties{})

//ele is boardgame-component

//Called before the state change happens. Keep track of your before properties
ele.beforeStateChange();

//Called after the state cahnge happens. Keep trakc of your after properties.
ele.afterStateChange();

//Start the animation. Generally you set your values to the before properties
ele.prepareAnimation();

//Make the animation go. Generally you set your values back to the after properties.
ele.startAnimation();

... Wait, this doesn't work because the elements before and after might be different elements.

Also need a way to save content nodes if necessary, because those are just kept around as long as necessary

let beforeProps = ele.animatingProperties();
let afterProps = ele.animatingProperties();

//For elements that didn't have a before, generally stack.defaultForStack('propName') for each property
let defaultProps = ele.defaultAnimatingProperties();

//Consulted to see if we need to clone content. base class returns false. boardgame-card returns ture, but only if noContent is false (or whatever)
ele.cloneContent()

//Called for it to figure out if the before and after are rotated differently (and thus scale factor needs to change)
ele.animationRotates(beforeProps, afterProps) // bool

ele.prepareAnimation(beforeProps);

ele.startAnimation(afterProps);

jkomoros commented 6 years ago

Way to do trinagulation:

-------------------------
|  /|                              |\  |
| / |                              | \ |
|/  |                              |  \|
-------------------------
|                                       |
|                                       |
|                                       |
-------------------------

to:

       -------------------
      /|                              |\ 
     / |                              | \
    /  |                              |  \
   -------------------------
  /|                                       |\
 / |                                       | \
/  |                                       |  \
------------------------------