Coder Social home page Coder Social logo

gruppler / ptn-ninja Goto Github PK

View Code? Open in Web Editor NEW
35.0 4.0 9.0 20.27 MB

An editor and viewer for Portable Tak Notation

Home Page: https://ptn.ninja

License: GNU Affero General Public License v3.0

JavaScript 39.30% HTML 0.82% Vue 58.80% SCSS 1.08%
tak ptn tps

ptn-ninja's Introduction

PTN Ninja

This is an editor and viewer for Portable Tak Notation (PTN). It aims to be...

  • Useful for transcription of live games, even on a phone.
  • Intuitive, with a minimal UI that is enjoyable to use.
  • Responsive, with a fluid design that works as well on a phone as it does in full-screen on a desktop.

Installation

Prerequisites

Install the client-side dependencies

yarn

Install the server-side dependencies (optional)

pushd functions && npm install && popd

Start the app in development mode (hot-code reloading, error reporting, etc.)

yarn dev

Start the server emulators (optional)

yarn emulate

Lint the files

yarn lint

Build the app for production

yarn build

API

PTN Ninja can send and receive messages with its opening or parent window using Window.postMessage(). These messages are objects containing an action, as well as a value where applicable.

For example:

{
  action: "SET_UI",
  value: {
    showRoads: true
  }
}

Actions

SET_NAME (value: <String>)

  • Set the game title

SET_UI (value: <Object>)

  • Set one or more UI parameters

TOGGLE_UI (value: <String>)

  • Toggle the specified UI parameter

SET_CURRENT_PTN (value: <String>)

  • Replace the current game with the provided PTN

DELETE_PLY (value: <Number>)

  • Delete the ply specified by ID

INSERT_PLY (value: <String>)

  • Execute a single ply specified as a string in PTN (e.g. Sb4)

INSERT_PLIES (value: <Object>: { plies, prev })

  • Execute a series of plies specified as strings in PTN (e.g. ['d5', 'e4'], or d5 e4) and go backward prev plies

DELETE_BRANCH (value: <String>)

  • Delete the specified branch

GO_TO_PLY (value: <Object>: { plyID, isDone })

  • Navigate to the specified ply

PLAY

  • Begin stepping through plies from current position

PAUSE

  • Stop stepping through plies

PLAY_PAUSE

  • Toggle between PLAY and PAUSE

PREV

  • Navigate backward

NEXT

  • Navigate forward

FIRST

  • Navigate to the beginning

LAST

  • Navigate to the end

UNDO

  • Undo

REDO

  • Redo

PROMOTE_BRANCH (value: <String>)

  • Promote a branch specified by its name

MAKE_BRANCH_MAIN (value: <String>)

  • Swap a branch with its main line, specified by branch name

RENAME_BRANCH (value: <Object>: { oldName, newName })

  • Rename a branch

TOGGLE_EVALUATION (value: <Object>: { type, double })

  • Toggle evaluation notation on the current ply

EDIT_NOTE (value: <Object>: { plyID, index, message })

  • Replace the specified comment

ADD_NOTE (value: <Object>: { message, plyID })

  • Add a comment to the specified ply, or the current ply if not specified

ADD_NOTES (value: <Object>: { [plyID]: Array(messages) })

  • Add the comments to the specified plies

REMOVE_NOTE (value: <Object>: { plyID, index })

  • Remove the specified comment

TRIM_BRANCHES

  • Remove non-active branches

TRIM_TO_BOARD

  • Remove plies, preserving the board state

TRIM_TO_PLY

  • Remove all plies preceding the current ply

CANCEL_MOVE

  • Abort any in-progress piece movement interaction

NOTIFY (value: <Object>)

  • Issue a notification

NOTIFY_ERROR (value: <Object>)

  • Issue an error notification

NOTIFY_SUCCESS (value: <Object>)

  • Issue a success notification

NOTIFY_WARNING (value: <Object>)

  • Issue a warning notification

NOTIFY_HINT (value: <Object>)

  • Issue a hint notification

ROTATE_180

  • Rotate the board 180 degrees

ROTATE_LEFT

  • Rotate the board left 90 degrees

ROTATE_RIGHT

  • Rotate the board right 90 degrees

FLIP_HORIZONTAL

  • Flip the board horizontally

FLIP_VERTICAL

  • Flip the board vertically

RESET_TRANSFORM

  • Reset any board transformation

APPLY_TRANSFORM (value: <Array>: [ int a, int b ] )

  • Apply the specified board transformation [int a, int b] where a is the number of clockwise rotations [0, 3], and b is the number of horizontal flips [0, 1].

