Skip to content

T
tic-tac-toe
Commit ccb282f2 authored by Chaiprasit Khamsi's avatar Chaiprasit Khamsi
Browse files
Options

Updates

parent 63420d44
Hide whitespace changes
Inline Side-by-side
Showing with 18 additions and 17 deletions
asset-manifest.json
View file @ ccb282f2
{ {
"files": { "files": {
"main.css": "/tic-tac-toe/static/css/main.55d72bbf.chunk.css", "main.css": "/tic-tac-toe/static/css/main.0ebde3ef.chunk.css",
"main.js": "/tic-tac-toe/static/js/main.00c44642.chunk.js", "main.js": "/tic-tac-toe/static/js/main.00c44642.chunk.js",
"main.js.map": "/tic-tac-toe/static/js/main.00c44642.chunk.js.map", "main.js.map": "/tic-tac-toe/static/js/main.00c44642.chunk.js.map",
"runtime-main.js": "/tic-tac-toe/static/js/runtime-main.fa7aabe4.js", "runtime-main.js": "/tic-tac-toe/static/js/runtime-main.fa7aabe4.js",
...@@ -8,15 +8,15 @@ ...@@ -8,15 +8,15 @@
"static/js/2.a2c56392.chunk.js": "/tic-tac-toe/static/js/2.a2c56392.chunk.js", "static/js/2.a2c56392.chunk.js": "/tic-tac-toe/static/js/2.a2c56392.chunk.js",
"static/js/2.a2c56392.chunk.js.map": "/tic-tac-toe/static/js/2.a2c56392.chunk.js.map", "static/js/2.a2c56392.chunk.js.map": "/tic-tac-toe/static/js/2.a2c56392.chunk.js.map",
"index.html": "/tic-tac-toe/index.html", "index.html": "/tic-tac-toe/index.html",
"precache-manifest.e5b92d225d750a4e7394a7ccf884fd90.js": "/tic-tac-toe/precache-manifest.e5b92d225d750a4e7394a7ccf884fd90.js", "precache-manifest.9027cb8915e2555bf528581bc7919b47.js": "/tic-tac-toe/precache-manifest.9027cb8915e2555bf528581bc7919b47.js",
"service-worker.js": "/tic-tac-toe/service-worker.js", "service-worker.js": "/tic-tac-toe/service-worker.js",
"static/css/main.55d72bbf.chunk.css.map": "/tic-tac-toe/static/css/main.55d72bbf.chunk.css.map", "static/css/main.0ebde3ef.chunk.css.map": "/tic-tac-toe/static/css/main.0ebde3ef.chunk.css.map",
"static/js/2.a2c56392.chunk.js.LICENSE.txt": "/tic-tac-toe/static/js/2.a2c56392.chunk.js.LICENSE.txt" "static/js/2.a2c56392.chunk.js.LICENSE.txt": "/tic-tac-toe/static/js/2.a2c56392.chunk.js.LICENSE.txt"
}, },
"entrypoints": [ "entrypoints": [
"static/js/runtime-main.fa7aabe4.js", "static/js/runtime-main.fa7aabe4.js",
"static/js/2.a2c56392.chunk.js", "static/js/2.a2c56392.chunk.js",
"static/css/main.55d72bbf.chunk.css", "static/css/main.0ebde3ef.chunk.css",
"static/js/main.00c44642.chunk.js" "static/js/main.00c44642.chunk.js"
] ]
} }
\ No newline at end of file
index.html
View file @ ccb282f2
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/tic-tac-toe/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/tic-tac-toe/logo192.png"/><link rel="manifest" href="/tic-tac-toe/manifest.json"/><title>React App</title><link href="/tic-tac-toe/static/css/main.55d72bbf.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,p,a=t[0],l=t[1],i=t[2],c=0,s=[];c<a.length;c++)p=a[c],Object.prototype.hasOwnProperty.call(o,p)&&o[p]&&s.push(o[p][0]),o[p]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(t);s.length;)s.shift()();return u.push.apply(u,i||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,a=1;a<r.length;a++){var l=r[a];0!==o[l]&&(n=!1)}n&&(u.splice(t--,1),e=p(p.s=r[0]))}return e}var n={},o={1:0},u=[];function p(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,p),r.l=!0,r.exports}p.m=e,p.c=n,p.d=function(e,t,r){p.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},p.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},p.t=function(e,t){if(1&t&&(e=p(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(p.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)p.d(r,n,function(t){return e[t]}.bind(null,n));return r},p.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return p.d(t,"a",t),t},p.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},p.p="/tic-tac-toe/";var a=this["webpackJsonpmy-app"]=this["webpackJsonpmy-app"]||[],l=a.push.bind(a);a.push=t,a=a.slice();for(var i=0;i<a.length;i++)t(a[i]);var f=l;r()}([])</script><script src="/tic-tac-toe/static/js/2.a2c56392.chunk.js"></script><script src="/tic-tac-toe/static/js/main.00c44642.chunk.js"></script></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/tic-tac-toe/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/tic-tac-toe/logo192.png"/><link rel="manifest" href="/tic-tac-toe/manifest.json"/><title>React App</title><link href="/tic-tac-toe/static/css/main.0ebde3ef.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,p,a=t[0],l=t[1],i=t[2],c=0,s=[];c<a.length;c++)p=a[c],Object.prototype.hasOwnProperty.call(o,p)&&o[p]&&s.push(o[p][0]),o[p]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(t);s.length;)s.shift()();return u.push.apply(u,i||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,a=1;a<r.length;a++){var l=r[a];0!==o[l]&&(n=!1)}n&&(u.splice(t--,1),e=p(p.s=r[0]))}return e}var n={},o={1:0},u=[];function p(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,p),r.l=!0,r.exports}p.m=e,p.c=n,p.d=function(e,t,r){p.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},p.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},p.t=function(e,t){if(1&t&&(e=p(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(p.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)p.d(r,n,function(t){return e[t]}.bind(null,n));return r},p.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return p.d(t,"a",t),t},p.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},p.p="/tic-tac-toe/";var a=this["webpackJsonpmy-app"]=this["webpackJsonpmy-app"]||[],l=a.push.bind(a);a.push=t,a=a.slice();for(var i=0;i<a.length;i++)t(a[i]);var f=l;r()}([])</script><script src="/tic-tac-toe/static/js/2.a2c56392.chunk.js"></script><script src="/tic-tac-toe/static/js/main.00c44642.chunk.js"></script></body></html>
\ No newline at end of file \ No newline at end of file
precache-manifest.e5b92d225d750a4e7394a7ccf884fd90.js → precache-manifest.9027cb8915e2555bf528581bc7919b47.js
View file @ ccb282f2
self.__precacheManifest = (self.__precacheManifest || []).concat([ self.__precacheManifest = (self.__precacheManifest || []).concat([
{ {
"revision": "a3bbb8fc3e98cd88a99ced337d60934d", "revision": "4e6d6f1afad66bf66fd87bfd08da8fcd",
"url": "/tic-tac-toe/index.html" "url": "/tic-tac-toe/index.html"
}, },
{ {
"revision": "10f799fdc420bdef904a", "revision": "f1ab232c4d333a361c29",
"url": "/tic-tac-toe/static/css/main.55d72bbf.chunk.css" "url": "/tic-tac-toe/static/css/main.0ebde3ef.chunk.css"
}, },
{ {
"revision": "642f11ce68d236595a80", "revision": "642f11ce68d236595a80",
...@@ -16,7 +16,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([ ...@@ -16,7 +16,7 @@ self.__precacheManifest = (self.__precacheManifest || []).concat([
"url": "/tic-tac-toe/static/js/2.a2c56392.chunk.js.LICENSE.txt" "url": "/tic-tac-toe/static/js/2.a2c56392.chunk.js.LICENSE.txt"
}, },
{ {
"revision": "10f799fdc420bdef904a", "revision": "f1ab232c4d333a361c29",
"url": "/tic-tac-toe/static/js/main.00c44642.chunk.js" "url": "/tic-tac-toe/static/js/main.00c44642.chunk.js"
}, },
{ {
......
service-worker.js
View file @ ccb282f2
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"); importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
importScripts( importScripts(
"/tic-tac-toe/precache-manifest.e5b92d225d750a4e7394a7ccf884fd90.js" "/tic-tac-toe/precache-manifest.9027cb8915e2555bf528581bc7919b47.js"
); );
self.addEventListener('message', (event) => { self.addEventListener('message', (event) => {
......
static/css/main.55d72bbf.chunk.css → static/css/main.0ebde3ef.chunk.css
View file @ ccb282f2
body{font:14px "Century Gothic",Futura,sans-serif;margin:20px}ol,ul{padding-left:30px}.board-row:after{clear:both;content:"";display:table}.status{margin-bottom:10px}.square{background:#fff;border:1px solid #999;float:left;font-size:24px;font-weight:700;line-height:34px;height:34px;margin-right:-1px;margin-top:-1px;padding:0;text-align:center;width:34px}.square:focus{outline:none}.kbd-navigation .square:focus{background:#ddd}.game{display:flex;flex-direction:row}.game-info{margin-left:20px} body{font:14px "Century Gothic",Futura,sans-serif;margin:20px}ol,ul{padding-left:30px}.board-row:after{clear:both;content:"";display:table}.status{margin-bottom:10px}.square{background:#fff;border:1px solid #999;float:left;font-size:24px;font-weight:700;line-height:34px;height:34px;margin-right:-1px;margin-top:-1px;padding:0;text-align:center;width:34px}.square:focus{outline:none}.kbd-navigation .square:focus{background:#ddd}.game{display:flex;flex-direction:row}.game-info{margin-left:20px}
/*# sourceMappingURL=main.55d72bbf.chunk.css.map */ /*# sourceMappingURL=main.0ebde3ef.chunk.css.map */
\ No newline at end of file \ No newline at end of file
static/css/main.0ebde3ef.chunk.css.map 0 → 100644
View file @ ccb282f2
{"version":3,"sources":["index.css"],"names":[],"mappings":"AAAA,KACI,4CAA+C,CAC/C,WACF,CAEA,MACE,iBACF,CAEA,iBACE,UAAW,CACX,UAAW,CACX,aACF,CAEA,QACE,kBACF,CAEA,QACE,eAAgB,CAChB,qBAAsB,CACtB,UAAW,CACX,cAAe,CACf,eAAiB,CACjB,gBAAiB,CACjB,WAAY,CACZ,iBAAkB,CAClB,eAAgB,CAChB,SAAU,CACV,iBAAkB,CAClB,UACF,CAEA,cACE,YACF,CAEA,8BACE,eACF,CAEA,MACE,YAAa,CACb,kBACF,CAEA,WACE,gBACF","file":"main.0ebde3ef.chunk.css","sourcesContent":["body {\n font: 14px \"Century Gothic\", Futura, sans-serif;\n margin: 20px;\n }\n \n ol, ul {\n padding-left: 30px;\n }\n \n .board-row:after {\n clear: both;\n content: \"\";\n display: table;\n }\n \n .status {\n margin-bottom: 10px;\n }\n \n .square {\n background: #fff;\n border: 1px solid #999;\n float: left;\n font-size: 24px;\n font-weight: bold;\n line-height: 34px;\n height: 34px;\n margin-right: -1px;\n margin-top: -1px;\n padding: 0;\n text-align: center;\n width: 34px;\n }\n \n .square:focus {\n outline: none;\n }\n \n .kbd-navigation .square:focus {\n background: #ddd;\n }\n \n .game {\n display: flex;\n flex-direction: row;\n }\n \n .game-info {\n margin-left: 20px;\n }\n "]}
\ No newline at end of file
static/css/main.55d72bbf.chunk.css.map deleted 100644 → 0
View file @ 63420d44
{"version":3,"sources":["index.css"],"names":[],"mappings":"AAAA,KACI,4CAA+C,CAC/C,WACF,CAEA,MACE,iBACF,CAEA,iBACE,UAAW,CACX,UAAW,CACX,aACF,CAEA,QACE,kBACF,CAEA,QACE,eAAgB,CAChB,qBAAsB,CACtB,UAAW,CACX,cAAe,CACf,eAAiB,CACjB,gBAAiB,CACjB,WAAY,CACZ,iBAAkB,CAClB,eAAgB,CAChB,SAAU,CACV,iBAAkB,CAClB,UACF,CAEA,cACE,YACF,CAEA,8BACE,eACF,CAEA,MACE,YAAa,CACb,kBACF,CAEA,WACE,gBACF","file":"main.55d72bbf.chunk.css","sourcesContent":["body {\r\n font: 14px \"Century Gothic\", Futura, sans-serif;\r\n margin: 20px;\r\n }\r\n \r\n ol, ul {\r\n padding-left: 30px;\r\n }\r\n \r\n .board-row:after {\r\n clear: both;\r\n content: \"\";\r\n display: table;\r\n }\r\n \r\n .status {\r\n margin-bottom: 10px;\r\n }\r\n \r\n .square {\r\n background: #fff;\r\n border: 1px solid #999;\r\n float: left;\r\n font-size: 24px;\r\n font-weight: bold;\r\n line-height: 34px;\r\n height: 34px;\r\n margin-right: -1px;\r\n margin-top: -1px;\r\n padding: 0;\r\n text-align: center;\r\n width: 34px;\r\n }\r\n \r\n .square:focus {\r\n outline: none;\r\n }\r\n \r\n .kbd-navigation .square:focus {\r\n background: #ddd;\r\n }\r\n \r\n .game {\r\n display: flex;\r\n flex-direction: row;\r\n }\r\n \r\n .game-info {\r\n margin-left: 20px;\r\n }\r\n "]}
\ No newline at end of file
static/js/main.00c44642.chunk.js.map
View file @ ccb282f2
{"version":3,"sources":["index.js"],"names":["Square","props","className","onClick","value","Board","i","this","squares","renderSquare","React","Component","Game","state","history","Array","fill","stepNumber","xIsNext","slice","length","calculateWinner","setState","concat","step","status","current","winner","moves","map","move","desc","key","jumpTo","handleClick","lines","a","b","c","ReactDOM","render","document","getElementById"],"mappings":"iPAIA,SAASA,EAAOC,GACZ,OACE,4BAAQC,UAAU,SAASC,QAASF,EAAME,SACvCF,EAAMG,O,IAKPC,E,2KACSC,GAAI,IAAD,OACd,OACE,kBAACN,EAAD,CACEI,MAAOG,KAAKN,MAAMO,QAAQF,GAC1BH,QAAS,kBAAM,EAAKF,MAAME,QAAQG,Q,+BAMtC,OACE,6BACE,yBAAKJ,UAAU,aACZK,KAAKE,aAAa,GAClBF,KAAKE,aAAa,GAClBF,KAAKE,aAAa,IAErB,yBAAKP,UAAU,aACZK,KAAKE,aAAa,GAClBF,KAAKE,aAAa,GAClBF,KAAKE,aAAa,IAErB,yBAAKP,UAAU,aACZK,KAAKE,aAAa,GAClBF,KAAKE,aAAa,GAClBF,KAAKE,aAAa,S,GA1BTC,IAAMC,WAiCpBC,E,kDACJ,WAAYX,GAAQ,IAAD,8BACjB,cAAMA,IACDY,MAAQ,CACXC,QAAS,CACP,CACEN,QAASO,MAAM,GAAGC,KAAK,QAG3BC,WAAY,EACZC,SAAS,GATM,E,wDAaPZ,GACV,IAAMQ,EAAUP,KAAKM,MAAMC,QAAQK,MAAM,EAAGZ,KAAKM,MAAMI,WAAa,GAE9DT,EADUM,EAAQA,EAAQM,OAAS,GACjBZ,QAAQW,QAC5BE,EAAgBb,IAAYA,EAAQF,KAGxCE,EAAQF,GAAKC,KAAKM,MAAMK,QAAU,IAAM,IACxCX,KAAKe,SAAS,CACZR,QAASA,EAAQS,OAAO,CACtB,CACEf,QAASA,KAGbS,WAAYH,EAAQM,OACpBF,SAAUX,KAAKM,MAAMK,a,6BAIlBM,GACLjB,KAAKe,SAAS,CACZL,WAAYO,EACZN,QAAUM,EAAO,IAAO,M,+BAIlB,IAgBJC,EAhBG,OACDX,EAAUP,KAAKM,MAAMC,QACrBY,EAAUZ,EAAQP,KAAKM,MAAMI,YAC7BU,EAASN,EAAgBK,EAAQlB,SAEjCoB,EAAQd,EAAQe,KAAI,SAACL,EAAMM,GAC/B,IAAMC,EAAOD,EACX,eAAiBA,EACjB,mBACF,OACE,wBAAIE,IAAKF,GACP,4BAAQ3B,QAAS,kBAAM,EAAK8B,OAAOH,KAAQC,OAYjD,OALEN,EADEE,EACO,WAAaA,EAEb,0FAAsBpB,KAAKM,MAAMK,QAAU,IAAM,KAI1D,yBAAKhB,UAAU,QACb,yBAAKA,UAAU,cACb,kBAACG,EAAD,CACEG,QAASkB,EAAQlB,QACjBL,QAAS,SAAAG,GAAC,OAAI,EAAK4B,YAAY5B,OAGnC,yBAAKJ,UAAU,aACb,6BAAMuB,GACN,4BAAKG,S,GAzEIlB,IAAMC,WAoFzB,SAASU,EAAgBb,GAWvB,IAVA,IAAM2B,EAAQ,CACZ,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,IAEA7B,EAAI,EAAGA,EAAI6B,EAAMf,OAAQd,IAAK,CAAC,IAAD,cACnB6B,EAAM7B,GADa,GAC9B8B,EAD8B,KAC3BC,EAD2B,KACxBC,EADwB,KAErC,GAAI9B,EAAQ4B,IAAM5B,EAAQ4B,KAAO5B,EAAQ6B,IAAM7B,EAAQ4B,KAAO5B,EAAQ8B,GACpE,OAAO9B,EAAQ4B,GAGnB,OAAO,KAnBTG,IAASC,OAAO,kBAAC5B,EAAD,MAAU6B,SAASC,eAAe,W","file":"static/js/main.00c44642.chunk.js","sourcesContent":["import React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport \"./index.css\";\r\n\r\nfunction Square(props) {\r\n return (\r\n <button className=\"square\" onClick={props.onClick}>\r\n {props.value}\r\n </button>\r\n );\r\n }\r\n \r\n class Board extends React.Component {\r\n renderSquare(i) {\r\n return (\r\n <Square\r\n value={this.props.squares[i]}\r\n onClick={() => this.props.onClick(i)}\r\n />\r\n );\r\n }\r\n \r\n render() {\r\n return (\r\n <div>\r\n <div className=\"board-row\">\r\n {this.renderSquare(0)}\r\n {this.renderSquare(1)}\r\n {this.renderSquare(2)}\r\n </div>\r\n <div className=\"board-row\">\r\n {this.renderSquare(3)}\r\n {this.renderSquare(4)}\r\n {this.renderSquare(5)}\r\n </div>\r\n <div className=\"board-row\">\r\n {this.renderSquare(6)}\r\n {this.renderSquare(7)}\r\n {this.renderSquare(8)}\r\n </div>\r\n </div>\r\n );\r\n }\r\n }\r\n \r\n class Game extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n history: [\r\n {\r\n squares: Array(9).fill(null)\r\n }\r\n ],\r\n stepNumber: 0,\r\n xIsNext: true\r\n };\r\n }\r\n \r\n handleClick(i) {\r\n const history = this.state.history.slice(0, this.state.stepNumber + 1);\r\n const current = history[history.length - 1];\r\n const squares = current.squares.slice();\r\n if (calculateWinner(squares) || squares[i]) {\r\n return;\r\n }\r\n squares[i] = this.state.xIsNext ? \"X\" : \"O\";\r\n this.setState({\r\n history: history.concat([\r\n {\r\n squares: squares\r\n }\r\n ]),\r\n stepNumber: history.length,\r\n xIsNext: !this.state.xIsNext\r\n });\r\n }\r\n \r\n jumpTo(step) {\r\n this.setState({\r\n stepNumber: step,\r\n xIsNext: (step % 2) === 0\r\n });\r\n }\r\n \r\n render() {\r\n const history = this.state.history;\r\n const current = history[this.state.stepNumber];\r\n const winner = calculateWinner(current.squares);\r\n \r\n const moves = history.map((step, move) => {\r\n const desc = move ?\r\n 'Go to move #' + move :\r\n 'Go to game start';\r\n return (\r\n <li key={move}>\r\n <button onClick={() => this.jumpTo(move)}>{desc}</button>\r\n </li>\r\n );\r\n });\r\n \r\n let status;\r\n if (winner) {\r\n status = \"Winner: \" + winner;\r\n } else {\r\n status = \"ผู้เล่นคนถัดไป: \" + (this.state.xIsNext ? \"X\" : \"O\");\r\n }\r\n \r\n return (\r\n <div className=\"game\">\r\n <div className=\"game-board\">\r\n <Board\r\n squares={current.squares}\r\n onClick={i => this.handleClick(i)}\r\n />\r\n </div>\r\n <div className=\"game-info\">\r\n <div>{status}</div>\r\n <ol>{moves}</ol>\r\n </div>\r\n </div>\r\n );\r\n }\r\n }\r\n \r\n // ========================================\r\n \r\n ReactDOM.render(<Game />, document.getElementById(\"root\"));\r\n \r\n function calculateWinner(squares) {\r\n const lines = [\r\n [0, 1, 2],\r\n [3, 4, 5],\r\n [6, 7, 8],\r\n [0, 3, 6],\r\n [1, 4, 7],\r\n [2, 5, 8],\r\n [0, 4, 8],\r\n [2, 4, 6]\r\n ];\r\n for (let i = 0; i < lines.length; i++) {\r\n const [a, b, c] = lines[i];\r\n if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {\r\n return squares[a];\r\n }\r\n }\r\n return null;\r\n }\r\n "],"sourceRoot":""} {"version":3,"sources":["index.js"],"names":["Square","props","className","onClick","value","Board","i","this","squares","renderSquare","React","Component","Game","state","history","Array","fill","stepNumber","xIsNext","slice","length","calculateWinner","setState","concat","step","status","current","winner","moves","map","move","desc","key","jumpTo","handleClick","lines","a","b","c","ReactDOM","render","document","getElementById"],"mappings":"iPAIA,SAASA,EAAOC,GACZ,OACE,4BAAQC,UAAU,SAASC,QAASF,EAAME,SACvCF,EAAMG,O,IAKPC,E,2KACSC,GAAI,IAAD,OACd,OACE,kBAACN,EAAD,CACEI,MAAOG,KAAKN,MAAMO,QAAQF,GAC1BH,QAAS,kBAAM,EAAKF,MAAME,QAAQG,Q,+BAMtC,OACE,6BACE,yBAAKJ,UAAU,aACZK,KAAKE,aAAa,GAClBF,KAAKE,aAAa,GAClBF,KAAKE,aAAa,IAErB,yBAAKP,UAAU,aACZK,KAAKE,aAAa,GAClBF,KAAKE,aAAa,GAClBF,KAAKE,aAAa,IAErB,yBAAKP,UAAU,aACZK,KAAKE,aAAa,GAClBF,KAAKE,aAAa,GAClBF,KAAKE,aAAa,S,GA1BTC,IAAMC,WAiCpBC,E,kDACJ,WAAYX,GAAQ,IAAD,8BACjB,cAAMA,IACDY,MAAQ,CACXC,QAAS,CACP,CACEN,QAASO,MAAM,GAAGC,KAAK,QAG3BC,WAAY,EACZC,SAAS,GATM,E,wDAaPZ,GACV,IAAMQ,EAAUP,KAAKM,MAAMC,QAAQK,MAAM,EAAGZ,KAAKM,MAAMI,WAAa,GAE9DT,EADUM,EAAQA,EAAQM,OAAS,GACjBZ,QAAQW,QAC5BE,EAAgBb,IAAYA,EAAQF,KAGxCE,EAAQF,GAAKC,KAAKM,MAAMK,QAAU,IAAM,IACxCX,KAAKe,SAAS,CACZR,QAASA,EAAQS,OAAO,CACtB,CACEf,QAASA,KAGbS,WAAYH,EAAQM,OACpBF,SAAUX,KAAKM,MAAMK,a,6BAIlBM,GACLjB,KAAKe,SAAS,CACZL,WAAYO,EACZN,QAAUM,EAAO,IAAO,M,+BAIlB,IAgBJC,EAhBG,OACDX,EAAUP,KAAKM,MAAMC,QACrBY,EAAUZ,EAAQP,KAAKM,MAAMI,YAC7BU,EAASN,EAAgBK,EAAQlB,SAEjCoB,EAAQd,EAAQe,KAAI,SAACL,EAAMM,GAC/B,IAAMC,EAAOD,EACX,eAAiBA,EACjB,mBACF,OACE,wBAAIE,IAAKF,GACP,4BAAQ3B,QAAS,kBAAM,EAAK8B,OAAOH,KAAQC,OAYjD,OALEN,EADEE,EACO,WAAaA,EAEb,0FAAsBpB,KAAKM,MAAMK,QAAU,IAAM,KAI1D,yBAAKhB,UAAU,QACb,yBAAKA,UAAU,cACb,kBAACG,EAAD,CACEG,QAASkB,EAAQlB,QACjBL,QAAS,SAAAG,GAAC,OAAI,EAAK4B,YAAY5B,OAGnC,yBAAKJ,UAAU,aACb,6BAAMuB,GACN,4BAAKG,S,GAzEIlB,IAAMC,WAoFzB,SAASU,EAAgBb,GAWvB,IAVA,IAAM2B,EAAQ,CACZ,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,GACP,CAAC,EAAG,EAAG,IAEA7B,EAAI,EAAGA,EAAI6B,EAAMf,OAAQd,IAAK,CAAC,IAAD,cACnB6B,EAAM7B,GADa,GAC9B8B,EAD8B,KAC3BC,EAD2B,KACxBC,EADwB,KAErC,GAAI9B,EAAQ4B,IAAM5B,EAAQ4B,KAAO5B,EAAQ6B,IAAM7B,EAAQ4B,KAAO5B,EAAQ8B,GACpE,OAAO9B,EAAQ4B,GAGnB,OAAO,KAnBTG,IAASC,OAAO,kBAAC5B,EAAD,MAAU6B,SAASC,eAAe,W","file":"static/js/main.00c44642.chunk.js","sourcesContent":["import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"./index.css\";\n\nfunction Square(props) {\n return (\n <button className=\"square\" onClick={props.onClick}>\n {props.value}\n </button>\n );\n }\n \n class Board extends React.Component {\n renderSquare(i) {\n return (\n <Square\n value={this.props.squares[i]}\n onClick={() => this.props.onClick(i)}\n />\n );\n }\n \n render() {\n return (\n <div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n }\n \n class Game extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n history: [\n {\n squares: Array(9).fill(null)\n }\n ],\n stepNumber: 0,\n xIsNext: true\n };\n }\n \n handleClick(i) {\n const history = this.state.history.slice(0, this.state.stepNumber + 1);\n const current = history[history.length - 1];\n const squares = current.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? \"X\" : \"O\";\n this.setState({\n history: history.concat([\n {\n squares: squares\n }\n ]),\n stepNumber: history.length,\n xIsNext: !this.state.xIsNext\n });\n }\n \n jumpTo(step) {\n this.setState({\n stepNumber: step,\n xIsNext: (step % 2) === 0\n });\n }\n \n render() {\n const history = this.state.history;\n const current = history[this.state.stepNumber];\n const winner = calculateWinner(current.squares);\n \n const moves = history.map((step, move) => {\n const desc = move ?\n 'Go to move #' + move :\n 'Go to game start';\n return (\n <li key={move}>\n <button onClick={() => this.jumpTo(move)}>{desc}</button>\n </li>\n );\n });\n \n let status;\n if (winner) {\n status = \"Winner: \" + winner;\n } else {\n status = \"ผู้เล่นคนถัดไป: \" + (this.state.xIsNext ? \"X\" : \"O\");\n }\n \n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board\n squares={current.squares}\n onClick={i => this.handleClick(i)}\n />\n </div>\n <div className=\"game-info\">\n <div>{status}</div>\n <ol>{moves}</ol>\n </div>\n </div>\n );\n }\n }\n \n // ========================================\n \n ReactDOM.render(<Game />, document.getElementById(\"root\"));\n \n function calculateWinner(squares) {\n const lines = [\n [0, 1, 2],\n [3, 4, 5],\n [6, 7, 8],\n [0, 3, 6],\n [1, 4, 7],\n [2, 5, 8],\n [0, 4, 8],\n [2, 4, 6]\n ];\n for (let i = 0; i < lines.length; i++) {\n const [a, b, c] = lines[i];\n if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {\n return squares[a];\n }\n }\n return null;\n }\n "],"sourceRoot":""}
\ No newline at end of file \ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment