Hi I was starting with Phaser, I have used Phaser 3 and setup phaser with typescript and webpack, My HTML file looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type it Out</title>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content_box {
margin: 10px;
padding: 10px;
text-align: center;
border: 1px solid black;
}
.content_input {
width: 100%;
}
.content_input textarea {
width: 100%;
display: inline;
}
</style>
</head>
<body>
<div class="content">
<div class="content_box" id="textBox">
</div>
<div class="content_input">
<textarea rows="4" id="inputBox" ></textarea>
</div>
</div>
<textarea rows="4"></textarea>
<script src="bundle.js"></script>
</body>
</html>
and this is my main typescript file
import Phaser from 'phaser';
import { GameScene } from './Scenes/GameScene';
import { SpeedController } from './controllers/SpeedController';
(() => {
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
backgroundColor: '#000',
scene: [GameScene],
physics: {
default: "arcade",
arcade: {
debug: true
}
},
};
const game = new Phaser.Game(config);
const speedController = new SpeedController();
game.scene.start('GameScene', {
speedController,
});
const textBox = document.getElementById('textBox');
const getRandomText = async () => {
const text = "become aware of happiness once you have lost it. Then an age comes, a second one, in which you already know, at the moment when you begin to experience true happiness, that you are, at the end of the day, going to lose it. When I met Belle, I understood that I had just entered this second age. I also understood that I hadn’t reached the third age, in which anticipation of the loss of happiness prevents you from living.";
return Promise.resolve(text);
}
if (textBox) {
getRandomText().then(text => textBox.innerHTML = text);
}
const inputBox = document.getElementById('inputBox');
let inputString = "";
if (inputBox) {
inputBox.addEventListener('input', (e) => console.log(e));
const inputString = inputBox.textContent;
console.log(inputString);
}
})();
The textarea never allows a space entry.
I tried this solution
and added game.input.keyboard.clearCaptures() but nothing happened.
When I try to add this line in my scene constructor I get error ie this.input is undefined.
When I add this statement to create function nothing happens.
