Skip to content

S
specificationAPI
Commit 97526acf authored by Lanseria's avatar Lanseria
Browse files
Options

init demo

parents
Hide whitespace changes
Inline Side-by-side
Showing with 694 additions and 0 deletions
.editorconfig 0 → 100644
View file @ 97526acf
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
README.md 0 → 100644
View file @ 97526acf
![logo](assets/logo_apiblueprint.png)
# API Blueprint
> 方便设计API的文档规范
[![slack](https://apiblueprint-slack.herokuapp.com/badge.svg)](https://apiblueprint-slack.herokuapp.com/)
在进行微服务开发的过程中，为了保证最终开发的系统跟最初的设计保持一致，约定`RESTful`接口之间的调用方法，我们需要将`API`设计文档化，因此我们引入了`API Blueprint`。
## API Blueprint 是什么
API Blueprint 用来编写API文档的一种标记语言，类似于Markdown，因为是纯文本的，所以方便共享编辑，具体的语法规则可以在 API Blueprint documentation 查看，配合一些开源的工具可以把接口文档渲染成 html 再搭配一个静态服务器，方便于分享。
另外，配合一些工具，可以直接生成一个 mock data 数据，这样只要和后端的同学约定好接口格式，那么前端再开发的时候可以使用 mock data 数据来做测试，等到后端写好接口之后再做联调就可以了。
## 设计
https://apiblueprint.org/documentation/
## 安装
```
$ npm install -g aglio
```
## 生成
```
$ aglio -i demo/go-game.apib -o demo/go-game.html
```
demo/go-game.apib 0 → 100644
View file @ 97526acf
FORMAT: 1A
HOST: http://localhost:3000
# Go Game
This is a simple API for a small game server handling the game of Go. For the rules used as a reference when building this application,
see [The Rules of Go](https://en.wikipedia.org/wiki/Rules_of_go)
# Group Matches
A match is the unit of active gameplay within Go. Each match is assigned a unique GUID upon creation, and all references to the match
via this API are thereafter keyed by the match ID.
## Matches Collection [/matches]
The matches collection represents the matches currently ongoing being handled by the server at the time. It does not cover historical access to old game records.
### List All Matches [GET]
Lists all currently active matches on the server.
+ Response 200 (application/json)
[
{
"id" : "5a003b78-409e-4452-b456-a6f0dcee05bd",
"started_at": 13231239123391,
"turn" : 27,
"gridsize" : 19,
"playerWhite" : "bob",
"playerBlack" : "alfred"
}
]
### Start a New Match [POST]
You can create a new match with this action. It takes information about the players and will set up a new game. The game will start at round 1, and it will be **black**'s turn to
play. Per standard Go rules, **black** plays first.
+ Request (application/json)
{
"gridsize" : 19,
"playerWhite" : "bob",
"playerBlack" : "alfred"
}
+ Response 201 (application/json)
+ Headers
Location: /matches/5a003b78-409e-4452-b456-a6f0dcee05bd
+ Body
{
"id" : "5a003b78-409e-4452-b456-a6f0dcee05bd",
"started_at": 13231239123391,
"gridsize" : 19,
"playerBlack" : "alfred",
"playerWhite" : "bob"
}
## Match Status [/matches/{match_id}]
Use the match status resource to interrogate various aspects of an individual running match.
+ Parameters
+ match_id: `5a003b78-409e-4452-b456-a6f0dcee05bd` (string) - The id of the running match.
### Get Match Details [GET]
Query the details of an ongoing match.
+ Response 200 (application/json)
{
"id" : "5a003b78-409e-4452-b456-a6f0dcee05bd",
"started_at": 13231239123391,
"gridsize" : 6,
"turn" : 0,
"playerWhite" : "bob",
"playerBlack" : "alice",
"gameboard": [
[ 0, 0, 0, 0, 0, 0],
[ 0, 1, 2, 0, 0, 0],
[ 0, 1, 2, 0, 1, 2],
[ 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0]
]
}
### Get Current Liberties for Match [GET /matches/{match_id}/liberties]
Liberties are positions adjacent to a player chain. You might use this resource if your game client implements a hint or cheat functionality that highlights potential positions onto which a player can place a stone.
+ Parameters
+ match_id: `5a003b78-409e-4452-b456-a6f0dcee05bd` (string) - The id of the running match.
+ Response 200 (application/json)
[
{
"player" : "white",
"position" : {
"x" : 1,
"y" : 2
},
{
"player" : "black",
"position" : {
"x" : 2,
"y" : 3
}
}
]
### Get Current Chains for Match [GET /matches/{match_id}/chains]
A chain is a list of adjacent stones. See Go rules for a definition of adjacent. Note that a single stone can be considered a chain.
You might want to use this resource if your game client implements handy functionality that might highlight any
given player's chains to aid them in strategy.
+ Parameters
+ match_id: `5a003b78-409e-4452-b456-a6f0dcee05bd` (string) - The id of the running match.
+ Response 200 (application/json)
[
{
"player" : "white",
"positions": [
{ "x": 10, "y": 9 },
{ "x": 11, "y": 9 }
]
}
]
# Group Moves
A move consists of a single player placing a stone on the board. Players have the option of **passing** on a given turn, in which case the position field may
be missing or empty, indicating a pass. A turn consists of both players having performed a **move**.
## Moves Collection [/matches/{match_id}/moves]
This resource is available for interrogating moves within a match, or for players to perform a move.
+ Parameters
+ match_id: `5a003b78-409e-4452-b456-a6f0dcee05bd` (string) - The id of the running match.
### Get a Sequential List of All Moves Performed in a Match [GET]
If you need to get a time-ordered list of every position claimed by players in a match, you can use this resource. This might
be helpful if your game client needs to maintain a UI element that displays the list of moves taken thus far. This only
works for active matches, and is not intended for historical queries.
+ Response 200 (application/json)
[
{
"player" : "black",
"position": { "x": 4, "y", 10 }
},
{
"player" : "white",
"position" : { "x" : 3, "y" : 5 }
}
]
### Make a Move [POST]
Use this resource to submit a move to the game server. If the move is an illegal move, then the server will reply with a **400** status code, indicating
a bad request. The reply will contain a message describing the reason for the failed attempt to move.
Reasons for receiving messages about an illegal move:
* Position is already occupied
* Position is not one of the player's current liberties
* After the move would be evaluated and captures evaluated, the move would result in self-capture (suicide)
* The move would result in a violation of the **superko** rule, which prevents the game board from being put in a state in which it has previously been within this match.
A move containing a position is considered a **play** while a move without a position is considered a **pass**.
Leaving the **position** field empty indicates a pass.
+ Request (application/json)
{
"player" : 2,
"position" : { "x" : 3, "y" : 10 }
}
+ Response 201 (application/json)
{
"id" : "5a003b78-409e-4452-b456-a6f0dcee05bd",
"started_at": 13231239123391,
"gridsize" : 6,
"turn" : 0,
"playerWhite" : "bob",
"playerBlack" : "alice",
"gameboard": [
[ 0, 0, 0, 0, 0, 0],
[ 0, 1, 2, 0, 0, 0],
[ 0, 1, 2, 0, 1, 2],
[ 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0]
]
}
+ Response 400 (application/json)
{
"message" : "Invalid move"
}
+ Response 404
demo/go-game.html 0 → 100644
View file @ 97526acf
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Go Game</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"><style>@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Inconsolata|Raleway:200');.hljs-comment,.hljs-title{color:#8e908c}.hljs-variable,.hljs-attribute,.hljs-tag,.hljs-regexp,.ruby .hljs-constant,.xml .hljs-tag .hljs-title,.xml .hljs-pi,.xml .hljs-doctype,.html .hljs-doctype,.css .hljs-id,.css .hljs-class,.css .hljs-pseudo{color:#c82829}.hljs-number,.hljs-preprocessor,.hljs-pragma,.hljs-built_in,.hljs-literal,.hljs-params,.hljs-constant{color:#f5871f}.ruby .hljs-class .hljs-title,.css .hljs-rules .hljs-attribute{color:#eab700}.hljs-string,.hljs-value,.hljs-inheritance,.hljs-header,.ruby .hljs-symbol,.xml .hljs-cdata{color:#718c00}.css .hljs-hexcolor{color:#3e999f}.hljs-function,.python .hljs-decorator,.python .hljs-title,.ruby .hljs-function .hljs-title,.ruby .hljs-title .hljs-keyword,.perl .hljs-sub,.javascript .hljs-title,.coffeescript .hljs-title{color:#4271ae}.hljs-keyword,.javascript .hljs-function{color:#8959a8}.hljs{display:block;background:white;color:#4d4d4c;padding:.5em}.coffeescript .javascript,.javascript .xml,.tex .hljs-formula,.xml .javascript,.xml .vbscript,.xml .css,.xml .hljs-cdata{opacity:.5}.right .hljs-comment{color:#969896}.right .css .hljs-class,.right .css .hljs-id,.right .css .hljs-pseudo,.right .hljs-attribute,.right .hljs-regexp,.right .hljs-tag,.right .hljs-variable,.right .html .hljs-doctype,.right .ruby .hljs-constant,.right .xml .hljs-doctype,.right .xml .hljs-pi,.right .xml .hljs-tag .hljs-title{color:#c66}.right .hljs-built_in,.right .hljs-constant,.right .hljs-literal,.right .hljs-number,.right .hljs-params,.right .hljs-pragma,.right .hljs-preprocessor{color:#de935f}.right .css .hljs-rule .hljs-attribute,.right .ruby .hljs-class .hljs-title{color:#f0c674}.right .hljs-header,.right .hljs-inheritance,.right .hljs-name,.right .hljs-string,.right .hljs-value,.right .ruby .hljs-symbol,.right .xml .hljs-cdata{color:#b5bd68}.right .css .hljs-hexcolor,.right .hljs-title{color:#8abeb7}.right .coffeescript .hljs-title,.right .hljs-function,.right .javascript .hljs-title,.right .perl .hljs-sub,.right .python .hljs-decorator,.right .python .hljs-title,.right .ruby .hljs-function .hljs-title,.right .ruby .hljs-title .hljs-keyword{color:#81a2be}.right .hljs-keyword,.right .javascript .hljs-function{color:#b294bb}.right .hljs{display:block;overflow-x:auto;background:#1d1f21;color:#c5c8c6;padding:.5em;-webkit-text-size-adjust:none}.right .coffeescript .javascript,.right .javascript .xml,.right .tex .hljs-formula,.right .xml .css,.right .xml .hljs-cdata,.right .xml .javascript,.right .xml .vbscript{opacity:.5}body{color:black;background:white;font:400 14px / 1.42 'Roboto',Helvetica,sans-serif}header{border-bottom:1px solid #f2f2f2;margin-bottom:12px}h1,h2,h3,h4,h5{color:black;margin:12px 0}h1 .permalink,h2 .permalink,h3 .permalink,h4 .permalink,h5 .permalink{margin-left:0;opacity:0;transition:opacity .25s ease}h1:hover .permalink,h2:hover .permalink,h3:hover .permalink,h4:hover .permalink,h5:hover .permalink{opacity:1}.triple h1 .permalink,.triple h2 .permalink,.triple h3 .permalink,.triple h4 .permalink,.triple h5 .permalink{opacity:.15}.triple h1:hover .permalink,.triple h2:hover .permalink,.triple h3:hover .permalink,.triple h4:hover .permalink,.triple h5:hover .permalink{opacity:.15}h1{font:200 36px 'Raleway',Helvetica,sans-serif;font-size:36px}h2{font:200 36px 'Raleway',Helvetica,sans-serif;font-size:30px}h3{font-size:100%;text-transform:uppercase}h5{font-size:100%;font-weight:normal}p{margin:0 0 10px}p.choices{line-height:1.6}a{color:#428bca;text-decoration:none}li p{margin:0}hr.split{border:0;height:1px;width:100%;padding-left:6px;margin:12px auto;background-image:linear-gradient(to right, rgba(0,0,0,0) 20%, rgba(0,0,0,0.2) 51.4%, rgba(255,255,255,0.2) 51.4%, rgba(255,255,255,0) 80%)}dl dt{float:left;width:130px;clear:left;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}dl dd{margin-left:150px}blockquote{color:rgba(0,0,0,0.5);font-size:15.5px;padding:10px 20px;margin:12px 0;border-left:5px solid #e8e8e8}blockquote p:last-child{margin-bottom:0}pre{background-color:#f5f5f5;padding:12px;border:1px solid #cfcfcf;border-radius:6px;overflow:auto}pre code{color:black;background-color:transparent;padding:0;border:none}code{color:#444;background-color:#f5f5f5;font:'Inconsolata',monospace;padding:1px 4px;border:1px solid #cfcfcf;border-radius:3px}ul,ol{padding-left:2em}table{border-collapse:collapse;border-spacing:0;margin-bottom:12px}table tr:nth-child(2n){background-color:#fafafa}table th,table td{padding:6px 12px;border:1px solid #e6e6e6}.text-muted{opacity:.5}.note,.warning{padding:.3em 1em;margin:1em 0;border-radius:2px;font-size:90%}.note h1,.warning h1,.note h2,.warning h2,.note h3,.warning h3,.note h4,.warning h4,.note h5,.warning h5,.note h6,.warning h6{font-family:200 36px 'Raleway',Helvetica,sans-serif;font-size:135%;font-weight:500}.note p,.warning p{margin:.5em 0}.note{color:black;background-color:#f0f6fb;border-left:4px solid #428bca}.note h1,.note h2,.note h3,.note h4,.note h5,.note h6{color:#428bca}.warning{color:black;background-color:#fbf1f0;border-left:4px solid #c9302c}.warning h1,.warning h2,.warning h3,.warning h4,.warning h5,.warning h6{color:#c9302c}header{margin-top:24px}nav{position:fixed;top:24px;bottom:0;overflow-y:auto}nav .resource-group{padding:0}nav .resource-group .heading{position:relative}nav .resource-group .heading .chevron{position:absolute;top:12px;right:12px;opacity:.5}nav .resource-group .heading a{display:block;color:black;opacity:.7;border-left:2px solid transparent;margin:0}nav .resource-group .heading a:hover{text-decoration:none;background-color:bad-color;border-left:2px solid black}nav ul{list-style-type:none;padding-left:0}nav ul a{display:block;font-size:13px;color:rgba(0,0,0,0.7);padding:8px 12px;border-top:1px solid #d9d9d9;border-left:2px solid transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nav ul a:hover{text-decoration:none;background-color:bad-color;border-left:2px solid black}nav ul>li{margin:0}nav ul>li:first-child{margin-top:-12px}nav ul>li:last-child{margin-bottom:-12px}nav ul ul a{padding-left:24px}nav ul ul li{margin:0}nav ul ul li:first-child{margin-top:0}nav ul ul li:last-child{margin-bottom:0}nav>div>div>ul>li:first-child>a{border-top:none}.preload *{transition:none !important}.pull-left{float:left}.pull-right{float:right}.badge{display:inline-block;float:right;min-width:10px;min-height:14px;padding:3px 7px;font-size:12px;color:#000;background-color:#f2f2f2;border-radius:10px;margin:-2px 0}.badge.get{color:#70bbe1;background-color:#d9edf7}.badge.head{color:#70bbe1;background-color:#d9edf7}.badge.options{color:#70bbe1;background-color:#d9edf7}.badge.put{color:#f0db70;background-color:#fcf8e3}.badge.patch{color:#f0db70;background-color:#fcf8e3}.badge.post{color:#93cd7c;background-color:#dff0d8}.badge.delete{color:#ce8383;background-color:#f2dede}.collapse-button{float:right}.collapse-button .close{display:none;color:#428bca;cursor:pointer}.collapse-button .open{color:#428bca;cursor:pointer}.collapse-button.show .close{display:inline}.collapse-button.show .open{display:none}.collapse-content{max-height:0;overflow:hidden;transition:max-height .3s ease-in-out}nav{width:220px}.container{max-width:940px;margin-left:auto;margin-right:auto}.container .row .content{margin-left:244px;width:696px}.container .row:after{content:'';display:block;clear:both}.container-fluid nav{width:22%}.container-fluid .row .content{margin-left:24%}.container-fluid.triple nav{width:16.5%;padding-right:1px}.container-fluid.triple .row .content{position:relative;margin-left:16.5%;padding-left:24px}.middle:before,.middle:after{content:'';display:table}.middle:after{clear:both}.middle{box-sizing:border-box;width:51.5%;padding-right:12px}.right{box-sizing:border-box;float:right;width:48.5%;padding-left:12px}.right a{color:#428bca}.right h1,.right h2,.right h3,.right h4,.right h5,.right p,.right div{color:white}.right pre{background-color:#1d1f21;border:1px solid #1d1f21}.right pre code{color:#c5c8c6}.right .description{margin-top:12px}.triple .resource-heading{font-size:125%}.definition{margin-top:12px;margin-bottom:12px}.definition .method{font-weight:bold}.definition .method.get{color:#2e8ab8}.definition .method.head{color:#2e8ab8}.definition .method.options{color:#2e8ab8}.definition .method.post{color:#56b82e}.definition .method.put{color:#b8a22e}.definition .method.patch{color:#b8a22e}.definition .method.delete{color:#b82e2e}.definition .uri{word-break:break-all;word-wrap:break-word}.definition .hostname{opacity:.5}.example-names{background-color:#eee;padding:12px;border-radius:6px}.example-names .tab-button{cursor:pointer;color:black;border:1px solid #ddd;padding:6px;margin-left:12px}.example-names .tab-button.active{background-color:#d5d5d5}.right .example-names{background-color:#444}.right .example-names .tab-button{color:white;border:1px solid #666;border-radius:6px}.right .example-names .tab-button.active{background-color:#5e5e5e}#nav-background{position:fixed;left:0;top:0;bottom:0;width:16.5%;padding-right:14.4px;background-color:#fbfbfb;border-right:1px solid #f0f0f0;z-index:-1}#right-panel-background{position:absolute;right:-12px;top:-12px;bottom:-12px;width:48.6%;background-color:#333;z-index:-1}@media (max-width:1200px){nav{width:198px}.container{max-width:840px}.container .row .content{margin-left:224px;width:606px}}@media (max-width:992px){nav{width:169.4px}.container{max-width:720px}.container .row .content{margin-left:194px;width:526px}}@media (max-width:768px){nav{display:none}.container{width:95%;max-width:none}.container .row .content,.container-fluid .row .content,.container-fluid.triple .row .content{margin-left:auto;margin-right:auto;width:95%}#nav-background{display:none}#right-panel-background{width:48.6%}}.back-to-top{position:fixed;z-index:1;bottom:0;right:24px;padding:4px 8px;color:rgba(0,0,0,0.5);background-color:#f2f2f2;text-decoration:none !important;border-top:1px solid #d9d9d9;border-left:1px solid #d9d9d9;border-right:1px solid #d9d9d9;border-top-left-radius:3px;border-top-right-radius:3px}.resource-group{padding:12px;margin-bottom:12px;background-color:white;border:1px solid #d9d9d9;border-radius:6px}.resource-group h2.group-heading,.resource-group .heading a{padding:12px;margin:-12px -12px 12px -12px;background-color:#f2f2f2;border-bottom:1px solid #d9d9d9;border-top-left-radius:6px;border-top-right-radius:6px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.triple .content .resource-group{padding:0;border:none}.triple .content .resource-group h2.group-heading,.triple .content .resource-group .heading a{margin:0 0 12px 0;border:1px solid #d9d9d9}nav .resource-group .heading a{padding:12px;margin-bottom:0}nav .resource-group .collapse-content{padding:0}.action{margin-bottom:12px;padding:12px 12px 0 12px;overflow:hidden;border:1px solid transparent;border-radius:6px}.action h4.action-heading{padding:6px 12px;margin:-12px -12px 12px -12px;border-bottom:1px solid transparent;border-top-left-radius:6px;border-top-right-radius:6px;overflow:hidden}.action h4.action-heading .name{float:right;font-weight:normal;padding:6px 0}.action h4.action-heading .method{padding:6px 12px;margin-right:12px;border-radius:3px;display:inline-block}.action h4.action-heading .method.get{color:#fff;background-color:#337ab7}.action h4.action-heading .method.head{color:#fff;background-color:#337ab7}.action h4.action-heading .method.options{color:#fff;background-color:#337ab7}.action h4.action-heading .method.put{color:#fff;background-color:#ed9c28}.action h4.action-heading .method.patch{color:#fff;background-color:#ed9c28}.action h4.action-heading .method.post{color:#fff;background-color:#5cb85c}.action h4.action-heading .method.delete{color:#fff;background-color:#d9534f}.action h4.action-heading code{color:#444;background-color:#f5f5f5;border-color:#cfcfcf;font-weight:normal;word-break:break-all;display:inline-block;margin-top:2px}.action dl.inner{padding-bottom:2px}.action .title{border-bottom:1px solid white;margin:0 -12px -1px -12px;padding:12px}.action.get{border-color:#bce8f1}.action.get h4.action-heading{color:#337ab7;background:#d9edf7;border-bottom-color:#bce8f1}.action.head{border-color:#bce8f1}.action.head h4.action-heading{color:#337ab7;background:#d9edf7;border-bottom-color:#bce8f1}.action.options{border-color:#bce8f1}.action.options h4.action-heading{color:#337ab7;background:#d9edf7;border-bottom-color:#bce8f1}.action.post{border-color:#d6e9c6}.action.post h4.action-heading{color:#5cb85c;background:#dff0d8;border-bottom-color:#d6e9c6}.action.put{border-color:#faebcc}.action.put h4.action-heading{color:#ed9c28;background:#fcf8e3;border-bottom-color:#faebcc}.action.patch{border-color:#faebcc}.action.patch h4.action-heading{color:#ed9c28;background:#fcf8e3;border-bottom-color:#faebcc}.action.delete{border-color:#ebccd1}.action.delete h4.action-heading{color:#d9534f;background:#f2dede;border-bottom-color:#ebccd1}</style></head><body class="preload"><a href="#top" class="text-muted back-to-top"><i class="fa fa-toggle-up"></i>&nbsp;Back to top</a><div class="container"><div class="row"><nav><div class="resource-group"><div class="heading"><div class="chevron"><i class="open fa fa-angle-down"></i></div><a href="#matches">Matches</a></div><div class="collapse-content"><ul><li><a href="#matches-matches-collection">Matches Collection</a><ul><li><a href="#matches-matches-collection-get"><span class="badge get"><i class="fa fa-arrow-down"></i></span>List All Matches</a></li><li><a href="#matches-matches-collection-post"><span class="badge post"><i class="fa fa-plus"></i></span>Start a New Match</a></li></ul></li><li><a href="#matches-match-status">Match Status</a><ul><li><a href="#matches-match-status-get"><span class="badge get"><i class="fa fa-arrow-down"></i></span>Get Match Details</a></li><li><a href="#matches-match-status-get-1"><span class="badge get"><i class="fa fa-arrow-down"></i></span>Get Current Liberties for Match</a></li><li><a href="#matches-match-status-get-2"><span class="badge get"><i class="fa fa-arrow-down"></i></span>Get Current Chains for Match</a></li></ul></li></ul></div></div><div class="resource-group"><div class="heading"><div class="chevron"><i class="open fa fa-angle-down"></i></div><a href="#moves">Moves</a></div><div class="collapse-content"><ul><li><a href="#moves-moves-collection">Moves Collection</a><ul><li><a href="#moves-moves-collection-get"><span class="badge get"><i class="fa fa-arrow-down"></i></span>Get a Sequential List of All Moves Performed in a Match</a></li><li><a href="#moves-moves-collection-post"><span class="badge post"><i class="fa fa-plus"></i></span>Make a Move</a></li></ul></li></ul></div></div><p style="text-align: center; word-wrap: break-word;"><a href="http://localhost:3000">http://localhost:3000</a></p></nav><div class="content"><header><h1 id="top">Go Game</h1></header><p>This is a simple API for a small game server handling the game of Go. For the rules used as a reference when building this application,
see <a href="https://en.wikipedia.org/wiki/Rules_of_go">The Rules of Go</a></p>
<section id="matches" class="resource-group"><h2 class="group-heading">Matches <a href="#matches" class="permalink">&para;</a></h2><p>A match is the unit of active gameplay within Go. Each match is assigned a unique GUID upon creation, and all references to the match
via this API are thereafter keyed by the match ID.</p>
<div id="matches-matches-collection" class="resource"><h3 class="resource-heading">Matches Collection <a href="#matches-matches-collection" class="permalink">&nbsp;&para;</a></h3><p>The matches collection represents the matches currently ongoing being handled by the server at the time. It does not cover historical access to old game records.</p>
<div id="matches-matches-collection-get" class="action get"><h4 class="action-heading"><div class="name">List All Matches</div><a href="#matches-matches-collection-get" class="method get">GET</a><code class="uri">/matches</code></h4><p>Lists all currently active matches on the server.</p>
<h4>Example URI</h4><div class="definition"><span class="method get">GET</span>&nbsp;<span class="uri"><span class="hostname">http://localhost:3000</span>/matches</span></div><div class="title"><strong>Response&nbsp;&nbsp;<code>200</code></strong><div class="collapse-button"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><div class="inner"><h5>Headers</h5><pre><code><span class="hljs-attribute">Content-Type</span>: <span class="hljs-string">application/json</span></code></pre><div style="height: 1px;"></div><h5>Body</h5><pre><code>[
{
"<span class="hljs-attribute">id</span>": <span class="hljs-value"><span class="hljs-string">"5a003b78-409e-4452-b456-a6f0dcee05bd"</span></span>,
"<span class="hljs-attribute">started_at</span>": <span class="hljs-value"><span class="hljs-number">13231239123391</span></span>,
"<span class="hljs-attribute">turn</span>": <span class="hljs-value"><span class="hljs-number">27</span></span>,
"<span class="hljs-attribute">gridsize</span>": <span class="hljs-value"><span class="hljs-number">19</span></span>,
"<span class="hljs-attribute">playerWhite</span>": <span class="hljs-value"><span class="hljs-string">"bob"</span></span>,
"<span class="hljs-attribute">playerBlack</span>": <span class="hljs-value"><span class="hljs-string">"alfred"</span>
</span>}
]</code></pre><div style="height: 1px;"></div></div></div></div><div id="matches-matches-collection-post" class="action post"><h4 class="action-heading"><div class="name">Start a New Match</div><a href="#matches-matches-collection-post" class="method post">POST</a><code class="uri">/matches</code></h4><p>You can create a new match with this action. It takes information about the players and will set up a new game. The game will start at round 1, and it will be <strong>black</strong>'s turn to
play. Per standard Go rules, <strong>black</strong> plays first.</p>
<h4>Example URI</h4><div class="definition"><span class="method post">POST</span>&nbsp;<span class="uri"><span class="hostname">http://localhost:3000</span>/matches</span></div><div class="title"><strong>Request</strong><div class="collapse-button"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><div class="inner"><h5>Headers</h5><pre><code><span class="hljs-attribute">Content-Type</span>: <span class="hljs-string">application/json</span></code></pre><div style="height: 1px;"></div><h5>Body</h5><pre><code>{
"<span class="hljs-attribute">gridsize</span>": <span class="hljs-value"><span class="hljs-number">19</span></span>,
"<span class="hljs-attribute">playerWhite</span>": <span class="hljs-value"><span class="hljs-string">"bob"</span></span>,
"<span class="hljs-attribute">playerBlack</span>": <span class="hljs-value"><span class="hljs-string">"alfred"</span>
</span>}</code></pre><div style="height: 1px;"></div></div></div><div class="title"><strong>Response&nbsp;&nbsp;<code>201</code></strong><div class="collapse-button"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><div class="inner"><h5>Headers</h5><pre><code><span class="hljs-attribute">Content-Type</span>: <span class="hljs-string">application/json</span><br><span class="hljs-attribute">Location</span>: <span class="hljs-string">/matches/5a003b78-409e-4452-b456-a6f0dcee05bd</span></code></pre><div style="height: 1px;"></div><h5>Body</h5><pre><code>{
"<span class="hljs-attribute">id</span>": <span class="hljs-value"><span class="hljs-string">"5a003b78-409e-4452-b456-a6f0dcee05bd"</span></span>,
"<span class="hljs-attribute">started_at</span>": <span class="hljs-value"><span class="hljs-number">13231239123391</span></span>,
"<span class="hljs-attribute">gridsize</span>": <span class="hljs-value"><span class="hljs-number">19</span></span>,
"<span class="hljs-attribute">playerBlack</span>": <span class="hljs-value"><span class="hljs-string">"alfred"</span></span>,
"<span class="hljs-attribute">playerWhite</span>": <span class="hljs-value"><span class="hljs-string">"bob"</span>
</span>}</code></pre><div style="height: 1px;"></div></div></div></div></div><div id="matches-match-status" class="resource"><h3 class="resource-heading">Match Status <a href="#matches-match-status" class="permalink">&nbsp;&para;</a></h3><p>Use the match status resource to interrogate various aspects of an individual running match.</p>
<div id="matches-match-status-get" class="action get"><h4 class="action-heading"><div class="name">Get Match Details</div><a href="#matches-match-status-get" class="method get">GET</a><code class="uri">/matches/{match_id}</code></h4><p>Query the details of an ongoing match.</p>
<h4>Example URI</h4><div class="definition"><span class="method get">GET</span>&nbsp;<span class="uri"><span class="hostname">http://localhost:3000</span>/matches/<span class="hljs-attribute" title="match_id">5a003b78-409e-4452-b456-a6f0dcee05bd</span></span></div><div class="title"><strong>URI Parameters</strong><div class="collapse-button show"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><dl class="inner"><dt>match_id</dt><dd><code>string</code>&nbsp;<span class="required">(required)</span>&nbsp;<span class="text-muted example"><strong>Example:&nbsp;</strong><span>5a003b78-409e-4452-b456-a6f0dcee05bd</span></span><p>The id of the running match.</p>
</dd></dl></div><div class="title"><strong>Response&nbsp;&nbsp;<code>200</code></strong><div class="collapse-button"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><div class="inner"><h5>Headers</h5><pre><code><span class="hljs-attribute">Content-Type</span>: <span class="hljs-string">application/json</span></code></pre><div style="height: 1px;"></div><h5>Body</h5><pre><code>{
"<span class="hljs-attribute">id</span>": <span class="hljs-value"><span class="hljs-string">"5a003b78-409e-4452-b456-a6f0dcee05bd"</span></span>,
"<span class="hljs-attribute">started_at</span>": <span class="hljs-value"><span class="hljs-number">13231239123391</span></span>,
"<span class="hljs-attribute">gridsize</span>": <span class="hljs-value"><span class="hljs-number">6</span></span>,
"<span class="hljs-attribute">turn</span>": <span class="hljs-value"><span class="hljs-number">0</span></span>,
"<span class="hljs-attribute">playerWhite</span>": <span class="hljs-value"><span class="hljs-string">"bob"</span></span>,
"<span class="hljs-attribute">playerBlack</span>": <span class="hljs-value"><span class="hljs-string">"alice"</span></span>,
"<span class="hljs-attribute">gameboard</span>": <span class="hljs-value">[
[
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>
],
[
<span class="hljs-number">0</span>,
<span class="hljs-number">1</span>,
<span class="hljs-number">2</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>
],
[
<span class="hljs-number">0</span>,
<span class="hljs-number">1</span>,
<span class="hljs-number">2</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">1</span>,
<span class="hljs-number">2</span>
],
[
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>
],
[
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>
],
[
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>
]
]
</span>}</code></pre><div style="height: 1px;"></div></div></div></div><div id="matches-match-status-get-1" class="action get"><h4 class="action-heading"><div class="name">Get Current Liberties for Match</div><a href="#matches-match-status-get-1" class="method get">GET</a><code class="uri">/matches/{match_id}/liberties</code></h4><p>Liberties are positions adjacent to a player chain. You might use this resource if your game client implements a hint or cheat functionality that highlights potential positions onto which a player can place a stone.</p>
<h4>Example URI</h4><div class="definition"><span class="method get">GET</span>&nbsp;<span class="uri"><span class="hostname">http://localhost:3000</span>/matches/<span class="hljs-attribute" title="match_id">5a003b78-409e-4452-b456-a6f0dcee05bd</span>/liberties</span></div><div class="title"><strong>URI Parameters</strong><div class="collapse-button show"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><dl class="inner"><dt>match_id</dt><dd><code>string</code>&nbsp;<span class="required">(required)</span>&nbsp;<span class="text-muted example"><strong>Example:&nbsp;</strong><span>5a003b78-409e-4452-b456-a6f0dcee05bd</span></span><p>The id of the running match.</p>
</dd></dl></div><div class="title"><strong>Response&nbsp;&nbsp;<code>200</code></strong><div class="collapse-button"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><div class="inner"><h5>Headers</h5><pre><code><span class="hljs-attribute">Content-Type</span>: <span class="hljs-string">application/json</span></code></pre><div style="height: 1px;"></div><h5>Body</h5><pre><code>[
{
<span class="hljs-string">"player"</span> : <span class="hljs-string">"white"</span>,
<span class="hljs-string">"position"</span> : {
<span class="hljs-string">"x"</span> : <span class="hljs-number">1</span>,
<span class="hljs-string">"y"</span> : <span class="hljs-number">2</span>
},
{
<span class="hljs-string">"player"</span> : <span class="hljs-string">"black"</span>,
<span class="hljs-string">"position"</span> : {
<span class="hljs-string">"x"</span> : <span class="hljs-number">2</span>,
<span class="hljs-string">"y"</span> : <span class="hljs-number">3</span>
}
}
]</code></pre><div style="height: 1px;"></div></div></div></div><div id="matches-match-status-get-2" class="action get"><h4 class="action-heading"><div class="name">Get Current Chains for Match</div><a href="#matches-match-status-get-2" class="method get">GET</a><code class="uri">/matches/{match_id}/chains</code></h4><p>A chain is a list of adjacent stones. See Go rules for a definition of adjacent. Note that a single stone can be considered a chain.
You might want to use this resource if your game client implements handy functionality that might highlight any
given player’s chains to aid them in strategy.</p>
<h4>Example URI</h4><div class="definition"><span class="method get">GET</span>&nbsp;<span class="uri"><span class="hostname">http://localhost:3000</span>/matches/<span class="hljs-attribute" title="match_id">5a003b78-409e-4452-b456-a6f0dcee05bd</span>/chains</span></div><div class="title"><strong>URI Parameters</strong><div class="collapse-button show"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><dl class="inner"><dt>match_id</dt><dd><code>string</code>&nbsp;<span class="required">(required)</span>&nbsp;<span class="text-muted example"><strong>Example:&nbsp;</strong><span>5a003b78-409e-4452-b456-a6f0dcee05bd</span></span><p>The id of the running match.</p>
</dd></dl></div><div class="title"><strong>Response&nbsp;&nbsp;<code>200</code></strong><div class="collapse-button"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><div class="inner"><h5>Headers</h5><pre><code><span class="hljs-attribute">Content-Type</span>: <span class="hljs-string">application/json</span></code></pre><div style="height: 1px;"></div><h5>Body</h5><pre><code>[
{
"<span class="hljs-attribute">player</span>": <span class="hljs-value"><span class="hljs-string">"white"</span></span>,
"<span class="hljs-attribute">positions</span>": <span class="hljs-value">[
{
"<span class="hljs-attribute">x</span>": <span class="hljs-value"><span class="hljs-number">10</span></span>,
"<span class="hljs-attribute">y</span>": <span class="hljs-value"><span class="hljs-number">9</span>
</span>},
{
"<span class="hljs-attribute">x</span>": <span class="hljs-value"><span class="hljs-number">11</span></span>,
"<span class="hljs-attribute">y</span>": <span class="hljs-value"><span class="hljs-number">9</span>
</span>}
]
</span>}
]</code></pre><div style="height: 1px;"></div></div></div></div></div></section><section id="moves" class="resource-group"><h2 class="group-heading">Moves <a href="#moves" class="permalink">&para;</a></h2><p>A move consists of a single player placing a stone on the board. Players have the option of <strong>passing</strong> on a given turn, in which case the position field may
be missing or empty, indicating a pass. A turn consists of both players having performed a <strong>move</strong>.</p>
<div id="moves-moves-collection" class="resource"><h3 class="resource-heading">Moves Collection <a href="#moves-moves-collection" class="permalink">&nbsp;&para;</a></h3><p>This resource is available for interrogating moves within a match, or for players to perform a move.</p>
<div id="moves-moves-collection-get" class="action get"><h4 class="action-heading"><div class="name">Get a Sequential List of All Moves Performed in a Match</div><a href="#moves-moves-collection-get" class="method get">GET</a><code class="uri">/matches/{match_id}/moves</code></h4><p>If you need to get a time-ordered list of every position claimed by players in a match, you can use this resource. This might
be helpful if your game client needs to maintain a UI element that displays the list of moves taken thus far. This only
works for active matches, and is not intended for historical queries.</p>
<h4>Example URI</h4><div class="definition"><span class="method get">GET</span>&nbsp;<span class="uri"><span class="hostname">http://localhost:3000</span>/matches/<span class="hljs-attribute" title="match_id">5a003b78-409e-4452-b456-a6f0dcee05bd</span>/moves</span></div><div class="title"><strong>URI Parameters</strong><div class="collapse-button show"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><dl class="inner"><dt>match_id</dt><dd><code>string</code>&nbsp;<span class="required">(required)</span>&nbsp;<span class="text-muted example"><strong>Example:&nbsp;</strong><span>5a003b78-409e-4452-b456-a6f0dcee05bd</span></span><p>The id of the running match.</p>
</dd></dl></div><div class="title"><strong>Response&nbsp;&nbsp;<code>200</code></strong><div class="collapse-button"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><div class="inner"><h5>Headers</h5><pre><code><span class="hljs-attribute">Content-Type</span>: <span class="hljs-string">application/json</span></code></pre><div style="height: 1px;"></div><h5>Body</h5><pre><code>[
{
<span class="hljs-string">"player"</span> : <span class="hljs-string">"black"</span>,
<span class="hljs-string">"position"</span>: { <span class="hljs-string">"x"</span>: <span class="hljs-number">4</span>, <span class="hljs-string">"y"</span>, <span class="hljs-number">10</span> }
},
{
<span class="hljs-string">"player"</span> : <span class="hljs-string">"white"</span>,
<span class="hljs-string">"position"</span> : { <span class="hljs-string">"x"</span> : <span class="hljs-number">3</span>, <span class="hljs-string">"y"</span> : <span class="hljs-number">5</span> }
}
]</code></pre><div style="height: 1px;"></div></div></div></div><div id="moves-moves-collection-post" class="action post"><h4 class="action-heading"><div class="name">Make a Move</div><a href="#moves-moves-collection-post" class="method post">POST</a><code class="uri">/matches/{match_id}/moves</code></h4><p>Use this resource to submit a move to the game server. If the move is an illegal move, then the server will reply with a <strong>400</strong> status code, indicating
a bad request. The reply will contain a message describing the reason for the failed attempt to move.
Reasons for receiving messages about an illegal move:</p>
<ul>
<li>
<p>Position is already occupied</p>
</li>
<li>
<p>Position is not one of the player’s current liberties</p>
</li>
<li>
<p>After the move would be evaluated and captures evaluated, the move would result in self-capture (suicide)</p>
</li>
<li>
<p>The move would result in a violation of the <strong>superko</strong> rule, which prevents the game board from being put in a state in which it has previously been within this match.</p>
</li>
</ul>
<p>A move containing a position is considered a <strong>play</strong> while a move without a position is considered a <strong>pass</strong>.</p>
<p>Leaving the <strong>position</strong> field empty indicates a pass.</p>
<h4>Example URI</h4><div class="definition"><span class="method post">POST</span>&nbsp;<span class="uri"><span class="hostname">http://localhost:3000</span>/matches/<span class="hljs-attribute" title="match_id">5a003b78-409e-4452-b456-a6f0dcee05bd</span>/moves</span></div><div class="title"><strong>URI Parameters</strong><div class="collapse-button show"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><dl class="inner"><dt>match_id</dt><dd><code>string</code>&nbsp;<span class="required">(required)</span>&nbsp;<span class="text-muted example"><strong>Example:&nbsp;</strong><span>5a003b78-409e-4452-b456-a6f0dcee05bd</span></span><p>The id of the running match.</p>
</dd></dl></div><div class="title"><strong>Request</strong><div class="collapse-button"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><div class="inner"><h5>Headers</h5><pre><code><span class="hljs-attribute">Content-Type</span>: <span class="hljs-string">application/json</span></code></pre><div style="height: 1px;"></div><h5>Body</h5><pre><code>{
"<span class="hljs-attribute">player</span>": <span class="hljs-value"><span class="hljs-number">2</span></span>,
"<span class="hljs-attribute">position</span>": <span class="hljs-value">{
"<span class="hljs-attribute">x</span>": <span class="hljs-value"><span class="hljs-number">3</span></span>,
"<span class="hljs-attribute">y</span>": <span class="hljs-value"><span class="hljs-number">10</span>
</span>}
</span>}</code></pre><div style="height: 1px;"></div></div></div><div class="title"><strong>Response&nbsp;&nbsp;<code>201</code></strong><div class="collapse-button"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><div class="inner"><h5>Headers</h5><pre><code><span class="hljs-attribute">Content-Type</span>: <span class="hljs-string">application/json</span></code></pre><div style="height: 1px;"></div><h5>Body</h5><pre><code>{
"<span class="hljs-attribute">id</span>": <span class="hljs-value"><span class="hljs-string">"5a003b78-409e-4452-b456-a6f0dcee05bd"</span></span>,
"<span class="hljs-attribute">started_at</span>": <span class="hljs-value"><span class="hljs-number">13231239123391</span></span>,
"<span class="hljs-attribute">gridsize</span>": <span class="hljs-value"><span class="hljs-number">6</span></span>,
"<span class="hljs-attribute">turn</span>": <span class="hljs-value"><span class="hljs-number">0</span></span>,
"<span class="hljs-attribute">playerWhite</span>": <span class="hljs-value"><span class="hljs-string">"bob"</span></span>,
"<span class="hljs-attribute">playerBlack</span>": <span class="hljs-value"><span class="hljs-string">"alice"</span></span>,
"<span class="hljs-attribute">gameboard</span>": <span class="hljs-value">[
[
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>
],
[
<span class="hljs-number">0</span>,
<span class="hljs-number">1</span>,
<span class="hljs-number">2</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>
],
[
<span class="hljs-number">0</span>,
<span class="hljs-number">1</span>,
<span class="hljs-number">2</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">1</span>,
<span class="hljs-number">2</span>
],
[
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>
],
[
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>
],
[
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>,
<span class="hljs-number">0</span>
]
]
</span>}</code></pre><div style="height: 1px;"></div></div></div><div class="title"><strong>Response&nbsp;&nbsp;<code>400</code></strong><div class="collapse-button"><span class="close">Hide</span><span class="open">Show</span></div></div><div class="collapse-content"><div class="inner"><h5>Headers</h5><pre><code><span class="hljs-attribute">Content-Type</span>: <span class="hljs-string">application/json</span></code></pre><div style="height: 1px;"></div><h5>Body</h5><pre><code>{
"<span class="hljs-attribute">message</span>": <span class="hljs-value"><span class="hljs-string">"Invalid move"</span>
</span>}</code></pre><div style="height: 1px;"></div></div></div><div class="title"><strong>Response&nbsp;&nbsp;<code>404</code></strong></div></div></div></section></div></div></div><p style="text-align: center;" class="text-muted">Generated by&nbsp;<a href="https://github.com/danielgtaylor/aglio" class="aglio">aglio</a>&nbsp;on 14 Feb 2019</p><script>/* eslint-env browser */
/* eslint quotes: [2, "single"] */
'use strict';
/*
Determine if a string ends with another string.
*/
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
/*
Get a list of direct child elements by class name.
*/
function childrenByClass(element, name) {
var filtered = [];
for (var i = 0; i < element.children.length; i++) {
var child = element.children[i];
var classNames = child.className.split(' ');
if (classNames.indexOf(name) !== -1) {
filtered.push(child);
}
}
return filtered;
}
/*
Get an array [width, height] of the window.
*/
function getWindowDimensions() {
var w = window,
d = document,
e = d.documentElement,
g = d.body,
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight || e.clientHeight || g.clientHeight;
return [x, y];
}
/*
Collapse or show a request/response example.
*/
function toggleCollapseButton(event) {
var button = event.target.parentNode;
var content = button.parentNode.nextSibling;
var inner = content.children[0];
if (button.className.indexOf('collapse-button') === -1) {
// Clicked without hitting the right element?
return;
}
if (content.style.maxHeight && content.style.maxHeight !== '0px') {
// Currently showing, so let's hide it
button.className = 'collapse-button';
content.style.maxHeight = '0px';
} else {
// Currently hidden, so let's show it
button.className = 'collapse-button show';
content.style.maxHeight = inner.offsetHeight + 12 + 'px';
}
}
function toggleTabButton(event) {
var i, index;
var button = event.target;
// Get index of the current button.
var buttons = childrenByClass(button.parentNode, 'tab-button');
for (i = 0; i < buttons.length; i++) {
if (buttons[i] === button) {
index = i;
button.className = 'tab-button active';
} else {
buttons[i].className = 'tab-button';
}
}
// Hide other tabs and show this one.
var tabs = childrenByClass(button.parentNode.parentNode, 'tab');
for (i = 0; i < tabs.length; i++) {
if (i === index) {
tabs[i].style.display = 'block';
} else {
tabs[i].style.display = 'none';
}
}
}
/*
Collapse or show a navigation menu. It will not be hidden unless it
is currently selected or `force` has been passed.
*/
function toggleCollapseNav(event, force) {
var heading = event.target.parentNode;
var content = heading.nextSibling;
var inner = content.children[0];
if (heading.className.indexOf('heading') === -1) {
// Clicked without hitting the right element?
return;
}
if (content.style.maxHeight && content.style.maxHeight !== '0px') {
// Currently showing, so let's hide it, but only if this nav item
// is already selected. This prevents newly selected items from
// collapsing in an annoying fashion.
if (force || window.location.hash && endsWith(event.target.href, window.location.hash)) {
content.style.maxHeight = '0px';
}
} else {
// Currently hidden, so let's show it
content.style.maxHeight = inner.offsetHeight + 12 + 'px';
}
}
/*
Refresh the page after a live update from the server. This only
works in live preview mode (using the `--server` parameter).
*/
function refresh(body) {
document.querySelector('body').className = 'preload';
document.body.innerHTML = body;
// Re-initialize the page
init();
autoCollapse();
document.querySelector('body').className = '';
}
/*
Determine which navigation items should be auto-collapsed to show as many
as possible on the screen, based on the current window height. This also
collapses them.
*/
function autoCollapse() {
var windowHeight = getWindowDimensions()[1];
var itemsHeight = 64; /* Account for some padding */
var itemsArray = Array.prototype.slice.call(
document.querySelectorAll('nav .resource-group .heading'));
// Get the total height of the navigation items
itemsArray.forEach(function (item) {
itemsHeight += item.parentNode.offsetHeight;
});
// Should we auto-collapse any nav items? Try to find the smallest item
// that can be collapsed to show all items on the screen. If not possible,
// then collapse the largest item and do it again. First, sort the items
// by height from smallest to largest.
var sortedItems = itemsArray.sort(function (a, b) {
return a.parentNode.offsetHeight - b.parentNode.offsetHeight;
});
while (sortedItems.length && itemsHeight > windowHeight) {
for (var i = 0; i < sortedItems.length; i++) {
// Will collapsing this item help?
var itemHeight = sortedItems[i].nextSibling.offsetHeight;
if ((itemsHeight - itemHeight <= windowHeight) || i === sortedItems.length - 1) {
// It will, so let's collapse it, remove its content height from
// our total and then remove it from our list of candidates
// that can be collapsed.
itemsHeight -= itemHeight;
toggleCollapseNav({target: sortedItems[i].children[0]}, true);
sortedItems.splice(i, 1);
break;
}
}
}
}
/*
Initialize the interactive functionality of the page.
*/
function init() {
var i, j;
// Make collapse buttons clickable
var buttons = document.querySelectorAll('.collapse-button');
for (i = 0; i < buttons.length; i++) {
buttons[i].onclick = toggleCollapseButton;
// Show by default? Then toggle now.
if (buttons[i].className.indexOf('show') !== -1) {
toggleCollapseButton({target: buttons[i].children[0]});
}
}
var responseCodes = document.querySelectorAll('.example-names');
for (i = 0; i < responseCodes.length; i++) {
var tabButtons = childrenByClass(responseCodes[i], 'tab-button');
for (j = 0; j < tabButtons.length; j++) {
tabButtons[j].onclick = toggleTabButton;
// Show by default?
if (j === 0) {
toggleTabButton({target: tabButtons[j]});
}
}
}
// Make nav items clickable to collapse/expand their content.
var navItems = document.querySelectorAll('nav .resource-group .heading');
for (i = 0; i < navItems.length; i++) {
navItems[i].onclick = toggleCollapseNav;
// Show all by default
toggleCollapseNav({target: navItems[i].children[0]});
}
}
// Initial call to set up buttons
init();
window.onload = function () {
autoCollapse();
// Remove the `preload` class to enable animations
document.querySelector('body').className = '';
};
</script></body></html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment