{ "id": "arcade_root", "type": "module", "version": "1.1", "context": { "title": "Pocket Arcade", "icon": "🕹️", "layout": "phone" }, "state": {}, "children": [ { "id": "arcade_nav", "type": "navigation", "children": [ { "id": "arcade_home_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "common": { "background": { "gradient": { "linear": { "colors": [ { "light": "#F3F4F6", "dark": "#0B1220" }, { "light": "#E5E7EB", "dark": "#111827" } ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "arcade_home_stack", "type": "vstack", "context": { "_spacing": 16, "_alignment": "leading" }, "style": { "layout": { "padding": { "top": 16, "bottom": 28, "leading": 16, "trailing": 16 }, "maxWidth": "infinity" } }, "children": [ { "id": "arcade_intro_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#4F46E5", "#7C3AED", "#DB2777" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 12, "y": 6 } }, "children": [ { "id": "arcade_intro_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "arcade_intro_icon", "type": "image", "context": { "_source": "sf://sparkles.rectangle.stack.fill" }, "style": { "layout": { "width": 28, "height": 28 }, "common": { "foreground": { "color": "white" } } } }, { "id": "arcade_intro_text", "type": "text", "context": { "_text": "Five quick games, one pocket-sized arcade." }, "style": { "common": { "font": { "kind": "headline", "weight": "bold" }, "foreground": { "color": "white" } } } } ] }, { "id": "arcade_intro_copy", "type": "text", "context": { "_text": "Pick a puzzle, reflex test, or party game. Everything fits a phone-sized screen." }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.88 } } }, "text": { "lineSpacing": 2 } } } ] }, { "id": "arcade_guess_link", "type": "link", "destination": { "id": "game_guess_module", "type": "module", "version": "1.1", "context": { "title": "Guess Number", "icon": "🔢", "layout": "phone" }, "state": { "target": 50, "guessText": "", "guessError": "", "feedback": "Pick a number from 1 to 100.", "attempts": 0, "history": [], "won": false, "focused": "" }, "children": [ { "id": "game_guess_scroll", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "scroll": { "dismissesKeyboard": "interactively" }, "common": { "background": { "gradient": { "linear": { "colors": [ "#0F172A", "#172554", "#1E3A8A" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "game_guess_stack", "type": "vstack", "context": { "_spacing": 18, "_alignment": "leading" }, "style": { "layout": { "padding": { "top": 18, "bottom": 28, "leading": 16, "trailing": 16 }, "maxWidth": "infinity" } }, "children": [ { "id": "game_guess_status_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "leading", "attemptLabel": "{{ ${attempts} == 1 ? '1 guess made' : cast(${attempts}, 'str') + ' guesses made' }}" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#0EA5E9", "#2563EB" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 12, "y": 6 } }, "children": [ { "id": "game_guess_status_head", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "game_guess_status_icon", "type": "image", "context": { "_source": "{{ ${won} ? 'sf://checkmark.seal.fill' : 'sf://number.circle.fill' }}" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "white" } } } }, { "id": "game_guess_status_text", "type": "text", "context": { "_text": "${feedback}" }, "style": { "common": { "font": { "kind": "headline", "weight": "bold" }, "foreground": { "color": "white" } } } } ] }, { "id": "game_guess_attempts_text", "type": "text", "context": { "_text": "@{attemptLabel}" }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.86 } } } } } ] }, { "id": "game_guess_input_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.12 }, "radius": 10, "y": 4 } }, "children": [ { "id": "game_guess_field", "type": "textfield", "context": { "_label": "Your guess", "_text": "${guessText}", "_keyboard": "numberPad", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "light": "#111827", "dark": "white" }, "background": "{{ notEmpty(${guessError}) ? { 'color': { 'color': '#DC2626', 'opacity': 0.12 } } : { 'color': 'clear' } }}", "cornerRadius": 12 } } }, { "id": "game_guess_error_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${guessError}) }}", "_trueComponent": { "id": "game_guess_error_text", "type": "text", "context": { "_text": "${guessError}" }, "style": { "common": { "font": "caption", "foreground": { "color": "red" } } } }, "_falseComponent": { "id": "game_guess_hint_text", "type": "text", "context": { "_text": "{{ ${won} ? 'Start a new round to play again.' : 'Whole numbers only. Range: 1 to 100.' }}" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } } }, { "id": "game_guess_buttons_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "game_guess_submit_btn", "type": "button", "context": { "_label": "{{ ${won} ? 'Round complete' : 'Check guess' }}", "_image": "sf://target" }, "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 48 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#22C55E", "#16A34A" ], "startPoint": "leading", "endPoint": "trailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 16, "font": { "kind": "headline" }, "opacity": "{{ ${won} ? 0.55 : 1.0 }}", "disabled": "${won}" } } } }, "events": { "onTap": [ { "state": { "id": "game_guess_validate", "input": { "guessError": "{{ empty(trim(${guessText})) ? 'Enter a number first.' : ((cast(${guessText}, 'int') ?? 0) < 1 || (cast(${guessText}, 'int') ?? 0) > 100 ? 'Choose a number from 1 to 100.' : '') }}", "focused": "" } } }, { "condition": { "id": "game_guess_submit_guard", "input": "{{ !${won} && empty(${guessError}) && notEmpty(trim(${guessText})) && (cast(${guessText}, 'int') ?? 0) >= 1 && (cast(${guessText}, 'int') ?? 0) <= 100 }}", "output": { "success": [ { "state": { "id": "game_guess_apply", "input": { "attempts": "{{ ${attempts} + 1 }}", "history": "{{ [ { 'value': cast(${guessText}, 'int'), 'label': ((cast(${guessText}, 'int') ?? 0) == ${target} ? 'Correct' : ((cast(${guessText}, 'int') ?? 0) < ${target} ? 'Too low' : 'Too high')) } ] + ${history} }}", "feedback": "{{ (cast(${guessText}, 'int') ?? 0) == ${target} ? 'You got it!' : ((cast(${guessText}, 'int') ?? 0) < ${target} ? 'Too low — try higher.' : 'Too high — try lower.') }}", "won": "{{ (cast(${guessText}, 'int') ?? 0) == ${target} }}", "guessText": "{{ (cast(${guessText}, 'int') ?? 0) == ${target} ? ${guessText} : '' }}", "guessError": "" } } } ] } } } ] } }, { "id": "game_guess_reset_btn", "type": "button", "context": { "_label": "New round", "_image": "sf://arrow.counterclockwise" }, "style": { "button": { "standard": { "type": "bordered", "shape": "capsule" } } }, "events": { "onTap": [ { "state": { "id": "game_guess_reset", "input": { "target": "{{ random(1, 100) }}", "guessText": "", "guessError": "", "feedback": "Pick a number from 1 to 100.", "attempts": 0, "history": [], "won": false, "focused": "" } } } ] } } ] } ] }, { "id": "game_guess_history_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "white", "dark": "#111827" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 10, "y": 4 } }, "children": [ { "id": "game_guess_history_head", "type": "label", "context": { "_title": "Guess history", "_image": "sf://clock.arrow.circlepath" }, "style": { "common": { "font": "headline", "foreground": { "light": "#111827", "dark": "white" } } } }, { "id": "game_guess_history_empty_cond", "type": "conditional", "context": { "_condition": "{{ empty(${history}) }}", "_trueComponent": { "id": "game_guess_history_empty", "type": "text", "context": { "_text": "Your guesses will appear here." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } } } }, "_falseComponent": { "id": "game_guess_history_dynamic", "type": "dynamic", "context": { "_data": "${history}" }, "prototype": { "id": "game_guess_history_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 10, "bottom": 10, "leading": 12, "trailing": 12 } }, "common": { "background": { "light": "#F3F4F6", "dark": "#1F2937" }, "cornerRadius": 14 } }, "children": [ { "id": "game_guess_history_value", "type": "text", "context": { "_text": "{{ cast(@{item.value}, 'str') }}" }, "style": { "common": { "font": { "kind": "title3", "weight": "bold" }, "foreground": { "light": "#111827", "dark": "white" } } } }, { "id": "game_guess_history_spacer", "type": "spacer" }, { "id": "game_guess_history_result", "type": "text", "context": { "_text": "@{item.label}" }, "style": { "common": { "font": "subheadline", "foreground": "{{ @{item.label} == 'Correct' ? { 'color': 'green' } : { 'color': 'secondary' } }}" } } } ] } } } } ] } ] } ] } ], "events": { "onAppear": [ { "state": { "id": "game_guess_init", "input": { "target": "{{ random(1, 100) }}", "guessText": "", "guessError": "", "feedback": "Pick a number from 1 to 100.", "attempts": 0, "history": [], "won": false, "focused": "" } } } ] } }, "children": [ { "id": "arcade_guess_card", "type": "hstack", "context": { "_spacing": 14, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "white", "dark": "#111827" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 10, "y": 4 } }, "children": [ { "id": "arcade_guess_card_icon_wrap", "type": "zstack", "style": { "layout": { "width": 56, "height": 56 } }, "children": [ { "id": "arcade_guess_card_icon_bg", "type": "circle", "style": { "layout": { "width": 56, "height": 56 }, "shape": { "fill": { "gradient": { "linear": { "colors": [ "#38BDF8", "#2563EB" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } } } } }, { "id": "arcade_guess_card_icon", "type": "image", "context": { "_source": "sf://number.circle.fill" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "white" } } } } ] }, { "id": "arcade_guess_card_texts", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "arcade_guess_card_title", "type": "text", "context": { "_text": "Guess Number" }, "style": { "common": { "font": "headline", "foreground": { "light": "#111827", "dark": "white" } } } }, { "id": "arcade_guess_card_sub", "type": "text", "context": { "_text": "Find the hidden number with higher-or-lower clues." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } }, "text": { "lineLimit": 2 } } } ] }, { "id": "arcade_guess_chevron", "type": "image", "context": { "_source": "sf://chevron.right" }, "style": { "layout": { "width": 14, "height": 14 }, "common": { "foreground": { "color": "secondary" } } } } ] } ] }, { "id": "arcade_tap_link", "type": "link", "destination": { "id": "game_tap_module", "type": "module", "version": "1.1", "context": { "title": "Tap Sprint", "icon": "⚡️", "layout": "phone" }, "state": { "timeLeft": 10, "score": 0, "running": false, "finished": false, "message": "Tap Start, then hit the target as fast as you can for 10 seconds." }, "children": [ { "id": "game_tap_root", "type": "vstack", "context": { "_spacing": 20, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": { "top": 20, "bottom": 24, "leading": 16, "trailing": 16 } }, "common": { "background": { "gradient": { "linear": { "colors": [ "#0B1020", "#3B0764", "#581C87" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "game_tap_score_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#F59E0B", "#EF4444" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 12, "y": 6 } }, "children": [ { "id": "game_tap_score_big", "type": "text", "context": { "_text": "{{ cast(${score}, 'str') }}" }, "style": { "common": { "font": { "kind": "largeTitle", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "game_tap_score_label", "type": "text", "context": { "_text": "{{ ${running} ? 'Taps so far' : (${finished} ? 'Final taps' : 'Ready?') }}" }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.86 } } } } } ] }, { "id": "game_tap_time_row", "type": "hstack", "context": { "_spacing": 12, "_alignment": "center" }, "children": [ { "id": "game_tap_time_chip", "type": "label", "context": { "_title": "{{ cast(${timeLeft}, 'str') + 's left' }}", "_image": "sf://timer" }, "style": { "layout": { "padding": { "top": 10, "bottom": 10, "leading": 14, "trailing": 14 } }, "common": { "background": { "material": "regular" }, "foreground": { "light": "#111827", "dark": "white" }, "cornerRadius": 16 } } }, { "id": "game_tap_status_chip", "type": "label", "context": { "_title": "{{ ${running} ? 'Live' : (${finished} ? 'Finished' : 'Waiting') }}", "_image": "{{ ${running} ? 'sf://bolt.fill' : (${finished} ? 'sf://flag.checkered' : 'sf://pause.fill') }}" }, "style": { "layout": { "padding": { "top": 10, "bottom": 10, "leading": 14, "trailing": 14 } }, "common": { "background": { "material": "regular" }, "foreground": { "light": "#111827", "dark": "white" }, "cornerRadius": 16 } } } ] }, { "id": "game_tap_target_btn", "type": "button", "context": { "_label": "" }, "style": { "button": { "custom": { "layout": { "width": 220, "height": 220 }, "common": { "background": { "gradient": { "linear": { "colors": [ "{{ ${running} ? '#34D399' : '#64748B' }}", "{{ ${running} ? '#0EA5E9' : '#334155' }}" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "cornerRadius": 110, "scale": "{{ ${running} ? 1.0 : 0.96 }}" } } }, "animation": { "kind": "spring", "value": "${score}", "duration": 0.25, "bounce": 0.35 } }, "children": [ { "id": "game_tap_target_stack", "type": "vstack", "context": { "_spacing": 6, "_alignment": "center" }, "children": [ { "id": "game_tap_target_icon", "type": "image", "context": { "_source": "{{ ${running} ? 'sf://hand.tap.fill' : 'sf://play.fill' }}" }, "style": { "layout": { "width": 30, "height": 30 }, "common": { "foreground": { "color": "white" } } } }, { "id": "game_tap_target_text", "type": "text", "context": { "_text": "{{ ${running} ? 'TAP!' : 'WAIT' }}" }, "style": { "common": { "font": { "kind": "title2", "weight": "bold" }, "foreground": { "color": "white" } } } } ] } ], "events": { "onTap": [ { "condition": { "id": "game_tap_target_guard", "input": "${running}", "output": { "success": [ { "state": { "id": "game_tap_increment", "input": { "score": "{{ ${score} + 1 }}" } } } ] } } } ] } }, { "id": "game_tap_message_card", "type": "text", "context": { "_text": "${message}" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "material": "regular" }, "foreground": { "light": "#111827", "dark": "white" }, "cornerRadius": 18, "font": "subheadline" }, "text": { "multilineTextAlignment": "center" } } }, { "id": "game_tap_controls_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "game_tap_start_btn", "type": "button", "context": { "_label": "{{ ${running} ? 'Running…' : (${finished} ? 'Play again' : 'Start challenge') }}", "_image": "sf://bolt.circle.fill" }, "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 48 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#22C55E", "#14B8A6" ], "startPoint": "leading", "endPoint": "trailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 16, "font": { "kind": "headline" }, "opacity": "{{ ${running} ? 0.55 : 1.0 }}", "disabled": "${running}" } } } }, "events": { "onTap": [ { "condition": { "id": "game_tap_start_guard", "input": "{{ !${running} }}", "output": { "success": [ { "state": { "id": "game_tap_start", "input": { "timeLeft": 10, "score": 0, "running": true, "finished": false, "message": "Go! Every tap counts for the next 10 seconds." }, "output": { "success": [ { "interval": { "id": "game_tap_timer", "input": { "delay": 1.0 }, "output": { "success": [ { "condition": { "id": "game_tap_tick_live_guard", "input": "${running}", "output": { "success": [ { "state": { "id": "game_tap_tick", "input": { "timeLeft": "{{ ${timeLeft} > 0 ? ${timeLeft} - 1 : 0 }}" } } } ] } } } ] } } } ] } } } ] } } } ] } }, { "id": "game_tap_stop_btn", "type": "button", "context": { "_label": "Reset", "_image": "sf://arrow.counterclockwise" }, "style": { "button": { "standard": { "type": "bordered", "shape": "capsule" } } }, "events": { "onTap": [ { "interval": { "id": "game_tap_timer", "input": { "cancel": true } } }, { "state": { "id": "game_tap_reset", "input": { "timeLeft": 10, "score": 0, "running": false, "finished": false, "message": "Tap Start, then hit the target as fast as you can for 10 seconds." } } } ] } } ] } ] } ], "events": { "onChange": { "observed": "timeLeft", "actions": [ { "condition": { "id": "game_tap_finish_guard", "input": "{{ ${running} && ${timeLeft} == 0 }}", "output": { "success": [ { "interval": { "id": "game_tap_timer", "input": { "cancel": true } } }, { "state": { "id": "game_tap_finish", "input": { "running": false, "finished": true, "message": "{{ 'Time! Final score: ' + cast(${score}, 'str') + ' taps.' }}" } } } ] } } } ] }, "onDisappear": [ { "interval": { "id": "game_tap_timer", "input": { "cancel": true } } } ] } }, "children": [ { "id": "arcade_tap_card", "type": "hstack", "context": { "_spacing": 14, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "white", "dark": "#111827" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 10, "y": 4 } }, "children": [ { "id": "arcade_tap_card_icon_wrap", "type": "zstack", "style": { "layout": { "width": 56, "height": 56 } }, "children": [ { "id": "arcade_tap_card_icon_bg", "type": "circle", "style": { "layout": { "width": 56, "height": 56 }, "shape": { "fill": { "gradient": { "linear": { "colors": [ "#F59E0B", "#EF4444" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } } } } }, { "id": "arcade_tap_card_icon", "type": "image", "context": { "_source": "sf://bolt.fill" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "white" } } } } ] }, { "id": "arcade_tap_card_texts", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "arcade_tap_card_title", "type": "text", "context": { "_text": "Tap Sprint" }, "style": { "common": { "font": "headline", "foreground": { "light": "#111827", "dark": "white" } } } }, { "id": "arcade_tap_card_sub", "type": "text", "context": { "_text": "A 10-second reflex test. Tap the big target as fast as you can." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } }, "text": { "lineLimit": 2 } } } ] }, { "id": "arcade_tap_chevron", "type": "image", "context": { "_source": "sf://chevron.right" }, "style": { "layout": { "width": 14, "height": 14 }, "common": { "foreground": { "color": "secondary" } } } } ] } ] }, { "id": "arcade_ttt_link", "type": "link", "destination": { "id": "game_ttt_module", "type": "module", "version": "1.1", "context": { "title": "Tic-Tac-Toe", "icon": "⭕️", "layout": "phone" }, "state": { "board": [ "", "", "", "", "", "", "", "", "" ], "turn": "X", "winner": "", "message": "X goes first." }, "children": [ { "id": "game_ttt_root", "type": "vstack", "context": { "_spacing": 18, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": { "top": 20, "bottom": 24, "leading": 16, "trailing": 16 } }, "common": { "background": { "gradient": { "linear": { "colors": [ "#0F172A", "#1E293B", "#0B1120" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "game_ttt_status_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#06B6D4", "#3B82F6" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "black", "opacity": 0.16 }, "radius": 12, "y": 6 } }, "children": [ { "id": "game_ttt_turn_text", "type": "text", "context": { "_text": "{{ notEmpty(${winner}) ? (${winner} == 'D' ? 'Draw game' : ${winner} + ' wins') : ${turn} + ' to move' }}" }, "style": { "common": { "font": { "kind": "title3", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "game_ttt_message_text", "type": "text", "context": { "_text": "${message}" }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.88 } } } } } ] }, { "id": "game_ttt_board_card", "type": "vstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 14 }, "common": { "background": { "material": "regular" }, "cornerRadius": 24 }, "shadow": { "color": { "color": "black", "opacity": 0.12 }, "radius": 10, "y": 4 } }, "children": [ { "id": "game_ttt_grid", "type": "grid", "context": { "_gridType": "lazyVGrid", "_spacing": 8 }, "style": { "grid": { "columns": [ { "kind": "flexible", "minimum": 80, "maximum": 110, "spacing": 8 }, { "kind": "flexible", "minimum": 80, "maximum": 110, "spacing": 8 }, { "kind": "flexible", "minimum": 80, "maximum": 110, "spacing": 8 } ] }, "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "game_ttt_cells", "type": "dynamic", "context": { "_data": "${board}" }, "prototype": { "id": "game_ttt_cell_btn", "type": "button", "context": { "_label": "", "cellIndex": "@{index}", "cellValue": "@{item}", "nextBoard": "{{ setAt(${board}, @{index}, ${turn}) }}", "n0": "{{ @{nextBoard}[0] }}", "n1": "{{ @{nextBoard}[1] }}", "n2": "{{ @{nextBoard}[2] }}", "n3": "{{ @{nextBoard}[3] }}", "n4": "{{ @{nextBoard}[4] }}", "n5": "{{ @{nextBoard}[5] }}", "n6": "{{ @{nextBoard}[6] }}", "n7": "{{ @{nextBoard}[7] }}", "n8": "{{ @{nextBoard}[8] }}", "xWin": "{{ (@{n0} == 'X' && @{n1} == 'X' && @{n2} == 'X') || (@{n3} == 'X' && @{n4} == 'X' && @{n5} == 'X') || (@{n6} == 'X' && @{n7} == 'X' && @{n8} == 'X') || (@{n0} == 'X' && @{n3} == 'X' && @{n6} == 'X') || (@{n1} == 'X' && @{n4} == 'X' && @{n7} == 'X') || (@{n2} == 'X' && @{n5} == 'X' && @{n8} == 'X') || (@{n0} == 'X' && @{n4} == 'X' && @{n8} == 'X') || (@{n2} == 'X' && @{n4} == 'X' && @{n6} == 'X') }}", "oWin": "{{ (@{n0} == 'O' && @{n1} == 'O' && @{n2} == 'O') || (@{n3} == 'O' && @{n4} == 'O' && @{n5} == 'O') || (@{n6} == 'O' && @{n7} == 'O' && @{n8} == 'O') || (@{n0} == 'O' && @{n3} == 'O' && @{n6} == 'O') || (@{n1} == 'O' && @{n4} == 'O' && @{n7} == 'O') || (@{n2} == 'O' && @{n5} == 'O' && @{n8} == 'O') || (@{n0} == 'O' && @{n4} == 'O' && @{n8} == 'O') || (@{n2} == 'O' && @{n4} == 'O' && @{n6} == 'O') }}", "drawNext": "{{ !@{xWin} && !@{oWin} && sum(map(@{nextBoard}, empty(@{item}) ? 1 : 0)) == 0 }}", "winnerNext": "{{ @{xWin} ? 'X' : (@{oWin} ? 'O' : (@{drawNext} ? 'D' : '')) }}" }, "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "height": 94 }, "common": { "background": "{{ notEmpty(@{cellValue}) ? ({ 'gradient': { 'linear': { 'colors': [@{cellValue} == 'X' ? '#22C55E' : '#F97316', @{cellValue} == 'X' ? '#16A34A' : '#EA580C'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } }) : ({ 'light': '#F8FAFC', 'dark': '#1F2937' }) }}", "cornerRadius": 18 } } } }, "children": [ { "id": "game_ttt_cell_text", "type": "text", "context": { "_text": "{{ notEmpty(@{cellValue}) ? @{cellValue} : '·' }}" }, "style": { "common": { "font": { "kind": "largeTitle", "weight": "bold" }, "foreground": "{{ notEmpty(@{cellValue}) ? { 'color': 'white' } : { 'color': 'secondary' } }}" } } } ], "events": { "onTap": [ { "condition": { "id": "game_ttt_tap_guard", "input": "{{ empty(${winner}) && empty(@{cellValue}) }}", "output": { "success": [ { "state": { "id": "game_ttt_apply_move", "input": { "board": "@{nextBoard}", "winner": "@{winnerNext}", "turn": "{{ notEmpty(@{winnerNext}) ? ${turn} : (${turn} == 'X' ? 'O' : 'X') }}", "message": "{{ @{xWin} ? 'X wins the round.' : (@{oWin} ? 'O wins the round.' : (@{drawNext} ? 'Nobody wins this one.' : (${turn} == 'X' ? 'O turn.' : 'X turn.'))) }}" } } } ] } } } ] } } } ] }, { "id": "game_ttt_note", "type": "text", "context": { "_text": "Local two-player mode on one phone: take turns tapping open cells." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } }, "text": { "multilineTextAlignment": "center" } } } ] }, { "id": "game_ttt_reset_btn", "type": "button", "context": { "_label": "New board", "_image": "sf://arrow.counterclockwise" }, "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 48 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#8B5CF6", "#6366F1" ], "startPoint": "leading", "endPoint": "trailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 16, "font": { "kind": "headline" } } } } }, "events": { "onTap": [ { "state": { "id": "game_ttt_reset", "input": { "board": [ "", "", "", "", "", "", "", "", "" ], "turn": "X", "winner": "", "message": "X goes first." } } } ] } } ] } ] }, "children": [ { "id": "arcade_ttt_card", "type": "hstack", "context": { "_spacing": 14, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "white", "dark": "#111827" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 10, "y": 4 } }, "children": [ { "id": "arcade_ttt_card_icon_wrap", "type": "zstack", "style": { "layout": { "width": 56, "height": 56 } }, "children": [ { "id": "arcade_ttt_card_icon_bg", "type": "circle", "style": { "layout": { "width": 56, "height": 56 }, "shape": { "fill": { "gradient": { "linear": { "colors": [ "#A855F7", "#3B82F6" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } } } } }, { "id": "arcade_ttt_card_icon", "type": "image", "context": { "_source": "sf://grid" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "white" } } } } ] }, { "id": "arcade_ttt_card_texts", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "arcade_ttt_card_title", "type": "text", "context": { "_text": "Tic-Tac-Toe" }, "style": { "common": { "font": "headline", "foreground": { "light": "#111827", "dark": "white" } } } }, { "id": "arcade_ttt_card_sub", "type": "text", "context": { "_text": "Classic 3×3 local match for two players on one phone." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } }, "text": { "lineLimit": 2 } } } ] }, { "id": "arcade_ttt_chevron", "type": "image", "context": { "_source": "sf://chevron.right" }, "style": { "layout": { "width": 14, "height": 14 }, "common": { "foreground": { "color": "secondary" } } } } ] } ] }, { "id": "arcade_math_link", "type": "link", "destination": { "id": "game_math_module", "type": "module", "version": "1.1", "context": { "title": "Math Dash", "icon": "➕", "layout": "phone" }, "state": { "questions": [ { "q": "12 + 7", "a": 19 }, { "q": "9 × 4", "a": 36 }, { "q": "81 ÷ 9", "a": 9 }, { "q": "15 - 8", "a": 7 }, { "q": "6 × 7", "a": 42 } ], "questionIndex": 0, "answerText": "", "answerError": "", "score": 0, "feedback": "Answer the first problem.", "finished": false, "focused": "" }, "children": [ { "id": "game_math_root", "type": "scroll", "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "scroll": { "dismissesKeyboard": "interactively" }, "common": { "background": { "gradient": { "linear": { "colors": [ "#111827", "#134E4A", "#052E16" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "game_math_stack", "type": "vstack", "context": { "_spacing": 18, "_alignment": "leading", "totalQuestions": "{{ count(${questions}) }}", "progressText": "{{ ${finished} ? 'Finished' : ('Question ' + cast(${questionIndex} + 1, 'str') + ' of ' + cast(@{totalQuestions}, 'str')) }}", "currentQuestion": "{{ ${questions}[${questionIndex}].q }}", "currentAnswer": "{{ ${questions}[${questionIndex}].a }}" }, "style": { "layout": { "padding": { "top": 18, "bottom": 28, "leading": 16, "trailing": 16 }, "maxWidth": "infinity" } }, "children": [ { "id": "game_math_score_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#10B981", "#0EA5E9" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "black", "opacity": 0.16 }, "radius": 12, "y": 6 } }, "children": [ { "id": "game_math_progress_text", "type": "text", "context": { "_text": "@{progressText}" }, "style": { "common": { "font": "headline", "foreground": { "color": "white" } } } }, { "id": "game_math_score_text", "type": "text", "context": { "_text": "{{ 'Score: ' + cast(${score}, 'str') + ' / ' + cast(@{totalQuestions}, 'str') }}" }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.88 } } } } } ] }, { "id": "game_math_main_cond", "type": "conditional", "context": { "_condition": "${finished}", "_trueComponent": { "id": "game_math_done_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "material": "regular" }, "cornerRadius": 20 } }, "children": [ { "id": "game_math_done_icon", "type": "image", "context": { "_source": "sf://brain.head.profile" }, "style": { "layout": { "width": 36, "height": 36 }, "common": { "foreground": { "color": "#10B981" } } } }, { "id": "game_math_done_score", "type": "text", "context": { "_text": "{{ cast(${score}, 'str') + ' / ' + cast(@{totalQuestions}, 'str') }}" }, "style": { "common": { "font": { "kind": "largeTitle", "weight": "bold" }, "foreground": { "light": "#111827", "dark": "white" } } } }, { "id": "game_math_done_text", "type": "text", "context": { "_text": "${feedback}" }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } } } } ] }, "_falseComponent": { "id": "game_math_question_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity", "padding": 20 }, "common": { "background": { "material": "regular" }, "cornerRadius": 20 } }, "children": [ { "id": "game_math_question_text", "type": "text", "context": { "_text": "@{currentQuestion}" }, "style": { "common": { "font": { "kind": "largeTitle", "weight": "bold" }, "foreground": { "light": "#111827", "dark": "white" } } } }, { "id": "game_math_answer_field", "type": "textfield", "context": { "_label": "Type your answer", "_text": "${answerText}", "_keyboard": "numberPad", "_focused": "${focused}", "_debounce": 0 }, "style": { "textField": { "standard": "roundedBorder" }, "common": { "foreground": { "light": "#111827", "dark": "white" }, "background": "{{ notEmpty(${answerError}) ? { 'color': { 'color': '#DC2626', 'opacity': 0.12 } } : { 'color': 'clear' } }}", "cornerRadius": 12 } } }, { "id": "game_math_error_cond", "type": "conditional", "context": { "_condition": "{{ notEmpty(${answerError}) }}", "_trueComponent": { "id": "game_math_error_text", "type": "text", "context": { "_text": "${answerError}" }, "style": { "common": { "font": "caption", "foreground": { "color": "red" } } } }, "_falseComponent": { "id": "game_math_hint_text", "type": "text", "context": { "_text": "${feedback}" }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } } } } } } ] } } }, { "id": "game_math_buttons_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "game_math_submit_btn", "type": "button", "context": { "_label": "{{ ${finished} ? 'Quiz complete' : 'Submit answer' }}", "_image": "sf://checkmark.circle.fill" }, "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 48 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#22C55E", "#059669" ], "startPoint": "leading", "endPoint": "trailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 16, "font": { "kind": "headline" }, "opacity": "{{ ${finished} ? 0.55 : 1.0 }}", "disabled": "${finished}" } } } }, "events": { "onTap": [ { "state": { "id": "game_math_validate", "input": { "answerError": "{{ empty(trim(${answerText})) ? 'Enter a number first.' : '' }}", "focused": "" } } }, { "condition": { "id": "game_math_submit_guard", "input": "{{ !${finished} && empty(${answerError}) && notEmpty(trim(${answerText})) }}", "output": { "success": [ { "state": { "id": "game_math_apply", "input": { "score": "{{ ${score} + ((cast(${answerText}, 'int') ?? 0) == @{currentAnswer} ? 1 : 0) }}", "feedback": "{{ (cast(${answerText}, 'int') ?? 0) == @{currentAnswer} ? 'Correct!' : ('Wrong — the answer was ' + cast(@{currentAnswer}, 'str') + '.') }}", "finished": "{{ ${questionIndex} + 1 >= @{totalQuestions} }}", "questionIndex": "{{ ${questionIndex} + 1 >= @{totalQuestions} ? ${questionIndex} : ${questionIndex} + 1 }}", "answerText": "", "answerError": "" } } } ] } } } ] } }, { "id": "game_math_restart_btn", "type": "button", "context": { "_label": "Restart", "_image": "sf://arrow.counterclockwise" }, "style": { "button": { "standard": { "type": "bordered", "shape": "capsule" } } }, "events": { "onTap": [ { "state": { "id": "game_math_restart", "input": { "questionIndex": 0, "answerText": "", "answerError": "", "score": 0, "feedback": "Answer the first problem.", "finished": false, "focused": "" } } } ] } } ] } ] } ] } ] }, "children": [ { "id": "arcade_math_card", "type": "hstack", "context": { "_spacing": 14, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "white", "dark": "#111827" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 10, "y": 4 } }, "children": [ { "id": "arcade_math_card_icon_wrap", "type": "zstack", "style": { "layout": { "width": 56, "height": 56 } }, "children": [ { "id": "arcade_math_card_icon_bg", "type": "circle", "style": { "layout": { "width": 56, "height": 56 }, "shape": { "fill": { "gradient": { "linear": { "colors": [ "#10B981", "#0EA5E9" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } } } } }, { "id": "arcade_math_card_icon", "type": "image", "context": { "_source": "sf://plus.forwardslash.minus" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "white" } } } } ] }, { "id": "arcade_math_card_texts", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "arcade_math_card_title", "type": "text", "context": { "_text": "Math Dash" }, "style": { "common": { "font": "headline", "foreground": { "light": "#111827", "dark": "white" } } } }, { "id": "arcade_math_card_sub", "type": "text", "context": { "_text": "Five quick arithmetic questions with instant feedback." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } }, "text": { "lineLimit": 2 } } } ] }, { "id": "arcade_math_chevron", "type": "image", "context": { "_source": "sf://chevron.right" }, "style": { "layout": { "width": 14, "height": 14 }, "common": { "foreground": { "color": "secondary" } } } } ] } ] }, { "id": "arcade_sumplete_link", "type": "link", "destination": { "id": "game_sumplete_module", "type": "module", "version": "1.1", "context": { "title": "Sumplete", "icon": "🧩", "layout": "phone" }, "state": { "grid": [ 3, 7, 2, 5, 9, 4, 1, 6, 8, 2, 5, 3, 7, 1, 4, 2, 9, 4, 6, 3, 8, 5, 1, 3, 7 ], "crossed": [ false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false ], "rowT": [ 14, 11, 9, 16, 12 ], "colT": [ 16, 13, 7, 12, 14 ] }, "children": [ { "id": "game_sumplete_root", "type": "vstack", "context": { "_spacing": 18, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": { "top": 12, "bottom": 24, "leading": 14, "trailing": 14 } }, "common": { "background": { "gradient": { "linear": { "colors": [ "#0F172A", "#111827", "#1E293B" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "game_sumplete_intro", "type": "text", "context": { "_text": "Cross out numbers so each row and column adds up to its target." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "white", "opacity": 0.78 } }, "text": { "multilineTextAlignment": "center" } } }, { "id": "game_sumplete_board_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "padding": 14 }, "common": { "background": { "light": "#F2F2F7", "dark": "#1C1C1E" }, "foreground": { "light": "#1C1C1E", "dark": "#F2F2F7" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.12 }, "radius": 10, "y": 5 } }, "children": [ { "id": "game_sumplete_board_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "top" }, "children": [ { "id": "game_sumplete_grid", "type": "grid", "context": { "_gridType": "lazyVGrid", "_spacing": 8 }, "style": { "grid": { "columns": [ { "kind": "flexible", "minimum": 40, "maximum": 60, "spacing": 8 }, { "kind": "flexible", "minimum": 40, "maximum": 60, "spacing": 8 }, { "kind": "flexible", "minimum": 40, "maximum": 60, "spacing": 8 }, { "kind": "flexible", "minimum": 40, "maximum": 60, "spacing": 8 }, { "kind": "flexible", "minimum": 40, "maximum": 60, "spacing": 8 } ] }, "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "game_sumplete_cells", "type": "dynamic", "context": { "_data": "${crossed}" }, "prototype": { "id": "game_sumplete_cell", "type": "button", "context": { "_label": "", "i": "@{index}", "xed": "@{item}" }, "style": { "layout": { "height": 52, "maxWidth": "infinity" }, "button": { "custom": { "common": { "background": "{{ @{xed} ? {'light': '#E9E9EE', 'dark': '#29292C'} : {'light': '#FFFFFF', 'dark': '#3A3A3C'} }}", "cornerRadius": 12 } } }, "common": { "overlay": { "id": "game_sumplete_cell_x", "type": "image", "context": { "_source": "sf://xmark" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": { "color": "red", "opacity": 0.85 }, "opacity": "{{ @{xed} ? 1 : 0 }}" } } }, "scale": "{{ @{xed} ? 0.93 : 1 }}" }, "animation": { "kind": "spring", "value": "@{xed}", "duration": 0.3, "bounce": 0.35 } }, "children": [ { "id": "game_sumplete_cell_num", "type": "text", "context": { "_text": "{{ ${grid}[@{i}] }}" }, "style": { "common": { "font": { "kind": "title3", "weight": "semibold" }, "foreground": "{{ @{xed} ? {'color': 'secondary'} : {'light': '#1C1C1E', 'dark': '#F2F2F7'} }}", "opacity": "{{ @{xed} ? 0.4 : 1 }}" } } } ], "events": { "onTap": [ { "state": { "id": "game_sumplete_toggle", "input": { "crossed": "{{ setAt(${crossed}, @{i}, !@{xed}) }}" } } } ] } } } ] }, { "id": "game_sumplete_row_rail", "type": "vstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "game_sumplete_row_chips", "type": "dynamic", "context": { "_data": "{{ range(5) }}" }, "prototype": { "id": "game_sumplete_rchip", "type": "vstack", "context": { "_spacing": 0, "_alignment": "center", "i": "@{index}", "cur": "{{ (${crossed}[@{index} * 5 + 0] ? 0 : ${grid}[@{index} * 5 + 0]) + (${crossed}[@{index} * 5 + 1] ? 0 : ${grid}[@{index} * 5 + 1]) + (${crossed}[@{index} * 5 + 2] ? 0 : ${grid}[@{index} * 5 + 2]) + (${crossed}[@{index} * 5 + 3] ? 0 : ${grid}[@{index} * 5 + 3]) + (${crossed}[@{index} * 5 + 4] ? 0 : ${grid}[@{index} * 5 + 4]) }}", "hit": "{{ @{cur} == ${rowT}[@{i}] }}" }, "style": { "layout": { "width": 52, "height": 52 }, "common": { "background": "{{ @{hit} ? {'color': 'green', 'opacity': 0.16} : {'light': '#E9E9EE', 'dark': '#313136'} }}", "foreground": "{{ @{hit} ? {'color': 'green'} : {'color': 'secondary'} }}", "cornerRadius": 12 }, "animation": { "kind": "spring", "value": "@{hit}", "duration": 0.35, "bounce": 0.3 } }, "children": [ { "id": "game_sumplete_rchip_cur", "type": "text", "context": { "_text": "{{ cast(@{cur}, 'str') }}" }, "style": { "common": { "font": { "kind": "caption", "weight": "semibold" } } } }, { "id": "game_sumplete_rchip_num", "type": "text", "context": { "_text": "{{ ${rowT}[@{i}] }}" }, "style": { "common": { "font": { "kind": "subheadline", "weight": "bold" } } } } ] } } ] } ] }, { "id": "game_sumplete_col_rail", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "game_sumplete_col_chips", "type": "dynamic", "context": { "_data": "{{ range(5) }}" }, "prototype": { "id": "game_sumplete_cchip", "type": "vstack", "context": { "_spacing": 0, "_alignment": "center", "i": "@{index}", "cur": "{{ (${crossed}[0 + @{index}] ? 0 : ${grid}[0 + @{index}]) + (${crossed}[5 + @{index}] ? 0 : ${grid}[5 + @{index}]) + (${crossed}[10 + @{index}] ? 0 : ${grid}[10 + @{index}]) + (${crossed}[15 + @{index}] ? 0 : ${grid}[15 + @{index}]) + (${crossed}[20 + @{index}] ? 0 : ${grid}[20 + @{index}]) }}", "hit": "{{ @{cur} == ${colT}[@{i}] }}" }, "style": { "layout": { "width": 52, "height": 52 }, "common": { "background": "{{ @{hit} ? {'color': 'green', 'opacity': 0.16} : {'light': '#E9E9EE', 'dark': '#313136'} }}", "foreground": "{{ @{hit} ? {'color': 'green'} : {'color': 'secondary'} }}", "cornerRadius": 12 }, "animation": { "kind": "spring", "value": "@{hit}", "duration": 0.35, "bounce": 0.3 } }, "children": [ { "id": "game_sumplete_cchip_cur", "type": "text", "context": { "_text": "{{ cast(@{cur}, 'str') }}" }, "style": { "common": { "font": { "kind": "caption", "weight": "semibold" } } } }, { "id": "game_sumplete_cchip_num", "type": "text", "context": { "_text": "{{ ${colT}[@{i}] }}" }, "style": { "common": { "font": { "kind": "subheadline", "weight": "bold" } } } } ] } }, { "id": "game_sumplete_corner", "type": "spacer", "style": { "layout": { "width": 52, "height": 52 } } } ] } ] }, { "id": "game_sumplete_win_cond", "type": "conditional", "context": { "_condition": "{{ sum(map(range(5), ${crossed}[0 + @{item}] ? 0 : ${grid}[0 + @{item}])) == 14 && sum(map(range(5), ${crossed}[5 + @{item}] ? 0 : ${grid}[5 + @{item}])) == 11 && sum(map(range(5), ${crossed}[10 + @{item}] ? 0 : ${grid}[10 + @{item}])) == 9 && sum(map(range(5), ${crossed}[15 + @{item}] ? 0 : ${grid}[15 + @{item}])) == 16 && sum(map(range(5), ${crossed}[20 + @{item}] ? 0 : ${grid}[20 + @{item}])) == 12 && sum(map(range(5), ${crossed}[@{item} * 5 + 0] ? 0 : ${grid}[@{item} * 5 + 0])) == 16 && sum(map(range(5), ${crossed}[@{item} * 5 + 1] ? 0 : ${grid}[@{item} * 5 + 1])) == 13 && sum(map(range(5), ${crossed}[@{item} * 5 + 2] ? 0 : ${grid}[@{item} * 5 + 2])) == 7 && sum(map(range(5), ${crossed}[@{item} * 5 + 3] ? 0 : ${grid}[@{item} * 5 + 3])) == 12 && sum(map(range(5), ${crossed}[@{item} * 5 + 4] ? 0 : ${grid}[@{item} * 5 + 4])) == 14 }}", "_trueComponent": { "id": "game_sumplete_win_card", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "padding": { "top": 12, "bottom": 12, "leading": 20, "trailing": 20 } }, "common": { "background": { "gradient": { "linear": { "colors": [ "#34C759", "#30B0C7" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 16 }, "shadow": { "color": { "color": "green", "opacity": 0.3 }, "radius": 8, "y": 4 } }, "children": [ { "id": "game_sumplete_win_icon", "type": "image", "context": { "_source": "sf://trophy.fill" }, "style": { "layout": { "width": 22, "height": 22 }, "common": { "foreground": { "color": "white" } } } }, { "id": "game_sumplete_win_text", "type": "text", "context": { "_text": "Solved!" }, "style": { "common": { "font": { "kind": "headline", "weight": "bold" }, "foreground": { "color": "white" } } } } ] } } }, { "id": "game_sumplete_reset_btn", "type": "button", "context": { "_label": "Reset board", "_image": "sf://arrow.counterclockwise" }, "style": { "button": { "standard": { "type": "borderedProminent", "shape": "capsule" } } }, "events": { "onTap": [ { "state": { "id": "game_sumplete_reset", "input": { "crossed": "{{ map(range(25), false) }}" } } } ] } } ] } ] }, "children": [ { "id": "arcade_sumplete_card", "type": "hstack", "context": { "_spacing": 14, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "white", "dark": "#111827" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 10, "y": 4 } }, "children": [ { "id": "arcade_sumplete_card_icon_wrap", "type": "zstack", "style": { "layout": { "width": 56, "height": 56 } }, "children": [ { "id": "arcade_sumplete_card_icon_bg", "type": "circle", "style": { "layout": { "width": 56, "height": 56 }, "shape": { "fill": { "gradient": { "linear": { "colors": [ "#34C759", "#0EA5E9" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } } } } }, { "id": "arcade_sumplete_card_icon", "type": "image", "context": { "_source": "sf://square.grid.3x3.fill" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "white" } } } } ] }, { "id": "arcade_sumplete_card_texts", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "arcade_sumplete_card_title", "type": "text", "context": { "_text": "Sumplete" }, "style": { "common": { "font": "headline", "foreground": { "light": "#111827", "dark": "white" } } } }, { "id": "arcade_sumplete_card_sub", "type": "text", "context": { "_text": "Cross out numbers until every row and column hits its target." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } }, "text": { "lineLimit": 2 } } } ] }, { "id": "arcade_sumplete_chevron", "type": "image", "context": { "_source": "sf://chevron.right" }, "style": { "layout": { "width": 14, "height": 14 }, "common": { "foreground": { "color": "secondary" } } } } ] } ] }, { "id": "arcade_lights_link", "type": "link", "destination": { "id": "game_lights_module", "type": "module", "version": "1.1", "context": { "title": "Lights Out", "icon": "💡", "layout": "phone" }, "state": { "cells": [ true, false, true, false, false, true, true, false, true ], "message": "Turn every tile dark." }, "children": [ { "id": "game_lights_root", "type": "vstack", "context": { "_spacing": 18, "_alignment": "center", "allOff": "{{ sum(map(${cells}, @{item} ? 1 : 0)) == 0 }}" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": { "top": 20, "bottom": 24, "leading": 16, "trailing": 16 } }, "common": { "background": { "gradient": { "linear": { "colors": [ "#111827", "#1F2937", "#000000" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "game_lights_status_card", "type": "vstack", "context": { "_spacing": 8, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#FBBF24", "#F59E0B" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 22 }, "shadow": { "color": { "color": "black", "opacity": 0.18 }, "radius": 12, "y": 6 } }, "children": [ { "id": "game_lights_status_head", "type": "text", "context": { "_text": "{{ @{allOff} ? 'Solved!' : 'Lights Out' }}" }, "style": { "common": { "font": { "kind": "title3", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "game_lights_status_msg", "type": "text", "context": { "_text": "{{ @{allOff} ? 'Every tile is dark.' : ${message} }}" }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.88 } } } } } ] }, { "id": "game_lights_board_card", "type": "vstack", "context": { "_spacing": 12, "_alignment": "center" }, "style": { "layout": { "padding": 16 }, "common": { "background": { "material": "regular" }, "cornerRadius": 24 } }, "children": [ { "id": "game_lights_grid", "type": "grid", "context": { "_gridType": "lazyVGrid", "_spacing": 10 }, "style": { "grid": { "columns": [ { "kind": "flexible", "minimum": 80, "maximum": 110, "spacing": 10 }, { "kind": "flexible", "minimum": 80, "maximum": 110, "spacing": 10 }, { "kind": "flexible", "minimum": 80, "maximum": 110, "spacing": 10 } ] }, "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "game_lights_cells_dynamic", "type": "dynamic", "context": { "_data": "${cells}" }, "prototype": { "id": "game_lights_cell_btn", "type": "button", "context": { "_label": "", "tileIndex": "@{index}", "tileOn": "@{item}", "nextCells": "{{ switch(@{index} == 0, [!${cells}[0], !${cells}[1], ${cells}[2], !${cells}[3], ${cells}[4], ${cells}[5], ${cells}[6], ${cells}[7], ${cells}[8]], @{index} == 1, [!${cells}[0], !${cells}[1], !${cells}[2], ${cells}[3], !${cells}[4], ${cells}[5], ${cells}[6], ${cells}[7], ${cells}[8]], @{index} == 2, [${cells}[0], !${cells}[1], !${cells}[2], ${cells}[3], ${cells}[4], !${cells}[5], ${cells}[6], ${cells}[7], ${cells}[8]], @{index} == 3, [!${cells}[0], ${cells}[1], ${cells}[2], !${cells}[3], !${cells}[4], ${cells}[5], !${cells}[6], ${cells}[7], ${cells}[8]], @{index} == 4, [${cells}[0], !${cells}[1], ${cells}[2], !${cells}[3], !${cells}[4], !${cells}[5], ${cells}[6], !${cells}[7], ${cells}[8]], @{index} == 5, [${cells}[0], ${cells}[1], !${cells}[2], ${cells}[3], !${cells}[4], !${cells}[5], ${cells}[6], ${cells}[7], !${cells}[8]], @{index} == 6, [${cells}[0], ${cells}[1], ${cells}[2], !${cells}[3], ${cells}[4], ${cells}[5], !${cells}[6], !${cells}[7], ${cells}[8]], @{index} == 7, [${cells}[0], ${cells}[1], ${cells}[2], ${cells}[3], !${cells}[4], ${cells}[5], !${cells}[6], !${cells}[7], !${cells}[8]], [${cells}[0], ${cells}[1], ${cells}[2], ${cells}[3], ${cells}[4], !${cells}[5], ${cells}[6], !${cells}[7], !${cells}[8]]) }}" }, "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "height": 94 }, "common": { "background": "{{ @{tileOn} ? ({ 'gradient': { 'linear': { 'colors': ['#FDE68A', '#F59E0B'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } }) : ({ 'light': '#D1D5DB', 'dark': '#1F2937' }) }}", "cornerRadius": 20, "scale": "{{ @{tileOn} ? 1.0 : 0.96 }}" } } }, "animation": { "kind": "spring", "value": "@{tileOn}", "duration": 0.25, "bounce": 0.35 } }, "children": [ { "id": "game_lights_cell_icon", "type": "image", "context": { "_source": "{{ @{tileOn} ? 'sf://lightbulb.fill' : 'sf://lightbulb' }}" }, "style": { "layout": { "width": 26, "height": 26 }, "common": { "foreground": "{{ @{tileOn} ? { 'color': 'white' } : { 'color': 'secondary' } }}" } } } ], "events": { "onTap": [ { "state": { "id": "game_lights_move", "input": { "cells": "@{nextCells}", "message": "Tap a tile to flip it and its neighbors." } } } ] } } } ] }, { "id": "game_lights_note", "type": "text", "context": { "_text": "Each tap flips one tile plus its up/down/left/right neighbors." }, "style": { "common": { "font": "caption", "foreground": { "color": "secondary" } }, "text": { "multilineTextAlignment": "center" } } } ] }, { "id": "game_lights_reset_btn", "type": "button", "context": { "_label": "Reset puzzle", "_image": "sf://arrow.counterclockwise" }, "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 48 }, "common": { "background": { "gradient": { "linear": { "colors": [ "#F59E0B", "#D97706" ], "startPoint": "leading", "endPoint": "trailing" } } }, "foreground": { "color": "white" }, "cornerRadius": 16, "font": { "kind": "headline" } } } } }, "events": { "onTap": [ { "state": { "id": "game_lights_reset", "input": { "cells": [ true, false, true, false, true, false, true, false, true ], "message": "Turn every tile dark." } } } ] } } ] } ] }, "children": [ { "id": "arcade_lights_card", "type": "hstack", "context": { "_spacing": 14, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": 18 }, "common": { "background": { "light": "white", "dark": "#111827" }, "cornerRadius": 20 }, "shadow": { "color": { "color": "black", "opacity": 0.1 }, "radius": 10, "y": 4 } }, "children": [ { "id": "arcade_lights_card_icon_wrap", "type": "zstack", "style": { "layout": { "width": 56, "height": 56 } }, "children": [ { "id": "arcade_lights_card_icon_bg", "type": "circle", "style": { "layout": { "width": 56, "height": 56 }, "shape": { "fill": { "gradient": { "linear": { "colors": [ "#FBBF24", "#F59E0B" ], "startPoint": "topLeading", "endPoint": "bottomTrailing" } } } } } }, { "id": "arcade_lights_card_icon", "type": "image", "context": { "_source": "sf://lightbulb.fill" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "white" } } } } ] }, { "id": "arcade_lights_card_texts", "type": "vstack", "context": { "_spacing": 4, "_alignment": "leading" }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "arcade_lights_card_title", "type": "text", "context": { "_text": "Lights Out" }, "style": { "common": { "font": "headline", "foreground": { "light": "#111827", "dark": "white" } } } }, { "id": "arcade_lights_card_sub", "type": "text", "context": { "_text": "A tiny logic puzzle: flip tiles until the board goes dark." }, "style": { "common": { "font": "subheadline", "foreground": { "color": "secondary" } }, "text": { "lineLimit": 2 } } } ] }, { "id": "arcade_lights_chevron", "type": "image", "context": { "_source": "sf://chevron.right" }, "style": { "layout": { "width": 14, "height": 14 }, "common": { "foreground": { "color": "secondary" } } } } ] } ] } ] } ] } ] } ] }