florian/Textual-Game
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Convert app into node version with express.

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2020-07-12 13:09:48 +02:00
parent dbeead9e99
commit b997194a96
12 changed files with 6683 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/back/app.js Normal file
View File

@@ -0,0 +1,26 @@
const mustacheExpress = require('mustache-express');
const express = require('express');
const nodes = require('./nodes.json');
const app = express();
// Register '.mustache' extension with The Mustache Express
app.engine('mustache', mustacheExpress());
app.set('view engine', 'mustache');
app.set('views', __dirname + '/views');
app.use(express.static('public'));
app.get('/', (request, response) => {
response.render('home', { title: 'Textual game!' });
});
app.get('/nodes', (request, response) => {
response.setHeader('Content-Type', 'application/json');
response.end(JSON.stringify(nodes));
});
app.get('/app-bundle.js', (request, response) => {
response.download(`${__dirname}/../../dist/app-bundle.js`);
})
app.listen(3000, () => {
console.log('Example app listening on port 3000!');
});

43
src/back/nodes.json Normal file
View File

@@ -0,0 +1,43 @@
[
{
"id": "node-1",
"text": "Node 1",
"choices": [
{
"id": "choice-1",
"text": "Choice 1",
"nextNode": "node-2"
},
{
"id": "choice-2",
"text": "Choice 2",
"nextNode": "node-exit"
},
{
"id": "choice-3",
"text": "Choice 3",
"nextNode": "node-exit"
}
]
},
{
"id": "node-2",
"text": "Node 2",
"choices": [
{
"id": "choice-3",
"text": "Choice 3",
"nextNode": "node-exit"
},
{
"id": "choice-4",
"text": "Choice 4",
"nextNode": "node-exit"
}
]
},
{
"id": "node-exit",
"text": "Game over!"
}
]

20
src/back/views/home.mustache Normal file
View File

@@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Textual game</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="content">
<h1>{{title}}</h1>
<div id="history"></div>
<div id="choices"></div>
</div>
<script src="js/app-bundle.js"></script>
</body>
</html>

58
src/index.js → src/front/index.js
View File

@@ -1,44 +1,15 @@
const jsonContent = [{
id: 'node-1',
text: 'Node 1',
choices: [{
id: 'choice-1',
text: 'Choice 1',
nextNode: 'node-2'
}, {
id: 'choice-2',
text: 'Choice 2',
nextNode: 'node-exit'
}, {
id: 'choice-3',
text: 'Choice 3',
nextNode: 'node-exit'
}]
}, {
id: 'node-2',
text: 'Node 2',
choices: [{
id: 'choice-3',
text: 'Choice 3',
nextNode: 'node-exit'
}, {
id: 'choice-4',
text: 'Choice 4',
nextNode: 'node-exit'
}]
}, {
id: 'node-exit',
text: 'Game over!'
}];
let jsonContent = [];
function printChoices(node) {
return node.choices.forEach(choice => {
const newBtn = document.createElement('button');
newBtn.onclick = () => selectChoice(choice.id);
newBtn.innerHTML = choice.text;
newBtn.classList.add('choice-btn');
document.getElementById('choices').appendChild(newBtn);
});
if (node.choices) {
return node.choices.forEach(choice => {
const newBtn = document.createElement('button');
newBtn.onclick = () => selectChoice(choice.id);
newBtn.innerHTML = choice.text;
newBtn.classList.add('choice-btn');
document.getElementById('choices').appendChild(newBtn);
});
}
}
function selectChoice(choiceId) {
@@ -71,5 +42,12 @@ function updateActiveNode(node) {
}
window.onload = () => {
updateActiveNode(jsonContent[0]);
fetch('/nodes', {
method: 'GET'
})
.then(response => response.json())
.then(data => {
jsonContent = data;
updateActiveNode(jsonContent[0]);
});
}