Initial commit

2020-07-06 00:04:44 +02:00
commit dbb13b8050
7 changed files with 159 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+**/node_modules
--- a/README.md
+++ b/README.md
@@ -0,0 +1,5 @@
+# Lancer le projet
+```bash
+npm installl
+npm start
+```
--- a/package.json
+++ 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"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
@@ -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>
--- a/src/entity.js
+++ 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;
+    }
+}
--- a/src/index.js
+++ 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]);
+}
--- a/webpack.config.js
+++ 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;