Laravel Mix WIP

Gulpfile.coffee

@@ -1,118 +0,0 @@
-browserSync = require('browser-sync')
-gulp        = require('gulp')
-gutil       = require('gulp-util')
-coffee      = require("gulp-coffee")
-sass        = require('gulp-sass')
-uglify      = require('gulp-uglify')
-zip         = require('gulp-zip')
-concat      = require('gulp-concat')
-rename      = require('gulp-rename')
-
-reload = browserSync.reload
-
-html = (target) ->
-  return () ->
-    gulp.src(['html/index.html'])
-      .pipe(gulp.dest(target))
-    gulp.src(['node_modules/salet/lib/index.min.js'])
-      .pipe(rename('salet.min.js'))
-      .pipe(gulp.dest(target+"/game"))
-
-# Images
-img = (target) ->
-  return () ->
-    return gulp.src(['img/*.png', 'img/*.jpeg', 'img/*.jpg']).pipe(gulp.dest(target))
-
-# Audio assets
-audio = (target) ->
-  return () ->
-    return gulp.src(['audio/*.mp3']).pipe(gulp.dest(target))
-
-gulp.task('html', html('./build'))
-gulp.task('img', img('./build/img'))
-gulp.task('audio', audio('./build/audio'))
-
-# SCSS styles
-gulp.task('sass', () ->
-  gulp.src('sass/main.scss')
-    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
-    .pipe(gulp.dest('./build/css'))
-)
-
-gulp.task('concatCoffee', () ->
-  gulp.src([
-    ## additional functions
-    './game/dialogue.coffee',
-    './game/phrase.coffee',
-    ## the actual game
-    './game/begin.coffee',
-    './game/story.coffee',
-  ]).pipe(concat('./main.coffee'))
-    .pipe(gulp.dest('./build/game'))
-)
-
-gulp.task('coffee', ['concatCoffee'], () ->
-  gulp.src('./build/game/main.coffee')
-    .pipe(coffee({bare: true}))
-    .pipe(gulp.dest('./build/game/'))
-)
-
-gulp.task('build', ['html', 'img', 'sass', 'coffee', 'audio'])
-
-gulp.task('serve', ['build'], () ->
-  browserSync({
-    server: {
-      baseDir: 'build'
-    }
-  })
-
-  sassListener = () ->
-    reload('./build/css/main.css')
-
-  gulp.watch(['./html/*.html'], ['html'])
-  gulp.watch(['./sass/*.scss'], ['sass'])
-  gulp.watch(['./img/*.png', './img/*.jpeg', './img/*.jpg'], ['img'])
-  gulp.watch(['./game/*.coffee'], ['coffee']);
-
-  gulp.watch(['./build/css/main.css'], sassListener)
-  gulp.watch(
-    ['./build/game/bundle.js', './build/img/*', './build/index.html'],
-    browserSync.reload)
-)
-
-gulp.task('html-dist', html('./dist'))
-gulp.task('img-dist', img('./dist/img'))
-gulp.task('audio-dist', audio('./dist/audio'))
-gulp.task('legal-dist', () ->
-  return gulp.src(['LICENSE.txt'])
-         .pipe(gulp.dest("./dist"))
-)
-
-gulp.task('sass-dist', () ->
-  return gulp.src('./sass/main.scss')
-        .pipe(sass({outputStyle: 'compressed'}))
-        .pipe(gulp.dest('./dist/css'))
-)
-
-gulp.task('coffee-dist', ['concatCoffee'], () ->
-  gulp.src('./build/game/main.coffee', {sourcemaps: false})
-    .pipe(coffee())
-    .pipe(uglify())
-    .on('error', gutil.log)
-    .pipe(gulp.dest('./dist/game/'))
-)
-
-gulp.task('dist', [
-  'html-dist',
-  'img-dist',
-  'sass-dist',
-  'coffee-dist',
-  'audio-dist',
-  'legal-dist'
-])
-
-gulp.task('zip', ['dist'], () ->
-  return gulp.src('dist/**')
-    .pipe(zip('dist.zip'))
-    .pipe(gulp.dest('.'))
-)

game/_dialogue.coffee

