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

Nodification of app. #1

Merged
florian merged 3 commits from feature/ihm-improvement into master 2020-07-12 13:22:37 +02:00
Conversation 0 Commits 3 Files Changed 13 +39 -3
3 changed files with 39 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dbeead9e99 - Show all commits

1
.gitignore vendored
View File

@@ -1 +1,2 @@
**/node_modules
public/bundle.js

22
public/index.html
View File

@@ -10,6 +10,10 @@
<link rel="stylesheet" href="css/styles.css?v=1.0">
<style type="text/css">
body {
background-color: #222;
color: white;
}
.choice-btn {
padding: 5px 10px;
border-radius: 3px;
@@ -20,11 +24,25 @@
.choice-btn:hover {
background-color: #ccc;
}
.choice-div {
border: 1px green solid;
}
.node-div {
border: 1px red solid;
}
#content {
width: 500px;
margin: auto;
}
</style>
</head>
<body>
<h1 id="active-node"></h1>
<div id="choices"></div>
<div id="content">
<h1>Textual Game</h1>
<div id="history"></div>
<div id="choices"></div>
</div>
<script src="./bundle.js"></script>
</body>
</html>

19
src/index.js
View File

@@ -9,6 +9,10 @@ const jsonContent = [{
id: 'choice-2',
text: 'Choice 2',
nextNode: 'node-exit'
}, {
id: 'choice-3',
text: 'Choice 3',
nextNode: 'node-exit'
}]
}, {
id: 'node-2',
@@ -44,11 +48,24 @@ function selectChoice(choiceId) {
);
const selectedChoice = allChoices.find(choice => choice.id === choiceId);
const nextNode = jsonContent.find(node => node.id === selectedChoice.nextNode);
addChoiceToHistory(selectedChoice);
updateActiveNode(nextNode);
}
function addChoiceToHistory(selectedChoice) {
const choiceDiv = document.createElement('div');
choiceDiv.innerHTML = selectedChoice.text;
choiceDiv.classList.add('choice-div');
document.getElementById('history').appendChild(choiceDiv);
}
function updateActiveNode(node) {
document.getElementById('active-node').innerHTML = node.text;
const nodeDiv = document.createElement('div');
nodeDiv.innerHTML = node.text;
nodeDiv.classList.add('node-div');
document.getElementById('history').appendChild(nodeDiv);
document.getElementById('choices').innerHTML = '';
printChoices(node);
}