• Stars
    star
    135
  • Rank 269,297 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 8 years ago
  • Updated about 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A plugin oriented chess component for Angular

Angular Chess

Runs on [email protected]

A plugin oriented chess component.

Architecture

The module is actually a shell with plugins.
The shell provides contracts and some building block for the plugins.
The logic behind a plugin system is that there are different types of chess games. Also, there are already multiple chess implementation's out there, a plugin can wrap an implementation and save a lot of work.

This approach enables endless game variants.
It can be games with different rules (engines), or games with different UI (3D, native, different pieces, etc...)
A UI plugin is a sort of a Renderer which means a native implementation is also quite easy.

There are 3 types of plugins

(1) Engine Plugins:

Engine plugins provides the logic, an engine might also implement AI (optional)
Currently there are 2 engine plugins:

  • Chessjs plugin (an engine that wraps the chess.js library). Does not support AI.
  • Chessjs-AI - Extends the previous engine and adds Stockfish for AI.

Chessjs

The Chessjs engine is a wrapper around the Chess.js library.
The description in the Chess.js Github repository says:

A Javascript chess library for chess move generation/validation, piece placement/movement, and check/checkmate/draw detection

This means the the Chessjs plugin does not support AI, thus only human vs human matches are allowed.

Chessjs-AI

The Chessjs-AI engine extends (inherits) the Chessjs engine and adds AI on top of it using stockfish.js.
stockfish.js is a Javascript port of the powerful open-source *Stockfish engine.
Stockfish is probably the strongest AI chess engine in Javascript, this comes with a cost - a very big payload size.

stockfish.js use the postMessage API since it is intended to run in a web worker. It is very hard manage async operation's that way and keep a reasonable flow without crazy state management. To achieve a nice flow I had to wrap it, I ended up building a Promise API wrapper around stockfish.js
Using the wrapper makes development super easy as state outside the wrapper is not an issue, the wrapper takes care of it all.
I will probably post this wrapper as a different library, you can find it in src/packages/es6-stockfish

Thinking Angular, it might sound weird why a Promise API and not Observables? after all postMessage is a classic stream of messages rather then a single event. There are 2 reasons: (1) Observables not in ES6, this is a big constraint. (2) While stockfish sends a stream of message, they are always in response to a request. Since a request has a unique response and there are no multiple requests of the same type in the same time - a Promise API is more suitable here.

(2) UI Plugins:

UI plugins use logic plugins to display the board and allow users to interact with the board. Currently there is 1 UI plugin:

  • SVG Board - A complete SVG implementation, using angular 2 components and no direct DOM access. This plugins use OnPush strategy with all of the components for maximum performance.

(3) Controller Plugins:

A controller has 2 responsibilities:

  • Act as a glue between an engine and the UI.
  • Consumer API (provide a simple api (facade) for game management)

Currently controllers are not really plugins, they are intended as such.

More Repositories

1

ngx-modialog

Modal / Dialog for Angular
TypeScript
687
star
2

ngrid

A angular grid for the enterprise
TypeScript
239
star
3

ngc-webpack

Angular compiler-cli with webpack's loader chain.
TypeScript
84
star
4

webpack-dll-bundles-plugin

A Webpack plugin for bundling group of packages as DLLs
TypeScript
55
star
5

ng-router-loader

Webpack loader for NgModule lazy loading using the angular router
TypeScript
46
star
6

angular-library-starter

Your last library starter. A complete, @angular grade, library starter
TypeScript
45
star
7

ng-cli-packagr-tasks

Tasks & Workflow for ng-packagr.
TypeScript
31
star
8

resty-stone

Rest API toolkit for KeystoneJS.
JavaScript
26
star
9

ngrx-domains

A plugin oriented Global (and type friendly), registry for your NGRX logic
TypeScript
25
star
10

PromiseTree

A visualization tool for JavaScript promises
JavaScript
21
star
11

ngx-ip

An Angular network address component (IPv4, IPv6 and MAC)
TypeScript
19
star
12

lazy-jit

A small POC for lazy loading the compiler while using AOT compilation for the main bundle.
TypeScript
15
star
13

tdm

Typed data models, mappers and adapters
TypeScript
11
star
14

ng-time-traveler

A first attempt on a POC package that enables defining angular 1 components & directives using angular 2 syntax.
TypeScript
7
star
15

pebula-node

A collection of libraries for node
TypeScript
6
star
16

ngx-form-errors

Boilerplate free, extensible and UI agnostic @angular/forms error presentation library
TypeScript
5
star
17

table-demo

Moved to
HTML
5
star
18

nform

TypeScript
5
star
19

divergence-webpack-plugin

Build fine tuned divergent applications using Webpack
JavaScript
3
star
20

angular2-restyle-loader

Customize angular 2 component metadata
JavaScript
3
star
21

ngrid-starters

Starter (demo) for ngrid (https://shlomiassaf.github.io/ngrid)
TypeScript
3
star
22

ngx-routable

Component metadata driven data resolver for angular router
JavaScript
3
star
23

git-repo-watch

A node utility to sync git repositories and get notifications using RxJS.
TypeScript
2
star
24

angular-worker-loader

Angular 2 web worker loader for Webpack
JavaScript
2
star
25

ng-cli-ext

Exposes webpack config at runtime from @angular/cli just before it runs
TypeScript
1
star