std-flip-card

Level: Atom | Entity: Flashcard | Persistence: runtime

2 states, 4 events, 4 transitions

Live Preview

orbital FlashcardOrbital {
  entity Flashcard [runtime] {
    id : string
    name : string
    description : string
    status : string
    createdAt : string
    question : string
    answer : string
  }
  trait FlashcardFlipCard -> Flashcard [interaction] {
    initial: front
    state front {
      INIT -> front
        (fetch Flashcard)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "rotate-3d", size: "lg" }, { type: "typography", content: "Flashcards Flashcards", variant: "h2" }] }, { type: "divider" }, { type: "flip-card", front: { type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "icon", name: "help-circle", size: "lg" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "name"] }, { type: "typography", variant: "caption", color: "muted", content: "Tap to reveal answer" }] }, back: { type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "icon", name: "lightbulb", size: "lg" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "description"] }, { type: "badge", label: "Answer" }] }, flipped: false }, { type: "button", label: "Flip", event: "FLIP", variant: "primary", icon: "rotate-3d" }] })
      FLIP -> back
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "rotate-3d", size: "lg" }, { type: "typography", content: "Flashcards Flashcards", variant: "h2" }] }, { type: "divider" }, { type: "flip-card", front: { type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "icon", name: "help-circle", size: "lg" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "name"] }, { type: "typography", variant: "caption", color: "muted", content: "Tap to reveal answer" }] }, back: { type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "icon", name: "lightbulb", size: "lg" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "description"] }, { type: "badge", label: "Answer" }] }, flipped: true }, { type: "stack", direction: "horizontal", gap: "sm", justify: "center", children: [{ type: "button", label: "Flip Back", event: "FLIP_BACK", variant: "ghost", icon: "rotate-3d" }, { type: "button", label: "Next", event: "NEXT", variant: "primary", icon: "arrow-right" }] }] })
    }
    state back {
      FLIP_BACK -> front
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "rotate-3d", size: "lg" }, { type: "typography", content: "Flashcards Flashcards", variant: "h2" }] }, { type: "divider" }, { type: "flip-card", front: { type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "icon", name: "help-circle", size: "lg" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "name"] }, { type: "typography", variant: "caption", color: "muted", content: "Tap to reveal answer" }] }, back: { type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "icon", name: "lightbulb", size: "lg" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "description"] }, { type: "badge", label: "Answer" }] }, flipped: false }, { type: "button", label: "Flip", event: "FLIP", variant: "primary", icon: "rotate-3d" }] })
      NEXT -> front
        (fetch Flashcard)
        (render-ui main { type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "rotate-3d", size: "lg" }, { type: "typography", content: "Flashcards Flashcards", variant: "h2" }] }, { type: "divider" }, { type: "flip-card", front: { type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "icon", name: "help-circle", size: "lg" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "name"] }, { type: "typography", variant: "caption", color: "muted", content: "Tap to reveal answer" }] }, back: { type: "stack", direction: "vertical", gap: "md", align: "center", children: [{ type: "icon", name: "lightbulb", size: "lg" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "description"] }, { type: "badge", label: "Answer" }] }, flipped: false }, { type: "button", label: "Flip", event: "FLIP", variant: "primary", icon: "rotate-3d" }] })
    }
  }
  page "/flashcards/flashcards" -> FlashcardFlipCard
}

Loading preview...

Orbital Visualization

Loading visualization...

Entity Fields

Field	Type	Default
id	string	-
name	string	-
description	string	-
status	string	"active"
createdAt	string	-
question	string	""
answer	string	""

States

State	Type
front	Initial
back	-

Events

Event	Payload
INIT	-
FLIP	-
FLIP_BACK	-
NEXT	-

Transitions

From	Event	To	Effects
front	INIT	front	2 effects
front	FLIP	back	1 effect
back	FLIP_BACK	front	1 effect
back	NEXT	front	2 effects