2e:null 2f:["$","title",null,{"children":"Flipping a Card with More Than 2 Sides | Jarrett Meyer | Observable"}] 34:T65a,

Front

I don't trust trees...

Back

... because they seem shady.

35:T4c7,

Side 1

I don't trust trees...

Side 2

... because they seem shady...

Side 3

... and they always drop everything in the fall...

Side 4

... and their jokes are so sappy.

36:T493,function rotateMultiple(e, index) { index = index || 0; clicks[index] += 1 const content = e.target.closest(".content"); const sides = content.querySelectorAll(".side"); const rotation = (clicks[index]) * 180; const currentSide = (clicks[index]) % sides.length; const nextSide = (clicks[index] + 1) % sides.length; const isEven = (clicks[index]) % 2 === 0; content.style.transform = `rotateY(${rotation}deg)`; setTimeout(() => { sides.forEach((el, i) => { if (i === currentSide && isEven) { el.classList.remove("side-back"); el.classList.add("side-visible", "side-front"); } else if (i === currentSide && !isEven) { el.classList.remove("side-front"); el.classList.add("side-visible", "side-back"); } else if (i === nextSide && isEven) { el.classList.remove("side-front"); el.classList.add("side-visible", "side-back"); } else if (i === nextSide && !isEven) { el.classList.remove("side-back"); el.classList.add("side-visible", "side-front"); } else { el.classList.remove("side-visible", "side-front"); } }); }, 2000); }37:[] 32:{"id":"27c42dc2440e6e56","slug":"flipping-a-card-with-more-than-2-sides","title":"Flipping a Card with More Than 2 Sides","thumbnail":"eb682f74e9bcad6f6bbc960821e6082b31aab92f254fb246b62b42903a7d3934","access_level":"public","create_time":"$D2021-08-20T10:48:30.964Z","update_time":"$D2022-01-12T19:58:20.413Z","view_time":null,"first_public_time":"$D2021-08-20T14:00:42.926Z","has_unpublished_edits":null,"fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"916bd7c2b56cabb3","login":"jarrettmeyer","name":"Jarrett Meyer","avatar_url":"https://avatars-next.observableusercontent.com/3aa074afaccaa843b3d0e6a1b044a7ca602e45fe7c27bd04d06511f76a50881c","tier":"starter_2024"},"version":208,"publish_version":208,"role":null,"authored":false,"authors":[{"type":"individual","id":"87078aa974d7d22b","login":"jarrettmeyer","name":"Jarrett Meyer","avatar_url":"https://avatars-next.observableusercontent.com/3aa074afaccaa843b3d0e6a1b044a7ca602e45fe7c27bd04d06511f76a50881c","tier":null}],"members":[{"type":"individual","id":"87078aa974d7d22b","login":"jarrettmeyer","name":"Jarrett Meyer","avatar_url":"https://avatars-next.observableusercontent.com/3aa074afaccaa843b3d0e6a1b044a7ca602e45fe7c27bd04d06511f76a50881c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Flipping a Card with More Than 2 Sides","cells":[{"id":0,"value":"# Flipping a Card with More Than 2 Sides\n\n> A card with more than 2 sides? This is madness! This is one of the stranger requests I've had. Normally, I would switch from a flip UI to a carousel UI, so this was a fun little piece to figure out.\n\nLet's start with a basic [card flip interface](https://observablehq.com/@jarrettmeyer/flipping-a-card).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$34","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"We are going to add 2 more sides to this card. The trick to getting this right is that we always need to know what the current front and back sides are. The user is always seeing either the front or the back. If the user sees the front of the card (e.g. side 1), the next click should reveal the back of the card (e.g. side 2). If the user sees the back of the card, the next click should reveal the **next** front card (e.g. card 3, not card 1).\n\nAlso, this solution needs to handle any size deck. The number of cards could be odd.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"$35","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"This shows that the solution holds for an odd number of sides. Note that both views call the same `rotateMultiple` function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"\n\n

Side 1

I don't trust trees...

Side 2

... because they seem shady...

Side 3

... and they always drop everything in the fall...

Side 4

... and their jokes are so sappy...

Side 5

... and they get stumped on every question.

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"clicks = [0, 0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"function rotate(e) {\n mutable rotation += 180;\n e.target.closest(\".content\").style.transform = `rotateY(${mutable rotation}deg)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"mutable rotation = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"colors = ({\n card: d3sc.interpolateViridis(0),\n content: d3sc.interpolateViridis(0.1),\n front: d3sc.interpolateViridis(0.2),\n back: d3sc.interpolateViridis(0.3),\n side1: d3sc.interpolateViridis(0.4),\n side2: d3sc.interpolateViridis(0.5),\n side3: d3sc.interpolateViridis(0.6),\n side4: d3sc.interpolateViridis(0.7),\n side5: d3sc.interpolateViridis(0.8),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"d3sc = require(\"d3-scale-chromatic@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"