إنتقل إلى المحتوى الرئيسي

std-coding-academy

Level: Organism | Entity: SeqChallenge | Persistence: runtime

3 states, 5 events, 5 transitions

Live Preview​

;; app Coding Academy

orbital SeqChallengeOrbital {
  entity SeqChallenge [runtime] {
    id : string!
    title : string!
    difficulty : string
    score : number
    completed : boolean
    level : number
  }
  trait SeqChallengeSequencerGame -> SeqChallenge [interaction] {
    initial: menu
    state menu {
      INIT -> menu
        (fetch SeqChallenge)
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "game-menu", title: "Sequencer Challenge", menuItems: [{ label: "Start", event: "START", variant: "primary" }] }] })
      START -> playing
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "stack", direction: "vertical", gap: "md", children: [{ type: "game-hud", stats: [{ label: "Score", value: "@entity.score" }, { label: "Level", value: "@entity.level" }] }, { type: "sequencer-board", entity: "SeqChallenge", completeEvent: "COMPLETE" }] }] })
      NAVIGATE -> menu
    }
    state playing {
      COMPLETE -> complete
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "game-over-screen", title: "Well Done!", menuItems: [{ label: "Play Again", event: "RESTART", variant: "primary" }] }] })
    }
    state complete {
      RESTART -> menu
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "game-menu", title: "Sequencer Challenge", menuItems: [{ label: "Start", event: "START", variant: "primary" }] }] })
    }
  }
  page "/sequencer" -> SeqChallengeSequencerGame
}
orbital BuildChallengeOrbital {
  entity BuildChallenge [runtime] {
    id : string!
    title : string!
    difficulty : string
    score : number
    completed : boolean
    level : number
  }
  trait BuildChallengeBuilderGame -> BuildChallenge [interaction] {
    initial: menu
    state menu {
      INIT -> menu
        (fetch BuildChallenge)
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "game-menu", title: "Builder Challenge", menuItems: [{ label: "Start", event: "START", variant: "primary" }] }] })
      START -> playing
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "stack", direction: "vertical", gap: "md", children: [{ type: "game-hud", stats: [{ label: "Score", value: "@entity.score" }, { label: "Level", value: "@entity.level" }] }, { type: "builder-board", entity: "BuildChallenge", completeEvent: "COMPLETE" }] }] })
      NAVIGATE -> menu
    }
    state playing {
      COMPLETE -> complete
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "game-over-screen", title: "Well Done!", menuItems: [{ label: "Play Again", event: "RESTART", variant: "primary" }] }] })
    }
    state complete {
      RESTART -> menu
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "game-menu", title: "Builder Challenge", menuItems: [{ label: "Start", event: "START", variant: "primary" }] }] })
    }
  }
  page "/builder" -> BuildChallengeBuilderGame
}
orbital EventChallengeOrbital {
  entity EventChallenge [runtime] {
    id : string!
    title : string!
    difficulty : string
    score : number
    completed : boolean
    level : number
  }
  trait EventChallengeEventHandlerGame -> EventChallenge [interaction] {
    initial: menu
    state menu {
      INIT -> menu
        (fetch EventChallenge)
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "game-menu", title: "Event Handler Challenge", menuItems: [{ label: "Start", event: "START", variant: "primary" }] }] })
      START -> playing
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "stack", direction: "vertical", gap: "md", children: [{ type: "game-hud", stats: [{ label: "Score", value: "@entity.score" }, { label: "Level", value: "@entity.level" }] }, { type: "event-handler-board", entity: "EventChallenge", completeEvent: "COMPLETE" }] }] })
      NAVIGATE -> menu
    }
    state playing {
      COMPLETE -> complete
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "game-over-screen", title: "Well Done!", menuItems: [{ label: "Play Again", event: "RESTART", variant: "primary" }] }] })
    }
    state complete {
      RESTART -> menu
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "game-menu", title: "Event Handler Challenge", menuItems: [{ label: "Start", event: "START", variant: "primary" }] }] })
    }
  }
  page "/events" -> EventChallengeEventHandlerGame
}
orbital StudentProgressOrbital {
  entity StudentProgress [runtime] {
    id : string!
    totalLessons : number
    completedLessons : number
    averageScore : number
    streak : number
  }
  trait StudentProgressDisplay -> StudentProgress [interaction] {
    initial: loading
    state loading {
      INIT -> displaying
        (fetch StudentProgress)
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Progress" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "trending-up", size: "lg" }, { type: "typography", content: "Progress", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "TotalLessons", value: ["object/get", ["array/first", "@entity"], "totalLessons"] }, { type: "stat-display", label: "CompletedLessons", value: ["object/get", ["array/first", "@entity"], "completedLessons"] }, { type: "stat-display", label: "AverageScore", value: ["object/get", ["array/first", "@entity"], "averageScore"] }, { type: "stat-display", label: "Streak", value: ["object/get", ["array/first", "@entity"], "streak"] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
      LOADED -> displaying
        (fetch StudentProgress)
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Progress" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "trending-up", size: "lg" }, { type: "typography", content: "Progress", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "TotalLessons", value: ["object/get", ["array/first", "@entity"], "totalLessons"] }, { type: "stat-display", label: "CompletedLessons", value: ["object/get", ["array/first", "@entity"], "completedLessons"] }, { type: "stat-display", label: "AverageScore", value: ["object/get", ["array/first", "@entity"], "averageScore"] }, { type: "stat-display", label: "Streak", value: ["object/get", ["array/first", "@entity"], "streak"] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
    }
    state displaying {
      INIT -> displaying
        (fetch StudentProgress)
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Progress" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "trending-up", size: "lg" }, { type: "typography", content: "Progress", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "TotalLessons", value: ["object/get", ["array/first", "@entity"], "totalLessons"] }, { type: "stat-display", label: "CompletedLessons", value: ["object/get", ["array/first", "@entity"], "completedLessons"] }, { type: "stat-display", label: "AverageScore", value: ["object/get", ["array/first", "@entity"], "averageScore"] }, { type: "stat-display", label: "Streak", value: ["object/get", ["array/first", "@entity"], "streak"] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
      REFRESH -> refreshing
        (fetch StudentProgress)
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Progress" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "trending-up", size: "lg" }, { type: "typography", content: "Progress", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "TotalLessons", value: ["object/get", ["array/first", "@entity"], "totalLessons"] }, { type: "stat-display", label: "CompletedLessons", value: ["object/get", ["array/first", "@entity"], "completedLessons"] }, { type: "stat-display", label: "AverageScore", value: ["object/get", ["array/first", "@entity"], "averageScore"] }, { type: "stat-display", label: "Streak", value: ["object/get", ["array/first", "@entity"], "streak"] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
    }
    state refreshing {
      REFRESHED -> displaying
        (fetch StudentProgress)
        (render-ui main { type: "game-shell", appName: "Coding Academy", showTopBar: true, children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Progress" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "trending-up", size: "lg" }, { type: "typography", content: "Progress", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "TotalLessons", value: ["object/get", ["array/first", "@entity"], "totalLessons"] }, { type: "stat-display", label: "CompletedLessons", value: ["object/get", ["array/first", "@entity"], "completedLessons"] }, { type: "stat-display", label: "AverageScore", value: ["object/get", ["array/first", "@entity"], "averageScore"] }, { type: "stat-display", label: "Streak", value: ["object/get", ["array/first", "@entity"], "streak"] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
    }
  }
  page "/progress" -> StudentProgressDisplay
}
Loading preview...

Orbital Visualization​

Loading visualization...

Entity Fields​

FieldTypeDefault
idstring-
titlestring-
difficultystring"easy"
scorenumber0
completedbooleanfalse
levelnumber1

States​

StateType
menuInitial
playing-
complete-

Events​

EventPayload
INIT-
START-
COMPLETE-
RESTART-
NAVIGATE-

Transitions​

FromEventToEffects
menuINITmenu2 effects
menuSTARTplaying1 effect
menuNAVIGATEmenu-
playingCOMPLETEcomplete1 effect
completeRESTARTmenu1 effect