Progress on Custom TicTacToe Implementation

[otobio]

Hi @patrickarnold79, this repository contains my implementation of the tictactoe game.

[patrickarnold79]

Thanks @otobio, just going through the code (again) and leaving some comments. Overall it looks 💯 and I like that you also have a meaningful commit history

[patrickarnold79]

While building the frontend I am getting the following stack

PAs-MacBook-Pro:frontend patrick$ npm install; npm run build;
npm WARN tictactoe_frontend@1.0.0 No description
npm WARN tictactoe_frontend@1.0.0 No repository field.
npm WARN tictactoe_frontend@1.0.0 license should be a valid SPDX license expression

audited 3548 packages in 6.069s
found 9 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

> tictactoe_frontend@1.0.0 build /Users/patrick/oam/workspace/phpstorm/tictactoe/frontend
> ./node_modules/webpack/bin/webpack.js --build

webpack 2.7.0
Usage: https://webpack.js.org/api/cli/
Usage without config file: webpack <entry> [<entry>] <output>
Usage with config file: webpack

Config options:
  --config  Path to the config file
                         [string] [default: webpack.config.js or webpackfile.js]
  --env     Environment passed to the config, when it is a function

Basic options:
  --context    The root directory for resolving entry point and stats
                                       [string] [default: The current directory]
  --entry      The entry point                                          [string]
  --watch, -w  Watch the filesystem for changes                        [boolean]
  --debug      Switch loaders to debug mode                            [boolean]
  --devtool    Enable devtool for better debugging experience (Example:
               --devtool eval-cheap-module-source-map)                  [string]
  -d           shortcut for --debug --devtool eval-cheap-module-source-map
               --output-pathinfo                                       [boolean]
  -p           shortcut for --optimize-minimize --define
               process.env.NODE_ENV="production"                       [boolean]
  --progress   Print compilation progress in percentage                [boolean]

Module options:
  --module-bind       Bind an extension to a loader                     [string]
  --module-bind-post                                                    [string]
  --module-bind-pre                                                     [string]

Output options:
  --output-path                 The output path for compilation assets
                                       [string] [default: The current directory]
  --output-filename             The output filename of the bundle
                                                   [string] [default: [name].js]
  --output-chunk-filename       The output filename for additional chunks
       [string] [default: filename with [id] instead of [name] or [id] prefixed]
  --output-source-map-filename  The output filename for the SourceMap   [string]
  --output-public-path          The public path for the assets          [string]
  --output-jsonp-function       The name of the jsonp function used for chunk
                                loading                                 [string]
  --output-pathinfo             Include a comment with the request for every
                                dependency (require, import, etc.)     [boolean]
  --output-library              Expose the exports of the entry point as library
                                                                        [string]
  --output-library-target       The type for exposing the exports of the entry
                                point as library                        [string]

