Webpack instead of Gulp and a restart button
Also no Coffeescript now.
This commit is contained in:
parent
6fa0abce47
commit
603aca61a2
122
Gulpfile.coffee
122
Gulpfile.coffee
|
@ -1,122 +0,0 @@
|
||||||
watchify = require('watchify')
|
|
||||||
browserify = require('browserify')
|
|
||||||
browserSync = require('browser-sync')
|
|
||||||
gulp = require('gulp')
|
|
||||||
source = require('vinyl-source-stream')
|
|
||||||
gutil = require('gulp-util')
|
|
||||||
coffeify = require('coffeeify')
|
|
||||||
coffee = require("gulp-coffee")
|
|
||||||
uglify = require('gulp-uglify')
|
|
||||||
buffer = require('vinyl-buffer')
|
|
||||||
zip = require('gulp-zip')
|
|
||||||
concat = require('gulp-concat')
|
|
||||||
shell = require('gulp-shell')
|
|
||||||
|
|
||||||
reload = browserSync.reload
|
|
||||||
|
|
||||||
html = (target) ->
|
|
||||||
return () ->
|
|
||||||
return gulp.src(['html/index.html', 'html/en.html']).pipe(gulp.dest(target))
|
|
||||||
|
|
||||||
# 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))
|
|
||||||
|
|
||||||
# Ink files
|
|
||||||
ink = (target) ->
|
|
||||||
return () ->
|
|
||||||
return gulp.src(['game/*.ink']).pipe(gulp.dest(target)).pipe(shell([
|
|
||||||
'inklecate <%= file.path %>'
|
|
||||||
]))
|
|
||||||
|
|
||||||
gulp.task('html', html('./build'))
|
|
||||||
gulp.task('img', img('./build/img'))
|
|
||||||
gulp.task('audio', audio('./build/audio'))
|
|
||||||
gulp.task('ink', ink('./build'))
|
|
||||||
|
|
||||||
bundler = watchify(browserify({
|
|
||||||
entries: ["./build/game/main.coffee"]
|
|
||||||
debug: true
|
|
||||||
transform: [coffeify]
|
|
||||||
}))
|
|
||||||
|
|
||||||
bundle = () ->
|
|
||||||
return bundler.bundle()
|
|
||||||
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
|
|
||||||
.pipe(source('bundle.js'))
|
|
||||||
.pipe(gulp.dest('./build/game'))
|
|
||||||
|
|
||||||
gulp.task('concatCoffee', () ->
|
|
||||||
return gulp.src([
|
|
||||||
'./game/game.coffee',
|
|
||||||
]).pipe(concat('./main.coffee')).pipe(gulp.dest('./build/game'))
|
|
||||||
)
|
|
||||||
|
|
||||||
gulp.task('coffee', ['concatCoffee'], bundle)
|
|
||||||
|
|
||||||
bundler.on('update', bundle)
|
|
||||||
bundler.on('log', gutil.log)
|
|
||||||
|
|
||||||
gulp.task('build', ['html', 'ink', 'img', 'coffee', 'audio'])
|
|
||||||
|
|
||||||
gulp.task('serve', ['build'], () ->
|
|
||||||
browserSync({
|
|
||||||
server: {
|
|
||||||
baseDir: 'build'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
gulp.watch(['./html/*.html'], ['html'])
|
|
||||||
gulp.watch(['./game/*.json'], ['ink'])
|
|
||||||
gulp.watch(['./img/*.png', './img/*.jpeg', './img/*.jpg'], ['img'])
|
|
||||||
gulp.watch(['./game/*.coffee'], ['coffee']);
|
|
||||||
|
|
||||||
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('ink-dist', ink('./dist'))
|
|
||||||
gulp.task('legal-dist', () ->
|
|
||||||
return gulp.src(['LICENSE.txt'])
|
|
||||||
.pipe(gulp.dest("./dist"))
|
|
||||||
)
|
|
||||||
|
|
||||||
distBundler = browserify({
|
|
||||||
debug: false,
|
|
||||||
entries: ['./build/game/main.coffee'],
|
|
||||||
transform: ['coffeeify']
|
|
||||||
})
|
|
||||||
|
|
||||||
gulp.task('coffee-dist', ['concatCoffee'], () ->
|
|
||||||
return distBundler.bundle()
|
|
||||||
.pipe(source('bundle.js'))
|
|
||||||
.pipe(buffer())
|
|
||||||
.pipe(uglify())
|
|
||||||
.on('error', gutil.log)
|
|
||||||
.pipe(gulp.dest('./dist/game'))
|
|
||||||
)
|
|
||||||
|
|
||||||
gulp.task('dist', [
|
|
||||||
'html-dist',
|
|
||||||
'ink-dist',
|
|
||||||
'img-dist',
|
|
||||||
'coffee-dist',
|
|
||||||
'audio-dist',
|
|
||||||
'legal-dist'
|
|
||||||
])
|
|
||||||
|
|
||||||
gulp.task('zip', ['dist'], () ->
|
|
||||||
return gulp.src('dist/**')
|
|
||||||
.pipe(zip('dist.zip'))
|
|
||||||
.pipe(gulp.dest('.'))
|
|
||||||
)
|
|
|
@ -3,7 +3,6 @@
|
||||||
Console commands to start working
|
Console commands to start working
|
||||||
|
|
||||||
1. `git clone`
|
1. `git clone`
|
||||||
2. `npm install`
|
2. `npm install` or better `pnpm install`
|
||||||
3. `gulp serve`
|
3. Compile your ink files with inklecate to JSON (compiler not included)
|
||||||
|
3. `webpack prod` and you'll have the game in the `build` folder.
|
||||||
Not included: ink compiler from Ink source to JSON.
|
|
||||||
|
|
|
@ -1,65 +0,0 @@
|
||||||
inkjs = require("inkjs")
|
|
||||||
|
|
||||||
saveChoice = (index) ->
|
|
||||||
window.progress.push(index)
|
|
||||||
localStorage.setItem("progress", JSON.stringify(window.progress))
|
|
||||||
|
|
||||||
displayText = (s, interactive = true) ->
|
|
||||||
while (s.canContinue)
|
|
||||||
paragraphs = s.Continue().split("\n")
|
|
||||||
if interactive
|
|
||||||
delay = 1000
|
|
||||||
for i in paragraphs
|
|
||||||
if i != ""
|
|
||||||
html = $.parseHTML(i)
|
|
||||||
block = $('<p>').html(html)
|
|
||||||
if interactive
|
|
||||||
block.hide()
|
|
||||||
$("#content").append(block)
|
|
||||||
if interactive
|
|
||||||
block.fadeIn(delay)
|
|
||||||
delay += 500
|
|
||||||
|
|
||||||
continueToNextChoice = (s) ->
|
|
||||||
displayText(s, true)
|
|
||||||
scrollTo = $('#options').offset().top
|
|
||||||
if (s.currentChoices.length > 0)
|
|
||||||
$("#options").html("").hide()
|
|
||||||
for choice in s.currentChoices
|
|
||||||
$("#options").append("<li><a href='#' id='choice-#{choice.index}' data-index=#{choice.index}>#{choice.text}</a></li>")
|
|
||||||
$("#options").fadeIn(800)
|
|
||||||
$("#options li a").click(() ->
|
|
||||||
s.ChooseChoiceIndex($(this).data("index"))
|
|
||||||
saveChoice($(this).data("index"))
|
|
||||||
continueToNextChoice(s)
|
|
||||||
return false
|
|
||||||
)
|
|
||||||
else
|
|
||||||
$("#content").append("<p>THE END</p>")
|
|
||||||
$("#options").html("")
|
|
||||||
$('html, body').animate({
|
|
||||||
scrollTop: scrollTo
|
|
||||||
}, 800)
|
|
||||||
|
|
||||||
loadGame = (s) ->
|
|
||||||
for index in window.progress
|
|
||||||
displayText(s, false)
|
|
||||||
s.ChooseChoiceIndex(index)
|
|
||||||
|
|
||||||
clearProgress = () ->
|
|
||||||
window.progress = []
|
|
||||||
|
|
||||||
$.ajax({
|
|
||||||
url: 'fogg.ink.json',
|
|
||||||
dataType: 'text',
|
|
||||||
success: (data) ->
|
|
||||||
progress = localStorage.getItem("progress")
|
|
||||||
if progress?
|
|
||||||
window.progress = JSON.parse(progress)
|
|
||||||
else
|
|
||||||
window.progress = []
|
|
||||||
s = new inkjs.Story(data)
|
|
||||||
if window.progress != []
|
|
||||||
loadGame(s)
|
|
||||||
continueToNextChoice(s)
|
|
||||||
})
|
|
|
@ -3,14 +3,19 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title></title>
|
<title></title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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="main.css" />
|
||||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="page" class="container">
|
<div id="page" class="container">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div id="content" class="col-md-12"></div>
|
<div class="col-12">
|
||||||
|
<button id="restart" type="button" class="btn btn-warning">Restart</button>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div id="content" class="col-12"></div>
|
||||||
<div class="col-md-10 col-md-offset-1">
|
<div class="col-md-10 col-md-offset-1">
|
||||||
<ul id="options">
|
<ul id="options">
|
||||||
</ul>
|
</ul>
|
||||||
|
@ -19,9 +24,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- CDN JS Libraries -->
|
<!-- CDN JS Libraries -->
|
||||||
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
|
<script src="main.js"></script>
|
||||||
|
|
||||||
<script src="game/bundle.js"></script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
114
js/script.js
Normal file
114
js/script.js
Normal file
|
@ -0,0 +1,114 @@
|
||||||
|
import jQuery from 'jquery'
|
||||||
|
const inkjs = require('inkjs').Story;
|
||||||
|
const entryPoint = 'fogg.ink.json';
|
||||||
|
|
||||||
|
let clearProgress, continueToNextChoice, displayText, loadGame, saveChoice, s;
|
||||||
|
|
||||||
|
saveChoice = function(index) {
|
||||||
|
window.progress.push(index);
|
||||||
|
return localStorage.setItem("progress", JSON.stringify(window.progress));
|
||||||
|
};
|
||||||
|
|
||||||
|
displayText = function(s, interactive = true) {
|
||||||
|
let block, delay, html, i, paragraphs, results;
|
||||||
|
results = [];
|
||||||
|
while (s.canContinue) {
|
||||||
|
paragraphs = s.Continue().split("\n");
|
||||||
|
if (interactive) {
|
||||||
|
delay = 1000;
|
||||||
|
}
|
||||||
|
results.push((function() {
|
||||||
|
let j, len, results1;
|
||||||
|
results1 = [];
|
||||||
|
for (j = 0, len = paragraphs.length; j < len; j++) {
|
||||||
|
i = paragraphs[j];
|
||||||
|
if (i !== "") {
|
||||||
|
html = jQuery.parseHTML(i);
|
||||||
|
block = jQuery('<p>').html(html);
|
||||||
|
if (interactive) {
|
||||||
|
block.hide();
|
||||||
|
}
|
||||||
|
jQuery("#content").append(block);
|
||||||
|
if (interactive) {
|
||||||
|
block.fadeIn(delay);
|
||||||
|
results1.push(delay += 500);
|
||||||
|
} else {
|
||||||
|
results1.push(void 0);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
results1.push(void 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return results1;
|
||||||
|
})());
|
||||||
|
}
|
||||||
|
return results;
|
||||||
|
};
|
||||||
|
|
||||||
|
continueToNextChoice = function(s) {
|
||||||
|
let choice, j, len, ref, scrollTo;
|
||||||
|
displayText(s, true);
|
||||||
|
scrollTo = jQuery('#options').offset().top;
|
||||||
|
if (s.currentChoices.length > 0) {
|
||||||
|
jQuery("#options").html("").hide();
|
||||||
|
ref = s.currentChoices;
|
||||||
|
for (j = 0, len = ref.length; j < len; j++) {
|
||||||
|
choice = ref[j];
|
||||||
|
jQuery("#options").append(`<li><a href='#' id='choice-${choice.index}' data-index=${choice.index}>${choice.text}</a></li>`);
|
||||||
|
}
|
||||||
|
jQuery("#options").fadeIn(800);
|
||||||
|
} else {
|
||||||
|
jQuery("#content").append("<p>THE END</p>");
|
||||||
|
jQuery("#options").html("");
|
||||||
|
}
|
||||||
|
return jQuery('html, body').animate({
|
||||||
|
scrollTop: scrollTo
|
||||||
|
}, 800);
|
||||||
|
};
|
||||||
|
|
||||||
|
loadGame = function(s) {
|
||||||
|
let index, j, len, ref, results;
|
||||||
|
ref = window.progress;
|
||||||
|
results = [];
|
||||||
|
for (j = 0, len = ref.length; j < len; j++) {
|
||||||
|
index = ref[j];
|
||||||
|
displayText(s, false);
|
||||||
|
results.push(s.ChooseChoiceIndex(index));
|
||||||
|
}
|
||||||
|
return results;
|
||||||
|
};
|
||||||
|
|
||||||
|
clearProgress = function() {
|
||||||
|
return window.progress = [];
|
||||||
|
};
|
||||||
|
|
||||||
|
jQuery.ajax({
|
||||||
|
url: entryPoint,
|
||||||
|
dataType: 'text',
|
||||||
|
success: function(data) {
|
||||||
|
let progress;
|
||||||
|
progress = localStorage.getItem("progress");
|
||||||
|
if (progress != null) {
|
||||||
|
window.progress = JSON.parse(progress);
|
||||||
|
} else {
|
||||||
|
window.progress = [];
|
||||||
|
}
|
||||||
|
s = new inkjs(data);
|
||||||
|
if (window.progress !== []) {
|
||||||
|
loadGame(s);
|
||||||
|
}
|
||||||
|
return continueToNextChoice(s);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
jQuery(document).on('click', "#restart", function() {
|
||||||
|
localStorage.setItem("progress", '[]');
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
|
||||||
|
jQuery(document).on('click', "#options li a", function() {
|
||||||
|
s.ChooseChoiceIndex(jQuery(this).data("index"));
|
||||||
|
saveChoice(jQuery(this).data("index"));
|
||||||
|
continueToNextChoice(s);
|
||||||
|
return false;
|
||||||
|
});
|
45
package.json
45
package.json
|
@ -1,23 +1,30 @@
|
||||||
{
|
{
|
||||||
"dependencies": {},
|
"scripts": {
|
||||||
"private": true,
|
"build": "webpack --config ./webpack.config.js",
|
||||||
|
"start": "webpack-dev-server --content-base public/ --inline --port 3001",
|
||||||
|
"prod": "./node_modules/cross-env/src/bin/cross-env.js NODE_ENV=production ./node_modules/webpack/bin/webpack.js",
|
||||||
|
"dev": "./node_modules/cross-env/src/bin/cross-env.js NODE_ENV=development ./node_modules/webpack/bin/webpack.js",
|
||||||
|
"watch": "./node_modules/webpack/bin/webpack.js --watch"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/core": "^7.10.2",
|
||||||
|
"@babel/preset-env": "^7.10.2",
|
||||||
|
"autoprefixer": "^9.8.0",
|
||||||
|
"babel-loader": "^8.1.0",
|
||||||
|
"bootstrap": "^4.5.0",
|
||||||
|
"browser-sync": "^2.26.7",
|
||||||
|
"copy-webpack-plugin": "^6.0.2",
|
||||||
|
"cross-env": "^7.0.2",
|
||||||
|
"css-loader": "^3.5.3",
|
||||||
|
"inkjs": "^1.10.5",
|
||||||
|
"jquery": "^3.5.1",
|
||||||
|
"mini-css-extract-plugin": "^0.9.0",
|
||||||
|
"postcss-loader": "^3.0.0",
|
||||||
|
"sass": "^1.26.8",
|
||||||
|
"sass-loader": "^8.0.2",
|
||||||
|
"webpack": "^4.43.0"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babelify": "^8.0.0",
|
"webpack-cli": "^3.3.11"
|
||||||
"browser-sync": "^2.18.13",
|
|
||||||
"browserify": "^14.5.0",
|
|
||||||
"browserify-shim": "^3.8.14",
|
|
||||||
"coffeeify": "^3.0.1",
|
|
||||||
"coffeescript": "^2.0.2",
|
|
||||||
"gulp": "^3.9.1",
|
|
||||||
"gulp-coffee": "^2.3.4",
|
|
||||||
"gulp-concat": "^2.6.1",
|
|
||||||
"gulp-shell": "^0.6.3",
|
|
||||||
"gulp-uglify": "^3.0.0",
|
|
||||||
"gulp-util": "^3.0.8",
|
|
||||||
"gulp-zip": "^4.0.0",
|
|
||||||
"inkjs": "^1.6.0",
|
|
||||||
"vinyl-buffer": "^1.0.0",
|
|
||||||
"vinyl-source-stream": "^1.1.0",
|
|
||||||
"watchify": "^3.9.0"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
5679
pnpm-lock.yaml
Normal file
5679
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
5
postcss.config.js
Normal file
5
postcss.config.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
'autoprefixer': {}
|
||||||
|
}
|
||||||
|
}
|
1
scss/style.scss
Normal file
1
scss/style.scss
Normal file
|
@ -0,0 +1 @@
|
||||||
|
@import '~bootstrap'
|
57
webpack.config.js
Normal file
57
webpack.config.js
Normal file
|
@ -0,0 +1,57 @@
|
||||||
|
const path = require('path')
|
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||||
|
const devMode = (process.env.NODE_ENV !== 'production')
|
||||||
|
const CopyPlugin = require('copy-webpack-plugin');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
|
||||||
|
entry: [
|
||||||
|
'./js/script.js',
|
||||||
|
'./scss/style.scss',
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
filename: '[name].css',
|
||||||
|
chunkFilename: '[id].css'
|
||||||
|
}),
|
||||||
|
new CopyPlugin({
|
||||||
|
patterns: [
|
||||||
|
{ from: './game/*.json', to: '' },
|
||||||
|
{ from: './html/', to: '' },
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.m?js$/,
|
||||||
|
exclude: /(node_modules)/,
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
presets: ['@babel/preset-env']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.s[ac]ss$/i,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: MiniCssExtractPlugin.loader,
|
||||||
|
options: {
|
||||||
|
hmr: devMode
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// Translates CSS into CommonJS
|
||||||
|
'css-loader',
|
||||||
|
'postcss-loader',
|
||||||
|
// Compiles Sass to CSS
|
||||||
|
'sass-loader'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'build')
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue