Please rewrite this animation code below so that it performs the same functions in a java file instead of the files .css,.js, and .html in visual studios. You would need to import javaFX and include your images for creature.png,forestbackground.png,human.png, and human2.png. Also attach a screenshot of the running animation in java.

script.js

const dialogue = [

{ character: 'Narrator', text: "In the dead of night, beneath a moon veiled by misty clouds, a lone figure trudged along a desolate forest path." },

{ character: 'Narrator', text: "Unknown to her, she was not alone." },

{ character: 'Human', text: "Who's there? Show yourself!" },

{ character: 'Creature', text: "You venture into realms unknown, mortal. What brings you to these woods?" },

{ character: 'Human', text: "I seek passage to the village beyond. I mean no harm." },

{ character: 'Creature', text: "Harm is but a shadow in these woods, mortal." },

{ character: 'Human', text: "What do you mean? Who are you?" },

{ character: 'Creature', text: "Names are as fleeting as the mist. I am known as the Wumpus, guardian of secrets untold." },

{ character: 'Human', text: "Please, I just want to go home. I won't disturb your domain any longer." },

{ character: 'Creature', text: "Very well, mortal. Leave these woods and trouble it no more. Remember to never forget your place in this world." },

{ character: 'Human2', text: "Hello there user! My name is Mika and you'll be helping me kill the wumpus. Click the next button and choose a cave to enter." }

];

let currentLine = 0;

const humanImg = document.getElementById('human');

const creatureImg = document.getElementById('creature');

const human2Img = document.getElementById('human2');

const dialogueBox = document.getElementById('dialogue-box');

const dialogueText = document.getElementById('dialogue-text');

const nextButton = document.getElementById('next-button');

const welcomeScreen = document.getElementById('welcome-screen');

function showCharacter(character) {

humanImg.classList.remove('visible', 'enter', 'exit', 'hidden');

creatureImg.classList.remove('visible', 'enter', 'exit', 'hidden');

human2Img.classList.remove('visible', 'enter', 'exit', 'hidden');

if (character === 'Human') {

humanImg.classList.add('enter');

creatureImg.classList.add('hidden');

} else if (character === 'Creature') {

creatureImg.classList.add('enter');

humanImg.classList.add('hidden');

}

else if (character == 'Human2') {

human2Img.classList.add('enter');

creatureImg.classList.add('hidden');

}

}

function typewriter(text, onComplete) {

let index = 0;

dialogueText.textContent = '';

const speed = 50;

function type() {

if (index < text.length) {

dialogueText.textContent += text.charAt(index);

index++;

setTimeout(type, speed);

} else if (onComplete) {

onComplete();

}

}

type();

}

function updateScene() {

const line = dialogue[currentLine];

if (line.character === 'Narrator') {

humanImg.classList.add('hidden');

creatureImg.classList.add('hidden');

human2Img.classList.add('hidden');

dialogueBox.classList.add('narrator');

} else {

dialogueBox.classList.remove('narrator');

showCharacter(line.character);

}

typewriter(line.text, () => {

if (currentLine < dialogue.length - 1) {

nextButton.disabled = false;

} else {

nextButton.disabled = true;

}

});

nextButton.disabled = true;

if (currentLine >= dialogue.length - 2) {

welcomeScreen.classList.remove('hidden');

welcomeScreen.classList.add('visible-enter');

}

}

nextButton.addEventListener('click', () => {

currentLine++;

updateScene();

});

updateScene();

