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
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -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>
|
7
inkjs/libs/bootstrap.min.css
vendored
Normal file
7
inkjs/libs/bootstrap.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
inkjs/libs/ink.js
Normal file
2
inkjs/libs/ink.js
Normal file
File diff suppressed because one or more lines are too long
2
inkjs/libs/jquery-3.6.0.min.js
vendored
Normal file
2
inkjs/libs/jquery-3.6.0.min.js
vendored
Normal file
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("");
|
||||
}
|
||||
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;
|
||||
});
|
87
inkjs/style.css
Normal file
87
inkjs/style.css
Normal file
|
@ -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 a new issue