<commit_before># 利用Jigsaw的表格来实现数独游戏

## 数独简介

很好玩的游戏，网上一大堆介绍，这里引用某度的一个[介绍](https://wenku.baidu.com/view/f9a4faf9c8d376eeaeaa3190.html)。

数独的游戏规则很简单，9x9个格子里，已有若干数字，其它宫位留白，玩家需要自己按照逻辑推敲出剩下的空格里是什么数字，使得每一行与每一列都有1到9的数字，每个小九宫格里也有1到9的数字，并且一个数字在每个行列及每个小九宫格里都只能出现一次。

## 运行效果

先看看最终的效果吧：

![overview](overview.gif)

## 实现思路

基本思路非常简单，利用Jigsaw的表格来展示9x9宫格，然后做一个渲染器用于数字的填写，最后将这个渲染器应用到表格的每一个单元格中即可。

显然，最难的部分是填写数字的渲染器的实现。

整体事件流

![event-graph](event-graph.png)

## 页面基本元素

页面上核心部分是一个表格，代码及其简单：

```
<jigsaw-table [data]="tableData" [hideHeader]="true" width="528px">
</jigsaw-table>
```

我们不需要表头，因此将`hideHeader`设置为`false`，而且为了将宽度定死为528像素，这是为了让每个单元格看起来是一个正方形。在组件的ts代码中，需要定义一个`tableData`变量，并暂时先写好一个题目，代码看起来是这样的：

```<commit_msg>DOC: add online link to soduku doc<commit_after># 利用Jigsaw的表格来实现数独游戏

## 数独简介

很好玩的游戏，网上一大堆介绍，这里引用某度的一个[介绍](https://wenku.baidu.com/view/f9a4faf9c8d376eeaeaa3190.html)。

数独的游戏规则很简单，9x9个格子里，已有若干数字，其它宫位留白，玩家需要自己按照逻辑推敲出剩下的空格里是什么数字，使得每一行与每一列都有1到9的数字，每个小九宫格里也有1到9的数字，并且一个数字在每个行列及每个小九宫格里都只能出现一次。

## 运行效果

线上地址 <http://rdk.zte.com.cn/jigsaw/table/sudoku>

先看看最终的效果吧：

![overview](overview.gif)

## 实现思路

基本思路非常简单，利用Jigsaw的表格来展示9x9宫格，然后做一个渲染器用于数字的填写，最后将这个渲染器应用到表格的每一个单元格中即可。

显然，最难的部分是填写数字的渲染器的实现。

整体事件流

![event-graph](event-graph.png)

## 页面基本元素

页面上核心部分是一个表格，代码及其简单：

```
<jigsaw-table [data]="tableData" [hideHeader]="true" width="528px">
</jigsaw-table>
```

我们不需要表头，因此将`hideHeader`设置为`false`，而且为了将宽度定死为528像素，这是为了让每个单元格看起来是一个正方形。在组件的ts代码中，需要定义一个`tableData`变量，并暂时先写好一个题目，代码看起来是这样的：

```
{'fraction_non_alphanumeric': 0.14295257181028725, 'fraction_numerical': 0.033400133600534405, 'mean_word_length': 10.348484848484848, 'pattern_counts': {'":': 0, '<': 8, '<?xml version=': 0, '>': 8, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '830439', 'n_tokens_mistral': 1133, 'n_tokens_neox': 1281, 'n_words': 50}