Skip to content

Commit 31c88ae

Browse files
stasmstasm
committed
Proper build system
1 parent e624e47 commit 31c88ae

18 files changed

+288
-197
lines changed

‎.eslintrc

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"extends": "defaults",
3+
"parser": "babel-eslint",
4+
"env": {
5+
"browser": true,
6+
"es6": true
7+
},
8+
"rules": {
9+
"comma-dangle": [1, "only-multiline"],
10+
"no-console": 0
11+
}
12+
}

‎.gitignore

+5-59
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,7 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
1+
node_modules
2+
package-lock.json
73

8-
# Runtime data
9-
pids
10-
*.pid
11-
*.seed
12-
*.pid.lock
4+
public/*.js
5+
dist
136

14-
# Directory for instrumented libs generated by jscoverage/JSCover
15-
lib-cov
16-
17-
# Coverage directory used by tools like istanbul
18-
coverage
19-
20-
# nyc test coverage
21-
.nyc_output
22-
23-
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24-
.grunt
25-
26-
# Bower dependency directory (https://bower.io/)
27-
bower_components
28-
29-
# node-waf configuration
30-
.lock-wscript
31-
32-
# Compiled binary addons (https://nodejs.org/api/addons.html)
33-
build/Release
34-
35-
# Dependency directories
36-
node_modules/
37-
jspm_packages/
38-
39-
# TypeScript v1 declaration files
40-
typings/
41-
42-
# Optional npm cache directory
43-
.npm
44-
45-
# Optional eslint cache
46-
.eslintcache
47-
48-
# Optional REPL history
49-
.node_repl_history
50-
51-
# Output of 'npm pack'
52-
*.tgz
53-
54-
# Yarn Integrity file
55-
.yarn-integrity
56-
57-
# dotenv environment variables file
58-
.env
59-
60-
# next.js build output
61-
.next
7+
.DS_Store

‎LICENSE

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
ISC License
2+
3+
Copyright 2018, Michał Budzyński, Staś Małolepszy
4+
5+
Permission to use, copy, modify, and/or distribute this software for any
6+
purpose with or without fee is hereby granted, provided that the above
7+
copyright notice and this permission notice appear in all copies.
8+
9+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
10+
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
11+
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
12+
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
13+
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
14+
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
15+
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
16+

‎README.md

+35-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,35 @@
1-
# LOGOUT
1+
# LOGOUT
2+
3+
Escape the grim cyberspace.
4+
5+
_LOGOUT_ is a short story about freeing oneself from a broken cyberspace
6+
experience. Find the exit to the real world to win!
7+
8+
9+
## js13kGames 2018
10+
11+
_LOGOUT_ is a submission by [@michalbe][] and [@stasm][] for the
12+
2018 edition of [js13kGames][], a gamedev compo in which the total file size
13+
limit is 13kB. The theme of the compo was: _Offline_.
14+
15+
[js13kGames]: http://js13kgames.com
16+
[@michalbe]: https://github.com/michalbe/
17+
[@stasm]: https://github.com/stasm/
18+
19+
20+
## Technology
21+
22+
The game is written in [Cervus][], a custom-built WebGL renderer and game
23+
engine. The UI was created using [innerself][], a one-way binding microlibrary
24+
for managing views and state.
25+
26+
[Cervus]: https://github.com/michalbe/cervus
27+
[innerself]: https://github.com/stasm/innerself
28+
29+
30+
## Running locally
31+
32+
In order to run the game locally or hack on it, clone this repo and run:
33+
34+
$ npm install
35+
$ npm start

‎package.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "logout",
3+
"version": "0.0.1",
4+
"private": true,
5+
"description": "A 2018 js13kGames entry about escaping from the cyberspace",
6+
"repository": {
7+
"type": "git",
8+
"url": "git+https://github.com/piesku/LOGOUT.git"
9+
},
10+
"author": "Piesku <[email protected]>",
11+
"license": "ISC",
12+
"bugs": {
13+
"url": "https://github.com/piesku/LOGOUT/issues"
14+
},
15+
"homepage": "https://github.com/piesku/LOGOUT#readme",
16+
"scripts": {
17+
"deploy": "rollup -c rollup-gh.js && gh-pages -d public",
18+
"lint": "eslint src",
19+
"prod": "rollup -c rollup-prod.js && printf \"Size gzipped (including HTML): %s\n\" $(gzip public/index.html public/game.min.js --stdout | wc -c | awk '{print $1/1024\"K\"}')",
20+
"start": "rollup -c rollup-dev.js -w"
21+
},
22+
"devDependencies": {
23+
"babel-eslint": "^8.0.0",
24+
"eslint": "^4.7.0",
25+
"eslint-config-defaults": "^9.0.0",
26+
"gh-pages": "^1.0.0",
27+
"rollup": "^0.50.0",
28+
"rollup-plugin-babel-minify": "^3.1.2",
29+
"rollup-plugin-livereload": "^0.6.0",
30+
"rollup-plugin-node-resolve": "^3.0.0",
31+
"rollup-plugin-serve": "^0.4.2"
32+
}
33+
}

‎vendor/cervus.js ‎public/cervus.js

File renamed without changes.

‎src/index.html ‎public/index.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@
8181

8282
<div id="root"></div>
8383

84-
<script src="../vendor/innerself.js"></script>
85-
<script src="../vendor/cervus.js"></script>
86-
<script src="hud.js"></script>
84+
<script src="innerself.js"></script>
85+
<script src="cervus.js"></script>
8786
<script src="game.js"></script>

‎vendor/innerself.js ‎public/innerself.js

File renamed without changes.

‎rollup-dev.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import resolve from 'rollup-plugin-node-resolve';
2+
import serve from 'rollup-plugin-serve'
3+
import livereload from 'rollup-plugin-livereload'
4+
5+
export default {
6+
input: './src/index.js',
7+
output: {
8+
file: 'public/game.js',
9+
format: 'iife',
10+
},
11+
plugins: [
12+
resolve(),
13+
serve({
14+
contentBase: ['public']
15+
}),
16+
livereload({
17+
watch: ['src', 'public']
18+
})
19+
],
20+
};

‎rollup-gh.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import resolve from 'rollup-plugin-node-resolve';
2+
3+
export default {
4+
input: './src/index.js',
5+
output: {
6+
file: 'public/game.js',
7+
format: 'iife',
8+
},
9+
plugins: [
10+
resolve(),
11+
],
12+
};

‎rollup-prod.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import resolve from 'rollup-plugin-node-resolve';
2+
import minify from 'rollup-plugin-babel-minify';
3+
4+
export default {
5+
input: './src/index.js',
6+
output: {
7+
file: 'public/game.min.js',
8+
format: 'iife',
9+
},
10+
plugins: [
11+
resolve(),
12+
minify({ comments: false }),
13+
],
14+
};

‎src/Block.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Line from "./Line";
2+
3+
export default
4+
function Block(area, lines, {align = "stretch", justify = "stretch"} = {}) {
5+
return html`
6+
<div class="block ${area}"
7+
style="grid-area: ${area}; align-self: ${align}; justify-self: ${justify};">
8+
${lines.map(Line)}
9+
</div>
10+
`;
11+
}

‎src/HUD.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import Block from "./Block";
2+
import Line from "./Line";
3+
import code_anim from "./anim_code";
4+
import "./anim_glitch";
5+
6+
export default
7+
function HUD() {
8+
return html`
9+
<div class="screen layout">
10+
${Block("tl", [
11+
"System status",
12+
"Grid Movement: Online",
13+
"Camera: Online",
14+
"Freelook: Offline",
15+
"Chromatic Vision: Offline",
16+
])}
17+
${Block("tm", [
18+
"N ----- NE ----- E",
19+
], {justify: "center"})}
20+
${Block("tr", [
21+
(new Date()).toString()
22+
], {justify: "end"})}
23+
${Block("ml", [
24+
"Active objectives",
25+
"1. Enhance capabilities",
26+
"2. Locate exit",
27+
"3. Init logout sequence",
28+
])}
29+
${Block("mr", [
30+
"Running analysis",
31+
"Assessment complete",
32+
"<div class=box>No threats found</div>",
33+
])}
34+
${Block("bl", [
35+
"Tracking",
36+
"0.02 13.27 1.03",
37+
"2.98 91.34 12.81",
38+
"0.18 63.06 22.84",
39+
], {align: "end"})}
40+
${Block("br", new Array(10).fill(""), {align: "end"})}
41+
</div>
42+
`;
43+
}
44+
45+
let root = document.querySelector("#root");
46+
47+
let interval;
48+
root.addEventListener("beforerender", function() {
49+
clearInterval(interval);
50+
});
51+
root.addEventListener("afterrender", function() {
52+
interval = setInterval(() => {
53+
let div = document.createElement("div");
54+
55+
// Animate code display
56+
let br = root.querySelector(".br");
57+
br.removeChild(br.firstElementChild);
58+
div.innerHTML = Line(code_anim.next().value);
59+
br.appendChild(div.firstElementChild);
60+
61+
// Update datetime
62+
let tr = root.querySelector(".tr .glitch");
63+
for (let child of tr.children) {
64+
child.textContent = (new Date()).toString();
65+
}
66+
}, 1000);
67+
});

‎src/Line.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export default
2+
function Line(text) {
3+
// A deterministic digest function provides variety and ensures
4+
// subsequent renders given the same state produce the same output.
5+
let glitchIndex = text.length % 20;
6+
return html`
7+
<div class="line">
8+
<div class="glitch">
9+
<div class="white glitch${glitchIndex}">${text}</div>
10+
<div class="red glitch${glitchIndex}">${text}</div>
11+
<div class="blue glitch${glitchIndex}">${text}</div>
12+
</div>
13+
</div>
14+
`;
15+
}

‎src/anim_code.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Generate animated code display
2+
function *generateCode() {
3+
let lines = Cervus.shaders.fragment.toString()
4+
.split("\n").slice(7, -2)
5+
.map(line => line.trim())
6+
.filter(Boolean);
7+
let i = 0;
8+
while (1) {
9+
yield lines[i++ % lines.length];
10+
}
11+
}
12+
13+
export default generateCode();

‎src/anim_glitch.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Generate glitch animations
2+
let sheet = document.styleSheets[0];
3+
let steps = 20;
4+
let percent = new Intl.NumberFormat("en", {style: "percent"});
5+
for (let i = 0; i < 20; i++) {
6+
sheet.insertRule(`
7+
@keyframes glitch${i} {
8+
${new Array(steps).fill(1).map((_, step) => `
9+
${percent.format(step / steps)} {
10+
clip-path: inset(
11+
${percent.format(Math.random())} 0
12+
${percent.format(Math.random())}
13+
);
14+
}
15+
`).join("")}
16+
}
17+
`);
18+
sheet.insertRule(`
19+
.red.glitch${i} {
20+
animation: glitch${i} ${Math.random() * 5}s linear infinite alternate;
21+
}
22+
`);
23+
sheet.insertRule(`
24+
.blue.glitch${i} {
25+
animation: glitch${i} ${Math.random() * 5}s linear infinite alternate;
26+
}
27+
`);
28+
}

0 commit comments

Comments
 (0)