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
|
||||
|
||||
1. `git clone`
|
||||
2. `npm install`
|
||||
3. `gulp serve`
|
||||
|
||||
Not included: ink compiler from Ink source to JSON.
|
||||
2. `npm install` or better `pnpm install`
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<meta charset="utf-8">
|
||||
<title></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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="page" class="container">
|
||||
<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">
|
||||
<ul id="options">
|
||||
</ul>
|
||||
|
|
@ -19,9 +24,7 @@
|
|||
</div>
|
||||
|
||||
<!-- CDN JS Libraries -->
|
||||
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
|
||||
|
||||
<script src="game/bundle.js"></script>
|
||||
<script src="main.js"></script>
|
||||
|
||||
</body>
|
||||
</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": {},
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"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": {
|
||||
"babelify": "^8.0.0",
|
||||
"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"
|
||||
"webpack-cli": "^3.3.11"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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