Transcribed Image Text:<> Animation.html X JS script.js <>Animation.html > html 1 <!DOCTYPE html> 2 <html lang="en"> <meta charset="UTF-8"> # styles.css <title>Animated Encounter</title> <link rel="stylesheet" href="styles.css"> 3 <head> 4 5 6 7 </head> 8 <body> 9 10 11 > Find <div id="story-container"> <img id="human" class="character hidden" src="images/human.png" alt="Human"> <img id="creature" class="character hidden" src="images/creature.png" alt="Creature"> <img id="human2" class="character hidden" src="images/human2.png" alt="Human2"> <div id="dialogue-box" class="dialogue-box hidden"> <p id="dialogue-text"></p> </div> <button id="next-button">Next</button> <div id="welcome-screen" class="welcome-screen hidden"> <h1>Welcome to Hunt the Wumpus</h1> </div> </div> <script src="script.js"></script> 12 13 14 15 16 17 18 19 20 21 22 </body> 23 </html> 24
Transcribed Image Text:64 .visible.enter { 65 66 opacity: 1; visibility: visible; 67 68 69 .dialogue-box { 79 70 71 ララ 72 73 74 75 78 3 position: absolute; bottom: 50px; left: 50%; transform: translate(-50%, 0); width: 60%; padding: 20px; background: rgba(0, 0, 0, 0.7); color: white; border-radius: 5px; narrator { text-align: center; position: absolute; top: 50%; 85 left: 50%; 87 width: 80%; 88 89 transform: translate(-50%, -50%); font-style: italic; background: rgba(0, 0, 0, 0.5); 90 3 #next-button { position: absolute; right: 20px; bottom: 20px; 96 padding: 10px 20px; 97 font-size: 16px; background: #333; color: white; 100 border: none; 181 191 border-radius: 5px; 182 192 cursor: pointer; 103 104 184 105 .welcome-screen { 106 position: absolute; 107 top: 50%; 108 left: 50%; 109 transform: translate(-50%, -50%); 110 text-align: center; 111 opacity: 0; visibility: hidden; transition: opacity 10s ease, visibility 10s ease; 113 114 7 115 115 116 11b 117 opacity: 1; 118 .visible-enter { visibility: visible; 119 120 #welcome-screen h1 { font-family: Arial, sans-serif; font-size: 36px; 126 J color: #ffffff; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 1 body, html { margin: 0; 3 padding: 0; height: 100%; font-family: 'Arial', sans-serif; 32 33 background: url('images/forestbackground.png') no-repeat center center fixed; background-size: cover; 34 35 <> Animation.html JS script.js # styles.css × #styles.css.character 26 @keyframes enterFromLeft { 100% { left: 10%; opacity: 1; visibility: visible; 36 37 } 38 #story-container { position: relative; width: 100%; height: 100%; 39 @keyframes exitToLeft { 40 0% { 41 left: 10%; 42 opacity: 1; } 43 44 100% { .character { position: absolute; 45 46 8 bottom: 10%; left: -20%; width: 20%; opacity: 0; 47 left: -20%; opacity: 0; visibility: hidden; 48 49 } 50 51 visibility: hidden; 52 .character.enter { animation: enterFrom Left 1s forwards; transition: opacity 2s ease, visibility 2s ease; 53 } } 54 55 0% { @keyframes enterFromLeft { left: -20%; 56 .character.exit { animation: exitToLeft 1s forwards; 57 } 58 59 opacity: 0; visibility: visible; } 60 .hidden { 61 transform: translate(-50%, 100%); 62 } 4 100% { left: 10%; opacity: 1; visibility: visible; Q Search 63 64 .visible.enter { 65 66 opacity: 1; visibility: visible; 67 5:24 PM 3/10/2024 PRE

Question

Please rewrite this animation code below so that it performs the same functions in a java file instead of the files .css,.js, and .html in visual studios. You would need to import javaFX and include your images for creature.png,forestbackground.png,human.png, and human2.png. Also attach a screenshot of the running animation in java.

script.js

const dialogue = [

{ character: 'Narrator', text: "In the dead of night, beneath a moon veiled by misty clouds, a lone figure trudged along a desolate forest path." },

{ character: 'Narrator', text: "Unknown to her, she was not alone." },

{ character: 'Human', text: "Who's there? Show yourself!" },

{ character: 'Creature', text: "You venture into realms unknown, mortal. What brings you to these woods?" },

{ character: 'Human', text: "I seek passage to the village beyond. I mean no harm." },

{ character: 'Creature', text: "Harm is but a shadow in these woods, mortal." },

{ character: 'Human', text: "What do you mean? Who are you?" },

{ character: 'Creature', text: "Names are as fleeting as the mist. I am known as the Wumpus, guardian of secrets untold." },

{ character: 'Human', text: "Please, I just want to go home. I won't disturb your domain any longer." },

{ character: 'Creature', text: "Very well, mortal. Leave these woods and trouble it no more. Remember to never forget your place in this world." },

{ character: 'Human2', text: "Hello there user! My name is Mika and you'll be helping me kill the wumpus. Click the next button and choose a cave to enter." }

];

let currentLine = 0;

const humanImg = document.getElementById('human');

const creatureImg = document.getElementById('creature');

const human2Img = document.getElementById('human2');

const dialogueBox = document.getElementById('dialogue-box');

const dialogueText = document.getElementById('dialogue-text');

const nextButton = document.getElementById('next-button');

const welcomeScreen = document.getElementById('welcome-screen');

function showCharacter(character) {

humanImg.classList.remove('visible', 'enter', 'exit', 'hidden');

creatureImg.classList.remove('visible', 'enter', 'exit', 'hidden');

human2Img.classList.remove('visible', 'enter', 'exit', 'hidden');

if (character === 'Human') {

humanImg.classList.add('enter');

creatureImg.classList.add('hidden');

} else if (character === 'Creature') {

creatureImg.classList.add('enter');

humanImg.classList.add('hidden');

}

else if (character == 'Human2') {

human2Img.classList.add('enter');

creatureImg.classList.add('hidden');

}

function typewriter(text, onComplete) {

let index = 0;

dialogueText.textContent = '';

const speed = 50;

function type() {

if (index < text.length) {

dialogueText.textContent += text.charAt(index);

index++;

setTimeout(type, speed);

} else if (onComplete) {

onComplete();

}

type();

}

function updateScene() {

const line = dialogue[currentLine];

if (line.character === 'Narrator') {

humanImg.classList.add('hidden');

creatureImg.classList.add('hidden');

human2Img.classList.add('hidden');

dialogueBox.classList.add('narrator');

} else {

dialogueBox.classList.remove('narrator');

showCharacter(line.character);

}

typewriter(line.text, () => {

if (currentLine < dialogue.length - 1) {

nextButton.disabled = false;

} else {

nextButton.disabled = true;

}

});

nextButton.disabled = true;

if (currentLine >= dialogue.length - 2) {

welcomeScreen.classList.remove('hidden');

welcomeScreen.classList.add('visible-enter');

}

nextButton.addEventListener('click', () => {

currentLine++;

updateScene();

});

updateScene();

<> Animation.html X JS script.js
<>Animation.html > html
1 <!DOCTYPE html>
2 <html lang="en">
<meta charset="UTF-8">
# styles.css
<title>Animated Encounter</title>
<link rel="stylesheet" href="styles.css">
3
<head>
4
5
6
7
</head>
8
<body>
9
10
11
> Find
<div id="story-container">
<img id="human" class="character hidden" src="images/human.png" alt="Human">
<img id="creature" class="character hidden" src="images/creature.png" alt="Creature">
<img id="human2" class="character hidden" src="images/human2.png" alt="Human2">
<div id="dialogue-box" class="dialogue-box hidden">
<p id="dialogue-text"></p>
</div>
<button id="next-button">Next</button>
<div id="welcome-screen" class="welcome-screen hidden">
<h1>Welcome to Hunt the Wumpus</h1>
</div>
</div>
<script src="script.js"></script>
12
13
14
15
16
17
18
19
20
21
22
</body>
23
</html>
24

64
.visible.enter {
65
66
opacity: 1;
visibility: visible;
67
68
69
.dialogue-box {
79
70
71
ララ
72
73
74
75
78
3
position: absolute;
bottom: 50px;
left: 50%;
transform: translate(-50%, 0);
width: 60%;
padding: 20px;
background: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 5px;
narrator {
text-align: center;
position: absolute;
top: 50%;
85
left: 50%;
87
width: 80%;
88
89
transform: translate(-50%, -50%);
font-style: italic;
background: rgba(0, 0, 0, 0.5);
90
3
#next-button {
position: absolute;
right: 20px;
bottom: 20px;
96
padding: 10px 20px;
97
font-size: 16px;
background: #333;
color: white;
100
border: none;
181
191
border-radius: 5px;
182
192
cursor: pointer;
103
104
184
105
.welcome-screen {
106
position: absolute;
107
top: 50%;
108
left: 50%;
109
transform: translate(-50%, -50%);
110
text-align: center;
111
opacity: 0;
visibility: hidden;
transition: opacity 10s ease, visibility 10s ease;
113
114
7
115
115
116
11b
117
opacity: 1;
118
.visible-enter {
visibility: visible;
119
120
#welcome-screen h1 {
font-family: Arial, sans-serif;
font-size: 36px;
126
J
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
1
body, html {
margin: 0;
3
padding: 0;
height: 100%;
font-family: 'Arial', sans-serif;
32
33
background: url('images/forestbackground.png') no-repeat center center fixed;
background-size: cover;
34
35
<> Animation.html
JS script.js
# styles.css
×
#styles.css.character
26 @keyframes enterFromLeft {
100% {
left: 10%;
opacity: 1;
visibility: visible;
36
37
}
38
#story-container {
position: relative;
width: 100%;
height: 100%;
39
@keyframes exitToLeft {
40
0% {
41
left: 10%;
42
opacity: 1;
}
43
44
100% {
.character {
position: absolute;
45
46
8
bottom: 10%;
left: -20%;
width: 20%;
opacity: 0;
47
left: -20%;
opacity: 0;
visibility: hidden;
48
49
}
50
51
visibility: hidden;
52
.character.enter {
animation: enterFrom Left 1s forwards;
transition: opacity 2s ease, visibility 2s ease;
53
}
}
54
55
0% {
@keyframes enterFromLeft {
left: -20%;
56
.character.exit {
animation: exitToLeft 1s forwards;
57
}
58
59
opacity: 0;
visibility: visible;
}
60
.hidden {
61
transform: translate(-50%, 100%);
62
}
4
100% {
left: 10%;
opacity: 1;
visibility: visible;
Q Search
63
64
.visible.enter {
65
66
opacity: 1;
visibility: visible;
67
5:24 PM
3/10/2024
PRE

Accepted Answer

Rich client applications (RIAs) that function consistently across platforms can be designed,…