Removed all npm cruft, backported keyboard support
In my experience, people don't like learning npm and SCSS just to package their small game, so why should they? With inklecate-wasm dead, this template is quite outdated so I figured it could be a light almost-no-installation-required version. (It still requires you to spin up a web server.)
This commit is contained in:
parent
39bef70574
commit
4867de7d55
GPG Key ID:
8D24103F5EE2A6C0
|
|
@ -2,3 +2,4 @@
|
|||
/node_modules
|
||||
/yarn.lock
|
||||
/package-lock.json
|
||||
*.ink.json
|
||||
|
|
|
|||
13
README.md
13
README.md
|
|
@ -1,10 +1,15 @@
|
|||
# inkjs boilerplate
|
||||
|
||||
Console commands to start working
|
||||
This is my boilerplate for web games in [Ink](https://github.com/inkle/ink) language.
|
||||
|
||||
1. `git clone`
|
||||
2. `npm install` or better `pnpm install`
|
||||
3. `webpack prod` and you'll have the game in the `build` folder.
|
||||
This version does not require you to be well versed in web development; if you know what npm is, I recommend using my [advanced repo](https://code.oreolek.ru/oreolek/inkjs-linux)
|
||||
|
||||
To start working:
|
||||
|
||||
1. compile `game/game.ink` to JSON with inklecate
|
||||
2. Put `game.ink.json` to `inkjs` folder
|
||||
3. Run a web server in inkjs folder (anything will do; if you don't have one, I recommend [Mongoose](https://mongoose.ws/) - just put it in that folder and run)
|
||||
4. Open `http://localhost/index.html` - this is your game, you can package this
|
||||
|
||||
### Screenshot
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
- I looked at Monsieur Fogg
|
||||
* ... and I could contain myself no longer.<st>Continues the story.</st>
|
||||
* ... and I could contain myself no longer.[<st>Continues the story.</st>]
|
||||
'What is the purpose of our journey, Monsieur?'
|
||||
'A wager,' he replied.
|
||||
* * 'A wager!'[] I returned.
|
||||
|
|
@ -14,6 +14,6 @@
|
|||
* * * I asked nothing further of him then[.], and after a final, polite cough, he offered nothing more to me. <>
|
||||
* * 'Ah[.'],' I replied, uncertain what I thought.
|
||||
- - After that, <>
|
||||
* ... but I said nothing<st>Ends the story</st>[] and <>
|
||||
* ... but I said nothing[<st>Ends the story</st>] and <>
|
||||
- we passed the day in silence.
|
||||
- -> END
|
||||
BIN
ink-engine-runtime.dll (Stored with Git LFS)
BIN
ink-engine-runtime.dll (Stored with Git LFS)
Binary file not shown.
BIN
ink_compiler.dll (Stored with Git LFS)
BIN
ink_compiler.dll (Stored with Git LFS)
Binary file not shown.
|
|
@ -4,13 +4,16 @@
|
|||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
<link rel="stylesheet" href="libs/bootstrap.min.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="page" class="container">
|
||||
<button id="restart" type="button" class="btn btn-warning">Restart</button>
|
||||
<div class="row">
|
||||
<div id="content" class="col-12"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-10 offset-1">
|
||||
<ul id="options">
|
||||
</ul>
|
||||
|
|
@ -18,8 +21,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CDN JS Libraries -->
|
||||
<script src="main.js"></script>
|
||||
|
||||
<script src="libs/jquery-3.6.0.min.js"></script>
|
||||
<script src="libs/ink.js"></script>
|
||||
<script defer src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,8 +1,6 @@
|
|||
import jQuery from 'jquery'
|
||||
const inkjs = require('inkjs').Story;
|
||||
const entryPoint = 'fogg.ink.json';
|
||||
const entryPoint = 'game.ink.json';
|
||||
|
||||
let clearProgress, continueToNextChoice, displayText, loadGame, saveChoice, s;
|
||||
let continueToNextChoice, displayText, loadGame, saveChoice, s;
|
||||
|
||||
saveChoice = function(index) {
|
||||
window.progress.push(index);
|
||||
|
|
@ -65,9 +63,11 @@ continueToNextChoice = function(s) {
|
|||
jQuery("#content").append("<p>THE END</p>");
|
||||
jQuery("#options").html("");
|
||||
}
|
||||
return jQuery('html, body').animate({
|
||||
scrollTop: scrollTo
|
||||
}, 800);
|
||||
if (window.progress.length > 0) {
|
||||
return jQuery('html, body').animate({
|
||||
scrollTop: scrollTo
|
||||
}, 800);
|
||||
}
|
||||
};
|
||||
|
||||
loadGame = function(s) {
|
||||
|
|
@ -82,10 +82,6 @@ loadGame = function(s) {
|
|||
return results;
|
||||
};
|
||||
|
||||
clearProgress = function() {
|
||||
return window.progress = [];
|
||||
};
|
||||
|
||||
jQuery.ajax({
|
||||
url: entryPoint,
|
||||
dataType: 'text',
|
||||
|
|
@ -97,7 +93,7 @@ jQuery.ajax({
|
|||
} else {
|
||||
window.progress = [];
|
||||
}
|
||||
s = new inkjs(data);
|
||||
s = new inkjs.Story(data);
|
||||
if (window.progress !== []) {
|
||||
loadGame(s);
|
||||
}
|
||||
|
|
@ -110,9 +106,38 @@ jQuery(document).on('click', "#restart", function() {
|
|||
window.location.reload();
|
||||
});
|
||||
|
||||
jQuery(document).on('click', "#options li a", function() {
|
||||
s.ChooseChoiceIndex(jQuery(this).data("index"));
|
||||
saveChoice(jQuery(this).data("index"));
|
||||
function choose(index) {
|
||||
s.ChooseChoiceIndex(index);
|
||||
saveChoice(index);
|
||||
continueToNextChoice(s);
|
||||
}
|
||||
|
||||
jQuery(document).on('click', "#options li a", function() {
|
||||
choose(jQuery(this).data("index"));
|
||||
return false;
|
||||
});
|
||||
jQuery(document).on('click', "#options li", function() {
|
||||
choose(jQuery(this).find('a').data("index"));
|
||||
return false;
|
||||
});
|
||||
|
||||
jQuery(document).on('keydown', function(key) {
|
||||
key = key.key
|
||||
switch (key) {
|
||||
case '1':
|
||||
case '2':
|
||||
case '3':
|
||||
case '4':
|
||||
case '5':
|
||||
case '6':
|
||||
case '7':
|
||||
case '8':
|
||||
case '9':
|
||||
jQuery(`#options li:nth-child(${key})`).first().trigger("click")
|
||||
break;
|
||||
case '0':
|
||||
jQuery(`#options li:nth-child(10)`).first().trigger("click")
|
||||
break;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
:root {
|
||||
--font-family: 'PT Sans','Open Sans',"Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
--headings-font-family: "PT Sans Caption",var(--font-family-sans-serif);
|
||||
|
||||
--body-bg: #E4CDD4;
|
||||
--content-bg: rgba(202,158,185, 0.4);
|
||||
--body-color: #3A2D42;
|
||||
--link-color: #7D6393;
|
||||
--link-button-background: rgb(202, 158, 185);
|
||||
--link-button-background-hover: var(--body-color);
|
||||
--link-button-foreground: var(--body-color);
|
||||
--link-button-foreground-hover: var(--body-bg);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family);
|
||||
background-color: var(--body-bg);
|
||||
color: var(--body-color);
|
||||
}
|
||||
a {
|
||||
color: var(--link-color);
|
||||
}
|
||||
h1,h2,h3 {
|
||||
font-family: var(--headings-font-family);
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
}
|
||||
h2 {
|
||||
color: #666;
|
||||
}
|
||||
#page {
|
||||
background: var(--content-bg);
|
||||
border-radius: 5px;
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
#restart {
|
||||
position: fixed;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
#content {
|
||||
.subtitle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#options {
|
||||
border: 1px solid #876;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#options:empty {
|
||||
display: none;
|
||||
}
|
||||
#options li {
|
||||
background-color: var(--link-button-background);
|
||||
padding: 0.5em;
|
||||
border-bottom: 1px solid #876;
|
||||
}
|
||||
#options li,
|
||||
#options li a {
|
||||
color: var(--link-button-foreground);
|
||||
}
|
||||
#options li:hover {
|
||||
background-color: var(--link-button-background-hover);
|
||||
cursor: pointer;
|
||||
}
|
||||
#options li:hover,
|
||||
#options li:hover a {
|
||||
color: var(--link-button-foreground-hover);
|
||||
}
|
||||
#options li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
#options .subtitle {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.room-start {
|
||||
border-top: none;
|
||||
}
|
||||
BIN
inklecate.exe (Stored with Git LFS)
BIN
inklecate.exe (Stored with Git LFS)
Binary file not shown.
29
package.json
29
package.json
|
|
@ -1,29 +0,0 @@
|
|||
{
|
||||
"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.12.3",
|
||||
"@babel/preset-env": "^7.12.1",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"babel-loader": "^8.1.0",
|
||||
"bootstrap": "^4.5.3",
|
||||
"browser-sync": "^2.26.13",
|
||||
"copy-webpack-plugin": "^6.3.0",
|
||||
"cross-env": "^7.0.2",
|
||||
"css-loader": "^3.6.0",
|
||||
"inkjs": "^1.11.0",
|
||||
"jquery": "^3.5.1",
|
||||
"mini-css-extract-plugin": "^0.9.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"sass": "^1.29.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"webpack": "^4.44.2",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-shell-plugin": "^0.5.0"
|
||||
}
|
||||
}
|
||||
5793
pnpm-lock.yaml
5793
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -1,5 +0,0 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
'autoprefixer': {}
|
||||
}
|
||||
}
|
||||
113
scss/style.scss
113
scss/style.scss
|
|
@ -1,113 +0,0 @@
|
|||
@import '~bootstrap/scss/functions';
|
||||
@import '~bootstrap/scss/variables';
|
||||
|
||||
$font-family-sans-serif: 'PT Sans','Open Sans',"Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$headings-font-family: "PT Sans Caption",$font-family-sans-serif;
|
||||
$font-family-base: $font-family-sans-serif;
|
||||
|
||||
$grey-color: #cc925d;
|
||||
$body-bg: #E4CDD4;
|
||||
$content-bg: rgba(202,158,185, 0.4);
|
||||
$body-color: #3A2D42;
|
||||
$link-color: #7D6393;
|
||||
$link-button-background: rgb(202, 158, 185);
|
||||
$link-button-background-hover: $body-color;
|
||||
$link-button-foreground: $body-color;
|
||||
$link-button-foreground-hover: $body-bg;
|
||||
$status-color: #7E5980;
|
||||
$btn-bg: grey;
|
||||
$btn-color: lighten($btn-bg, 50%);
|
||||
$secondary-bg: #F1EED9;
|
||||
|
||||
$primary: $link-color;
|
||||
$brand-primary: lighten($body-color, 20%);
|
||||
$brand-danger: darken($body-bg, 30%);
|
||||
|
||||
$waycolor: $link-color;
|
||||
$animation_duration: 2s;
|
||||
|
||||
$enable-rounded: true;
|
||||
$enable-shadows: false;
|
||||
$enable-gradients: false;
|
||||
$enable-transitions: false;
|
||||
$enable-hover-media-query: false;
|
||||
$enable-grid-classes: true;
|
||||
$enable-print-styles: true;
|
||||
|
||||
$ok-color: $link-color;
|
||||
$neutral-color: brown;
|
||||
$warning-color: darkred;
|
||||
|
||||
@import '~bootstrap/scss/mixins';
|
||||
@import '~bootstrap/scss/root';
|
||||
@import '~bootstrap/scss/reboot';
|
||||
@import '~bootstrap/scss/type';
|
||||
@import '~bootstrap/scss/images';
|
||||
@import '~bootstrap/scss/grid';
|
||||
@import '~bootstrap/scss/buttons';
|
||||
@import '~bootstrap/scss/transitions';
|
||||
@import '~bootstrap/scss/utilities';
|
||||
@import '~bootstrap/scss/print';
|
||||
|
||||
h1,h2,h3 {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
}
|
||||
h2 {
|
||||
color: #666;
|
||||
}
|
||||
#page {
|
||||
background: $content-bg;
|
||||
border-radius: 5px;
|
||||
margin-top: $font-size-base;
|
||||
padding-top: ($font-size-base / 2);
|
||||
}
|
||||
#restart {
|
||||
position: fixed;
|
||||
top: $font-size-base / 2;
|
||||
right: $font-size-base / 2;
|
||||
}
|
||||
#content {
|
||||
.subtitle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#options {
|
||||
border: 1px solid #876;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
border-radius: 4px;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
li {
|
||||
background-color: $link-button-background;
|
||||
padding: 0.5em;
|
||||
border-bottom: 1px solid #876;
|
||||
&,a {
|
||||
color: $link-button-foreground;
|
||||
}
|
||||
}
|
||||
li:hover {
|
||||
background-color: $link-button-background-hover;
|
||||
cursor: pointer;
|
||||
&,a {
|
||||
color: $link-button-foreground-hover;
|
||||
}
|
||||
}
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.subtitle {
|
||||
display: block;
|
||||
font-size: ($font-size-base * 0.9);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.room-start {
|
||||
border-top: none;
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
const path = require('path')
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
const devMode = (process.env.NODE_ENV !== 'production')
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const WebpackShellPlugin = require('webpack-shell-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 WebpackShellPlugin({
|
||||
onBuildStart:[
|
||||
'mono inklecate.exe -o build/fogg.ink.json game/fogg.ink'
|
||||
]
|
||||
}),
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
{ 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 New Issue