HIGHLIGHT_SQUARES (value: <Array>: [ <String> ] )

  • Highlight the squares specified as an array of string coordinates (e.g. 'a1'). If no squares are provided, the most recent ply is highlighted.

URLs

PTN Ninja uses lz-string to encode PTN and some other parameters for use in the URL. However, it will also do its best to read these parameters when passed as plaintext.

The structure of the URL is as follows:

https://ptn.ninja/<PTN>&<param1>=<value1>&<param2>=<value2>[...]

URL Parameters

name

  • Title of the game

ply

  • ID of the current ply
  • Ending with ! means plyIsDone == true

targetBranch

  • Name of the current branch

theme

  • ID or JSON of the theme to be used

axisLabels (default: true)

  • Show axis labels

flatCounts (default: true)

  • Show flat counts

stackCounts (default: true)

  • Show stack counts

turnIndicator (default: true)

  • Show turn indicator

highlightSquares (default: true)

  • Show square highlights

playSpeed (default: 60)

  • Steps per minute to be used for playback

showAllBranches (default: false)

  • Show all branches

showControls (default: true)

  • Show playback controls

showMove (default: true)

  • Show the current move

showPTN (default: true)

  • Show the PTN panel

showRoads (default: true)

  • Show road connections

showScrubber (default: true)

  • Show the playback scrubber

showText (default: true)

  • Show the Notes panel

unplayedPieces (default: true)

  • Show unplayed pieces

Legal

© 2022 Craig Laparo

This work is licensed under a GNU AGPLv3 License.

ptn-ninja's People

Contributors

dependabot[bot] avatar gruppler avatar meanderingcode avatar nelhage avatar nitzel avatar sander2 avatar skoolin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

ptn-ninja's Issues

Automatic Formatting

  • Styles:
    • Verbose
      • Insert all stone types (before place, after slide)
      • Insert all slide and drop counts
    • Minimal
      • Opposite of Verbose
  • Toggle: Pad line numbers
  • Pad between plies based on longest ply1

In the embed preview white's flat-count has too little padding right when in the double digits

Describe the bug
The embed preview is

  1. missing the player names.
  2. not padding white's flat-count enough when it has 2 digits

To Reproduce
Steps to reproduce the behavior:

  1. Create a new game
  2. Drop enough flats so that white has a 2-digit flat-count or just click here
  3. Click on share->embed

Expected behavior

  1. White's flat count should have the same padding-right as black's has padding-left

Screenshots
image

Desktop:

  • OS: Microsoft Windows 10 Pro 10.0.19042 N/A Build 19042
  • Browser: Chrome
  • Version 88.0.4324.104 (Official Build) (64-bit)

Show notation side-by-side with "play" mode

I find myself really missing (from the ptnviewer fiddle) the ability to step through the game in read-only mode with the notation side-by-side with the board. It's useful to be able to see move numbers and notation when commenting on a game or reading a game that is commented elsewhere.

View Notation and Retain Functionality

I like to always have the game notation open when I study a game, so I can always have my bearings straight, but currently it's impossible to navigate through moves easily when the game notation is open—clicking on each move individually with the cursor is rather cumbersome. Even a simple forward and backward arrow functionality from the notation screen would be fine, but I think it also might be useful to be able to view the notation in a mode where it is not opened in text-editing mode. As I said, I always want to be able to see the notation, but seldom do I want to edit it. Thank you for your consideration.

Trim to current board error with backward navigation

It seems that if you start at the end of the game and navigate backwards through the PTN and then trim to the current board then the active player will swap - e.g. for a given position it’ll go from Black being active to White being the active player.

Add flat count and/or remaining stones

Useful for when using ptn.ninja links for async play (e.g. play-by-email, play-by-IM).
It would be great to show the remaining piece count and/or the flat score to evaluate a possible flat victory without having to count stones

moves and notes sidebars at the same time

I think both the moves pane on the left and the notes pane on the right are strong tools. Right now I don't use the notes because then I cannot see the moves anymore. Instead I write down notes somewhere else. If they where both visible at the same time, I think that would be great!

pieces invisible on iPhone

Played pieces aren't showing up on the board although road highlighting confirms that they are actually there. Same problem on both Safari and Chrome, latest versions of everything. Clearing cookies didn't help.

PvP

I don't want to turn this into a playtak.com competitor, but I want to give it simple peer-to-peer networking so you can share a link with someone and play a private, non-timed game.

I'd also like to allow users to play existing bots.