@@ -6,7 +6,7 @@ Usage:
         Point out a thing in her purse (mildly)
       """, "character.mild = true"
 ###
-dialogue = (title, startTag, endTag, text, effect) ->
+exports = (title, startTag, endTag, text, effect) ->
   retval = room("dialogue_"+Object.keys(salet.rooms).length, {
     optionText: title
     dsc: text

game/_phrase.coffee

@@ -12,7 +12,7 @@ Usage:
 @param string text Response
 @param string effect an optional parameter, eval'd code
 ###
-phrase = (title, tag, text, effect) ->
+exports = (title, tag, text, effect) ->
   retval = room("phrase_"+salet.rooms.length, {
     optionText: title
     dsc: text

game/begin.coffee

@@ -1,73 +0,0 @@
-salet.game_id = "your-game-id-here"
-salet.game_version = "1.6"
-$(document).ready(() ->
-  window.addEventListener('popstate', (event) ->
-    salet.goBack()
-  )
-  $("#night").on("click", () ->
-    if (window.night)
-      styles = {
-        "-webkit-filter": ""
-        "filter": ""
-        "background-color": ""
-      }
-      $("body").css(styles)
-      $("#night").removeClass("active")
-      window.night = false
-    else
-      styles = {
-        "-webkit-filter": "invert(1)hue-rotate(180deg)"
-        "filter": "invert(1)hue-rotate(180deg)"
-        "background-color": "#000"
-      }
-      $("body").css(styles)
-      $("#night").addClass("active")
-      window.night = true
-  )
-
-  salet.beginGame()
-)
-
-###
-Element helpers. There is no real need to build monsters like a().id("hello")
-because you won't use them as is. It does not make sense in context, the
-author has Markdown and all utilities to *forget* about the markup.
-###
-way_to = (content, ref) ->
-  return "<a href='#{ref}' class='way'>#{content}</a>"
-textlink = (content, ref) ->
-  return "<a href='./_writer_#{ref}' class='once'>#{content}</a>"
-actlink = (content, ref) ->
-  return "<a href='./#{ref}' class='once'>#{content}</a>"
-
-# The first room of the game.
-# For accessibility reasons the text is provided in HTML, not here.
-room "start",
-  enter: () ->
-    salet.character.bought_lamp = false
-  dsc: """
-  """,
-  choices: "#start"
-
-# This is a special inventory room.
-# The inventory button is a regular link to this room.
-# You may alter these as much as you like or scrap it along with the button.
-room "inventory",
-  canSave: false # saving the game here is forbidden. Aautosaving too.
-  enter: () ->
-    $("#inventory").hide()
-  exit: () ->
-    $("#inventory").show()
-  dsc: () ->
-    if salet.character.inventory.length == 0
-      text = "You are carrying nothing."
-    else
-      text = "You are carrying:\n\n"
-      for thing in salet.character.inventory
-        text += "* #{salet.character.listinv(thing.name)}\n"
-    return text+"\n\n"+"""
-    <div class="center"><a href="./exit"><button class="btn btn-lg btn-outline-primary">Go back</button></a></div>
-    """
-  actions:
-    exit: () ->
-      return salet.goBack()

game/story.coffee

@@ -1,3 +1,129 @@
+salet = require 'salet'
+
+salet.game_id = "your-game-id-here"
+salet.game_version = "1.6"
+$(document).ready(() ->
+  window.addEventListener('popstate', (event) ->
+    salet.goBack()
+  )
+  $("#night").on("click", () ->
+    if (window.night)
+      styles = {
+        "-webkit-filter": ""
+        "filter": ""
+        "background-color": ""
+      }
+      $("body").css(styles)
+      $("#night").removeClass("active")
+      window.night = false
+    else
+      styles = {
+        "-webkit-filter": "invert(1)hue-rotate(180deg)"
+        "filter": "invert(1)hue-rotate(180deg)"
+        "background-color": "#000"
+      }
+      $("body").css(styles)
+      $("#night").addClass("active")
+      window.night = true
+  )
+
+  salet.beginGame()
+)
+
+###
+Element helpers. There is no real need to build monsters like a().id("hello")
+because you won't use them as is. It does not make sense in context, the
+author has Markdown and all utilities to *forget* about the markup.
+###
+way_to = (content, ref) ->
+  return "<a href='#{ref}' class='way'>#{content}</a>"
+textlink = (content, ref) ->
+  return "<a href='./_writer_#{ref}' class='once'>#{content}</a>"
+actlink = (content, ref) ->
+  return "<a href='./#{ref}' class='once'>#{content}</a>"
+
+###
+A dialogue shortcut.
+Usage:
+
+    dialogue "Point out a thing in her purse (mildly)", "start", "mild", """
+        Point out a thing in her purse (mildly)
+      """, "character.mild = true"
+###
+dialogue = (title, startTag, endTag, text, effect) ->
+  retval = room("dialogue_"+Object.keys(salet.rooms).length, {
+    optionText: title
+    dsc: text
+    clear: false # backlog is useful in dialogues
+    choices: "#"+endTag
+  })
+  if typeof(startTag) == "string"
+    retval.tags = [startTag]
+  else if typeof(startTag) == "object"
+    retval.tags = startTag
+  if effect?
+    retval.before = (character, system) ->
+      eval(effect)
+  return retval
+
+###
+A phrase shortcut.
+Usage:
+
+    phrase "Point out a thing in her purse (mildly)", "start", """
+        Point out a thing in her purse (mildly)
+      """, "character.sandbox.mild = true"
+
+@param title phrase Phrase (question)
+@param salet Salet core
+@param string tag tag marking viewing condition
+@param string text Response
+@param string effect an optional parameter, eval'd code
+###
+phrase = (title, tag, text, effect) ->
+  retval = room("phrase_"+salet.rooms.length, {
+    optionText: title
+    dsc: text
+    clear: false # backlog is useful in dialogues
+    choices: "#"+tag
+    tags: [tag]
+  })
+  if effect?
+    retval.before = (character, system) ->
+      eval(effect)
+  return retval
+# The first room of the game.
+# For accessibility reasons the text is provided in HTML, not here.
+room "start",
+  enter: () ->
+    salet.character.bought_lamp = false
+  dsc: """
+  """,
+  choices: "#start"
+
+# This is a special inventory room.
+# The inventory button is a regular link to this room.
+# You may alter these as much as you like or scrap it along with the button.
+room "inventory",
+  canSave: false # saving the game here is forbidden. Aautosaving too.
+  enter: () ->
+    $("#inventory").hide()
+  exit: () ->
+    $("#inventory").show()
+  dsc: () ->
+    if salet.character.inventory.length == 0
+      text = "You are carrying nothing."
+    else
+      text = "You are carrying:\n\n"
+      for thing in salet.character.inventory
+        text += "* #{salet.character.listinv(thing.name)}\n"
+    return text+"\n\n"+"""
+    <div class="center"><a href="./exit"><button class="btn btn-lg btn-outline-primary">Go back</button></a></div>
+    """
+  actions:
+    exit: () ->
+      return salet.goBack()
+
 room "world",
   tags: ["start"],
   optionText: "Enter the world",

html/index.html

@@ -5,7 +5,7 @@
     <title>Salet showcase</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,400italic|PT+Sans+Caption' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="styles/main.css">
   </head>
   <body>
     <div id="page">
@@ -80,8 +80,9 @@
     <!-- CDN JS Libraries -->
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js" crossorigin="anonymous"></script>
     <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="game/salet.min.js"></script>
+    <script type="text/javascript" src="game/manifest.js"></script>
+    <script type="text/javascript" src="game/vendor.js"></script>
 
-    <script type="text/javascript" defer="defer" src="game/main.js"></script>
+    <script type="text/javascript" defer="defer" src="game/story.js"></script>
   </body>
 </html>

package.json

@@ -1,20 +1,35 @@
 {
   "dependencies": {
-    "coffee-script": "^1.12.7",
-    "salet": "^2.0.1",
-    "bootstrap": "^4.0.0-beta"
+    "bootstrap": "^4.0.0",
+    "salet": "^2.0.1"
+  },
+  "scripts": {
+    "build-dev": "NODE_ENV=development npm run mix",
+    "build": "NODE_ENV=production npm run mix",
+    "start": "NODE_ENV=development npm run mix -- --watch",
+    "hot": "NODE_ENV=development npm run mix:hot",
+    "mix": "webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "mix:hot": "webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "private": true,
   "devDependencies": {
-    "browser-sync": "^2.23.5",
+    "@babel/core": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "browser-sync": "^2.26.7",
+    "browser-sync-webpack-plugin": "2.2.2",
+    "coffee-loader": "^0.9.0",
     "coffeescript": "^2.0.0",
-    "gulp": "^3.9.1",
-    "gulp-coffee": "^3.0.2",
-    "gulp-concat": "^2.6.1",
-    "gulp-rename": "^1.2.2",
-    "gulp-sass": "^3.1.0",
-    "gulp-uglify": "^3.0.0",
-    "gulp-util": "^3.0.8",
-    "gulp-zip": "^4.1.0"
+    "css-loader": "^3.2.0",
+    "laravel-mix": "^4.1.2",
+    "node-sass": "^4.12.0",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "7.*",
+    "style-loader": "^1.0.0",
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.39.3",
+    "webpack-cli": "^3.3.7"
   }
 }

webpack.mix.js

@@ -0,0 +1,64 @@
+const mix = require('laravel-mix');
+
+// Public path helper
+const publicPath = (path) => `${mix.config.publicPath}/${path}`;
+
+// Source path helper
+const src = (path) => `./${path}`;
+
+// Public Path
+mix
+  .setPublicPath('./dist')
+  .setResourceRoot('/')
+  .webpackConfig({
+    output: { publicPath: mix.config.resourceRoot },
+  });
+
+// Browsersync
+mix.browserSync('example.test');
+
+// CoffeeScript
+mix.webpackConfig({
+  module: {
+    rules:[
+      {
+        test: /\.coffee$/,
+        loader: 'coffee-loader'
+      }
+    ]
+  }
+});
+
+// Styles
+mix.sass(src`sass/main.scss`, 'styles')
+  .options({
+    processCssUrls: false,
+  })
+  .extract();
+
+// JavaScript
+mix.js('game/story.coffee', 'game')
+  .extract(); // extract vendor libraries
+
+// Assets
+// mix.copyDirectory(src`images`, publicPath`images`);
+// mix.copyDirectory(src`fonts`, publicPath`fonts`);
+mix.copyDirectory(src`html`, publicPath``);
+
+// Autoload
+/*
+mix.autoload({
+  jquery: ['$', 'window.jQuery'],
+});
+*/
+
+// Options
+mix.options({
+  processCssUrls: false,
+});
+
+// Source maps when not in production.
+mix.sourceMaps(false, 'source-map');
+
+// Hash and version files in production.
+// mix.version();