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

Add style and history.

Browse Source
This commit is contained in:
Florian THIERRY - Takiguchi
2020-07-12 11:54:50 +02:00
parent dbb13b8050
commit dbeead9e99
3 changed files with 39 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

19
src/index.js
View File

@@ -9,6 +9,10 @@ const jsonContent = [{
id: 'choice-2', id: 'choice-2',
text: 'Choice 2', text: 'Choice 2',
nextNode: 'node-exit' nextNode: 'node-exit'
}, {
id: 'choice-3',
text: 'Choice 3',
nextNode: 'node-exit'
}] }]
}, { }, {
id: 'node-2', id: 'node-2',
@@ -44,11 +48,24 @@ function selectChoice(choiceId) {
); );
const selectedChoice = allChoices.find(choice => choice.id === choiceId); const selectedChoice = allChoices.find(choice => choice.id === choiceId);
const nextNode = jsonContent.find(node => node.id === selectedChoice.nextNode); const nextNode = jsonContent.find(node => node.id === selectedChoice.nextNode);
addChoiceToHistory(selectedChoice);
updateActiveNode(nextNode); 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) { 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 = ''; document.getElementById('choices').innerHTML = '';
printChoices(node); printChoices(node);
} }