#76 WIP: learning extension

examples/learning/README.md

@@ -0,0 +1,37 @@
+# Learning JS-son Agents
+
+This tutorial describes how to implement *learning* JS-son agents in the environment we introduced in the [Grid World Tutorial](./arena/README.md).
+
+## Prerequisites
+In this tutorial, we extend the [Grid World/Arena](./arena/README.md) tutorial.
+If you have not absolved the grid world tutorial, yet, follow it first and then get back to the learning tutorial.
+
+## Dependencies
+In addition to the dependencies that the basic grid world tutorial is using, we need the ``js-son-learning`` library, a JS-son extension that provides a simple API to develop learning agents:
+
+```json
+{
+    "js-son-learning": "^0.0.1"
+}
+```
+
+## Reward Design
+
+
+* If an agent collects coins, it receives a reward that equals the amount of coins received.
+
+* If an agent dies, it receives a reward of -100.
+
+## Learning
+
+
+## Running the Application
+To run the application, execute ``npm run dev`` in the root directory of this example project.
+Your browser will automatically open the application, which looks like this:
+
+![JS-son: Arena example](js-son-arena.png)
+
+To run the full build to generate files that can be deployed to a website run ``npm run build-prod``.
+
+
+

examples/learning/babel.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', {
+      modules: 'false',
+      targets: {
+        browsers: [
+          'Android >= 5',
+          'IOS >= 9.3',
+          'Edge >= 15',
+          'Safari >= 9.1',
+          'Chrome >= 49',
+          'Firefox >= 31',
+          'Samsung >= 5'
+        ]
+      }
+    }]
+  ],
+  plugins: [
+    // "@babel/plugin-transform-runtime",
+    '@babel/plugin-syntax-dynamic-import'
+  ]
+}

examples/learning/build/build.js

@@ -0,0 +1,36 @@
+const webpack = require('webpack');
+const ora = require('ora');
+const rm = require('rimraf');
+const chalk = require('chalk');
+const config = require('./webpack.config.js');
+
+const env = process.env.NODE_ENV || 'development';
+const target = process.env.TARGET || 'web';
+const isCordova = target === 'cordova'
+
+const spinner = ora(env === 'production' ? 'building for production...' : 'building development version...');
+spinner.start();
+
+rm(isCordova ? './cordova/www' : './www/', (removeErr) => {
+  if (removeErr) throw removeErr;
+
+  webpack(config, (err, stats) => {
+    if (err) throw err;
+    spinner.stop();
+
+    process.stdout.write(`${stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false,
+    })}\n\n`);
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('Build failed with errors.\n'));
+      process.exit(1);
+    }
+
+    console.log(chalk.cyan('Build complete.\n'));
+  });
+});

examples/learning/build/webpack.config.js

@@ -0,0 +1,212 @@
+const webpack = require('webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+
+const path = require('path');
+
+function resolvePath(dir) {
+  return path.join(__dirname, '..', dir);
+}
+
+const env = process.env.NODE_ENV || 'development';
+const target = process.env.TARGET || 'web';
+
+
+module.exports = {
+  mode: env,
+  entry: [
+    './src/js/app.js',
+  ],
+  output: {
+    path: resolvePath('www'),
+    filename: 'js/app.js',
+    publicPath: '',
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      vue$: 'vue/dist/vue.esm.js',
+      '@': resolvePath('src'),
+    },
+  },
+  devtool: env === 'production' ? 'source-map' : 'eval',
+  devServer: {
+    hot: true,
+    open: true,
+    compress: true,
+    contentBase: '/www/',
+    disableHostCheck: true,
+    watchOptions: {
+      poll: true,
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        use: 'babel-loader',
+        include: [
+          resolvePath('src'),
+          resolvePath('node_modules/framework7'),
+          resolvePath('node_modules/framework7-vue'),
+          resolvePath('node_modules/framework7-react'),
+          resolvePath('node_modules/template7'),
+          resolvePath('node_modules/dom7'),
+          resolvePath('node_modules/ssr-window'),
+        ],
+      },
+      {
+        test: /\.f7.html$/,
+        use: [
+          'babel-loader',
+          {
+            loader: 'framework7-component-loader',
+            options: {
+              helpersPath: './src/template7-helpers-list.js',
+            },
+          },
+        ],
+      },
+
+      {
+        test: /\.css$/,
+        use: [
+          (env === 'development' ? 'style-loader' : {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../'
+            }
+          }),
+          'css-loader',
+          'postcss-loader',
+        ],
+      },
+      {
+        test: /\.styl(us)?$/,
+        use: [
+          (env === 'development' ? 'style-loader' : {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../'
+            }
+          }),
+          'css-loader',
+          'postcss-loader',
+          'stylus-loader',
+        ],
+      },
+      {
+        test: /\.less$/,
+        use: [
+          (env === 'development' ? 'style-loader' : {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../'
+            }
+          }),
+          'css-loader',
+          'postcss-loader',
+          'less-loader',
+        ],
+      },
+      {
+        test: /\.(sa|sc)ss$/,
+        use: [
+          (env === 'development' ? 'style-loader' : {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              publicPath: '../'
+            }
+          }),
+          'css-loader',
+          'postcss-loader',
+          'sass-loader',
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'images/[name].[ext]',
+        },
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'media/[name].[ext]',
+        },
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        options: {
+          limit: 10000,
+          name: 'fonts/[name].[ext]',
+        },
+      },
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(env),
+      'process.env.TARGET': JSON.stringify(target),
+    }),
+
+    ...(env === 'production' ? [
+      // Production only plugins
+      new UglifyJsPlugin({
+        uglifyOptions: {
+          compress: {
+            warnings: false,
+          },
+        },
+        sourceMap: true,
+        parallel: true,
+      }),
+      new OptimizeCSSPlugin({
+        cssProcessorOptions: {
+          safe: true,
+          map: { inline: false },
+        },
+      }),
+      new webpack.optimize.ModuleConcatenationPlugin(),
+    ] : [
+      // Development only plugins
+      new webpack.HotModuleReplacementPlugin(),
+      new webpack.NamedModulesPlugin(),
+    ]),
+    new HtmlWebpackPlugin({
+      filename: './index.html',
+      template: './src/index.html',
+      inject: true,
+      minify: env === 'production' ? {
+        collapseWhitespace: true,
+        removeComments: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true
+      } : false,
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'css/app.css',
+    }),
+    new CopyWebpackPlugin([
+      {
+        from: resolvePath('src/static'),
+        to: resolvePath('www/static'),
+      },
+
+    ]),
+
+
+  ],
+};