{"app":{"id":15,"summary":"Tic Tac Toe","versions":[56],"created_by":"adam186","created_at":"2023-04-12T15:08:34.371Z","votes":0,"approved":false,"apps":[],"app_type":"openapp","external_embed_url":null,"value":{"css":{"app":{"grid":{"class":"","style":""},"viewer":{"class":"","style":""},"component":{"class":"","style":""}}},"grid":[{"3":{"h":1,"w":1,"x":0,"y":8,"fixed":false},"12":{"h":1,"w":4,"x":4,"y":0,"id":"d","fixed":false},"id":"d","data":{"id":"d","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Title"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"${state?.winner ? state.winner + ' won!' : ' '}","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"center","horizontalAlignment":"center"}},{"3":{"h":8,"w":2,"x":0,"y":9,"fixed":false},"12":{"h":4,"w":4,"x":0,"y":1,"id":"m","fixed":false},"id":"m","data":{"id":"m","type":"containercomponent","customCss":{},"configuration":{},"numberOfSubgrids":1}},{"3":{"h":8,"w":2,"x":0,"y":0,"fixed":false},"12":{"h":10,"w":4,"x":4,"y":1,"id":"a","fixed":false},"id":"a","data":{"id":"a","type":"containercomponent","customCss":{"container":{"class":"rounded-xl bg-gray-200","style":""}},"configuration":{},"numberOfSubgrids":1}},{"3":{"h":1,"w":1,"x":1,"y":8,"fixed":false},"12":{"h":2,"w":4,"x":4,"y":11,"id":"l","fixed":false},"id":"l","data":{"id":"l","type":"buttoncomponent","customCss":{"button":{"class":"","style":""}},"recomputeIds":["bg_0"],"configuration":{"size":{"type":"static","value":"md"},"color":{"type":"static","value":"red"},"label":{"type":"static","value":"Reset"},"disabled":{"expr":"false","type":"eval"},"afterIcon":{"type":"static"},"onSuccess":{"type":"oneOf","selected":"none","configuration":{"none":{},"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"sendToast":{"message":{"type":"static","value":""}}}},"beforeIcon":{"type":"static"},"fillContainer":{"type":"static","value":false},"triggerOnAppLoad":{"type":"static","value":false}},"componentInput":{"type":"runnable","fields":{},"fieldType":"any"},"verticalAlignment":"center","horizontalAlignment":"center"}}],"subgrids":{"a-0":[{"3":{"h":1,"w":1,"x":0,"y":0,"fixed":false},"12":{"h":3,"w":4,"x":0,"y":0,"id":"b","fixed":false},"id":"b","data":{"id":"b","type":"buttoncomponent","customCss":{"button":{"class":"text-5xl","style":""}},"recomputeIds":["bg_1"],"configuration":{"size":{"type":"static","value":"xs"},"color":{"type":"static","value":"light"},"label":{"type":"connected","value":"","connection":{"path":"board[0][0]","componentId":"state"}},"disabled":{"expr":"state.winner || state.board[0][0]","type":"eval"},"afterIcon":{"type":"static"},"onSuccess":{"type":"oneOf","selected":"none","configuration":{"none":{},"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"sendToast":{"message":{"type":"static","value":""}}}},"beforeIcon":{"type":"static"},"fillContainer":{"type":"static","value":true},"triggerOnAppLoad":{"type":"static","value":false}},"componentInput":{"type":"runnable","fields":{},"runnable":{"name":"0-0","type":"runnableByName","inlineScript":{"path":"u/adam/tic-tac-toe/0-0","content":"state.board[0][0] = state.nextSymbol","language":"frontend"}},"fieldType":"any","recomputeOnInputChanged":true},"verticalAlignment":"center","horizontalAlignment":"center"}},{"3":{"h":1,"w":1,"x":1,"y":0,"fixed":false},"12":{"h":3,"w":4,"x":4,"y":0,"id":"b","fixed":false},"id":"c","data":{"id":"c","type":"buttoncomponent","customCss":{"button":{"class":"text-5xl","style":""}},"recomputeIds":["bg_1"],"configuration":{"size":{"type":"static","value":"xs"},"color":{"type":"static","value":"light"},"label":{"type":"connected","value":"","connection":{"path":"board[0][1]","componentId":"state"}},"disabled":{"expr":"state.winner || state.board[0][1]","type":"eval"},"afterIcon":{"type":"static"},"onSuccess":{"type":"oneOf","selected":"none","configuration":{"none":{},"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"sendToast":{"message":{"type":"static","value":""}}}},"beforeIcon":{"type":"static"},"fillContainer":{"type":"static","value":true},"triggerOnAppLoad":{"type":"static","value":false}},"componentInput":{"type":"runnable","fields":{},"runnable":{"name":"0-1","type":"runnableByName","inlineScript":{"path":"u/adam/tic-tac-toe/0-1","content":"state.board[0][1] = state.nextSymbol","language":"frontend"}},"fieldType":"any","recomputeOnInputChanged":true},"verticalAlignment":"center","horizontalAlignment":"center"}},{"3":{"h":1,"w":1,"x":0,"y":1,"fixed":false},"12":{"h":3,"w":4,"x":8,"y":0,"id":"e","fixed":false},"id":"e","data":{"id":"e","type":"buttoncomponent","customCss":{"button":{"class":"text-5xl","style":""}},"recomputeIds":["bg_1"],"configuration":{"size":{"type":"static","value":"xs"},"color":{"type":"static","value":"light"},"label":{"type":"connected","value":"","connection":{"path":"board[0][2]","componentId":"state"}},"disabled":{"expr":"state.winner || state.board[0][2]","type":"eval"},"afterIcon":{"type":"static"},"onSuccess":{"type":"oneOf","selected":"none","configuration":{"none":{},"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"sendToast":{"message":{"type":"static","value":""}}}},"beforeIcon":{"type":"static"},"fillContainer":{"type":"static","value":true},"triggerOnAppLoad":{"type":"static","value":false}},"componentInput":{"type":"runnable","fields":{},"runnable":{"name":"0-2","type":"runnableByName","inlineScript":{"path":"u/adam/tic-tac-toe/0-2","content":"state.board[0][2] = state.nextSymbol","language":"frontend"}},"fieldType":"any","recomputeOnInputChanged":true},"verticalAlignment":"center","horizontalAlignment":"center"}},{"3":{"h":1,"w":1,"x":1,"y":1,"fixed":false},"12":{"h":3,"w":4,"x":0,"y":3,"id":"f","fixed":false},"id":"f","data":{"id":"f","type":"buttoncomponent","customCss":{"button":{"class":"text-5xl","style":""}},"recomputeIds":["bg_1"],"configuration":{"size":{"type":"static","value":"xs"},"color":{"type":"static","value":"light"},"label":{"type":"connected","value":"","connection":{"path":"board[1][0]","componentId":"state"}},"disabled":{"expr":"state.winner || state.board[1][0]","type":"eval"},"afterIcon":{"type":"static"},"onSuccess":{"type":"oneOf","selected":"none","configuration":{"none":{},"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"sendToast":{"message":{"type":"static","value":""}}}},"beforeIcon":{"type":"static"},"fillContainer":{"type":"static","value":true},"triggerOnAppLoad":{"type":"static","value":false}},"componentInput":{"type":"runnable","fields":{},"runnable":{"name":"1-0","type":"runnableByName","inlineScript":{"path":"u/adam/tic-tac-toe/1-0","content":"state.board[1][0] = state.nextSymbol","language":"frontend"}},"fieldType":"any","recomputeOnInputChanged":true},"verticalAlignment":"center","horizontalAlignment":"center"}},{"3":{"h":1,"w":1,"x":0,"y":2,"fixed":false},"12":{"h":3,"w":4,"x":4,"y":3,"id":"g","fixed":false},"id":"g","data":{"id":"g","type":"buttoncomponent","customCss":{"button":{"class":"text-5xl","style":""}},"recomputeIds":["bg_1"],"configuration":{"size":{"type":"static","value":"xs"},"color":{"type":"static","value":"light"},"label":{"type":"connected","value":"","connection":{"path":"board[1][1]","componentId":"state"}},"disabled":{"expr":"state.winner || state.board[1][1]","type":"eval"},"afterIcon":{"type":"static"},"onSuccess":{"type":"oneOf","selected":"none","configuration":{"none":{},"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"sendToast":{"message":{"type":"static","value":""}}}},"beforeIcon":{"type":"static"},"fillContainer":{"type":"static","value":true},"triggerOnAppLoad":{"type":"static","value":false}},"componentInput":{"type":"runnable","fields":{},"runnable":{"name":"1-1","type":"runnableByName","inlineScript":{"path":"u/adam/tic-tac-toe/1-1","content":"state.board[1][1] = state.nextSymbol","language":"frontend"}},"fieldType":"any","recomputeOnInputChanged":true},"verticalAlignment":"center","horizontalAlignment":"center"}},{"3":{"h":1,"w":1,"x":1,"y":2,"fixed":false},"12":{"h":3,"w":4,"x":8,"y":3,"id":"h","fixed":false},"id":"h","data":{"id":"h","type":"buttoncomponent","customCss":{"button":{"class":"text-5xl","style":""}},"recomputeIds":["bg_1"],"configuration":{"size":{"type":"static","value":"xs"},"color":{"type":"static","value":"light"},"label":{"type":"connected","value":"","connection":{"path":"board[1][2]","componentId":"state"}},"disabled":{"expr":"state.winner || state.board[1][2]","type":"eval"},"afterIcon":{"type":"static"},"onSuccess":{"type":"oneOf","selected":"none","configuration":{"none":{},"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"sendToast":{"message":{"type":"static","value":""}}}},"beforeIcon":{"type":"static"},"fillContainer":{"type":"static","value":true},"triggerOnAppLoad":{"type":"static","value":false}},"componentInput":{"type":"runnable","fields":{},"runnable":{"name":"1-2","type":"runnableByName","inlineScript":{"path":"u/adam/tic-tac-toe/1-2","content":"state.board[1][2] = state.nextSymbol","language":"frontend"}},"fieldType":"any","recomputeOnInputChanged":true},"verticalAlignment":"center","horizontalAlignment":"center"}},{"3":{"h":1,"w":1,"x":0,"y":3,"fixed":false},"12":{"h":3,"w":4,"x":0,"y":6,"id":"b","fixed":false},"id":"i","data":{"id":"i","type":"buttoncomponent","customCss":{"button":{"class":"text-5xl","style":""}},"recomputeIds":["bg_1"],"configuration":{"size":{"type":"static","value":"xs"},"color":{"type":"static","value":"light"},"label":{"type":"connected","value":"","connection":{"path":"board[2][0]","componentId":"state"}},"disabled":{"expr":"state.winner || state.board[2][0]","type":"eval"},"afterIcon":{"type":"static"},"onSuccess":{"type":"oneOf","selected":"none","configuration":{"none":{},"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"sendToast":{"message":{"type":"static","value":""}}}},"beforeIcon":{"type":"static"},"fillContainer":{"type":"static","value":true},"triggerOnAppLoad":{"type":"static","value":false}},"componentInput":{"type":"runnable","fields":{},"runnable":{"name":"2-0","type":"runnableByName","inlineScript":{"path":"u/adam/tic-tac-toe/2-0","content":"state.board[2][0] = state.nextSymbol","language":"frontend"}},"fieldType":"any","recomputeOnInputChanged":true},"verticalAlignment":"center","horizontalAlignment":"center"}},{"3":{"h":1,"w":1,"x":1,"y":3,"fixed":false},"12":{"h":3,"w":4,"x":4,"y":6,"id":"j","fixed":false},"id":"j","data":{"id":"j","type":"buttoncomponent","customCss":{"button":{"class":"text-5xl","style":""}},"recomputeIds":["bg_1"],"configuration":{"size":{"type":"static","value":"xs"},"color":{"type":"static","value":"light"},"label":{"type":"connected","value":"","connection":{"path":"board[2][1]","componentId":"state"}},"disabled":{"expr":"state.winner || state.board[2][1]","type":"eval"},"afterIcon":{"type":"static"},"onSuccess":{"type":"oneOf","selected":"none","configuration":{"none":{},"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"sendToast":{"message":{"type":"static","value":""}}}},"beforeIcon":{"type":"static"},"fillContainer":{"type":"static","value":true},"triggerOnAppLoad":{"type":"static","value":false}},"componentInput":{"type":"runnable","fields":{},"runnable":{"name":"2-1","type":"runnableByName","inlineScript":{"path":"u/adam/tic-tac-toe/2-1","content":"state.board[2][1] = state.nextSymbol","language":"frontend"}},"fieldType":"any","recomputeOnInputChanged":true},"verticalAlignment":"center","horizontalAlignment":"center"}},{"3":{"h":1,"w":1,"x":0,"y":4,"fixed":false},"12":{"h":3,"w":4,"x":8,"y":6,"id":"k","fixed":false},"id":"k","data":{"id":"k","type":"buttoncomponent","customCss":{"button":{"class":"text-5xl","style":""}},"recomputeIds":["bg_1"],"configuration":{"size":{"type":"static","value":"xs"},"color":{"type":"static","value":"light"},"label":{"type":"connected","value":"","connection":{"path":"board[2][2]","componentId":"state"}},"disabled":{"expr":"state.winner || state.board[2][2]","type":"eval"},"afterIcon":{"type":"static"},"onSuccess":{"type":"oneOf","selected":"none","configuration":{"none":{},"setTab":{"setTab":{"type":"static","value":[]}},"gotoUrl":{"url":{"type":"static","value":""},"newTab":{"type":"static","value":true}},"sendToast":{"message":{"type":"static","value":""}}}},"beforeIcon":{"type":"static"},"fillContainer":{"type":"static","value":true},"triggerOnAppLoad":{"type":"static","value":false}},"componentInput":{"type":"runnable","fields":{},"runnable":{"name":"2-2","type":"runnableByName","inlineScript":{"path":"u/adam/tic-tac-toe/2-2","content":"state.board[2][2] = state.nextSymbol","language":"frontend"}},"fieldType":"any","recomputeOnInputChanged":true},"verticalAlignment":"center","horizontalAlignment":"center"}}],"m-0":[{"3":{"h":1,"w":1,"x":0,"y":0,"fixed":false},"12":{"h":1,"w":12,"x":0,"y":0,"id":"n","fixed":false},"id":"n","data":{"id":"n","type":"textcomponent","customCss":{"text":{"class":"","style":""}},"configuration":{"style":{"type":"static","value":"Title"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"Leaderboard","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"center","horizontalAlignment":"left"}},{"3":{"h":1,"w":1,"x":1,"y":0,"fixed":false},"12":{"h":1,"w":9,"x":0,"y":1,"id":"o","fixed":false},"id":"o","data":{"id":"o","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Subtitle"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"Player 1 (X)","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"center","horizontalAlignment":"left"}},{"3":{"h":1,"w":1,"x":0,"y":2,"fixed":false},"12":{"h":1,"w":3,"x":9,"y":1,"id":"r","fixed":false},"id":"r","data":{"id":"r","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Title"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"${state.scores?.['Player 1'] || 0}","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}},{"3":{"h":1,"w":1,"x":0,"y":1,"fixed":false},"12":{"h":1,"w":9,"x":0,"y":2,"id":"p","fixed":false},"id":"p","data":{"id":"p","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Subtitle"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"Player 2 (O)","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"center","horizontalAlignment":"left"}},{"3":{"h":1,"w":1,"x":1,"y":1,"fixed":false},"12":{"h":1,"w":3,"x":9,"y":2,"id":"q","fixed":false},"id":"q","data":{"id":"q","type":"textcomponent","customCss":{},"configuration":{"style":{"type":"static","value":"Title"},"tooltip":{"type":"static","value":""},"copyButton":{"type":"static","value":false}},"componentInput":{"eval":"${state.scores?.['Player 2'] || 0}","type":"template","value":"Hello ${ctx.username}","fieldType":"template"},"verticalAlignment":"top","horizontalAlignment":"left"}}]},"fullscreen":false,"hiddenInlineScripts":[{"name":"State setup","fields":{},"autoRefresh":true,"inlineScript":{"path":"u/adam/tic-tac-toe/State setup","content":"state.board = [\n  ['', '', ''],\n  ['', '', ''],\n  ['', '', '']\n]\nstate.nextSymbol = 'X'\nstate.winner = ''\nstate.scores ??= {\n  'Player 1': 0,\n  'Player 2': 0,\n}","language":"frontend"},"recomputeOnInputChanged":true},{"name":"Game step","fields":{},"autoRefresh":false,"inlineScript":{"path":"u/adam/tic-tac-toe/Game step","content":"state.nextSymbol = state.nextSymbol === 'O' ? 'X' : 'O'\n\n// Check rows\nconst fullRows = state.board.filter(row => row.every(cell => !!cell))\nconst winnerRow = fullRows.find(row => row.every(cell => cell === row[0]))\nif(winnerRow) {\n  state.winner = winnerRow[0] === 'X' ? 'Player 1' : 'Player 2'\n  return\n}\n\n// Check columns\nconst verticalBoard = state.board.map((_, colIndex) => {\n  return state.board.map(row => row[colIndex])\n})\nconst fullCols = verticalBoard.filter(col => col.every(cell => !!cell))\nconst winnerCol = fullCols.find(col => col.every(cell => cell === col[0]))\nif(winnerCol) {\n  state.winner = winnerCol[0] === 'X' ? 'Player 1' : 'Player 2'\n  return\n}\n\n// Check diagonals\nconst diagonals = [\n  [ state.board[0][0], state.board[1][1], state.board[2][2] ],\n  [ state.board[0][2], state.board[1][1], state.board[2][0] ]\n]\nconst fullDiagonals = diagonals.filter(d => d.every(cell => !!cell))\nconst winnerDiagonal = fullDiagonals.find(d => d.every(cell => cell === d[0]))\nif(winnerDiagonal) {\n  state.winner = winnerDiagonal[0] === 'X' ? 'Player 1' : 'Player 2'\n  return\n}","language":"frontend"},"recomputeOnInputChanged":true},{"name":"Update leaderboard","fields":{},"autoRefresh":false,"inlineScript":{"path":"u/adam/tic-tac-toe/Update leaderboard","content":"if(state.winner) {\n  state.scores[state.winner] += 1\n}","language":"frontend","refreshOn":[{"id":"state","key":"winner"}]},"recomputeOnInputChanged":true}],"unusedInlineScripts":[]},"description":"Demo of the simple Tic Tac Toe game executed in Windmill.","vcreated_at":"2023-04-12T15:08:34.371Z","vcreated_by":"adam186","comments":[]}}