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

Initial commit

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2020-07-06 00:04:44 +02:00
commit dbb13b8050
7 changed files with 159 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
**/node_modules

5
README.md Normal file
View File

@@ -0,0 +1,5 @@
# Lancer le projet
```bash
npm installl
npm start
```

18
package.json Normal file
View File

@@ -0,0 +1,18 @@
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}

30
public/index.html Normal file
View File

@@ -0,0 +1,30 @@
<!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?v=1.0">
<style type="text/css">
.choice-btn {
padding: 5px 10px;
border-radius: 3px;
border: 1px solid black;
margin: 2px;
}
.choice-btn:hover {
background-color: #ccc;
}
</style>
</head>
<body>
<h1 id="active-node"></h1>
<div id="choices"></div>
<script src="./bundle.js"></script>
</body>
</html>

20
src/entity.js Normal file
View File

@@ -0,0 +1,20 @@
export class Entity {
constructor(id, text) {
this.id = id;
this.text = text;
}
}
export class Node extends Entity {
constructor(id, text, choices) {
super(id, text);
this.choices = choices;
}
}
export class Choice extends Entity {
constructor(id, text, nextNode) {
super(id, text);
this.nextNode = nextNode;
}
}

58
src/index.js Normal file
View File

@@ -0,0 +1,58 @@
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: '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!'
}];
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);
});
}
function selectChoice(choiceId) {
console.log('Click on choice ', choiceId);
const allChoices = jsonContent.flatMap(node =>
!node.choices ? [] : node.choices
);
const selectedChoice = allChoices.find(choice => choice.id === choiceId);
const nextNode = jsonContent.find(node => node.id === selectedChoice.nextNode);
updateActiveNode(nextNode);
}
function updateActiveNode(node) {
document.getElementById('active-node').innerHTML = node.text;
document.getElementById('choices').innerHTML = '';
printChoices(node);
}
window.onload = () => {
updateActiveNode(jsonContent[0]);
}

27
webpack.config.js Normal file
View File

@@ -0,0 +1,27 @@
const webpack = require("webpack");
const path = require("path");
const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
let config = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./public"),
filename: "./bundle.js"
},
devServer: {
contentBase: path.resolve(__dirname, "./public"),
historyApiFallback: true,
inline: true,
open: true,
hot: true
},
plugins: [
new UglifyJSPlugin(),
new webpack.SourceMapDevToolPlugin({})
],
devtool: "eval-source-map"
}
module.exports = config;