Javascript based Tak client
Home Page: https://www.playtak.com
License: GNU General Public License v2.0
Javascript based Tak client
If you want to test your changes with TakServer running locally on your machine, you'll need websockify (https://github.com/novnc/websockify)
NOTE: https://playtak.com is now being maintained by US Tak Association (https://ustak.org)
The chat time is a useful feature, because it can give an impression on how long ago a conversation took place and so forth. Sadly, the time also takes a lot of space, and is therefore often disabled.
Suggested solution:
A possible solution to this would be, to detach the chat time from a singular message and group messages that arrive within the timeframe of a single minute into one block, with one overhead timestamp. That timestamp can be hidden/displayed through the options as before, but is shown above a block of messages instead of at the start.
This will reduce the total space time stamps take up in the chat, as it reduces the number of visible time stamps, while at the same time maintaining the same level of information as before.
This is strictly a client side feature, as the grouping into message blocks happens at client side.
Since there are currently at least 3 people working on various forks and branches, and the number might increase in the future, it might be useful to modularize html.index, which is currently the file everything is being done in. This would allow for more flexible modifications, and reduces problems with merging. It also improves control over indicidual changes (for the branch master). Currently almost all variables are stored with board, the rest are directly or indirectly within the top level script.
This is practical for quick access, and was probably the way to go in the beginning, but is actually a long term bug hazard.
Suggestion:
I think the pieces should take up less room than they currently do in the square. In most boards I've seen, the piece size is about 3/4 of the square it occupies. So I think playtak would look better with a piece_size of 70ish.
There have been more than 5 bots online for a couple of days now. Currently the count is 6. I want to emphasize the need for a separate interface for bots, so that users can directly select to play against a bot and pick which bot. This should be a separate button than 'join game' as that clutters the interface. I really like playing bots, but when I am looking for a human player, I don't want to mentally filter the list each and every time.
The canvas size is currently 2x2 pixels larger than its CSS size, causing it to be scaled. This is caused by the element having a 1 pixel border, which under box-sizing: border-box;-rules makes the content area that much smaller. Either remove the border, or make the canvas size 2x2 pixels smaller.
The private chat room is automatically opened once a private message arrives or a game is opened. If later a message arrives on this channel, the user is not informed.
It would be nice to initially give each player one piece of the other color.
The following resulted in a road by player 1 that the game somehow didn't see:
[Site "PlayTak.com"]
[Date "2016.5.5"]
[Player1 "Fendroun"]
[Player2 "weka"]
[Size "5"]
[Result ""]
db id -> 1744, game id->1220
P A1,P E2,P C2,P A2,P A3,P B2,P C3,P B4,P B3 C,P D2 C,P D3,P E3,P D4,M E3 D3 1,M D4 D3 1,M A2 A3 1,P C1,M D2 D3 1,P C4,M B2 C2 1,P C5,M D3 C3 2,P B2,M C2 C1 2,P D1,M C1 D1 3,P C1,M C3 C4 2,M C1 D1 1 --> state in server.
Black was able to play M C4 D4 4 which resulted in NOK from server.
Would be great to have a per-game chat window that only watchers can see, for kibitzing purposes :)
So, currently the only way to pm a given player online is if they're active in chat.
It would be helpful to be able to more easily see who's online, and from there to be able to PM / direct message them.
(I would also include / separate bots in this list, so players / bot authors can create more particular interaction with the bots)
The readme says that TakWeb needs websockify in order to connect to the server. There is no details on how to combine websockify and TakWeb, and no reason given for why it should be necessary, making this step a frustrating endeavour.
I finally figured that TakWeb doesn't need websockify, it runs fine in Firefox. What I did need to do was to throw away the code that generates the wss://www.playtak.com/ws url, and just use that url, because no other url will work, unless one also set up a server.
Downloaded PTN display a wrong date. The display format appears to be y.m.d, but the month is represented by the index of the month, instead of it's calendric numeral.
April ~ 3 for example. Should be 4.
Also the time is not correct. Have not figured out the format there.
If someone in the chat says a URL that happens to have your user name in it, the two sets of highlighting conflict and out comes a broken mess. Happens to me all the time whenever TakBot gives his help URL.
When I start watching a game, I like to jump back to the beginning and step through the previous moves. When one of the players moves, though, the client automatically jumps to their new move, and I have to go back to where I was. It would be nice to have it not auto-jump forward, at least while watching.
(A simple fix for this might be to just save the current move number at the beginning of serverPMove and serverMMove, then just jump back to it after fast-forwarding and applying the latest move.)
It would be nice for there to be some way of saying, for example, return all games where kakaburra is white, OR kakaburra is black, and have a player's entire history returned.
What would be even better, if slightly more complicated, is to have a way to return all games between two players, ie, where (white is kakaburra AND black is TreffnonX ) OR (white is TreffnonX AND black is kakaburra)
It would be nice to initially give each player one piece of the other color.
On the master, the name highlighting does not work due to a bad reference.
// someone said our name and link in string doesn't contain name
if (occ === occ2 && txt.indexOf(this.myname) > -1) {
var tmp = txt.split(this.myname);
txt = tmp[0] + '<span class="chatmyname">' + this.myname + '</span>' + tmp[1];
}
the variable myname is in the server object. Also only the first instance of the name will be replaced.
Code could be optimized like this: (tested on my fork)
txt = txt.replace(new RegExp('(?:^|\\s)' + server.myname + '(?:^|\\s)', 'gi'),
'<span class="chatmyname">$&</span>');
alternatively myname could be moved to the chat handler, but I am not sure, if the variable is used inside server for other purposes.
Auto scroll chat to bottom only if the scrollbar is already at bottom.
Tried to load the empty 5x5 board.
[TPS "x5/x5/x5/x5/x5 1 1"]
Board shows as 1x1 and there are 40 pieces for each side.
Tried to load a Tak puzzle:
[x3,122,2S/x,22S,22C,11,121/121,212,12,21121C,1212S/21S,11,221,211S,12S/x,21S,2,x2 1 -]
It shows the correct layout, but doesn't show any available pieces for the players.
Well DUH! that is an invalid TPS, because there are too many pieces on the board. My new changes fix that problem and give a warning about it.
Maybe I'm missing it but there doesn't appear to be any ui for password resets.
Enable player to copy or download game notation
Enable user to resize chat window.
Users have requested the implementation of an 'undo button', which would work similar to the 'offer draw' button in the gui, and parse the latest PTN-Move to undo the last move (if both players agree to it).
Required changes:
Client:
Server:
If a stack has stones in all four adjacent squares the lower stones are invisible, no matter how the board is rotated.
Could the stones be made slight smaller (or the spaces slightly larger) so that there is a gap between them to look through?
Texture loading takes more time than page rendering, so sometimes, board is black.
Currently playtak.com does not allow direct user to user interaction (if we disregard the chat, which is currently global). This blocks several other interesting features, which are common to other platforms and games, and are usually expected in some form or another. A list of 'missing features' are:
All of the above features either require, or greatly benefit from the existence of user interactive features. Direct Chat (also called whisper chat) does not directly require this.
The proposed change would be, to add an 'online friends' menu item, which on click opens up a non-modal window, which can be placed in any location, and displays befriended players and their login state in a scroll list. Users can then interact with other players by right clicking their names in the list or in the global chat (or typing it into a specific entry field), and specify an interaction through a drop down menu. Features for interactions may include (but may not be restricted to) the features listed above.
This suggestion depends on the introduction of a playtak internal ranking.
If the server recognizes where a connection comes from (websocket port/ websockify port), it could base the information whether someone is a bot on that instead of hard coding this.
Then, in combination with an internal ranking, the server could define the bot difficulty based on
that ranking instead of some hard coded string. The difficulty could also be specified not only as a word, but as a relative number (ELO/Glicko/etc).
If you aren't staring at the board when your opponent makes a move it may be hard to notice where they moved. Similarly, if you are watching a game it can be easy to miss a move. Of course, you can use the notation window to bounce back and forth, but it would be nice if there were a way to make the most recent move more visible.
I realize there are difficulties with this. If a stone/stack is being moved, do you show where it's moving from or only where the pieces end up?
Desired Traits of the feature:
When window is resized, click/touch locations of pieces are shifted.
Warning messages on console saying textures not multiple of 2. Low priority bug.
The current loader function loads TPS, but the output for downloading notations is PTN.
Neither the file, nor the PTN-String can be correctly parsed by the parsing function.
Suggestion: Relable 'Load TPS' into 'Load Log' and accept both TPS and PTN strings.
Also, a file dragged into the string field should be loaded, so the user does not have to manually open the file to load it. A 'Select PTN file' button in the loading modal is also possible.
With the new load from PTN working nicely, I was also recently trying to do a load from a TPS, but I got an error that "invalid PTN: invalid size". Maybe separate out loading from TPS/PTN?
Loading from a TPS within a PTN is a bit odd:
It would be nice if the server saved the last few (say 20) chat messages (in a FIFO stack).
Then when a client connects the server could serve up those last 20 messages.
Step through clears all scene objects and creates them again. This is not efficient and results in a little delay.
Virtual keyboard opens and immediately closes when trying to chat. I think this is because after the window resizes to fit the keyboard, canvas also resizes to fit the whole window, so virtual keyboard closes.
In IE11, setting the size of the pieces doesn't seem to work. They stay large no matter what the setting is.
All of the other customizations are recognized.
Reproduce:
System: Win 7 x64 Pro
Browser: Firefox 45.0.1
Description:
Rescaling or moving the browser window opens the chat window.
The notation window currently displays the PTN in a reasonably functional way. However some features are provisionary at the moment. The application of moves will flash the board and cause the textures to vanish for a brief moment. Whenever a player makes a move, this will occure too.
Also the width of the notation entries will vary depending on the currently displayed move, as well as the size of various entries (Firefox).
I have fixes for both in my current Fork, which I can make into a mergable patch on request.
See treffnonx.github.io/TakWeb for reference.
These fixes will also make the disabled rendering during move updates obsolete, as the reorganization of pieces does not require an interruption in rendering.
Users have requested additional control of the look and feel of the board and pieces. Especially the tile size is a requested option.
Required Changes:
Client:
This feature request seems possible, since it is strictly client-side.
Multiple messages from the same person have increased overhead, as they display the user name multiple times. To reduce overhead and declutter the chat, followup messages from the same user could ommit the user name, while signifying the separate arrival through an alternating background color (very light grey - similar to original chat background). Every second message arriving from the same user in a row could be given this separate color.
If combined with the feature request for blocked time stamps, messages arriving in different time blocks can still ommit the name, but restart the sequence of alternating backgrounds.
This feature will ultimately clean up the clutter in the chat, while allowing more information in the same space. This feature would be strictly client side.
When a new move is played the notation list should scroll to bottom. Current code scroll to a value depending on current scroll, which makes the scroll go back and forth. The game has to be longer than two times the notation window for this bug to occur.
Her is a fix: #44
So apparently, different browsers on different OSes support different audio formats only.
White chrome seems to support all on every OS, most other browsers don't.
MP3 and MP4 depend on the OS with Opera and Firefox.
There is not a single audio format apparently, which works on every browser,
but there are pairs of formats, which cover all.
So if the mp3's are used for everything but Firefox and Opera, and for those browsers another file is loaded, it should work.
Working formats in Firefox and Opera (according to Wikipedia):
wav with PCM, Ogg with Vorbis, WebM with vorbis, Ogg with Opus, WebM with Opus.
Those formats are all problemativ with IE and Safari though.
I will find a converter and write a fix for it.
It would be very nice to somehow make chat messages from your opponent more visible in the chat window.
Two options:
I loaded the page and it shows up for me like this, making it unplayable
While tps is cool, dealing with games and analysis tends to be a bit more PTN heavy and it would be great to load up a PTN into a scratch board.
Encountered a bug while working on my branch (this occured on the regular playtak.com server).
Logged in as Guest44, I tried to message (myself) through the game chat. The response was:
Server says: You need to be in the room
Supposing a game chat exists for players as well, there seems to be something wrong.
It would be nice to be able to pass meta-data into PTNs for bot play. For example, if I were to play against friendlybot, I'd like to be able to have a record of the level at which I was playing.
Maybe something like this:
[Site "PlayTak.com"]
[Event "Online Play"]
[Date "2016.06.24"]
[Player1 "X"]
[Player2 "FriendlyBot - level 6"]
[Result "R-0"]
[Size "6"]
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
