We Keep Coding

Phaser 2 buttons are needed to work text? What's happening?

I'm working on a dialogue system for my game. I have it almost finished, but I'm stuck on one weird bug. Here is the code for it in the update method. Assume everything with this in front of it was declared in the create method.
if ((this.checkCollision(this.p1, this.goodLamb) || this.checkCollision(this.p1, this.stiches)) && Phaser.Input.Keyboard.JustDown(this.keyT)) {
this.talking = true;
}
if (this.talking == true){
if (this.checkCollision(this.p1, this.goodLamb) || this.checkCollision(this.p1, this.stiches)) {
if (this.has("spool") && this.has("needleOne") && this.has("needleTwo")){
this.line1.setText('Good Lamb: Oh, thanks Peef! Now we can fix Stiches!');
this.line2.setText('Peef: Glad to help. I know how painful rips are.');
}
else if (!(this.has("spool")) || !(this.has("needleOne")) || !(this.has("needleTwo"))) {
this.line1.setText('Good Lamb: Help! Stiches ripped herself again! Can you get the sewing supplies?');
this.line2.setText('Peef: Oh gosh! Sit tight Stiches. Ill be back soon!');
}
}
if(this.keyA.isDown) {
this.p1.setVelocityX(0);
}
else if(this.keyD.isDown) {
this.p1.setVelocityX(0);
}
if(this.p1.body.touching.down && Phaser.Input.Keyboard.JustDown(this.keyW)) {
this.p1.body.setVelocityY(0);
}
if ((this.checkCollision(this.p1, this.goodLamb) || this.checkCollision(this.p1, this.stiches)) && Phaser.Input.Keyboard.JustDown(this.keyT)){
this.talking = false;
this.line1.setText('');
this.line2.setText('');
}
}
I admit this may be an outrageously overly complicated text system, but it's the only one I've gotten to work. When the player presses the talk button when touching an npc, the game checks for collision and sets the talking Boolean to true. If that Boolean is true, the game disables the player's movement and displays dialogue based on who the npc is and if they met the criteria for completing the associated quest, in this case gathering 2 needles and a spool of thread. For the player to continue, they have to press the talk button again, which turns the talking Boolean back to false, restores movement and makes the text disappear.
It's the last step that's not working. For some reason, when the player presses the talking button again, the talking Boolean doesn't change back and none of the associated actions happen.
The only solution I currently have is to change the button that makes the text disappear to a different button from the talking button. This lets things work as intended, but it's also an awkward button set up for the player.
Is there a solution, or am I just going to have to live with this issue?
If it helps, I'm using Phaser 3 in VSCode employing arcade physics.

No 1 Button is enough. What is happening, is hard to say, because your code is pretty complicated. In any case the main problem is that your if/else blocks are setup incorrect.
I cleaned it up and tried teh if/elseblocks in the correct order, so that they reflect, what you want to happen.
Although it is hard to say since, your code snippet covers only a small part of your update function.
if ((this.checkCollision(this.p1, this.goodLamb) || this.checkCollision(this.p1, this.stiches)) && Phaser.Input.Keyboard.JustDown(this.keyT)) {
if(this.talking == false){
this.talking = true;
if (this.has("spool") && this.has("needleOne") && this.has("needleTwo")) {
this.line1.setText('Good Lamb: Oh, thanks Peef! Now we can fix Stiches!');
this.line2.setText('Peef: Glad to help. I know how painful rips are.');
}
else if (!(this.has("spool")) || !(this.has("needleOne")) || !(this.has("needleTwo"))) {
this.line1.setText('Good Lamb: Help! Stiches ripped herself again! Can you get the sewing supplies?');
this.line2.setText('Peef: Oh gosh! Sit tight Stiches. Ill be back soon!');
}
/* this velocity blocks seem strange, but if it works for you why not */
if (this.keyA.isDown || this.keyD.isDown) {
this.p1.setVelocityX(0);
}
if (this.p1.body.touching.down && Phaser.Input.Keyboard.JustDown(this.keyW)) {
this.p1.body.setVelocityY(0);
}
} else {
this.talking = false;
this.line1.setText('');
this.line2.setText('');
}
}
Try to keep if/else nesting low, and try to group condition to avoid mistakes and performance issues (for example: multiple calculations / collision checks)
Update / Improvement:
Here the same code from above just more concise, and easier to understand / read
/* default text values is empty string */
let textLine1 = '';
let textLine2 = '';
/* I put "Phaser.Input.Keyboard..." first, for performance reasons */
if (Phaser.Input.Keyboard.JustDown(this.keyT) && (this.checkCollision(this.p1, this.goodLamb) || this.checkCollision(this.p1, this.stiches))) {
if(this.talking == false){
let hasAllItems = this.has("spool") && this.has("needleOne") && this.has("needleTwo");
if (hasAllItems) {
textLine1 = 'Good Lamb: Oh, ...';
textLine2 = 'Peef: Glad to help. ...';
} else {
textLine1 ='Good Lamb: Help! ...';
textLine2 = 'Peef: Oh gosh! ...';
}
/* just set the velocity always to 0, no if/else is needed */
this.p1.setVelocity(0);
}
// toggles: true <=> false
this.talking = !this.talking;
/* set the text's object in one place, no matter the text */
this.line1.setText(textLine1);
this.line2.setText(textLine2);
}

