{ "id": "mod_fifteen_puzzle", "type": "module", "version": "1.0", "context": { "title": "П'ятнашки", "icon": "🔢", "layout": "phone" }, "state": { "tiles": [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 0 ], "moves": 0, "seconds": 0, "running": false, "solved": false, "showStats": false, "bestMoves": 0, "bestTime": 0, "hasBestMoves": false, "hasBestTime": false, "gamesPlayed": 0, "showNewRecord": false, "newRecordText": "", "focused": "" }, "dependencies": [ { "repository": { "local": { "id": "puzzle_local", "config": {} } } }, { "service": { "audio": { "id": "puzzle_audio" } } } ], "children": [ { "id": "root_zstack", "type": "zstack", "context": { "_alignment": "top" }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" } }, "children": [ { "id": "main_vstack", "type": "vstack", "context": { "_spacing": 0 }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity" }, "common": { "background": { "gradient": { "linear": { "colors": [ "#0F0C29", "#302B63", "#202040" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "stats_bar", "type": "hstack", "context": { "_spacing": 12, "_alignment": "center" }, "style": { "layout": { "maxWidth": "infinity", "padding": { "horizontal": 20, "top": 16, "bottom": 8 } } }, "children": [ { "id": "moves_card", "type": "vstack", "context": { "_spacing": 2 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 10, "horizontal": 14 } }, "common": { "background": { "color": { "color": "white", "opacity": 0.08 } }, "cornerRadius": 14 } }, "children": [ { "id": "moves_icon_row", "type": "hstack", "context": { "_spacing": 6, "_alignment": "center" }, "children": [ { "id": "moves_icon", "type": "image", "context": { "_source": "sf://hand.tap.fill" }, "style": { "layout": { "width": 14, "height": 14 }, "common": { "foreground": { "color": "#A78BFA" } } } }, { "id": "moves_label", "type": "text", "context": { "_text": "ХОДИ" }, "style": { "common": { "font": { "kind": "system", "size": 10 }, "foreground": { "color": { "color": "white", "opacity": 0.5 } } } } } ] }, { "id": "moves_value", "type": "text", "context": { "_text": "{{ cast(${moves}, 'str') }}" }, "style": { "common": { "font": { "kind": "title2", "weight": "bold" }, "foreground": { "color": "white" } } } } ] }, { "id": "timer_card", "type": "vstack", "context": { "_spacing": 2 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 10, "horizontal": 14 } }, "common": { "background": { "color": { "color": "white", "opacity": 0.08 } }, "cornerRadius": 14 } }, "children": [ { "id": "timer_icon_row", "type": "hstack", "context": { "_spacing": 6, "_alignment": "center" }, "children": [ { "id": "timer_icon", "type": "image", "context": { "_source": "sf://timer" }, "style": { "layout": { "width": 14, "height": 14 }, "common": { "foreground": { "color": "#34D399" } } } }, { "id": "timer_label", "type": "text", "context": { "_text": "ЧАС" }, "style": { "common": { "font": { "kind": "system", "size": 10 }, "foreground": { "color": { "color": "white", "opacity": 0.5 } } } } } ] }, { "id": "timer_value", "type": "text", "context": { "_text": "{{ cast(${seconds} / 60, 'int') + ':' + (${seconds} % 60 < 10 ? '0' + cast(${seconds} % 60, 'str') : cast(${seconds} % 60, 'str')) }}" }, "style": { "common": { "font": { "kind": "title2", "weight": "bold" }, "foreground": { "color": "white" } } } } ] }, { "id": "best_card", "type": "vstack", "context": { "_spacing": 2 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 10, "horizontal": 14 } }, "common": { "background": { "color": { "color": "white", "opacity": 0.08 } }, "cornerRadius": 14 } }, "children": [ { "id": "best_icon_row", "type": "hstack", "context": { "_spacing": 6, "_alignment": "center" }, "children": [ { "id": "best_icon", "type": "image", "context": { "_source": "sf://trophy.fill" }, "style": { "layout": { "width": 14, "height": 14 }, "common": { "foreground": { "color": "#FBBF24" } } } }, { "id": "best_label", "type": "text", "context": { "_text": "РЕКОРД" }, "style": { "common": { "font": { "kind": "system", "size": 10 }, "foreground": { "color": { "color": "white", "opacity": 0.5 } } } } } ] }, { "id": "best_value", "type": "text", "context": { "_text": "{{ ${hasBestMoves} ? cast(${bestMoves}, 'str') + ' хд' : '—' }}" }, "style": { "common": { "font": { "kind": "title2", "weight": "bold" }, "foreground": { "color": "white" } } } } ] } ] }, { "id": "board_container", "type": "vstack", "context": { "_spacing": 0 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "horizontal": 16, "top": 12, "bottom": 12 } }, "common": { "opacity": "{{ ${solved} ? 0.6 : 1.0 }}" }, "animation": { "kind": "easeOut", "value": "${solved}", "duration": 0.3 } }, "children": [ { "id": "row_0", "type": "hstack", "context": { "_spacing": 6 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "bottom": 6 } } }, "children": [ { "id": "t0", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[0] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#6366F1', '#4F46E5'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "shadow": "{{ ${tiles}[0] == 0 ? {} : { 'color': '#6366F1', 'radius': 6, 'x': 0, 'y': 3, 'opacity': 0.4 } }}", "opacity": "{{ ${tiles}[0] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t0_text", "type": "text", "context": { "_text": "{{ ${tiles}[0] == 0 ? '' : cast(${tiles}[0], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t0", "input": "{{ ${tiles}[0] != 0 && (${tiles}[1] == 0 || ${tiles}[4] == 0) }}", "output": { "success": [ { "state": { "id": "move_t0", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 0 ? 0 : (@{item} == 0 ? ${tiles}[0] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 0 ? 0 : (@{item} == 0 ? ${tiles}[0] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t0", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t1", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[1] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#6366F1', '#4F46E5'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[1] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t1_text", "type": "text", "context": { "_text": "{{ ${tiles}[1] == 0 ? '' : cast(${tiles}[1], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t1", "input": "{{ ${tiles}[1] != 0 && (${tiles}[0] == 0 || ${tiles}[2] == 0 || ${tiles}[5] == 0) }}", "output": { "success": [ { "state": { "id": "move_t1", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 1 ? 0 : (@{item} == 0 ? ${tiles}[1] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 1 ? 0 : (@{item} == 0 ? ${tiles}[1] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t1", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t2", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[2] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#6366F1', '#4F46E5'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[2] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t2_text", "type": "text", "context": { "_text": "{{ ${tiles}[2] == 0 ? '' : cast(${tiles}[2], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t2", "input": "{{ ${tiles}[2] != 0 && (${tiles}[1] == 0 || ${tiles}[3] == 0 || ${tiles}[6] == 0) }}", "output": { "success": [ { "state": { "id": "move_t2", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 2 ? 0 : (@{item} == 0 ? ${tiles}[2] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 2 ? 0 : (@{item} == 0 ? ${tiles}[2] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t2", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t3", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[3] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#6366F1', '#4F46E5'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[3] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t3_text", "type": "text", "context": { "_text": "{{ ${tiles}[3] == 0 ? '' : cast(${tiles}[3], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t3", "input": "{{ ${tiles}[3] != 0 && (${tiles}[2] == 0 || ${tiles}[7] == 0) }}", "output": { "success": [ { "state": { "id": "move_t3", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 3 ? 0 : (@{item} == 0 ? ${tiles}[3] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 3 ? 0 : (@{item} == 0 ? ${tiles}[3] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t3", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } } ] }, { "id": "row_1", "type": "hstack", "context": { "_spacing": 6 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "bottom": 6 } } }, "children": [ { "id": "t4", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[4] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#8B5CF6', '#7C3AED'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[4] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t4_text", "type": "text", "context": { "_text": "{{ ${tiles}[4] == 0 ? '' : cast(${tiles}[4], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t4", "input": "{{ ${tiles}[4] != 0 && (${tiles}[0] == 0 || ${tiles}[5] == 0 || ${tiles}[8] == 0) }}", "output": { "success": [ { "state": { "id": "move_t4", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 4 ? 0 : (@{item} == 0 ? ${tiles}[4] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 4 ? 0 : (@{item} == 0 ? ${tiles}[4] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t4", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t5", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[5] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#8B5CF6', '#7C3AED'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[5] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t5_text", "type": "text", "context": { "_text": "{{ ${tiles}[5] == 0 ? '' : cast(${tiles}[5], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t5", "input": "{{ ${tiles}[5] != 0 && (${tiles}[4] == 0 || ${tiles}[6] == 0 || ${tiles}[1] == 0 || ${tiles}[9] == 0) }}", "output": { "success": [ { "state": { "id": "move_t5", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 5 ? 0 : (@{item} == 0 ? ${tiles}[5] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 5 ? 0 : (@{item} == 0 ? ${tiles}[5] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t5", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t6", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[6] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#8B5CF6', '#7C3AED'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[6] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t6_text", "type": "text", "context": { "_text": "{{ ${tiles}[6] == 0 ? '' : cast(${tiles}[6], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t6", "input": "{{ ${tiles}[6] != 0 && (${tiles}[5] == 0 || ${tiles}[7] == 0 || ${tiles}[2] == 0 || ${tiles}[10] == 0) }}", "output": { "success": [ { "state": { "id": "move_t6", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 6 ? 0 : (@{item} == 0 ? ${tiles}[6] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 6 ? 0 : (@{item} == 0 ? ${tiles}[6] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t6", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t7", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[7] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#8B5CF6', '#7C3AED'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[7] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t7_text", "type": "text", "context": { "_text": "{{ ${tiles}[7] == 0 ? '' : cast(${tiles}[7], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t7", "input": "{{ ${tiles}[7] != 0 && (${tiles}[6] == 0 || ${tiles}[3] == 0 || ${tiles}[11] == 0) }}", "output": { "success": [ { "state": { "id": "move_t7", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 7 ? 0 : (@{item} == 0 ? ${tiles}[7] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 7 ? 0 : (@{item} == 0 ? ${tiles}[7] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t7", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } } ] }, { "id": "row_2", "type": "hstack", "context": { "_spacing": 6 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "bottom": 6 } } }, "children": [ { "id": "t8", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[8] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#EC4899', '#BE185D'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[8] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t8_text", "type": "text", "context": { "_text": "{{ ${tiles}[8] == 0 ? '' : cast(${tiles}[8], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t8", "input": "{{ ${tiles}[8] != 0 && (${tiles}[4] == 0 || ${tiles}[9] == 0 || ${tiles}[12] == 0) }}", "output": { "success": [ { "state": { "id": "move_t8", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 8 ? 0 : (@{item} == 0 ? ${tiles}[8] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 8 ? 0 : (@{item} == 0 ? ${tiles}[8] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t8", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t9", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[9] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#EC4899', '#BE185D'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[9] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t9_text", "type": "text", "context": { "_text": "{{ ${tiles}[9] == 0 ? '' : cast(${tiles}[9], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t9", "input": "{{ ${tiles}[9] != 0 && (${tiles}[8] == 0 || ${tiles}[10] == 0 || ${tiles}[5] == 0 || ${tiles}[13] == 0) }}", "output": { "success": [ { "state": { "id": "move_t9", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 9 ? 0 : (@{item} == 0 ? ${tiles}[9] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 9 ? 0 : (@{item} == 0 ? ${tiles}[9] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t9", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t10", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[10] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#EC4899', '#BE185D'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[10] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t10_text", "type": "text", "context": { "_text": "{{ ${tiles}[10] == 0 ? '' : cast(${tiles}[10], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t10", "input": "{{ ${tiles}[10] != 0 && (${tiles}[9] == 0 || ${tiles}[11] == 0 || ${tiles}[6] == 0 || ${tiles}[14] == 0) }}", "output": { "success": [ { "state": { "id": "move_t10", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 10 ? 0 : (@{item} == 0 ? ${tiles}[10] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 10 ? 0 : (@{item} == 0 ? ${tiles}[10] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t10", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t11", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[11] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#EC4899', '#BE185D'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[11] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t11_text", "type": "text", "context": { "_text": "{{ ${tiles}[11] == 0 ? '' : cast(${tiles}[11], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t11", "input": "{{ ${tiles}[11] != 0 && (${tiles}[10] == 0 || ${tiles}[7] == 0 || ${tiles}[15] == 0) }}", "output": { "success": [ { "state": { "id": "move_t11", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 11 ? 0 : (@{item} == 0 ? ${tiles}[11] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 11 ? 0 : (@{item} == 0 ? ${tiles}[11] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t11", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } } ] }, { "id": "row_3", "type": "hstack", "context": { "_spacing": 6 }, "style": { "layout": { "maxWidth": "infinity" } }, "children": [ { "id": "t12", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[12] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#F59E0B', '#D97706'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[12] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t12_text", "type": "text", "context": { "_text": "{{ ${tiles}[12] == 0 ? '' : cast(${tiles}[12], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t12", "input": "{{ ${tiles}[12] != 0 && (${tiles}[8] == 0 || ${tiles}[13] == 0) }}", "output": { "success": [ { "state": { "id": "move_t12", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 12 ? 0 : (@{item} == 0 ? ${tiles}[12] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 12 ? 0 : (@{item} == 0 ? ${tiles}[12] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t12", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t13", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[13] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#F59E0B', '#D97706'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[13] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t13_text", "type": "text", "context": { "_text": "{{ ${tiles}[13] == 0 ? '' : cast(${tiles}[13], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t13", "input": "{{ ${tiles}[13] != 0 && (${tiles}[12] == 0 || ${tiles}[14] == 0 || ${tiles}[9] == 0) }}", "output": { "success": [ { "state": { "id": "move_t13", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 13 ? 0 : (@{item} == 0 ? ${tiles}[13] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 13 ? 0 : (@{item} == 0 ? ${tiles}[13] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t13", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t14", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[14] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#F59E0B', '#D97706'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[14] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t14_text", "type": "text", "context": { "_text": "{{ ${tiles}[14] == 0 ? '' : cast(${tiles}[14], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t14", "input": "{{ ${tiles}[14] != 0 && (${tiles}[13] == 0 || ${tiles}[15] == 0 || ${tiles}[10] == 0) }}", "output": { "success": [ { "state": { "id": "move_t14", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 14 ? 0 : (@{item} == 0 ? ${tiles}[14] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 14 ? 0 : (@{item} == 0 ? ${tiles}[14] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t14", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } }, { "id": "t15", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 76 }, "common": { "cornerRadius": 14, "background": "{{ ${tiles}[15] == 0 ? { 'color': 'clear' } : { 'gradient': { 'linear': { 'colors': ['#F59E0B', '#D97706'], 'startPoint': 'topLeading', 'endPoint': 'bottomTrailing' } } } }}", "opacity": "{{ ${tiles}[15] == 0 ? 0.0 : 1.0 }}" }, "animation": { "kind": "spring", "value": "${tiles}", "duration": 0.25, "bounce": 0.2 } } } }, "children": [ { "id": "t15_text", "type": "text", "context": { "_text": "{{ ${tiles}[15] == 0 ? '' : cast(${tiles}[15], 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "condition": { "id": "can_move_t15", "input": "{{ ${tiles}[15] != 0 && (${tiles}[14] == 0 || ${tiles}[11] == 0) }}", "output": { "success": [ { "state": { "id": "move_t15", "input": { "moves": "{{ ${moves} + 1 }}", "running": true, "tiles": "{{ map(${tiles}, @{index} == 15 ? 0 : (@{item} == 0 ? ${tiles}[15] : @{item})) }}", "solved": "{{ map(${tiles}, @{index} == 15 ? 0 : (@{item} == 0 ? ${tiles}[15] : @{item})) == [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,0] }}" } } }, { "service": { "id": "tap_t15", "input": { "serviceId": "puzzle_audio", "params": { "sound": "keyPress", "haptic": "light" } } } } ] } } } ] } } ] } ] }, { "id": "solved_banner", "type": "conditional", "context": { "_condition": "${solved}", "_trueComponent": { "id": "solved_card", "type": "vstack", "context": { "_spacing": 8 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 18, "horizontal": 20 } }, "common": { "background": { "gradient": { "linear": { "colors": [ "#34D399", "#059669" ], "startPoint": "leading", "endPoint": "trailing" } } }, "cornerRadius": 18 }, "animation": { "kind": "spring", "value": "${solved}", "duration": 0.5, "bounce": 0.3 } }, "children": [ { "id": "solved_row", "type": "hstack", "context": { "_spacing": 10, "_alignment": "center" }, "children": [ { "id": "solved_icon", "type": "image", "context": { "_source": "sf://checkmark.seal.fill" }, "style": { "layout": { "width": 32, "height": 32 }, "common": { "foreground": { "color": "white" } } } }, { "id": "solved_col", "type": "vstack", "context": { "_spacing": 2, "_alignment": "leading" }, "children": [ { "id": "solved_title", "type": "text", "context": { "_text": "Розв'язано! 🎉" }, "style": { "common": { "font": { "kind": "headline", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "solved_sub", "type": "text", "context": { "_text": "{{ cast(${moves}, 'str') + ' ходів · ' + cast(${seconds} / 60, 'int') + ':' + (${seconds} % 60 < 10 ? '0' + cast(${seconds} % 60, 'str') : cast(${seconds} % 60, 'str')) }}" }, "style": { "common": { "font": "subheadline", "foreground": { "color": { "color": "white", "opacity": 0.85 } } } } } ] }, { "id": "solved_sp", "type": "spacer" }, { "id": "record_badge", "type": "conditional", "context": { "_condition": "${showNewRecord}", "_trueComponent": { "id": "record_chip", "type": "text", "context": { "_text": "🏆 Рекорд!" }, "style": { "layout": { "padding": { "vertical": 6, "horizontal": 12 } }, "common": { "font": { "kind": "caption", "weight": "bold" }, "foreground": { "color": "#D97706" }, "background": { "color": "white" }, "cornerRadius": 10 } } }, "_falseComponent": { "id": "no_record", "type": "empty" } } } ] } ] }, "_falseComponent": { "id": "no_solved", "type": "empty" } } }, { "id": "action_bar", "type": "hstack", "context": { "_spacing": 10 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "horizontal": 16, "top": 8, "bottom": 20 } } }, "children": [ { "id": "shuffle_btn", "type": "button", "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 52 }, "common": { "foreground": { "color": "white" }, "cornerRadius": 16, "background": { "gradient": { "linear": { "colors": [ "#6366F1", "#8B5CF6" ], "startPoint": "leading", "endPoint": "trailing" } } }, "font": { "kind": "headline" } }, "shadow": { "color": "#6366F1", "radius": 8, "x": 0, "y": 4, "opacity": 0.4 } } } }, "children": [ { "id": "shuffle_row", "type": "hstack", "context": { "_spacing": 8, "_alignment": "center" }, "children": [ { "id": "shuffle_icon", "type": "image", "context": { "_source": "sf://shuffle" }, "style": { "layout": { "width": 18, "height": 18 }, "common": { "foreground": { "color": "white" } } } }, { "id": "shuffle_label", "type": "text", "context": { "_text": "Нова гра" }, "style": { "common": { "font": { "kind": "headline" }, "foreground": { "color": "white" } } } } ] } ], "events": { "onTap": [ { "state": { "id": "new_game", "input": { "tiles": [ 2, 8, 3, 4, 1, 6, 7, 12, 5, 10, 11, 15, 9, 13, 14, 0 ], "moves": 0, "seconds": 0, "running": false, "solved": false, "showNewRecord": false } } }, { "interval": { "id": "game_timer", "input": { "cancel": true } } }, { "service": { "id": "shuffle_haptic", "input": { "serviceId": "puzzle_audio", "params": { "sound": "lock", "haptic": "medium" } } } } ] } }, { "id": "stats_btn", "type": "button", "style": { "button": { "custom": { "layout": { "width": 52, "height": 52 }, "common": { "foreground": { "color": "white" }, "cornerRadius": 16, "background": { "color": { "color": "white", "opacity": 0.12 } } } } } }, "children": [ { "id": "stats_icon", "type": "image", "context": { "_source": "sf://chart.bar.fill" }, "style": { "layout": { "width": 22, "height": 22 }, "common": { "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "state": { "id": "open_stats", "input": { "showStats": true } } } ] } } ] } ] }, { "id": "toast_overlay", "type": "vstack", "style": { "layout": { "maxWidth": "infinity", "padding": { "top": 10, "horizontal": 40 } }, "common": { "opacity": "{{ ${showNewRecord} ? 1.0 : 0.0 }}", "scale": "{{ ${showNewRecord} ? 1.0 : 0.8 }}" }, "animation": { "kind": "spring", "value": "${showNewRecord}", "duration": 0.4, "bounce": 0.35 } }, "children": [] } ] } ], "style": { "modal": { "sheet": { "isPresented": "${showStats}", "content": { "id": "stats_sheet", "type": "vstack", "context": { "_spacing": 20 }, "style": { "layout": { "maxWidth": "infinity", "maxHeight": "infinity", "padding": { "horizontal": 24, "top": 32, "bottom": 32 } }, "common": { "background": { "gradient": { "linear": { "colors": [ "#0F0C29", "#302B63" ], "startPoint": "top", "endPoint": "bottom" } } } } }, "children": [ { "id": "stats_header", "type": "hstack", "context": { "_spacing": 0, "_alignment": "center" }, "children": [ { "id": "stats_title_icon", "type": "image", "context": { "_source": "sf://chart.bar.xaxis" }, "style": { "layout": { "width": 28, "height": 28 }, "common": { "foreground": { "color": "#FBBF24" } } } }, { "id": "stats_gap", "type": "spacer", "style": { "layout": { "width": 10 } } }, { "id": "stats_sheet_title", "type": "text", "context": { "_text": "Статистика" }, "style": { "common": { "font": { "kind": "title2", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "stats_sp", "type": "spacer" }, { "id": "stats_close", "type": "button", "style": { "button": { "custom": { "layout": { "width": 36, "height": 36 }, "common": { "cornerRadius": 18, "background": { "color": { "color": "white", "opacity": 0.12 } } } } } }, "children": [ { "id": "stats_close_icon", "type": "image", "context": { "_source": "sf://xmark" }, "style": { "layout": { "width": 12, "height": 12 }, "common": { "foreground": { "color": "white" } } } } ], "events": { "onTap": [ { "state": { "id": "close_stats", "input": { "showStats": false } } } ] } } ] }, { "id": "stats_div", "type": "divider" }, { "id": "stats_grid", "type": "vstack", "context": { "_spacing": 12 }, "children": [ { "id": "stats_row1", "type": "hstack", "context": { "_spacing": 12 }, "children": [ { "id": "stat_games", "type": "vstack", "context": { "_spacing": 6 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 16, "horizontal": 14 } }, "common": { "background": { "color": { "color": "white", "opacity": 0.08 } }, "cornerRadius": 16 } }, "children": [ { "id": "stat_games_icon", "type": "image", "context": { "_source": "sf://gamecontroller.fill" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "#6366F1" } } } }, { "id": "stat_games_val", "type": "text", "context": { "_text": "{{ cast(${gamesPlayed}, 'str') }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "stat_games_lbl", "type": "text", "context": { "_text": "Ігор зіграно" }, "style": { "common": { "font": "caption", "foreground": { "color": { "color": "white", "opacity": 0.55 } } } } } ] }, { "id": "stat_bestmoves", "type": "vstack", "context": { "_spacing": 6 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 16, "horizontal": 14 } }, "common": { "background": { "color": { "color": "white", "opacity": 0.08 } }, "cornerRadius": 16 } }, "children": [ { "id": "stat_bm_icon", "type": "image", "context": { "_source": "sf://hand.tap.fill" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "#A78BFA" } } } }, { "id": "stat_bm_val", "type": "text", "context": { "_text": "{{ ${hasBestMoves} ? cast(${bestMoves}, 'str') : '—' }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "stat_bm_lbl", "type": "text", "context": { "_text": "Найменше ходів" }, "style": { "common": { "font": "caption", "foreground": { "color": { "color": "white", "opacity": 0.55 } } } } } ] } ] }, { "id": "stats_row2", "type": "hstack", "context": { "_spacing": 12 }, "children": [ { "id": "stat_besttime", "type": "vstack", "context": { "_spacing": 6 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 16, "horizontal": 14 } }, "common": { "background": { "color": { "color": "white", "opacity": 0.08 } }, "cornerRadius": 16 } }, "children": [ { "id": "stat_bt_icon", "type": "image", "context": { "_source": "sf://timer" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "#34D399" } } } }, { "id": "stat_bt_val", "type": "text", "context": { "_text": "{{ ${hasBestTime} ? (cast(${bestTime} / 60, 'int') + ':' + (${bestTime} % 60 < 10 ? '0' + cast(${bestTime} % 60, 'str') : cast(${bestTime} % 60, 'str'))) : '—' }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "stat_bt_lbl", "type": "text", "context": { "_text": "Найшвидший час" }, "style": { "common": { "font": "caption", "foreground": { "color": { "color": "white", "opacity": 0.55 } } } } } ] }, { "id": "stat_current", "type": "vstack", "context": { "_spacing": 6 }, "style": { "layout": { "maxWidth": "infinity", "padding": { "vertical": 16, "horizontal": 14 } }, "common": { "background": { "color": { "color": "white", "opacity": 0.08 } }, "cornerRadius": 16 } }, "children": [ { "id": "stat_cur_icon", "type": "image", "context": { "_source": "sf://bolt.fill" }, "style": { "layout": { "width": 24, "height": 24 }, "common": { "foreground": { "color": "#FBBF24" } } } }, { "id": "stat_cur_val", "type": "text", "context": { "_text": "{{ cast(${moves}, 'str') + ' хд' }}" }, "style": { "common": { "font": { "kind": "title", "weight": "bold" }, "foreground": { "color": "white" } } } }, { "id": "stat_cur_lbl", "type": "text", "context": { "_text": "Поточна гра" }, "style": { "common": { "font": "caption", "foreground": { "color": { "color": "white", "opacity": 0.55 } } } } } ] } ] } ] }, { "id": "stats_sp2", "type": "spacer" }, { "id": "stats_reset_btn", "type": "button", "context": { "_label": "Скинути статистику" }, "style": { "button": { "custom": { "layout": { "maxWidth": "infinity", "minHeight": 48 }, "common": { "foreground": { "color": "#EF4444" }, "cornerRadius": 14, "background": { "color": { "color": "white", "opacity": 0.06 } }, "font": { "kind": "subheadline", "weight": "semibold" } } } } }, "events": { "onTap": [ { "state": { "id": "reset_stats", "input": { "bestMoves": 0, "bestTime": 0, "hasBestMoves": false, "hasBestTime": false, "gamesPlayed": 0 }, "output": { "success": [ { "repo": { "id": "delete_stats", "input": { "repositoryId": "puzzle_local", "operation": "delete", "params": { "collection": "stats", "documentId": "best" } } } }, { "service": { "id": "reset_haptic", "input": { "serviceId": "puzzle_audio", "params": { "sound": "none", "haptic": "warning" } } } } ] } } } ] } } ] } } } }, "events": { "onAppear": [ { "repo": { "id": "load_stats", "input": { "repositoryId": "puzzle_local", "operation": "read", "params": { "collection": "stats", "documentId": "best" } }, "output": { "success": [ { "state": { "id": "restore_stats", "input": { "bestMoves": "@{load_stats.bestMoves}", "bestTime": "@{load_stats.bestTime}", "hasBestMoves": "@{load_stats.hasBestMoves}", "hasBestTime": "@{load_stats.hasBestTime}", "gamesPlayed": "@{load_stats.gamesPlayed}" } } } ] } } } ], "onChange": { "observed": "running", "actions": [ { "condition": { "id": "check_running", "input": "${running}", "output": { "success": [ { "interval": { "id": "game_timer", "input": { "delay": 1 }, "output": { "success": [ { "condition": { "id": "timer_check_solved", "input": "{{ !${solved} }}", "output": { "success": [ { "state": { "id": "tick", "input": { "seconds": "{{ ${seconds} + 1 }}" } } } ] } } } ] } } } ], "failure": [ { "interval": { "id": "game_timer", "input": { "cancel": true } } } ] } } } ] } } }