BesoGo: yet another web-based SGF editor

[EdLee]

Hi YeGo, the stone still doesn't register on an iPhone 4S, iOS 7.x

[Bonobo]

Double tap does place stones for me, with Chrome as well as with Safari, on an iPhone 4s with iOS 9.3.1. I guess it may be difficult with fingers, I used a stylus.

[EdLee]

Hi Tom,

Even double click doesn't register a stone for me, on iOS 7.x ...
Strange...

Hi YeGo, my Safari version seems to be "9537.53"

[YeGO]

OK, I think I understand what might be going on. iPhone (and likely iOS in general) does something non-standard in how it raises events based on taps. Basically, since I have a hover effect and click effect for the board, iOS raises triggers the hover event, but then skips the click because the hover event changed the page content.

See:
https://developer.apple.com/library/ios ... finger.jpg

So, I'll need to figure out another work-around. I could just detect the platform and change the behavior specifically for iOS, but I'd like to avoid too much platform dependent hacks just to accommodate the iPhone quirks. I have to think about this further.

Quite weird to hear that there is inconsistent behavior between two different iPhone 4S (granted that they are using different OS versions).

Thanks for all of your help, EdLee and Bonobo!

By the way, check out this example:
https://jsfiddle.net/u4Lerebm/

On desktops, Androids, etc. (non-iOS), all three of the black buttons will trigger a pop-up that says clicked, and the last button turns the background red when hovered over. However, on iOS, I think the first button won't work, the second button will work, and the third button may or may not work.

[Bonobo]

[..]

By the way, check out this example:
https://jsfiddle.net/u4Lerebm/

On desktops, Androids, etc. (non-iOS), all three of the black buttons will trigger a pop-up that says clicked, and the last button turns the background red when hovered over. However, on iOS, I think the first button won't work, the second button will work, and the third button may or may not work.

1st didn't work
2nd worked: “Clicked” modal dialog
3rd worked: “Clicked” modal dialog, the background turned red

[YeGO]

EdLee, Bonobo, and other iOS and mobile users:

Could you please test the functionality of the latest changes at:
http://yewang.github.io/besogo/testing.html

I just made changes to suppress the hover effects altogether, when a touch interface is detected. Hopefully, this will allow EdLee to place stones and remove the "double-click" requirement for Bonobo. Also, it removes the awkward hover effect for all other mobile/touch interface users.

[EdLee]

Hi YeGo,

Thanks for taking the feedback and tryng to fix this bug.
The new behavior is there's a quick flash (double flash?)
of a grey square; then, a blue + sign at the intersection.
But still no stone registered, unfortunately.

image.jpg (91.17 KiB) Viewed 6104 times

[YeGO]

Now that's a strange bug. The blue plus is used to signify the previous move, so the move is getting registered in some form, but the stone isn't drawn for some reason.

What happens when you click the board in multiple places? Do you get a blue plus at each point you click? Does the tree display grow as you click on the board? What does the rest of the page look like? Do the navigation buttons move you throughout the tree? Can you click on individual nodes on the tree?

Thanks a lot for all of your help in working out these bugs.

[YeGO]

Looks like this new bug is caused by a CSS styling change that I recently introduced, where the styling of certain SVG properties (in this case, the radius of circles) is not supported on all browsers. I will fix this later.

Also, I need to further tweak the touch detection code, since the navigation tree still has hover effects that need to be taken care of.

[EdLee]

What happens when you click the board in multiple places?
Do you get a blue plus at each point you click?

Yes.

Does the tree display grow as you click on the board?

Yes.

What does the rest of the page look like?

Do the navigation buttons move you throughout the tree?

Yes.

Can you click on individual nodes on the tree?

Yes.

image.jpg (110.98 KiB) Viewed 6062 times

[Bonobo]

iPhone 4s, iOS 9.3.1, Chrome/Safari

I tap once, a grayed stone appears.

I tap elsewhere, the grayed stone appears there.

I tap a second time on the same intersection (NOT necessarily a double tap, which is nice and, for me, the expected behaviour), the stone appears with a blue cross and a blueish tint.

Then I tap elsewhere, and as the new, grayed stone appears, the blueish tint disappears from the last placed stone.

IMG_0221.PNG (62.36 KiB) Viewed 6042 times

IMG_0222.PNG (62.57 KiB) Viewed 6042 times

What happens when you click the board in multiple places?

See above.

Do you get a blue plus at each point you click?

After the second tap (or double tap).

Does the tree display grow as you click on the board?

Yes.

What does the rest of the page look like?

Nice First I thought, “ugh, why is the White/Black info cut off at the bottom?”, then i realized I can scroll the page—had forgotten that it was not an app but rather a Web page

Do the navigation buttons move you throughout the tree?

Yes

Can you click on individual nodes on the tree?

Yes


And now I tried it with Safari on a first generation iPhone (iOS 3.1.), and I cannot place stones, only grayed-out stones appear, and when I tap, a black square appears very shortly. [A minute later:] I realize that the black square also appears on the iPhone 4s but for an even shorter time, just flashing up once.

[EdLee]

Hi YeGo,

I can reproduce the same results in post 25 on these platforms:

- iPhone 4S, iOS 7.x, Safari version "9537.53"
- Windows 8, Firefox 45.0.2
- Windows 8, IE 11.0.9600.18283
_____________________________________________

So far, the first and only time I see actual and stones is here:

- Windows 8, Chrome 49.0.2623.112 m

[YeGO]

EdLee, Bonobo,

Thanks for all of your help and detailed descriptions for debugging on the iPhone.

I just pushed new changes that hopefully fixes the missing stones bug (caused by stylesheet issues this time). Hopefully, the testing site should work as intended on iOS now.
http://yewang.github.io/besogo/testing.html

Eventually I will make a new release with these changes as well and update the main site (http://yewang.github.io/besogo/) to use the new code as well.

Bonobo, in your last post, were you using the site "http://yewang.github.io/besogo/" rather than "http://yewang.github.io/besogo/testing.html"? The former actually runs an older version of the code.

The "double-click" to move behavior observed by Bonobo on iOS was not actually the intended behavior, but rather just a quirk of how the hover effects cancel clicks on iOS. I may eventually add this behavior back in (making it a user option) as an intentional feature, but for now, I have removed it since it was just an unintentional and unreliable effect caused by a bug.

[YeGO]

Hi YeGo,

I can reproduce the same results in post 25 on these platforms:

- iPhone 4S, iOS 7.x, Safari version "9537.53"
- Windows 8, Firefox 45.0.2
- Windows 8, IE 11.0.9600.18283
_____________________________________________

So far, the first and only time I see actual and stones is here:

- Windows 8, Chrome 49.0.2623.112 m

Thank you for these details. I was able to track down this issue to how stylesheets are handled for styling SVG elements. I had made other changes that involved pushing certain graphical properties into the stylesheet (in particular, the radius of the stone circles). This works fine on Chrome, however, it seems that it fails on many other browsers since it is not standard stylesheet property, which in turns causes the stone circles not to appear since the radius was not set.

[Bonobo]

Bonobo, in your last post, were you using the site "http://yewang.github.io/besogo/" rather than "http://yewang.github.io/besogo/testing.html"? The former actually runs an older version of the code.

Ouf, IIRC the first one, sorry

Currently I’m a little handicapped but will try the /testing page ASAP.