JavaScript Conditionals not working

I'm sorry I didn't search for another topic I thought this was a bit too specific, ok now that's out of the way!
When this is run missionButton.click(); is always ran, even though CheckHealth() is = to 0 it's like it's just skipping over the original if statement, is this normal for JavaScript (I'm used to other languages)
//__Action_Functions__
// When you're at zero health.
function Hospital(){
location.assign("http://www.gangwarsmobile.com/index.php?p=hospital");
var HospitalUse = HospitalID;
HospitalUse.click();
setTimeout(location.assign("http://www.gangwarsmobile.com/index.php?p=crimes"),5000);
}
//__Does Mission__
function start(){
var missionButton = CrimeID; //CrimeID is the ButtonID from the /crimes page/ variables at the top of this script.
if(CheckHealth() === 0){Hospital();}
else if (CheckStamina() > 0);{missionButton.click();}
}
I can't see a reason why this will not work.
EXTRA
I'm using TamperMonkey, if that makes any difference.

Did you forget to take out ; after the () > 0 ?
Original:
if(CheckHealth() === 0){Hospital();}
else if (CheckStamina() > 0);{missionButton.click();}
Fixed:
if(CheckHealth() === 0){
Hospital();
} else if (CheckStamina() > 0) {
missionButton.click();
}

Play/Pause Audio Button Using HTML5 And JavaScript

I am facing a problem for a couple of hours. I have some Radio Channels into a HTML document. Every channel has an image (it's logo). I can't figure out how to make the "click to Play/Pause" working.
Here's the JSFiddle document : http://jsfiddle.net/s35vk80m/1/ 123
If you click on the first image, it will play/pause the channel. The second button act like the first one.
How can I make it work, so that both of them would work independently and if I click on the second one while the first one is running, it would stop the first channel and start the second one?
I am sorry, I am a begginer :-).

Based on w3schools html5 audio, m3 and pls audio types are not supported.
Maybe streaming will do (never tried), something like this is-it-possible-to-play-shoutcast-internet-radio-streams-with-html5.

function aud_play_pause() is defined in your code twice. You need to give the second function a different name or just use one function to do both things. I would do something like this:
function aud_play_pause(channel) {
var Radio21 = document.getElementById("Radio21");
var RadioZU = document.getElementById("RadioZU");
if(channel == 'radio21'){
RadioZU.pause();
if (Radio21.paused) {
Radio21.play();
} else {
Radio21.pause();
}
}
if(channel == 'radioZU'){
Radio21.pause();
if (RadioZU.paused) {
RadioZU.play();
} else {
RadioZU.pause();
}
}
}
</script>
Someone more knowledgeable than I could probably provide a more elegant solution but this should work.
Also, I couldn't get your JSFiddle to work in my browser and I couldn't get my JSFiddle to work so I haven't been able to test the function. Firefox didn't like the ContentTypes you are using: "HTTP "Content-Type" of "audio/x-mpegurl" is not supported. Load of media resource http://www.radio21.ro/Radio21Live.m3u failed."
EDIT:
I thought about this a little more and basically you need a toggle. I can't get your example to work in Firefox so I'm going to create a toggle example that doesn't solve your problem but should illustrate how to fix it.
function example(string) {
var first_div = document.getElementById("one");
var second_div = document.getElementById("two");
if(string == 'one'){
second_div.innerHTML = "OFF";
if (first_div.innerHTML == "OFF") {
first_div.innerHTML = "ON";
} else {
first_div.innerHTML = "OFF";
}
}
if(string == 'two'){
first_div.innerHTML = "OFF";
if (second_div.innerHTML == "OFF") {
second_div.innerHTML = "ON";
} else {
second_div.innerHTML = "OFF";
}
}
}
<div id="one" onclick="example('one')">OFF</div>
<div id="two" onclick="example('two')">OFF</div>

Selecting pictures with Jquery and Javascript

I'm testing out a layout on a website using 3 pictures here:
Schechterbusiness.info
the left button works, making it go through the pictures. But I can't figure out how to get the right button to work, which is supposed to scroll through the other way. I know there's probably a way to do it with arrays but I can't wrap my brain around it. Halp!
Code to scroll through pictures:
$('#fryLink').click(function() {
$('#hide').hide();
$('#img').hide();
count++;
if(count == 1) {
$('#img').attr("src","images/fry.png");
}
else if(count == 2) {
$('#img').attr("src","images/bender.png");
}
else if(count == 3) {
$('#img').attr("src","images/zoidberg.png");
}
$('#img').show("fade");
if(count > 2) {
count = 0;
}

normally it should be enough to just use use the same function the other way around with
count--;

following the first answere
Bind event to right mouse click
reverse the counter ;)

You have count cycling through four states: 0, 1, 2, and 3. But you only set the image for states 1 - 3.
This leads to duplicating one image--whichever was the last one--when your count variable is on 0.
As to helping you get exactly what you want, unfortunately that is not really clear. Are the three buttons supposed to be a sort of "forward / something / reverse"? What do you want to happen when the center button is clicked on?
Also, making the buttons display the proper pointer/hand icon is important. Right now they show the text selection bar instead, and that makes it confusing since it conveys to the user that the items are not clickable.

Try this
var count = 0;
var imgLength = 3;
$('#leftLink , #rightLink').click(function() {
$('#hide').hide();
$('#img').hide();
if (this.id === 'leftLink') {
count--;
if (count < 0) {
count = imgLength-1;
}
}
else {
count++;
if (count > imgLength-1) {
count = 0;
}
}
var src = "images/fry.png";
if (count == 1) {
src = "images/bender.png";
}
else if (count == 2) {
src = "images/zoidberg.png";
}
$('#img').attr('src',src).show("fade");
});​

Using Javascript to modify elements for navigation

JS beginner here;
Ok, I'm trying to manipulate the functions of Codaslider for a layout. What I need is the ability to use an image for slide dynamic slide navigation.
I've solved the issue for dynamic hashing, however I'm stuck at modifying the HTML. I've tried a few things but I figure this is the easiest way...
This is what I've got so far;
function navigate ()
{
var url = document.getElementById('back');
url.href = page_back();
return url;
}
function page_back(inward)
{
new Object(inward.location.hash);
var rehash = inward.location.hash.match(/[^#]/);
if (rehash == 1) {
rehash = 5;
}
else if(rehash == 2) {
rehash = 1;
}
else if(rehash == 3) {
rehash = 2;
}
else if(rehash == 4) {
rehash = 3;
}
else if(rehash == 5) {
rehash = 4;
}
else if(rehash == null) {
rehash = 5;
}
else{rehash = "Invalid URL or REFERRER"}
inward.location.hash = rehash;
return inward.location.href;
};
Implemented here;
<a href="#5" id="back" class="cross-link"> <input type="image" class="left_arrow" src=
"images/leftarrow.png" onclick="navigate()" /></a>
What I expect this to do is change the href value to "#1" so that Codaslider will do it's thing while I provide a stationary dynamic image for slide browsing.
Anyone have any idea what i'm doing wrong? page_back works fine but navigate seems to be useless.

sup Josh
so to start this line here
new Object(inward.location.hash);
Unless i completely missed some javascript weirdness that line should not do any thing
the function
function page_back(inward)
takes a inward argument but you call it from navigate without an argument
url.href = page_back();
ps. the location object can be found on window.location
happy coding :D