Listed moves in alternate paths doesn't always work

Describe the bug

The ply for the top of an alternate branch is showing instead of the appropriate one.

To Reproduce

Create a game with multiple branches and steps of those branches.
Manually rewind to the fork
Manually take a previously explored alternate.
In the top, where the plies are, the previous branches' ply is listed instead of the correct one.

backtrack_01
backtrack_02

Off by one comments

It seems to me that the way the comments display is off by one - that is, they appear before the annotated move is placed on the board. For example
download shows the annotation for the upcoming move rather than the one just played (f6 {adjacent corners}).

Can this be tweaked?

Reducing height of browser window to 0 breaks the board-display

Describe the bug
When resizing the browser window to the minimum possible height and then opening it up to a more usable height, the board is broken.

To Reproduce
Steps to reproduce the behavior:

  1. Create a game (seems to work with empty/full)
  2. Resize browser to height=0
  3. Resize browser back to an normal height
  4. Board is now broken
  5. Try to switch between different games: Still broken

Expected behavior
Changing the height to 0 and back should not change how the board looks like.

Screenshots
image

Desktop:

  • OS: Microsoft Windows 10 Pro 10.0.19042 N/A Build 19042
  • Browser: Chrome
  • Version 88.0.4324.104 (Official Build) (64-bit)

Trim to ply in both directions

Can we get a function to Trim to the current ply, also getting rid of all the successive moves, boiling the board down to a specific TPS?

TimeControl tag breaks the site

playtak.com's games now have a TimeControl tag to indicate timer information. This breaks the site. You can maybe ignore unknown tags?

Alternate lines corrupted in editor mode

I have found a bug where the editor is corrupted due to weird alternate line stuff. I have two pictures. To reproduce: Play a few moves in a PTN game (or find an old game). Find a position where white or black captures a piece the turn after which it is placed. (e.g. 4. d4 e4<). Then use the navigation arrows to wind back to the placement and replace it with a noble (I know this works with a wall and am assuming it will with a capstone). Then play one more move with the color that would have done the capture. (unknown atm if this will reproduce will more moves, but fairly likely) Then go to the editor and note that the alternative lines are off and incorrect. If you edit anything - even the name of a player it should start complaining about illegal moves.

Ideally, I'd like to produce a short duplication video, but I don't have the time atm, so I'm hoping this will be sufficient.

ptnninja2
ptnninja1

API

  • Use window.postMessage
  • Send and/or receive in JSON:
    • Raw PTN text
    • Compressed PTN
    • Parsed PTN
    • Current board TPS
    • PTN changes
    • Highlight square(s)
      • By square
      • By ply
    • Navigation events:
      • Previous
      • Next
      • Ply by ID
      • Move by ID
    • Single ply (to be) performed
      • Errors from Board.do_ply()
    • Errors from Game.parse()
    • Message to be displayed
      • Types:
        • success
        • warning
        • error
        • help
        • info
        • comment
        • player1
        • player2

Embed model is empty after refreshing page

Describe the bug
The embed modal is empty after refreshing the page.

To Reproduce
Steps to reproduce the behavior:

  1. Go to e.g. this board on ptn.ninja
  2. Click on share->embed
  3. Press F5
  4. See that the embedded board in the modal is no longer there

Expected behavior
After pressing F5 the modal should either look the same as before or not open at all.

Screenshots
image

Desktop:

  • OS: Microsoft Windows 10 Pro 10.0.19042 N/A Build 19042
  • Browser: Chrome
  • Version 88.0.4324.104 (Official Build) (64-bit)

Also:

  • I didn't spot any errors in the dev console aside from:
    3.c3e6a041.js:1 Error: Cannot find module './en-gb/about.md'
        at 3.c3e6a041.js:1
    3.c3e6a041.js:1 Error: Cannot find module './en-gb/usage.md'
        at 3.c3e6a041.js:1
    
  • I cleared localStorage and could reproduce the problem on an empty 5x5 board as well

Pieces invisible in Firefox Quantum browser

Under both Linux and Windows 10. Everything works fine under Chrome on the same computer, and it all worked fine on previous versions of Firefox. I'm sure this is related to the recent release of Firefox Quantum.

Option to move unplayed pieces above/below the board

Is your feature request related to a problem? Please describe.
On a smartphone screen, the unplayed pieces take up valuable horizontal space, so the board is smaller than it needs to be.

Describe the solution you'd like
Adding an option (or maybe even making it the default on small screens) to move the unplayed pieces somewhere else than next to the board would help. E.g. rotating them 90° and putting them above and/or below the board, where there's plenty of unused space.

