From dbb13b8050a7a2ef7644e9c5f616baba99a9e7f2 Mon Sep 17 00:00:00 2001 From: Takiguchi Date: Mon, 6 Jul 2020 00:04:44 +0200 Subject: [PATCH] Initial commit --- .gitignore | 1 + README.md | 5 ++++ package.json | 18 +++++++++++++++ public/index.html | 30 ++++++++++++++++++++++++ src/entity.js | 20 ++++++++++++++++ src/index.js | 58 +++++++++++++++++++++++++++++++++++++++++++++++ webpack.config.js | 27 ++++++++++++++++++++++ 7 files changed, 159 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 package.json create mode 100644 public/index.html create mode 100644 src/entity.js create mode 100644 src/index.js create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..cf70988 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +**/node_modules diff --git a/README.md b/README.md new file mode 100644 index 0000000..db0a4a7 --- /dev/null +++ b/README.md @@ -0,0 +1,5 @@ +# Lancer le projet +```bash +npm installl +npm start +``` \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..ab5fb73 --- /dev/null +++ b/package.json @@ -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" + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..cbd19e9 --- /dev/null +++ b/public/index.html @@ -0,0 +1,30 @@ + + + + + + Textual game + + + + + + + + +

+
+ + + \ No newline at end of file diff --git a/src/entity.js b/src/entity.js new file mode 100644 index 0000000..399a583 --- /dev/null +++ b/src/entity.js @@ -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; + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..a3a5e7a --- /dev/null +++ b/src/index.js @@ -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]); +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..623bb7f --- /dev/null +++ b/webpack.config.js @@ -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; \ No newline at end of file