GithubHelp home page GithubHelp logo

crkco / chess.com-redesign-of-nibbler-gui Goto Github PK

View Code? Open in Web Editor NEW
14.0 4.0 1.0 13.88 MB

Nibbler with Chess.com Icons and Review

JavaScript 90.68% CSS 4.27% HTML 5.06%
chess gui chess-com analysis icons javascript nibbler review stockfish lichess-api

chess.com-redesign-of-nibbler-gui's Introduction

Chess.com Redesign of Nibbler GUI

This is a redesign of the Nibbler Chess GUI (https://github.com/rooklift/nibbler), creating a similar look and feel as Chess.com (only tested for Stockfish).

How to install?

Under Code - Download ZIP. Extract and replace all in nibbler-folder/resources/app/.

What is changed?

Mainly the layout and graphics have been changed. The pieces are now sliding instead of teleporting, sounds have been added and themes (e.g. lichess board and pieces) can be selected.

Additionally, each move shows an evaluation icon similar to Chess.com and accuracy is also calculated.

How is win percentage and accuracy calculated?

Both calculations are directly taken from lichess: https://lichess.org/page/accuracy.

How does this differ to Chess.com's evaluation?

The win percentage is the exact same, where only the engine and depth create differences.

To calculate if a blunder or better moves occured, Chess.com's table providing the win percentage difference for each classification is used: https://support.chess.com/article/2965-how-are-moves-classified-what-is-a-blunder-or-brilliant-and-etc.

However, it is also stated that they are not using as strict of a model anymore (e.g. less blunders for lower rated players) and therefore the number of blunders can be different. From comparing some games, it is practically the same, but with more blunders.

How does accuracy differ to Chess.com's calculation?

Since lichess' calculation is very strict, you will see quite high accuracies displayed. Chess.com is using a newer model that takes some context into account and is also aiming for a general evaluation that tells you if you played good or not, which means it is generally lower than the strict model. More about it: https://support.chess.com/article/1135-what-is-accuracy-in-analysis-how-is-it-measured.

Credits

Credit to https://github.com/Aldruun for creating chess move sounds.

Chess pieces are taken from: https://github.com/lichess-org/lila/tree/master/public.

chess.com-redesign-of-nibbler-gui's People

Contributors

crkco avatar

Stargazers

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

Watchers

 avatar  avatar  avatar  avatar

Forkers

nathan-lc0

chess.com-redesign-of-nibbler-gui's Issues

Awesome Contribution

Sliding pieces and board sounds would make this Redesign perfect! Beautiful work!

HELP

I have been trying to set this up after installing nibbler but it's not working, so if someone can tell me how to do it please replay.

I'm on Linux by the way.

List of issues I will fix when there's time

Issues

Evaluation displaying best move instead of excellent move when missing a move that could lead to an earlier mate.

When moving pieces too fast, sliding motion is intersected.

Sounds are sometimes playing too late.

Every move needs to be revisited after auto-eval in order to show total accuracy.

Accuracy sometimes showing NaN.

Arced movement is weird.

What I want to add next:

DONE - Default sounds that are not from chess.com.

DONE - Play button doing the auto-eval.

DONE - Best move showing the depth it has been analysed to.

Limit auto-eval by depth rather than amount of nodes.

Save and load pgn's with evaluation saved, so it can be revisited.

Add buttons that allow easy pasting of pgn.

DONE - Add some more themes and sounds.

Add comments to code, make it more readable and optimize everything.

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.