Advanced options:
  --records-input-path       Path to the records file (reading)         [string]
  --records-output-path      Path to the records file (writing)         [string]
  --records-path             Path to the records file                   [string]
  --define                   Define any free var in the bundle          [string]
  --target                   The targeted execution environment         [string]
  --cache                    Enable in memory caching
                      [boolean] [default: It's enabled by default when watching]
  --watch-stdin, --stdin     Exit the process when stdin is closed     [boolean]
  --watch-aggregate-timeout  Timeout for gathering changes while watching
  --watch-poll               The polling interval for watching (also enable
                             polling)                                  [boolean]
  --hot                      Enables Hot Module Replacement            [boolean]
  --prefetch                 Prefetch this request (Example: --prefetch
                             ./file.js)                                 [string]
  --provide                  Provide these modules as free vars in all modules
                             (Example: --provide jQuery=jquery)         [string]
  --labeled-modules          Enables labeled modules                   [boolean]
  --plugin                   Load this plugin                           [string]
  --bail                     Abort the compilation on first error      [boolean]
  --profile                  Profile the compilation and include information in
                             stats                                     [boolean]

Resolving options:
  --resolve-alias         Setup a module alias for resolving (Example:
                          jquery-plugin=jquery.plugin)                  [string]
  --resolve-extensions    Setup extensions that should be used to resolve
                          modules (Example: --resolve-extensions .es6 .js)
                                                                         [array]
  --resolve-loader-alias  Setup a loader alias for resolving            [string]

Optimizing options:
  --optimize-max-chunks      Try to keep the chunk count below a limit
  --optimize-min-chunk-size  Try to keep the chunk size above a limit
  --optimize-minimize        Minimize javascript and switches loaders to
                             minimizing                                [boolean]

Stats options:
  --color, --colors           Enables/Disables colors on the console
                                           [boolean] [default: (supports-color)]
  --sort-modules-by           Sorts the modules list by property in module
                                                                        [string]
  --sort-chunks-by            Sorts the chunks list by property in chunk[string]
  --sort-assets-by            Sorts the assets list by property in asset[string]
  --hide-modules              Hides info about modules                 [boolean]
  --display-exclude           Exclude modules in the output             [string]
  --display-modules           Display even excluded modules in the output
                                                                       [boolean]
  --display-max-modules       Sets the maximum number of visible modules in
                              output                                    [number]
  --display-chunks            Display chunks in the output             [boolean]
  --display-entrypoints       Display entry points in the output       [boolean]
  --display-origins           Display origins of chunks in the output  [boolean]
  --display-cached            Display also cached modules in the output[boolean]
  --display-cached-assets     Display also cached assets in the output [boolean]
  --display-reasons           Display reasons about module inclusion in the
                              output                                   [boolean]
  --display-depth             Display distance from entry point for each module
                                                                       [boolean]
  --display-used-exports      Display information about used exports in modules
                              (Tree Shaking)                           [boolean]
  --display-provided-exports  Display information about exports provided from
                              modules                                  [boolean]
  --display-error-details     Display details about errors             [boolean]
  --verbose                   Show more details                        [boolean]

Options:
  --help, -h     Show help                                             [boolean]
  --version, -v  Show version number                                   [boolean]
  --json, -j     Prints the result as JSON.                            [boolean]

Unknown argument: build
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! tictactoe_frontend@1.0.0 build: `./node_modules/webpack/bin/webpack.js --build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the tictactoe_frontend@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/patrick/.npm/_logs/2018-06-27T08_05_02_800Z-debug.log

Do you have an idea how I can fix that?

[otobio]

Hi Patrick, The command ```npm run build``` is essential calling the command ```./node_modules/webpack/bin/webpack.js --build``` I actually added this as a short cut for building for those on linux like machines. But that might not work on windows. If you already have webpack installed to your environment path.. Simply running ```webpack build``` in the frontend directory, will resolve the issue If not I think a windows equivalent will look like node node_modules\webpack\bin\webpack.js --build Thanks

…

On Wed, Jun 27, 2018 at 12:06 PM, Patrick Arnold ***@***.***> wrote: While building the frontend I am getting the following stack PAs-MacBook-Pro:frontend patrick$ npm install; npm run build; npm WARN ***@***.*** No description npm WARN ***@***.*** No repository field. npm WARN ***@***.*** license should be a valid SPDX license expression audited 3548 packages in 6.069s found 9 moderate severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details > ***@***.*** build /Users/patrick/oam/workspace/phpstorm/tictactoe/frontend > ./node_modules/webpack/bin/webpack.js --build webpack 2.7.0 Usage: https://webpack.js.org/api/cli/ Usage without config file: webpack <entry> [<entry>] <output> Usage with config file: webpack Config options: --config Path to the config file [string] [default: webpack.config.js or webpackfile.js] --env Environment passed to the config, when it is a function Basic options: --context The root directory for resolving entry point and stats [string] [default: The current directory] --entry The entry point [string] --watch, -w Watch the filesystem for changes [boolean] --debug Switch loaders to debug mode [boolean] --devtool Enable devtool for better debugging experience (Example: --devtool eval-cheap-module-source-map) [string] -d shortcut for --debug --devtool eval-cheap-module-source-map --output-pathinfo [boolean] -p shortcut for --optimize-minimize --define process.env.NODE_ENV="production" [boolean] --progress Print compilation progress in percentage [boolean] Module options: --module-bind Bind an extension to a loader [string] --module-bind-post [string] --module-bind-pre [string] Output options: --output-path The output path for compilation assets [string] [default: The current directory] --output-filename The output filename of the bundle [string] [default: [name].js] --output-chunk-filename The output filename for additional chunks [string] [default: filename with [id] instead of [name] or [id] prefixed] --output-source-map-filename The output filename for the SourceMap [string] --output-public-path The public path for the assets [string] --output-jsonp-function The name of the jsonp function used for chunk loading [string] --output-pathinfo Include a comment with the request for every dependency (require, import, etc.) [boolean] --output-library Expose the exports of the entry point as library [string] --output-library-target The type for exposing the exports of the entry point as library [string] Advanced options: --records-input-path Path to the records file (reading) [string] --records-output-path Path to the records file (writing) [string] --records-path Path to the records file [string] --define Define any free var in the bundle [string] --target The targeted execution environment [string] --cache Enable in memory caching [boolean] [default: It's enabled by default when watching] --watch-stdin, --stdin Exit the process when stdin is closed [boolean] --watch-aggregate-timeout Timeout for gathering changes while watching --watch-poll The polling interval for watching (also enable polling) [boolean] --hot Enables Hot Module Replacement [boolean] --prefetch Prefetch this request (Example: --prefetch ./file.js) [string] --provide Provide these modules as free vars in all modules (Example: --provide jQuery=jquery) [string] --labeled-modules Enables labeled modules [boolean] --plugin Load this plugin [string] --bail Abort the compilation on first error [boolean] --profile Profile the compilation and include information in stats [boolean] Resolving options: --resolve-alias Setup a module alias for resolving (Example: jquery-plugin=jquery.plugin) [string] --resolve-extensions Setup extensions that should be used to resolve modules (Example: --resolve-extensions .es6 .js) [array] --resolve-loader-alias Setup a loader alias for resolving [string] Optimizing options: --optimize-max-chunks Try to keep the chunk count below a limit --optimize-min-chunk-size Try to keep the chunk size above a limit --optimize-minimize Minimize javascript and switches loaders to minimizing [boolean] Stats options: --color, --colors Enables/Disables colors on the console [boolean] [default: (supports-color)] --sort-modules-by Sorts the modules list by property in module [string] --sort-chunks-by Sorts the chunks list by property in chunk[string] --sort-assets-by Sorts the assets list by property in asset[string] --hide-modules Hides info about modules [boolean] --display-exclude Exclude modules in the output [string] --display-modules Display even excluded modules in the output [boolean] --display-max-modules Sets the maximum number of visible modules in output [number] --display-chunks Display chunks in the output [boolean] --display-entrypoints Display entry points in the output [boolean] --display-origins Display origins of chunks in the output [boolean] --display-cached Display also cached modules in the output[boolean] --display-cached-assets Display also cached assets in the output [boolean] --display-reasons Display reasons about module inclusion in the output [boolean] --display-depth Display distance from entry point for each module [boolean] --display-used-exports Display information about used exports in modules (Tree Shaking) [boolean] --display-provided-exports Display information about exports provided from modules [boolean] --display-error-details Display details about errors [boolean] --verbose Show more details [boolean] Options: --help, -h Show help [boolean] --version, -v Show version number [boolean] --json, -j Prints the result as JSON. [boolean] Unknown argument: build npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! ***@***.*** build: `./node_modules/webpack/bin/webpack.js --build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ***@***.*** build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/patrick/.npm/_logs/2018-06-27T08_05_02_800Z-debug.log Do you have an idea how I can fix that? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AmkzZPwboHq7aTgAg5opR0SCIg8npmRWks5uAz0BgaJpZM4UzL1D> .

[patrickarnold79]

Hi Tobi,

thanks. I am on a Mac so it should work as per your example. I just figured that
./node_modules/webpack/bin/webpack.js --build
does not accepts the --build option, that's why the above stack is being thrown. I omitted it and it's building and running fine

[otobio]

Hi Patrick, Okay. Glad it is running as intended.

…

On Wed, Jun 27, 2018 at 1:14 PM, Patrick Arnold ***@***.***> wrote: Hi Tobi, thanks. I am on a Mac so it should work as per your example. I just figured that ./node_modules/webpack/bin/webpack.js --build does not accepts the --build option, that's why the above stack is being thrown. I omitted it and it's building and running fine — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AmkzZOwgYlGwB0IMbrzckxQk90UjUbJQks5uA0zqgaJpZM4UzL1D> .