Describe alternatives you've considered
There's already an option to hide unplayed pieces entirely, but that's not an ideal solution imo.

Additional context
Here's a screenshot to clarify what I mean:
clarification_screenshot

Drawer menu

  • Play Mode:
    • Highlight squares
    • Show annotations
    • Play speed
  • Edit Mode:
    • Highlight squares
    • Show parse errors
    • Board opacity
    • Trim to current ply
      • Encode current board as TPS and add to header
      • Remove preceding notation
    • Automatic Formatting:
      • Styles:
        • Verbose
          • Insert all stone types (before place, after slide)
          • Insert all slide and drop counts
        • Minimal
          • Opposite of Verbose
      • Toggle: Pad line numbers
        • Pad between plies based on longest ply1
      • Automatically insert analytical notation
  • Board:
    • Animate Board
    • Axis Labels
    • Player Scores
    • Current Move
    • Unplayed Pieces
    • Play Controls
    • Road Connections
  • Game Properties
    • Open modal dialog to view or edit tags
  • Permalink
  • Embed
  • Download
  • Open
  • Load sample game
  • Load stress test
  • About
    • Modal readme.md

Asynchronous Online Gameplay

  • Restructure online games and chats
  • Push notifications
  • Player chat
  • Spectator chat
  • Private scratchpad
    • Optionally auto-respond
  • Rethink UI for Play Mode
  • "Send" button to commit ply
  • History navigation consensus

Link from playtak.com not loading on mobile

I'm not sure if this is a PTN ninja issue or a playtak issue or both, but when I click the ptn.ninja link on a given game from the history page of playtak on my iPhone it brings me to a blank game, rather than loading in the game on file.

Entering TPS mode from the New Game screen is broken

Describe the bug
When you try to enter TPS mode while creating a new game, it enters TPS mode on the previous game and creates a new game where you are not in TPS mode. This then lets you break the previous game completely since you can enter TPS mode while there are also existing plies on the board.

To Reproduce
Steps to reproduce the behavior:

  1. Go to New Game
  2. Click Edit on TPS
  3. Observe how you are not in TPS mode
  4. Check the game you just left, see that you are in TPS mode (sometimes you just get stuck loading the game)

Expected behavior
I except to enter TPS mode for the new game, not the previous one.

Screenshots

image
image
image

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Firefox
  • Version: 102.0.1 (64-bit)

Additional context
Discord message: https://discord.com/channels/176389490762448897/361023655465058307/1001873075425517618

UI for tags

  • Show all possible tags
  • Indicate required tags
  • Inputs provide options or format validation

Issue updating version after following a link to an existing game

Description
The reload required to get an updated version of the code base uses the local storage copy of the PTN rather than the PTN that should have just overwritten it.

Repro Steps:

  1. Have a game in memory.
  2. Have an out-of-date version of the files served from the server.
  3. Follow a link to a game of the same name as the game in step 1, but with different PTN.
  4. Get a pop up to update.
  5. Click the refresh button in the update.

Actual Behavior
The old PTN is displayed on the board and appears to be in local storage.

Expected Behavior
After reload, the new PTN should be displayed on the board and be saved in local storage.

Environment

  • OS: Tested on iOS and Windows
  • Browser: Chrome
  • Version: Latest

Minor Tasks

  • Game info view dialog (for embed and online spectating)
  • Reorganize hotkeys
  • Refactor Main and Embed layouts
  • Update documentation

Unplayed piece count

It would be nice when in play mode to be able to see the current count of each player's remaining pieces, as this is often relevant to the game, making it clear if one player can start forcing a flat win or not.

Counting the pieces on the board is annoying and most people (especially me) are bad at doing it.

square coloring?

The bottom left of a chessboard (a1) is always black, but you consistently use white. Is this intentional? Or can you change it (or leave it to be an option?).

Embed code generator

  • Open in new window
  • Input aspect ratio OR width and height
    • Inputs update on resize
  • Option to include current ply ID in URL
  • Allow initial (edit/play) mode override
  • Allow preference override
    • Presets:
      • Current Board Only (Screenshot Mode)
        • Include only TPS in URL hash
      • Minimal Play Mode
      • Maximal Play Mode

Clock line isn't recognized as valid

playtak-generated PTNs have a [Clock] section which ptn.ninja says is invalid. An example line is [Clock "10:0 +15"] for a game with 10 minutes +15s add

This is especially annoying since the US Tak Open is going on right now and ptn.ninja is really nice to use for sharing games

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.