├── .github
    └── workflows
    │   └── main.yml
├── .gitignore
├── README.md
├── babel.config.js
├── docs
    ├── css
    │   ├── app.6657c968.css
    │   ├── chunk-vendors.ca323f0d.css
    │   └── main.css
    ├── favicon.ico
    ├── font
    │   ├── DinkieBitmap-9pxDemo.ttf
    │   ├── DinkieBitmap-9pxDemo.woff2
    │   ├── DinkieBitmap-9pxItalicDemo.ttf
    │   └── DinkieBitmap-9pxItalicDemo.woff2
    ├── fonts
    │   ├── element-icons.535877f5.woff
    │   └── element-icons.732389de.ttf
    ├── images
    │   ├── 1.png
    │   ├── 2.png
    │   ├── 3.png
    │   ├── 4.png
    │   ├── 5.png
    │   ├── 6.png
    │   ├── 7.png
    │   ├── 8.png
    │   ├── 9.png
    │   └── ×.png
    ├── index.html
    └── js
    │   ├── app.e53d84fa.js
    │   └── chunk-vendors.73c6bf68.js
├── package-lock.json
├── package.json
├── public
    ├── css
    │   └── main.css
    ├── favicon.ico
    ├── font
    │   ├── DinkieBitmap-9pxDemo.ttf
    │   ├── DinkieBitmap-9pxDemo.woff2
    │   ├── DinkieBitmap-9pxItalicDemo.ttf
    │   └── DinkieBitmap-9pxItalicDemo.woff2
    ├── images
    │   ├── 1.png
    │   ├── 2.png
    │   ├── 3.png
    │   ├── 4.png
    │   ├── 5.png
    │   ├── 6.png
    │   ├── 7.png
    │   ├── 8.png
    │   ├── 9.png
    │   └── ×.png
    └── index.html
├── src
    ├── App.vue
    ├── api
    │   └── api.js
    ├── assets
    │   ├── DinkieBitmap-9pxItalicDemo.ttf
    │   ├── DinkieBitmap-9pxItalicDemo.woff2
    │   ├── algo.js
    │   ├── box.js
    │   ├── cell.js
    │   ├── logo.png
    │   ├── table.js
    │   └── user.js
    ├── components
    │   ├── Box.vue
    │   ├── ButtonGroup.vue
    │   ├── Cell.vue
    │   ├── ChartRoom.vue
    │   ├── Dialog.vue
    │   └── Table.vue
    └── main.js
└── vue.config.js


/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | # This is a basic workflow to help you get started with Actions
 2 | 
 3 | name: CI
 4 | 
 5 | # Controls when the action will run. 
 6 | on:
 7 |   # Triggers the workflow on push or pull request events but only for the main branch
 8 |   push:
 9 |     branches: [ main ]
10 |   pull_request:
11 |     branches: [ main ]
12 | 
13 |   # Allows you to run this workflow manually from the Actions tab
14 |   workflow_dispatch:
15 | 
16 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel
17 | jobs:
18 |   # This workflow contains a single job called "build"
19 |   build:
20 |     # The type of runner that the job will run on
21 |     runs-on: ubuntu-latest
22 | 
23 |     # Steps represent a sequence of tasks that will be executed as part of the job
24 |     steps:
25 |       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
26 |       - name: CheckOut 
27 |         uses: actions/checkout@main
28 | 
29 |       # Runs a single command using the runners shell
30 |       - name: use Node.js 12.x
31 |         uses: actions/setup-node@v1
32 |         with:
33 |           node-version: 12.x
34 |           
35 |       - name: Install Packages
36 |         run: |
37 |           npm install --save @cloudbase/js-sdk
38 |           npm install
39 |         
40 |       - name: Build page
41 |         run: npm run build
42 |         
43 |       - name: commit
44 |         run: |
45 |           git config --global user.email 1193322118@qq.com
46 |           git config --global user.name autopush
47 |           git add .
48 |           git commit -m "update" -a
49 |       - name: Push changes
50 |         uses: ad-m/github-push-action@master
51 |         with:
52 |           github_token: ${{ secrets.ACCESS_TOKEN }}
53 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | dist
 4 | # docs
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # sudoku
 2 | 
 3 | [数独游戏](http://myth.icu/sudoku/)
 4 | 
 5 | ![image.png](https://i.loli.net/2021/03/23/ckbW9RDN2XeyPl3.png)
 6 | 
 7 | 欢迎来玩
 8 | 
 9 | **因服务器到期所以玩不了**
10 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     presets: [
 3 |         '@vue/cli-plugin-babel/preset'
 4 |     ],
 5 |     "plugins": [
 6 |         [
 7 |             "component",
 8 |             {
 9 |                 "libraryName": "element-ui",
10 |                 "styleLibraryName": "theme-chalk"
11 |             }
12 |         ]
13 |     ]
14 | }


--------------------------------------------------------------------------------
/docs/css/app.6657c968.css:
--------------------------------------------------------------------------------
1 | .cell[data-v-106483f4]{width:50px;height:50px;border:1px solid #000;display:grid;justify-items:center;align-items:center}.cell[data-v-106483f4]:hover{background-color:rgba(0,0,0,.30980392156862746)}.user-fill[data-v-106483f4]{color:green;font-size:25px}.table[data-v-12d28948]{display:grid;margin-top:30px;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(3,auto);justify-items:center;align-items:center;justify-content:center;border:3px solid #000;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.btn-handle[data-v-7eff32d2]{margin:5px;display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:2px solid #000;color:#000;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:20px;border-radius:0;font-family:dingmou,Avenir,Helvetica,Arial,sans-serif}.btn-handle[data-v-7eff32d2]:active{border-color:#d3b472;color:#f4f4f1}.btn-handle-active[data-v-7eff32d2],.btn-handle[data-v-7eff32d2]:hover{background:#000;border-color:#000;color:#fff}input{line-height:40px;padding:0 15px;margin-top:25px;width:100%}input,textarea{-webkit-appearance:none;background-image:none;border-radius:0;border:2px solid #000;box-sizing:border-box;color:#000;font-size:inherit;height:40px;outline:none;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}textarea{font-family:dingmou,Avenir,Helvetica,Arial,sans-serif}.custom-dialog{border:3px solid #000;border-radius:0;background:#fff;box-shadow:unset}body,html{padding:0;margin:0}body,button,html,input{font-family:dingmou,Avenir,Helvetica,Arial,sans-serif}#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;display:grid;grid-template-rows:auto auto;align-items:center;justify-items:center}.btn[data-v-3e9df9d1]{margin:5px;display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;text-align:center;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:3px 10px 9px 10px;font-size:24px;font-family:dingmou,Avenir,Helvetica,Arial,sans-serif}.btn[data-v-3e9df9d1],.sum-input[data-v-3e9df9d1]{border:2px solid #000;color:#000;-webkit-appearance:none;box-sizing:border-box;outline:none;border-radius:0}.sum-input[data-v-3e9df9d1]{background-image:none;font-size:inherit;height:40px;line-height:40px;padding:0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}


--------------------------------------------------------------------------------
/docs/css/chunk-vendors.ca323f0d.css:
--------------------------------------------------------------------------------
1 | .v-modal-enter{-webkit-animation:v-modal-in .2s ease;animation:v-modal-in .2s ease}.v-modal-leave{-webkit-animation:v-modal-out .2s ease forwards;animation:v-modal-out .2s ease forwards}@-webkit-keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-in{0%{opacity:0}}@-webkit-keyframes v-modal-out{to{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-popup-parent--hidden{overflow:hidden}.el-dialog{position:relative;margin:0 auto 50px;background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box;width:50%}.el-dialog.is-fullscreen{width:100%;margin-top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 10px}.el-dialog__headerbtn{position:absolute;top:20px;right:20px;padding:0;background:0 0;border:none;outline:0;cursor:pointer;font-size:16px}.el-dialog__headerbtn .el-dialog__close{color:#909399}.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close{color:#409eff}.el-dialog__title{line-height:24px;font-size:18px;color:#303133}.el-dialog__body{padding:30px 20px;color:#606266;font-size:14px;word-break:break-all}.el-dialog__footer{padding:10px 20px 20px;text-align:right;box-sizing:border-box}.el-dialog--center{text-align:center}.el-dialog--center .el-dialog__body{text-align:initial;padding:25px 25px 30px}.el-dialog--center .el-dialog__footer{text-align:inherit}.dialog-fade-enter-active{-webkit-animation:dialog-fade-in .3s;animation:dialog-fade-in .3s}.dialog-fade-leave-active{-webkit-animation:dialog-fade-out .3s;animation:dialog-fade-out .3s}@-webkit-keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@-webkit-keyframes dialog-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}@keyframes dialog-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-fade-in-enter,.el-fade-in-leave-active,.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active,.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active,.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:opacity .2s linear}.el-fade-in-enter-active,.el-fade-in-leave-active,.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;transform:scale(1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transform-origin:top left}.el-zoom-in-left-enter,.el-zoom-in-left-leave-active{opacity:0;transform:scale(.45)}.collapse-transition{transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.horizontal-collapse-transition{transition:width .3s ease-in-out,padding-left .3s ease-in-out,padding-right .3s ease-in-out}.el-list-enter-active,.el-list-leave-active{transition:all 1s}.el-list-enter,.el-list-leave-active{opacity:0;transform:translateY(-30px)}.el-opacity-transition{transition:opacity .3s cubic-bezier(.55,0,.1,1)}@font-face{font-family:element-icons;src:url(../fonts/element-icons.535877f5.woff) format("woff"),url(../fonts/element-icons.732389de.ttf) format("truetype");font-weight:400;font-display:"auto";font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-ice-cream-round:before{content:"\e6a0"}.el-icon-ice-cream-square:before{content:"\e6a3"}.el-icon-lollipop:before{content:"\e6a4"}.el-icon-potato-strips:before{content:"\e6a5"}.el-icon-milk-tea:before{content:"\e6a6"}.el-icon-ice-drink:before{content:"\e6a7"}.el-icon-ice-tea:before{content:"\e6a9"}.el-icon-coffee:before{content:"\e6aa"}.el-icon-orange:before{content:"\e6ab"}.el-icon-pear:before{content:"\e6ac"}.el-icon-apple:before{content:"\e6ad"}.el-icon-cherry:before{content:"\e6ae"}.el-icon-watermelon:before{content:"\e6af"}.el-icon-grape:before{content:"\e6b0"}.el-icon-refrigerator:before{content:"\e6b1"}.el-icon-goblet-square-full:before{content:"\e6b2"}.el-icon-goblet-square:before{content:"\e6b3"}.el-icon-goblet-full:before{content:"\e6b4"}.el-icon-goblet:before{content:"\e6b5"}.el-icon-cold-drink:before{content:"\e6b6"}.el-icon-coffee-cup:before{content:"\e6b8"}.el-icon-water-cup:before{content:"\e6b9"}.el-icon-hot-water:before{content:"\e6ba"}.el-icon-ice-cream:before{content:"\e6bb"}.el-icon-dessert:before{content:"\e6bc"}.el-icon-sugar:before{content:"\e6bd"}.el-icon-tableware:before{content:"\e6be"}.el-icon-burger:before{content:"\e6bf"}.el-icon-knife-fork:before{content:"\e6c1"}.el-icon-fork-spoon:before{content:"\e6c2"}.el-icon-chicken:before{content:"\e6c3"}.el-icon-food:before{content:"\e6c4"}.el-icon-dish-1:before{content:"\e6c5"}.el-icon-dish:before{content:"\e6c6"}.el-icon-moon-night:before{content:"\e6ee"}.el-icon-moon:before{content:"\e6f0"}.el-icon-cloudy-and-sunny:before{content:"\e6f1"}.el-icon-partly-cloudy:before{content:"\e6f2"}.el-icon-cloudy:before{content:"\e6f3"}.el-icon-sunny:before{content:"\e6f6"}.el-icon-sunset:before{content:"\e6f7"}.el-icon-sunrise-1:before{content:"\e6f8"}.el-icon-sunrise:before{content:"\e6f9"}.el-icon-heavy-rain:before{content:"\e6fa"}.el-icon-lightning:before{content:"\e6fb"}.el-icon-light-rain:before{content:"\e6fc"}.el-icon-wind-power:before{content:"\e6fd"}.el-icon-baseball:before{content:"\e712"}.el-icon-soccer:before{content:"\e713"}.el-icon-football:before{content:"\e715"}.el-icon-basketball:before{content:"\e716"}.el-icon-ship:before{content:"\e73f"}.el-icon-truck:before{content:"\e740"}.el-icon-bicycle:before{content:"\e741"}.el-icon-mobile-phone:before{content:"\e6d3"}.el-icon-service:before{content:"\e6d4"}.el-icon-key:before{content:"\e6e2"}.el-icon-unlock:before{content:"\e6e4"}.el-icon-lock:before{content:"\e6e5"}.el-icon-watch:before{content:"\e6fe"}.el-icon-watch-1:before{content:"\e6ff"}.el-icon-timer:before{content:"\e702"}.el-icon-alarm-clock:before{content:"\e703"}.el-icon-map-location:before{content:"\e704"}.el-icon-delete-location:before{content:"\e705"}.el-icon-add-location:before{content:"\e706"}.el-icon-location-information:before{content:"\e707"}.el-icon-location-outline:before{content:"\e708"}.el-icon-location:before{content:"\e79e"}.el-icon-place:before{content:"\e709"}.el-icon-discover:before{content:"\e70a"}.el-icon-first-aid-kit:before{content:"\e70b"}.el-icon-trophy-1:before{content:"\e70c"}.el-icon-trophy:before{content:"\e70d"}.el-icon-medal:before{content:"\e70e"}.el-icon-medal-1:before{content:"\e70f"}.el-icon-stopwatch:before{content:"\e710"}.el-icon-mic:before{content:"\e711"}.el-icon-copy-document:before{content:"\e718"}.el-icon-full-screen:before{content:"\e719"}.el-icon-switch-button:before{content:"\e71b"}.el-icon-aim:before{content:"\e71c"}.el-icon-crop:before{content:"\e71d"}.el-icon-odometer:before{content:"\e71e"}.el-icon-time:before{content:"\e71f"}.el-icon-bangzhu:before{content:"\e724"}.el-icon-close-notification:before{content:"\e726"}.el-icon-microphone:before{content:"\e727"}.el-icon-turn-off-microphone:before{content:"\e728"}.el-icon-position:before{content:"\e729"}.el-icon-postcard:before{content:"\e72a"}.el-icon-message:before{content:"\e72b"}.el-icon-chat-line-square:before{content:"\e72d"}.el-icon-chat-dot-square:before{content:"\e72e"}.el-icon-chat-dot-round:before{content:"\e72f"}.el-icon-chat-square:before{content:"\e730"}.el-icon-chat-line-round:before{content:"\e731"}.el-icon-chat-round:before{content:"\e732"}.el-icon-set-up:before{content:"\e733"}.el-icon-turn-off:before{content:"\e734"}.el-icon-open:before{content:"\e735"}.el-icon-connection:before{content:"\e736"}.el-icon-link:before{content:"\e737"}.el-icon-cpu:before{content:"\e738"}.el-icon-thumb:before{content:"\e739"}.el-icon-female:before{content:"\e73a"}.el-icon-male:before{content:"\e73b"}.el-icon-guide:before{content:"\e73c"}.el-icon-news:before{content:"\e73e"}.el-icon-price-tag:before{content:"\e744"}.el-icon-discount:before{content:"\e745"}.el-icon-wallet:before{content:"\e747"}.el-icon-coin:before{content:"\e748"}.el-icon-money:before{content:"\e749"}.el-icon-bank-card:before{content:"\e74a"}.el-icon-box:before{content:"\e74b"}.el-icon-present:before{content:"\e74c"}.el-icon-sell:before{content:"\e6d5"}.el-icon-sold-out:before{content:"\e6d6"}.el-icon-shopping-bag-2:before{content:"\e74d"}.el-icon-shopping-bag-1:before{content:"\e74e"}.el-icon-shopping-cart-2:before{content:"\e74f"}.el-icon-shopping-cart-1:before{content:"\e750"}.el-icon-shopping-cart-full:before{content:"\e751"}.el-icon-smoking:before{content:"\e752"}.el-icon-no-smoking:before{content:"\e753"}.el-icon-house:before{content:"\e754"}.el-icon-table-lamp:before{content:"\e755"}.el-icon-school:before{content:"\e756"}.el-icon-office-building:before{content:"\e757"}.el-icon-toilet-paper:before{content:"\e758"}.el-icon-notebook-2:before{content:"\e759"}.el-icon-notebook-1:before{content:"\e75a"}.el-icon-files:before{content:"\e75b"}.el-icon-collection:before{content:"\e75c"}.el-icon-receiving:before{content:"\e75d"}.el-icon-suitcase-1:before{content:"\e760"}.el-icon-suitcase:before{content:"\e761"}.el-icon-film:before{content:"\e763"}.el-icon-collection-tag:before{content:"\e765"}.el-icon-data-analysis:before{content:"\e766"}.el-icon-pie-chart:before{content:"\e767"}.el-icon-data-board:before{content:"\e768"}.el-icon-data-line:before{content:"\e76d"}.el-icon-reading:before{content:"\e769"}.el-icon-magic-stick:before{content:"\e76a"}.el-icon-coordinate:before{content:"\e76b"}.el-icon-mouse:before{content:"\e76c"}.el-icon-brush:before{content:"\e76e"}.el-icon-headset:before{content:"\e76f"}.el-icon-umbrella:before{content:"\e770"}.el-icon-scissors:before{content:"\e771"}.el-icon-mobile:before{content:"\e773"}.el-icon-attract:before{content:"\e774"}.el-icon-monitor:before{content:"\e775"}.el-icon-search:before{content:"\e778"}.el-icon-takeaway-box:before{content:"\e77a"}.el-icon-paperclip:before{content:"\e77d"}.el-icon-printer:before{content:"\e77e"}.el-icon-document-add:before{content:"\e782"}.el-icon-document:before{content:"\e785"}.el-icon-document-checked:before{content:"\e786"}.el-icon-document-copy:before{content:"\e787"}.el-icon-document-delete:before{content:"\e788"}.el-icon-document-remove:before{content:"\e789"}.el-icon-tickets:before{content:"\e78b"}.el-icon-folder-checked:before{content:"\e77f"}.el-icon-folder-delete:before{content:"\e780"}.el-icon-folder-remove:before{content:"\e781"}.el-icon-folder-add:before{content:"\e783"}.el-icon-folder-opened:before{content:"\e784"}.el-icon-folder:before{content:"\e78a"}.el-icon-edit-outline:before{content:"\e764"}.el-icon-edit:before{content:"\e78c"}.el-icon-date:before{content:"\e78e"}.el-icon-c-scale-to-original:before{content:"\e7c6"}.el-icon-view:before{content:"\e6ce"}.el-icon-loading:before{content:"\e6cf"}.el-icon-rank:before{content:"\e6d1"}.el-icon-sort-down:before{content:"\e7c4"}.el-icon-sort-up:before{content:"\e7c5"}.el-icon-sort:before{content:"\e6d2"}.el-icon-finished:before{content:"\e6cd"}.el-icon-refresh-left:before{content:"\e6c7"}.el-icon-refresh-right:before{content:"\e6c8"}.el-icon-refresh:before{content:"\e6d0"}.el-icon-video-play:before{content:"\e7c0"}.el-icon-video-pause:before{content:"\e7c1"}.el-icon-d-arrow-right:before{content:"\e6dc"}.el-icon-d-arrow-left:before{content:"\e6dd"}.el-icon-arrow-up:before{content:"\e6e1"}.el-icon-arrow-down:before{content:"\e6df"}.el-icon-arrow-right:before{content:"\e6e0"}.el-icon-arrow-left:before{content:"\e6de"}.el-icon-top-right:before{content:"\e6e7"}.el-icon-top-left:before{content:"\e6e8"}.el-icon-top:before{content:"\e6e6"}.el-icon-bottom:before{content:"\e6eb"}.el-icon-right:before{content:"\e6e9"}.el-icon-back:before{content:"\e6ea"}.el-icon-bottom-right:before{content:"\e6ec"}.el-icon-bottom-left:before{content:"\e6ed"}.el-icon-caret-top:before{content:"\e78f"}.el-icon-caret-bottom:before{content:"\e790"}.el-icon-caret-right:before{content:"\e791"}.el-icon-caret-left:before{content:"\e792"}.el-icon-d-caret:before{content:"\e79a"}.el-icon-share:before{content:"\e793"}.el-icon-menu:before{content:"\e798"}.el-icon-s-grid:before{content:"\e7a6"}.el-icon-s-check:before{content:"\e7a7"}.el-icon-s-data:before{content:"\e7a8"}.el-icon-s-opportunity:before{content:"\e7aa"}.el-icon-s-custom:before{content:"\e7ab"}.el-icon-s-claim:before{content:"\e7ad"}.el-icon-s-finance:before{content:"\e7ae"}.el-icon-s-comment:before{content:"\e7af"}.el-icon-s-flag:before{content:"\e7b0"}.el-icon-s-marketing:before{content:"\e7b1"}.el-icon-s-shop:before{content:"\e7b4"}.el-icon-s-open:before{content:"\e7b5"}.el-icon-s-management:before{content:"\e7b6"}.el-icon-s-ticket:before{content:"\e7b7"}.el-icon-s-release:before{content:"\e7b8"}.el-icon-s-home:before{content:"\e7b9"}.el-icon-s-promotion:before{content:"\e7ba"}.el-icon-s-operation:before{content:"\e7bb"}.el-icon-s-unfold:before{content:"\e7bc"}.el-icon-s-fold:before{content:"\e7a9"}.el-icon-s-platform:before{content:"\e7bd"}.el-icon-s-order:before{content:"\e7be"}.el-icon-s-cooperation:before{content:"\e7bf"}.el-icon-bell:before{content:"\e725"}.el-icon-message-solid:before{content:"\e799"}.el-icon-video-camera:before{content:"\e772"}.el-icon-video-camera-solid:before{content:"\e796"}.el-icon-camera:before{content:"\e779"}.el-icon-camera-solid:before{content:"\e79b"}.el-icon-download:before{content:"\e77c"}.el-icon-upload2:before{content:"\e77b"}.el-icon-upload:before{content:"\e7c3"}.el-icon-picture-outline-round:before{content:"\e75f"}.el-icon-picture-outline:before{content:"\e75e"}.el-icon-picture:before{content:"\e79f"}.el-icon-close:before{content:"\e6db"}.el-icon-check:before{content:"\e6da"}.el-icon-plus:before{content:"\e6d9"}.el-icon-minus:before{content:"\e6d8"}.el-icon-help:before{content:"\e73d"}.el-icon-s-help:before{content:"\e7b3"}.el-icon-circle-close:before{content:"\e78d"}.el-icon-circle-check:before{content:"\e720"}.el-icon-circle-plus-outline:before{content:"\e723"}.el-icon-remove-outline:before{content:"\e722"}.el-icon-zoom-out:before{content:"\e776"}.el-icon-zoom-in:before{content:"\e777"}.el-icon-error:before{content:"\e79d"}.el-icon-success:before{content:"\e79c"}.el-icon-circle-plus:before{content:"\e7a0"}.el-icon-remove:before{content:"\e7a2"}.el-icon-info:before{content:"\e7a1"}.el-icon-question:before{content:"\e7a4"}.el-icon-warning-outline:before{content:"\e6c9"}.el-icon-warning:before{content:"\e7a3"}.el-icon-goods:before{content:"\e7c2"}.el-icon-s-goods:before{content:"\e7b2"}.el-icon-star-off:before{content:"\e717"}.el-icon-star-on:before{content:"\e797"}.el-icon-more-outline:before{content:"\e6cc"}.el-icon-more:before{content:"\e794"}.el-icon-phone-outline:before{content:"\e6cb"}.el-icon-phone:before{content:"\e795"}.el-icon-user:before{content:"\e6e3"}.el-icon-user-solid:before{content:"\e7a5"}.el-icon-setting:before{content:"\e6ca"}.el-icon-s-tools:before{content:"\e7ac"}.el-icon-delete:before{content:"\e6d7"}.el-icon-delete-solid:before{content:"\e7c9"}.el-icon-eleme:before{content:"\e7c7"}.el-icon-platform-eleme:before{content:"\e7ca"}.el-icon-loading{-webkit-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@-webkit-keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes rotating{0%{transform:rotate(0)}to{transform:rotate(1turn)}}


--------------------------------------------------------------------------------
/docs/css/main.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 |     font-family: dingmou;
3 |     src: url(../font/DinkieBitmap-9pxDemo.ttf) format("ttf"), url(../font/DinkieBitmap-9pxDemo.woff2) format("woff2");
4 | }


--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/favicon.ico


--------------------------------------------------------------------------------
/docs/font/DinkieBitmap-9pxDemo.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/font/DinkieBitmap-9pxDemo.ttf


--------------------------------------------------------------------------------
/docs/font/DinkieBitmap-9pxDemo.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/font/DinkieBitmap-9pxDemo.woff2


--------------------------------------------------------------------------------
/docs/font/DinkieBitmap-9pxItalicDemo.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/font/DinkieBitmap-9pxItalicDemo.ttf


--------------------------------------------------------------------------------
/docs/font/DinkieBitmap-9pxItalicDemo.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/font/DinkieBitmap-9pxItalicDemo.woff2


--------------------------------------------------------------------------------
/docs/fonts/element-icons.535877f5.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/fonts/element-icons.535877f5.woff


--------------------------------------------------------------------------------
/docs/fonts/element-icons.732389de.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/fonts/element-icons.732389de.ttf


--------------------------------------------------------------------------------
/docs/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/images/1.png


--------------------------------------------------------------------------------
/docs/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/images/2.png


--------------------------------------------------------------------------------
/docs/images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/images/3.png


--------------------------------------------------------------------------------
/docs/images/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/images/4.png


--------------------------------------------------------------------------------
/docs/images/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/images/5.png


--------------------------------------------------------------------------------
/docs/images/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/images/6.png


--------------------------------------------------------------------------------
/docs/images/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/images/7.png


--------------------------------------------------------------------------------
/docs/images/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/images/8.png


--------------------------------------------------------------------------------
/docs/images/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/images/9.png


--------------------------------------------------------------------------------
/docs/images/×.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/docs/images/×.png


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" type="text/css" href="./css/main.css"><link rel="icon" href="favicon.ico"><title>sudoku 大家一起来数独</title><link href="css/app.6657c968.css" rel="preload" as="style"><link href="css/chunk-vendors.ca323f0d.css" rel="preload" as="style"><link href="js/app.e53d84fa.js" rel="preload" as="script"><link href="js/chunk-vendors.73c6bf68.js" rel="preload" as="script"><link href="css/chunk-vendors.ca323f0d.css" rel="stylesheet"><link href="css/app.6657c968.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but sudoku doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="js/chunk-vendors.73c6bf68.js"></script><script src="js/app.e53d84fa.js"></script></body></html>


--------------------------------------------------------------------------------
/docs/js/app.e53d84fa.js:
--------------------------------------------------------------------------------
1 | (function(t){function e(e){for(var l,o,a=e[0],s=e[1],u=e[2],f=0,d=[];f<a.length;f++)o=a[f],Object.prototype.hasOwnProperty.call(i,o)&&i[o]&&d.push(i[o][0]),i[o]=0;for(l in s)Object.prototype.hasOwnProperty.call(s,l)&&(t[l]=s[l]);c&&c(e);while(d.length)d.shift()();return r.push.apply(r,u||[]),n()}function n(){for(var t,e=0;e<r.length;e++){for(var n=r[e],l=!0,a=1;a<n.length;a++){var s=n[a];0!==i[s]&&(l=!1)}l&&(r.splice(e--,1),t=o(o.s=n[0]))}return t}var l={},i={app:0},r=[];function o(e){if(l[e])return l[e].exports;var n=l[e]={i:e,l:!1,exports:{}};return t[e].call(n.exports,n,n.exports,o),n.l=!0,n.exports}o.m=t,o.c=l,o.d=function(t,e,n){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},o.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var l in t)o.d(n,l,function(e){return t[e]}.bind(null,l));return n},o.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="";var a=window["webpackJsonp"]=window["webpackJsonp"]||[],s=a.push.bind(a);a.push=e,a=a.slice();for(var u=0;u<a.length;u++)e(a[u]);var c=s;r.push([0,"chunk-vendors"]),n()})({0:function(t,e,n){t.exports=n("56d7")},"030f":function(t,e,n){},"034f":function(t,e,n){"use strict";n("85ec")},"0aa8":function(t,e,n){},1:function(t,e){},10:function(t,e){},11:function(t,e){},12:function(t,e){},13:function(t,e){},14:function(t,e){},2:function(t,e){},3:function(t,e){},"3e06":function(t,e,n){},4:function(t,e){},"429b5":function(t,e,n){"use strict";n("030f")},"478a":function(t,e,n){"use strict";n("0aa8")},"4f49":function(t,e,n){"use strict";n("6a82")},5:function(t,e){},"56d7":function(t,e,n){"use strict";n.r(e);n("a7cc"),n("450d");var l=n("df33"),i=n.n(l),r=(n("e260"),n("e6cf"),n("cca6"),n("a79d"),n("2b0e")),o=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{attrs:{id:"app"}},[n("div",[n("input",{directives:[{name:"model",rawName:"v-model",value:t.fillSum,expression:"fillSum"}],staticClass:"sum-input",attrs:{placeholder:"需要填的数量"},domProps:{value:t.fillSum},on:{input:function(e){e.target.composing||(t.fillSum=e.target.value)}}}),n("button",{staticClass:"btn",on:{click:t.restart}},[t._v("重来")])]),n("div",{staticStyle:{display:"grid","grid-template-columns":"repeat(2, auto)"}},[n("div",{staticStyle:{display:"grid","grid-template-rows":"repeat(2, auto)","justify-items":"center"}},[n("Table",{attrs:{table:t.table}}),n("ButtonGroup",{attrs:{table:t.table}})],1),n("div",[n("ChartRoom",{ref:"chartRoom",attrs:{user:t.user}})],1)]),t._v(" "+t._s(t.table.id)+" "),n("Dialog",{ref:"dialog"},[n("input",{attrs:{placeholder:"怎么称呼"},on:{keyup:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.submitName(e)}}})])],1)},a=[],s=(n("96cf"),n("1da1")),u=function(){var t=this,e=t.$createElement,n=t._self._c||e;return void 0!==this.table.boxs?n("div",{staticClass:"table",style:t.tableStyle},t._l(this.table.getBoxs(),(function(t,e){return n("Box",{key:e,attrs:{box:t}})})),1):t._e()},c=[],f=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{style:t.boxStyle},t._l(t.box.getCells(),(function(t,e){return n("Cell",{key:e,attrs:{cell:t}})})),1)},d=[],h=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{staticClass:"cell",style:t.cellStyle,on:{click:function(e){return t.fillGap(e)}}},[n("span",{style:t.valueStyle},[t._v(t._s(t.cell.value)+" ")])])},v=[],p=(n("99af"),n("b0c0"),n("d81d"),n("d148")),g=p["a"].init({env:"myth-8ghne7lfb3b2968a"}),b=g.database(),m=new WebSocket("ws://service-66x1nfgh-1252739196.bj.apigw.tencentcs.com/release/websocket");function y(t,e){x().then((function(n){var l=n.data[0]._id;b.collection("Table").doc(l).set({code:t,data:{cells:e.getCells().map((function(t){return{x:t.x,y:t.y,value:t.value,needFill:t.needFill}}))}}).then((function(t){console.log(t),console.log("生成新的table成功")}))}))}function x(){return b.collection("Table").where({}).get()}function w(t){var e=t.remoteTable;b.collection("Table").doc(e._id).update({data:{cells:t.getCells().map((function(t){return{x:t.x,y:t.y,value:t.value,needFill:t.needFill}}))}}).then((function(t){console.log(t)}))}function k(t,e){m.send(JSON.stringify({user:t,msg:e}))}function C(t,e){var n=t.remoteTable;t.watcher=b.collection("Table").doc(n._id).watch({onChange:function(){e(this.virtualClient.sessionInfo.currentDocs[0])}})}function S(t){m.onmessage=function(e){var n=JSON.parse(e.data);t(n)}}var $={props:["cell"],methods:{fillGap:function(t){var e=this;if(!1!==this.cell.allowFill&&!1!==this.cell.needFill){this.$parent.$parent.$parent.$emit("startGame");var n=this.$root.$children[0].user;"×"===this.$root.curIndex?(this.cell.value=void 0,w(this.cell.table),n.sendMsg("[".concat(n.name,"] 将 x:").concat(this.cell.x,",y:").concat(this.cell.y," 清空了"))):this.cell.value=this.$root.curIndex;var l=this.cell.table.verify(this.cell);if(l)this.$root.$children[0],w(this.cell.table),n.sendMsg("[".concat(n.name,"] 将 x:").concat(this.cell.x,",y:").concat(this.cell.y," 修改为:").concat(this.cell.value)),this.cell.table.verifyPass()&&(window.clearInterval(this.$parent.$parent.$parent.timeId),n.sendMsg("[".concat(n.name,"] 下完了最后一步，重新开始")),this.$root.$children[0].restart(),alert("恭喜你通关了"));else{this.cell.value=void 0;var i=t.target.style.background;t.target.style.background="#eb2d2d46",this.cell.allowFill=!1,setTimeout((function(){t.target.style.background=i,e.cell.allowFill=!0}),500)}}}},computed:{valueStyle:function(){return this.cell.needFill?{color:"green","font-size":"35px"}:{"font-size":"25px"}},hint:function(){return this.cell.value===this.$root.curIndex},cellStyle:function(){return this.hint?{background:"#0000004f",color:"#fff"}:{}}}},_=$,j=(n("ca81"),n("2877")),O=Object(j["a"])(_,h,v,!1,null,"106483f4",null),E=O.exports,M={props:["box"],components:{Cell:E},computed:{boxStyle:function(){return{display:"grid","grid-template-columns":"repeat(3, 50px)","grid-template-rows":"repeat(3, 50px)",border:"2px solid #000"}}}},T=M,B=Object(j["a"])(T,f,d,!1,null,null,null),P=B.exports,I={props:["table"],components:{Box:P},data:function(){return{curIndex:"1"}},computed:{tableStyle:function(){return{cursor:'url("./images/'+this.$root.curIndex+'.png") 1 1, auto'}}},mounted:function(){console.log()}},F=I,L=(n("429b5"),Object(j["a"])(F,u,c,!1,null,"12d28948",null)),R=L.exports,G=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticStyle:{"margin-top":"20px"}},t._l(t.buttons,(function(e,l){return n("button",{key:l,class:t.$root.curIndex===e.label?"btn-handle btn-handle-active":"btn-handle",on:{click:function(n){return t.click(e)}}},[t._v(" "+t._s(e.label)+" ")])})),0)},N=[],A=(n("4de4"),n("4160"),n("159b"),{props:["table"],data:function(){return{buttons:[{label:"1"},{label:"2"},{label:"3"},{label:"4"},{label:"5"},{label:"6"},{label:"7"},{label:"8"},{label:"9"},{label:"×"}]}},methods:{click:function(t){this.$root.curIndex=t.label,this.table.getCells().filter((function(e){return e.hint=!1,e.value===t.label})).forEach((function(t){t.hint=!0}))}}}),D=A,J=(n("478a"),Object(j["a"])(D,G,N,!1,null,"7eff32d2",null)),V=J.exports,W=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("textarea",{directives:[{name:"model",rawName:"v-model",value:t.msg,expression:"msg"}],ref:"textarea",staticStyle:{width:"300px",height:"468px","margin-top":"30px"},attrs:{readonly:""},domProps:{value:t.msg},on:{input:function(e){e.target.composing||(t.msg=e.target.value)}}}),n("div",[n("input",{directives:[{name:"model",rawName:"v-model",value:t.willSendMsg,expression:"willSendMsg"}],domProps:{value:t.willSendMsg},on:{keyup:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.onEnter(e)},input:function(e){e.target.composing||(t.willSendMsg=e.target.value)}}})])])},z=[],H=(n("a15b"),{props:["user"],computed:{msg:function(){return this.msgList.join("\n")}},data:function(){return{msgList:[],willSendMsg:""}},methods:{onEnter:function(){var t=this;this.user.sendMsg(this.user.name+":"+this.willSendMsg),this.willSendMsg="",this.$nextTick((function(){t.setScrollLastPositon()}))},startListen:function(){var t=this;S((function(e){e&&(t.msgList.push(e.msg),t.$nextTick((function(){t.setScrollLastPositon()})))}))},setScrollLastPositon:function(){this.$refs.textarea.scrollTop=this.$refs.textarea.scrollHeight+500}}}),q=H,K=(n("5f82"),Object(j["a"])(q,W,z,!1,null,null,null)),Q=K.exports,U=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("el-dialog",{attrs:{title:"请问",visible:t.dialogVisible,width:"300px","show-close":!1,"close-on-click-modal":!1,"close-on-press-escape":!1,"custom-class":"custom-dialog"},on:{"update:visible":function(e){t.dialogVisible=e}}},[t._t("default"),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"})],2)},X=[],Y={data:function(){return{dialogVisible:!0}}},Z=Y,tt=(n("4f49"),Object(j["a"])(Z,U,X,!1,null,null,null)),et=tt.exports,nt=(n("ac1f"),n("1276"),n("b85c")),lt=n("2ef0"),it=n.n(lt),rt=n("d4ec"),ot=n("bee2"),at=function(){function t(e,n,l,i,r){var o=arguments.length>5&&void 0!==arguments[5]&&arguments[5];Object(rt["a"])(this,t),this.x=n,this.y=l,this.box=i,this.weights=100,this.value=void 0===e?void 0:String(e),this.table=r,this.needFill=o,this.hint=!1,this.allowFill=!0}return Object(ot["a"])(t,[{key:"setBlank",value:function(){var t=this;this.value=void 0,this.box.getCells().filter((function(t){return void 0!==t.value})).forEach((function(t){return t.weights=t.weights-1})),this.table.getCells().filter((function(e){return e.x===t.x&&void 0!==e.value})).forEach((function(t){return t.weights=t.weights-1})),this.table.getCells().filter((function(e){return e.y===t.y&&void 0!==e.value})).forEach((function(t){return t.weights=t.weights-1})),this.needFill=!0}}],[{key:"filterCellsByBoxPosition",value:function(t,e,n){if(t<0||t>2)throw new Error("x不在范围内");if(e<0||e>2)throw new Error("x不在范围内");var l=[];return 0===t?l=n.filter((function(t){return t.x>=0&&t.x<3})):1===t?l=n.filter((function(t){return t.x>2&&t.x<6})):2===t&&(l=n.filter((function(t){return t.x>5&&t.x<=9}))),0===e?l=l.filter((function(t){return t.y>=0&&t.y<3})):1===e?l=l.filter((function(t){return t.y>2&&t.y<6})):2===e&&(l=l.filter((function(t){return t.y>5&&t.y<=9}))),l}}]),t}(),st=at,ut=function(){function t(e,n){Object(rt["a"])(this,t),this.x=e,this.y=n,this.cells=[],this.weights=100}return Object(ot["a"])(t,[{key:"addCell",value:function(t){this.cells.push(t)}},{key:"setCells",value:function(t){var e=this;t.forEach((function(t){t.box=e})),this.cells=t}},{key:"getCells",value:function(){return this.cells}}]),t}(),ct=ut,ft=function(){function t(){Object(rt["a"])(this,t),this.boxs=[]}return Object(ot["a"])(t,[{key:"addBox",value:function(t){this.boxs.push(t)}},{key:"getBoxs",value:function(){return this.boxs}},{key:"getCells",value:function(){var t=this;if(void 0!==this.cells)return this.cells;var e=[];return this.boxs.forEach((function(t){e=e.concat(t.getCells())})),this.cells=e,this.positionMap={},this.cells.forEach((function(e){t.positionMap[String(e.x)+String(e.y)]=e})),e}},{key:"findCellByPosition",value:function(t){return this.positionMap[t]}},{key:"getMaxWeightsCell",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=this.getCells().filter((function(t){return void 0!==t.value}));if(e.sort((function(t,e){return t.weights>e.weights?-1:1})),0==t)return e[0];t>e.length-1&&(t=e.length-1);var n=it.a.random(0,t,!1);return e[n]}},{key:"getRowCells",value:function(t){return this.getCells().filter((function(e){return e.x===t}))}},{key:"getColumnCells",value:function(t){return this.getCells().filter((function(e){return e.y===t}))}},{key:"verify",value:function(t){var e,n=t.box,l=n.getCells().filter((function(e){return e.x!==t.x||e.y!==t.y})),i=Object(nt["a"])(l);try{for(i.s();!(e=i.n()).done;){var r=e.value;if(r.value===t.value)return!1}}catch(v){i.e(v)}finally{i.f()}var o,a=this.getRowCells(t.x).filter((function(e){return e.x!==t.x||e.y!==t.y})),s=Object(nt["a"])(a);try{for(s.s();!(o=s.n()).done;){var u=o.value;if(u.value===t.value)return!1}}catch(v){s.e(v)}finally{s.f()}var c,f=this.getColumnCells(t.y).filter((function(e){return e.x!==t.x||e.y!==t.y})),d=Object(nt["a"])(f);try{for(d.s();!(c=d.n()).done;){var h=c.value;if(h.value===t.value)return!1}}catch(v){d.e(v)}finally{d.f()}return!0}},{key:"verifyPass",value:function(){var t,e=this.getCells(),n=Object(nt["a"])(e);try{for(n.s();!(t=n.n()).done;){var l=t.value;if(void 0===l.value)return!1;if(!1===this.verify(l))return!1}}catch(i){n.e(i)}finally{n.f()}return!0}}]),t}(),dt=ft,ht=[[1,2,3,4,5,6,7,8,9],[4,5,6,7,8,9,1,2,3],[7,8,9,1,2,3,4,5,6],[8,9,1,2,3,4,5,6,7],[2,3,4,5,6,7,8,9,1],[5,6,7,8,9,1,2,3,4],[6,7,8,9,1,2,3,4,5],[9,1,2,3,4,5,6,7,8],[3,4,5,6,7,8,9,1,2]],vt=function(){for(var t=it.a.cloneDeep(ht),e=[[0,1,2],[3,4,5],[6,7,8]],n=[[0,1,2],[3,4,5],[6,7,8]],l=[],i=0;i<3;i++){var r=e[i],o=it.a.random(0,2,!1);it.a.pullAt(r,o),l.push(o);var a=[t[r[1]],t[r[0]]];t[r[0]]=a[0],t[r[1]]=a[1]}for(var s=0;s<3;s++){var u=n[s],c=it.a.random(0,2,!1);l.push(c),it.a.pullAt(u,c);var f,d=Object(nt["a"])(t);try{for(d.s();!(f=d.n()).done;){var h=f.value,v=[h[u[1]],h[u[0]]];h[u[0]]=v[0],h[u[1]]=v[1]}}catch(w){d.e(w)}finally{d.f()}}for(var p=new dt,g=0;g<3;g++)for(var b=0;b<3;b++)p.addBox(new ct(g,b));for(var m=[],y=function(e){m=m.concat(t[e].map((function(t,n){return new st(t,e,n,void 0,p)})))},x=0;x<t.length;x++)y(x);return p.getBoxs().forEach((function(t){var e=st.filterCellsByBoxPosition(t.x,t.y,m);t.setCells(e)})),{table:p,codeArr:l}},pt=function(t){var e=t.data.cells,n=new dt;n.code=t.code,n.remoteTable=t;for(var l=0;l<3;l++)for(var i=0;i<3;i++)n.addBox(new ct(l,i));var r=e.map((function(t){return new st(t.value,t.x,t.y,void 0,n,t.needFill)}));return n.getBoxs().forEach((function(t){var e=st.filterCellsByBoxPosition(t.x,t.y,r);t.setCells(e)})),n},gt=function(){for(var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:49,e=vt(),n=e.table,l=e.codeArr,i=0;i<t;i++){var r=n.getMaxWeightsCell(5);l.push(String(r.x)+String(r.y)),r.setBlank()}var o=l.join("");return y(o,n),{data:n,code:o}},bt=function(){function t(e){Object(rt["a"])(this,t),this.name=e}return Object(ot["a"])(t,[{key:"joinChartRoom",value:function(t){this.msgList=t,this.sendMsg("欢迎[".concat(this.name,"]光临"))}},{key:"sendMsg",value:function(t){this.msgList.push(t),k(this.name,t)}}]),t}(),mt=bt,yt={name:"App",components:{Table:R,ButtonGroup:V,ChartRoom:Q,Dialog:et},data:function(){return{table:{},fillSum:49,gameTime:0,timeId:void 0,user:void 0}},methods:{restart:function(){var t=this;console.log("重开了"),this.fillSum<10||this.fillSum>80?alert("你别玩了"):/^\d+$/.test(this.fillSum)?(this.gameTime=0,this.table=gt(this.fillSum),this.$once("startGame",(function(){t.timeId=setInterval((function(){t.gameTime++}),1e3)}))):alert("输个阳间数")},submitName:function(t){var e=this;return Object(s["a"])(regeneratorRuntime.mark((function n(){var l;return regeneratorRuntime.wrap((function(n){while(1)switch(n.prev=n.next){case 0:if(l=t.target.value,l){n.next=3;break}return n.abrupt("return");case 3:e.$refs.dialog.dialogVisible=!1,e.user=new mt(l),e.user.joinChartRoom(e.$refs.chartRoom.msgList),e.$refs.chartRoom.startListen();case 7:case"end":return n.stop()}}),n)})))()},initTable:function(){var t=this;x().then((function(e){t.table=pt(e.data[0]),C(t.table,(function(e){t.table=pt(e)}))}))}},mounted:function(){var t=this;this.$once("startGame",(function(){t.timeId=setInterval((function(){t.gameTime++}),1e3)})),this.initTable()}},xt=yt,wt=(n("034f"),n("6548"),Object(j["a"])(xt,o,a,!1,null,"3e9df9d1",null)),kt=wt.exports;r["default"].use(i.a),r["default"].config.productionTip=!1,new r["default"]({render:function(t){return t(kt)},data:{curIndex:"1"}}).$mount("#app")},"5f82":function(t,e,n){"use strict";n("3e06")},6:function(t,e){},6548:function(t,e,n){"use strict";n("75a1")},"6a82":function(t,e,n){},7:function(t,e){},"75a1":function(t,e,n){},8:function(t,e){},"85ec":function(t,e,n){},"8f6f":function(t,e,n){},9:function(t,e){},ca81:function(t,e,n){"use strict";n("8f6f")}});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sudoku",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@cloudbase/js-sdk": "^1.7.1",
12 |     "core-js": "^3.6.5",
13 |     "element-ui": "^2.15.0",
14 |     "leancloud-realtime": "^5.0.0-rc.5",
15 |     "leancloud-storage": "^4.9.0",
16 |     "lodash": "^4.17.20",
17 |     "vue": "^2.6.11"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.5.0",
21 |     "@vue/cli-plugin-eslint": "~4.5.0",
22 |     "@vue/cli-service": "~4.5.0",
23 |     "babel-eslint": "^10.1.0",
24 |     "babel-plugin-component": "^1.1.1",
25 |     "eslint": "^6.7.2",
26 |     "eslint-plugin-vue": "^6.2.2",
27 |     "less": "^4.1.0",
28 |     "less-loader": "^7.2.1",
29 |     "vue-template-compiler": "^2.6.11"
30 |   },
31 |   "eslintConfig": {
32 |     "root": true,
33 |     "env": {
34 |       "node": true
35 |     },
36 |     "extends": [
37 |       "plugin:vue/essential",
38 |       "eslint:recommended"
39 |     ],
40 |     "parserOptions": {
41 |       "parser": "babel-eslint"
42 |     },
43 |     "rules": {}
44 |   },
45 |   "browserslist": [
46 |     "> 1%",
47 |     "last 2 versions",
48 |     "not dead"
49 |   ]
50 | }
51 | 


--------------------------------------------------------------------------------
/public/css/main.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 |     font-family: dingmou;
3 |     src: url(../font/DinkieBitmap-9pxDemo.ttf) format("ttf"), url(../font/DinkieBitmap-9pxDemo.woff2) format("woff2");
4 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/favicon.ico


--------------------------------------------------------------------------------
/public/font/DinkieBitmap-9pxDemo.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/font/DinkieBitmap-9pxDemo.ttf


--------------------------------------------------------------------------------
/public/font/DinkieBitmap-9pxDemo.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/font/DinkieBitmap-9pxDemo.woff2


--------------------------------------------------------------------------------
/public/font/DinkieBitmap-9pxItalicDemo.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/font/DinkieBitmap-9pxItalicDemo.ttf


--------------------------------------------------------------------------------
/public/font/DinkieBitmap-9pxItalicDemo.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/font/DinkieBitmap-9pxItalicDemo.woff2


--------------------------------------------------------------------------------
/public/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/images/1.png


--------------------------------------------------------------------------------
/public/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/images/2.png


--------------------------------------------------------------------------------
/public/images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/images/3.png


--------------------------------------------------------------------------------
/public/images/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/images/4.png


--------------------------------------------------------------------------------
/public/images/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/images/5.png


--------------------------------------------------------------------------------
/public/images/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/images/6.png


--------------------------------------------------------------------------------
/public/images/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/images/7.png


--------------------------------------------------------------------------------
/public/images/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/images/8.png


--------------------------------------------------------------------------------
/public/images/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/images/9.png


--------------------------------------------------------------------------------
/public/images/×.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/public/images/×.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |     <link rel="stylesheet" type="text/css" href="./css/main.css">
 9 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
10 |     <title>
11 |         <%= htmlWebpackPlugin.options.title %>
12 |             大家一起来数独
13 |     </title>
14 | </head>
15 | 
16 | <body>
17 |     <noscript>
18 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
19 |     </noscript>
20 |     <div id="app"></div>
21 |     <!-- built files will be auto injected -->
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <div>
  4 |       <input v-model="fillSum" class="sum-input" placeholder="需要填的数量" />
  5 |       <button @click="restart" class="btn">重来</button>
  6 |     </div>
  7 | 
  8 |     <!-- <div style="font-size: 25px">时间:{{ gameTime }}</div> -->
  9 |     <div style="display: grid; grid-template-columns: repeat(2, auto)">
 10 |       <div
 11 |         style="
 12 |           display: grid;
 13 |           grid-template-rows: repeat(2, auto);
 14 |           justify-items: center;
 15 |         "
 16 |       >
 17 |         <Table :table="table"> </Table>
 18 |         <ButtonGroup :table="table"></ButtonGroup>
 19 |       </div>
 20 |       <div>
 21 |         <ChartRoom ref="chartRoom" :user="user"></ChartRoom>
 22 |       </div>
 23 |     </div>
 24 |     {{ table.id }}
 25 |     <Dialog ref="dialog">
 26 |       <input @keyup.enter="submitName($event)" placeholder="怎么称呼" />
 27 |     </Dialog>
 28 |   </div>
 29 | </template>
 30 | 
 31 | <script>
 32 | import Table from "./components/Table";
 33 | import ButtonGroup from "./components/ButtonGroup";
 34 | import ChartRoom from "./components/ChartRoom";
 35 | import Dialog from "./components/Dialog";
 36 | import { getBlankTable, generateTable } from "@/assets/algo";
 37 | import User from "@/assets/user";
 38 | import { getOnlineTable, listenTableChange } from "@/api/api";
 39 | export default {
 40 |   name: "App",
 41 |   components: {
 42 |     Table,
 43 |     ButtonGroup,
 44 |     ChartRoom,
 45 |     Dialog,
 46 |   },
 47 |   data() {
 48 |     return {
 49 |       table: {},
 50 |       fillSum: 49,
 51 |       gameTime: 0,
 52 |       timeId: undefined,
 53 |       user: undefined,
 54 |     };
 55 |   },
 56 |   methods: {
 57 |     restart() {
 58 |       console.log("重开了");
 59 |       if (this.fillSum < 10 || this.fillSum > 80) {
 60 |         alert("你别玩了");
 61 |         return;
 62 |       }
 63 |       if (!/^\d+$/.test(this.fillSum)) {
 64 |         alert("输个阳间数");
 65 |         return;
 66 |       }
 67 |       this.gameTime = 0;
 68 |       this.table = getBlankTable(this.fillSum);
 69 |       this.$once("startGame", () => {
 70 |         this.timeId = setInterval(() => {
 71 |           this.gameTime++;
 72 |         }, 1000);
 73 |       });
 74 |     },
 75 |     async submitName(e) {
 76 |       let name = e.target.value;
 77 |       if (!name) {
 78 |         return;
 79 |       }
 80 |       this.$refs.dialog.dialogVisible = false;
 81 |       this.user = new User(name);
 82 |       // 登陆
 83 |       // 加入聊天室
 84 |       this.user.joinChartRoom(this.$refs.chartRoom.msgList);
 85 |       this.$refs.chartRoom.startListen();
 86 |     },
 87 |     initTable() {
 88 |       // 将线上的数据构建成标准对象
 89 |       getOnlineTable().then((table) => {
 90 |         this.table = generateTable(table.data[0]);
 91 |         listenTableChange(this.table, (table) => {
 92 |           this.table = generateTable(table);
 93 |         });
 94 |       });
 95 |     },
 96 |   },
 97 |   mounted() {
 98 |     this.$once("startGame", () => {
 99 |       this.timeId = setInterval(() => {
100 |         this.gameTime++;
101 |       }, 1000);
102 |     });
103 |     this.initTable();
104 |   },
105 | };
106 | </script>
107 | 
108 | <style>
109 | html,
110 | body {
111 |   padding: 0;
112 |   margin: 0;
113 |   /* background-color: #294051; */
114 |   /* color: #f3f3f0; */
115 |   font-family: dingmou, Avenir, Helvetica, Arial, sans-serif;
116 | }
117 | input,
118 | button {
119 |   font-family: dingmou, Avenir, Helvetica, Arial, sans-serif;
120 | }
121 | #app {
122 |   -webkit-font-smoothing: antialiased;
123 |   -moz-osx-font-smoothing: grayscale;
124 |   text-align: center;
125 |   display: grid;
126 |   grid-template-rows: auto auto;
127 |   align-items: center;
128 |   justify-items: center;
129 | }
130 | </style>
131 | <style  scoped>
132 | .btn {
133 |   margin: 5px;
134 |   display: inline-block;
135 |   line-height: 1;
136 |   white-space: nowrap;
137 |   cursor: pointer;
138 |   /* background: #ae927e; */
139 |   background: #fff;
140 |   border: 2px solid #000;
141 |   color: #000;
142 |   -webkit-appearance: none;
143 |   text-align: center;
144 |   box-sizing: border-box;
145 |   outline: none;
146 |   transition: 0.1s;
147 |   font-weight: 500;
148 |   -moz-user-select: none;
149 |   -webkit-user-select: none;
150 |   -ms-user-select: none;
151 |   padding: 3px 10px 9px 10px;
152 |   font-size: 24px;
153 |   border-radius: 0px;
154 |   font-family: dingmou, Avenir, Helvetica, Arial, sans-serif;
155 | }
156 | .sum-input {
157 |   -webkit-appearance: none;
158 |   /* background-color: #fff; */
159 |   background-image: none;
160 |   border-radius: 0px;
161 |   /* border: 1px solid #dcdfe6; */
162 |   border: 2px solid #000;
163 |   box-sizing: border-box;
164 |   /* color: #606266; */
165 |   color: #000;
166 |   font-size: inherit;
167 |   height: 40px;
168 |   line-height: 40px;
169 |   outline: none;
170 |   padding: 0 15px;
171 |   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
172 | }
173 | </style>
174 | 


--------------------------------------------------------------------------------
/src/api/api.js:
--------------------------------------------------------------------------------
 1 | import cloudbase from "@cloudbase/js-sdk";
 2 | 
 3 | const app = cloudbase.init({
 4 |     env: "myth-8ghne7lfb3b2968a"
 5 | });
 6 | const db = app.database();
 7 | 
 8 | 
 9 | const chartSocket = new WebSocket("ws://service-66x1nfgh-1252739196.bj.apigw.tencentcs.com/release/websocket");
10 | 
11 | function insertTable(code, data) {
12 |     getOnlineTable().then(res => {
13 |         let id = res.data[0]._id;
14 |         db.collection("Table").doc(id).set({
15 |             code: code,
16 |             data: {
17 |                 cells: data.getCells().map(cell => {
18 |                     return {
19 |                         x: cell.x,
20 |                         y: cell.y,
21 |                         value: cell.value,
22 |                         needFill: cell.needFill
23 |                     }
24 |                 })
25 |             }
26 |         }).then(res => {
27 |             console.log(res);
28 |             console.log("生成新的table成功");
29 |         })
30 |     })
31 | }
32 | 
33 | function getOnlineTable() {
34 |     return db.collection("Table").where({}).get()
35 | }
36 | 
37 | 
38 | /**
39 |  * 更新table
40 |  */
41 | function updateTable(table) {
42 |     // 发送填空消息
43 |     let remoteTable = table.remoteTable;
44 |     db.collection("Table").doc(remoteTable._id).update({
45 |         data: {
46 |             cells: table.getCells().map(cell => {
47 |                 return {
48 |                     x: cell.x,
49 |                     y: cell.y,
50 |                     value: cell.value,
51 |                     needFill: cell.needFill
52 |                 }
53 |             })
54 |         }
55 |     }).then(res => {
56 |         console.log(res);
57 |     })
58 | }
59 | 
60 | function sendMsg(user, msg) {
61 |     chartSocket.send(JSON.stringify({ user, msg }));
62 | }
63 | 
64 | 
65 | function listenTableChange(table, callBack) {
66 |     let remoteTable = table.remoteTable;
67 |     table.watcher = db.collection("Table").doc(remoteTable._id).watch({
68 |         onChange() {
69 |             callBack(this.virtualClient.sessionInfo.currentDocs[0])
70 |         }
71 |     })
72 | }
73 | 
74 | function listenChartChange(callBack) {
75 |     chartSocket.onmessage = (evt) => {
76 |         let msgJson = JSON.parse(evt.data)
77 |         callBack(msgJson)
78 |     }
79 | }
80 | 
81 | 
82 | export {
83 |     listenChartChange,
84 |     sendMsg,
85 |     insertTable,
86 |     getOnlineTable,
87 |     updateTable,
88 |     listenTableChange
89 | }


--------------------------------------------------------------------------------
/src/assets/DinkieBitmap-9pxItalicDemo.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/src/assets/DinkieBitmap-9pxItalicDemo.ttf


--------------------------------------------------------------------------------
/src/assets/DinkieBitmap-9pxItalicDemo.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/src/assets/DinkieBitmap-9pxItalicDemo.woff2


--------------------------------------------------------------------------------
/src/assets/algo.js:
--------------------------------------------------------------------------------
  1 | import _ from 'lodash';
  2 | import Cell from './cell';
  3 | import Box from './box';
  4 | import Table from './table';
  5 | import { insertTable } from "@/api/api.js";
  6 | 
  7 | 
  8 | const originalTable = [
  9 |     [1, 2, 3, 4, 5, 6, 7, 8, 9],
 10 |     [4, 5, 6, 7, 8, 9, 1, 2, 3],
 11 |     [7, 8, 9, 1, 2, 3, 4, 5, 6],
 12 |     [8, 9, 1, 2, 3, 4, 5, 6, 7],
 13 |     [2, 3, 4, 5, 6, 7, 8, 9, 1],
 14 |     [5, 6, 7, 8, 9, 1, 2, 3, 4],
 15 |     [6, 7, 8, 9, 1, 2, 3, 4, 5],
 16 |     [9, 1, 2, 3, 4, 5, 6, 7, 8],
 17 |     [3, 4, 5, 6, 7, 8, 9, 1, 2]
 18 | ];
 19 | const getFinalTable = () => {
 20 |     const startTable = _.cloneDeep(originalTable)
 21 |     let rows = [
 22 |         [0, 1, 2],
 23 |         [3, 4, 5],
 24 |         [6, 7, 8]
 25 |     ];
 26 |     let columns = [
 27 |         [0, 1, 2],
 28 |         [3, 4, 5],
 29 |         [6, 7, 8]
 30 |     ];
 31 |     // 用户记录生成的操作
 32 |     // r r r c c c
 33 |     let codeArr = []
 34 |         // 横向打乱
 35 |     for (let i = 0; i < 3; i++) {
 36 |         let row = rows[i];
 37 |         // 获得随机行
 38 |         let r = _.random(0, 2, false);
 39 |         // 移除这个随机行
 40 |         _.pullAt(row, r);
 41 |         codeArr.push(r);
 42 |         // 交换剩余两行的
 43 |         [startTable[row[0]], startTable[row[1]]] = [startTable[row[1]], startTable[row[0]]]
 44 |     }
 45 |     // 纵向打乱
 46 |     for (let i = 0; i < 3; i++) {
 47 |         let column = columns[i];
 48 |         // 获得随机列
 49 |         let r = _.random(0, 2, false);
 50 |         // 移除这个随机列
 51 |         codeArr.push(r);
 52 |         _.pullAt(column, r);
 53 |         for (let row of startTable) {
 54 |             [row[column[0]], row[column[1]]] = [row[column[1]], row[column[0]]]
 55 |         }
 56 |     }
 57 |     // 生产table对象
 58 |     let table = new Table();
 59 |     // 生成box对象
 60 |     for (let r = 0; r < 3; r++) {
 61 |         for (let c = 0; c < 3; c++) {
 62 |             table.addBox(new Box(r, c))
 63 |         }
 64 |     }
 65 |     // 生成cell对象
 66 |     let cellArr = [];
 67 |     for (let x = 0; x < startTable.length; x++) {
 68 |         cellArr = cellArr.concat(startTable[x].map((value, y) => {
 69 |             return new Cell(value, x, y, undefined, table)
 70 |         }))
 71 |     }
 72 |     table.getBoxs().forEach((box) => {
 73 |         let cells = Cell.filterCellsByBoxPosition(box.x, box.y, cellArr)
 74 |         box.setCells(cells)
 75 |     })
 76 |     return { table, codeArr };
 77 | }
 78 | 
 79 | /**
 80 |  * 通过data生成table
 81 |  */
 82 | const generateTable = (remoteTable) => {
 83 |     let data = remoteTable.data.cells
 84 |     let table = new Table();
 85 |     table.code = remoteTable.code;
 86 |     table.remoteTable = remoteTable;
 87 |     // 生成box对象
 88 |     for (let r = 0; r < 3; r++) {
 89 |         for (let c = 0; c < 3; c++) {
 90 |             table.addBox(new Box(r, c))
 91 |         }
 92 |     }
 93 |     // 生成cell对象
 94 |     let cellArr = data.map(i => {
 95 |         return new Cell(i.value, i.x, i.y, undefined, table, i.needFill)
 96 |     })
 97 | 
 98 |     table.getBoxs().forEach((box) => {
 99 |         let cells = Cell.filterCellsByBoxPosition(box.x, box.y, cellArr)
100 |         box.setCells(cells)
101 |     })
102 |     return table;
103 | }
104 | 
105 | 
106 | 
107 | 
108 | 
109 | const getFinalTableByCode = (code) => {
110 |     let codeArr = code.split("");
111 |     let rows = [
112 |         [0, 1, 2],
113 |         [3, 4, 5],
114 |         [6, 7, 8]
115 |     ];
116 |     let columns = [
117 |         [0, 1, 2],
118 |         [3, 4, 5],
119 |         [6, 7, 8]
120 |     ];
121 |     const startTable = _.cloneDeep(originalTable)
122 |     for (let i = 0; i < 3; i++) {
123 |         let row = rows[i];
124 |         // 获得随机行
125 |         let r = codeArr.shift();
126 |         // 移除这个随机行
127 |         _.pullAt(row, r);
128 |         // 交换剩余两行的
129 |         [startTable[row[0]], startTable[row[1]]] = [startTable[row[1]], startTable[row[0]]]
130 |     }
131 |     // 纵向打乱
132 |     for (let i = 0; i < 3; i++) {
133 |         let column = columns[i];
134 |         // 获得随机列
135 |         let r = codeArr.shift();
136 |         // 移除这个随机列
137 |         _.pullAt(column, r);
138 |         for (let row of startTable) {
139 |             [row[column[0]], row[column[1]]] = [row[column[1]], row[column[0]]]
140 |         }
141 |     }
142 | 
143 |     // 生产table对象
144 |     let table = new Table();
145 |     // 生成box对象
146 |     for (let r = 0; r < 3; r++) {
147 |         for (let c = 0; c < 3; c++) {
148 |             table.addBox(new Box(r, c))
149 |         }
150 |     }
151 |     // 生成cell对象
152 |     let cellArr = [];
153 |     for (let x = 0; x < startTable.length; x++) {
154 |         cellArr = cellArr.concat(startTable[x].map((value, y) => {
155 |             return new Cell(value, x, y, undefined, table)
156 |         }))
157 |     }
158 |     table.getBoxs().forEach((box) => {
159 |         let cells = Cell.filterCellsByBoxPosition(box.x, box.y, cellArr)
160 |         box.setCells(cells)
161 |     });
162 |     let tmpStr = ""
163 |     let arr = []
164 |     codeArr.forEach((code, index) => {
165 |         if (index % 2 == 0) {
166 |             tmpStr = code;
167 |         } else {
168 |             arr.push(tmpStr + code);
169 |         }
170 |     });
171 |     // 开始扣洞
172 |     return startTable;
173 | 
174 | };
175 | /**
176 |  * @param num 需要填的空
177 |  */
178 | const getBlankTable = (num = 49) => {
179 |     let { table, codeArr } = getFinalTable();
180 |     for (let i = 0; i < num; i++) {
181 |         let cell = table.getMaxWeightsCell(5);
182 |         codeArr.push(String(cell.x) + String(cell.y));
183 |         cell.setBlank();
184 |     }
185 |     let code = codeArr.join("");
186 |     insertTable(code, table);
187 |     return { data: table, code: code };
188 | }
189 | 
190 | export {
191 |     getBlankTable,
192 |     getFinalTableByCode,
193 |     generateTable
194 | }


--------------------------------------------------------------------------------
/src/assets/box.js:
--------------------------------------------------------------------------------
 1 | class Box {
 2 |     constructor(x, y) {
 3 |         this.x = x;
 4 |         this.y = y;
 5 |         this.cells = [];
 6 |         this.weights = 100;
 7 |     }
 8 | 
 9 |     addCell(cell) {
10 |         this.cells.push(cell)
11 |     }
12 |     setCells(cells) {
13 |         cells.forEach((cell) => {
14 |             cell.box = this;
15 |         })
16 |         this.cells = cells;
17 |     }
18 | 
19 |     getCells() {
20 |         return this.cells;
21 |     }
22 | }
23 | 
24 | export default Box


--------------------------------------------------------------------------------
/src/assets/cell.js:
--------------------------------------------------------------------------------
 1 | class Cell {
 2 |     constructor(value, x, y, box, table, needFill = false) {
 3 |         this.x = x;
 4 |         this.y = y;
 5 |         this.box = box;
 6 |         this.weights = 100;
 7 |         this.value = value === undefined ? undefined : String(value);
 8 |         this.table = table;
 9 |         // 需要被填充
10 |         this.needFill = needFill;
11 |         // 提示
12 |         this.hint = false;
13 |         // 允许被填充
14 |         this.allowFill = true;
15 |     }
16 | 
17 |     setBlank() {
18 |         this.value = undefined;
19 |         // 当前盒子内的全部单元格权重减一
20 |         this.box.getCells().filter(cell => cell.value !== undefined)
21 |             .forEach(cell => cell.weights = cell.weights - 1);
22 |         // 当前行的所有当前格权重 -1
23 |         this.table.getCells().filter(cell => cell.x === this.x && cell.value !== undefined)
24 |             .forEach(cell => cell.weights = cell.weights - 1);
25 |         // 当前列的所有单元格权重 -1
26 |         this.table.getCells().filter(cell => cell.y === this.y && cell.value !== undefined)
27 |             .forEach(cell => cell.weights = cell.weights - 1);
28 |         // 当前权重权重为0
29 |         // this.weights = 0;
30 |         this.needFill = true;
31 |     }
32 | 
33 | 
34 |     static filterCellsByBoxPosition(x, y, cells) {
35 |         if (x < 0 || x > 2) {
36 |             throw new Error("x不在范围内")
37 |         }
38 |         if (y < 0 || y > 2) {
39 |             throw new Error("x不在范围内")
40 |         }
41 |         let result = []
42 |         if (x === 0) {
43 |             result = cells.filter(cell => cell.x >= 0 && cell.x < 3)
44 |         } else if (x === 1) {
45 |             result = cells.filter(cell => cell.x > 2 && cell.x < 6)
46 |         } else if (x === 2) {
47 |             result = cells.filter(cell => cell.x > 5 && cell.x <= 9)
48 |         }
49 | 
50 |         if (y === 0) {
51 |             result = result.filter(cell => cell.y >= 0 && cell.y < 3)
52 |         } else if (y === 1) {
53 |             result = result.filter(cell => cell.y > 2 && cell.y < 6)
54 |         } else if (y === 2) {
55 |             result = result.filter(cell => cell.y > 5 && cell.y <= 9)
56 |         }
57 |         return result;
58 |     }
59 | }
60 | 
61 | export default Cell


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/myth984/sudoku/9e43c4fc666fe7cb6480ea7d79408e3e3db49a00/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/table.js:
--------------------------------------------------------------------------------
  1 | import _ from 'lodash';
  2 | class Table {
  3 |     constructor() {
  4 |         this.boxs = [];
  5 |     }
  6 | 
  7 |     addBox(box) {
  8 |         this.boxs.push(box)
  9 |     }
 10 | 
 11 |     getBoxs() {
 12 |         return this.boxs;
 13 |     }
 14 | 
 15 |     getCells() {
 16 |         if (this.cells !== undefined) {
 17 |             return this.cells
 18 |         } else {
 19 |             let result = []
 20 |             this.boxs.forEach((box) => {
 21 |                 result = result.concat(box.getCells())
 22 |             })
 23 |             this.cells = result;
 24 |             // 建立映射关系
 25 |             this.positionMap = {};
 26 |             this.cells.forEach(cell => {
 27 |                 this.positionMap[String(cell.x) + String(cell.y)] = cell
 28 |             })
 29 |             return result;
 30 |         }
 31 |     }
 32 | 
 33 |     findCellByPosition(xy) {
 34 |         return this.positionMap[xy];
 35 |     }
 36 | 
 37 |     /**
 38 |      * 获取权重最大的单元格
 39 |      * @param random 随机值 为0 则不随机 取第一个 random 越大随机性越强
 40 |      */
 41 |     getMaxWeightsCell(random = 0) {
 42 |         let cells = this.getCells().filter(cell => cell.value !== undefined);
 43 |         cells.sort((a, b) => a.weights > b.weights ? -1 : 1)
 44 |         if (random == 0) {
 45 |             return cells[0]
 46 |         }
 47 |         if (random > cells.length - 1) {
 48 |             random = cells.length - 1;
 49 |         }
 50 |         let index = _.random(0, random, false)
 51 |         return cells[index];
 52 |     }
 53 | 
 54 |     getRowCells(x) {
 55 |         return this.getCells().filter(cell => cell.x === x);
 56 |     }
 57 | 
 58 |     getColumnCells(y) {
 59 |         return this.getCells().filter(cell => cell.y === y);
 60 |     }
 61 | 
 62 |     verify(cell) {
 63 |             // 验证当前盒子是否有重复
 64 |             let box = cell.box;
 65 |             let cells = box.getCells().filter(i => {
 66 |                 // 去除自身
 67 |                 return (i.x !== cell.x || i.y !== cell.y)
 68 |             })
 69 |             for (let i of cells) {
 70 |                 // 如果有相同的值则验证失败
 71 |                 if (i.value === cell.value) {
 72 |                     return false;
 73 |                 }
 74 |             }
 75 |             // 验证当前行是否有重复
 76 |             let rowCells = this.getRowCells(cell.x).filter(i => {
 77 |                 // 去除自身
 78 |                 return (i.x !== cell.x || i.y !== cell.y)
 79 |             })
 80 |             for (let i of rowCells) {
 81 |                 // 如果有相同的值则验证失败
 82 |                 if (i.value === cell.value) {
 83 |                     return false;
 84 |                 }
 85 |             }
 86 |             // 验证当前列是否有重复
 87 |             let columnCells = this.getColumnCells(cell.y).filter(i => {
 88 |                 // 去除自身
 89 |                 return (i.x !== cell.x || i.y !== cell.y)
 90 |             })
 91 |             for (let i of columnCells) {
 92 |                 // 如果有相同的值则验证失败
 93 |                 if (i.value === cell.value) {
 94 |                     return false;
 95 |                 }
 96 |             }
 97 |             return true;
 98 |         }
 99 |         // 验证是否通关
100 |     verifyPass() {
101 |         let cells = this.getCells();
102 |         for (let cell of cells) {
103 |             if (cell.value === undefined) {
104 |                 return false;
105 |             }
106 |             if (this.verify(cell) === false) {
107 |                 return false;
108 |             }
109 |         }
110 |         return true;
111 | 
112 |     }
113 | }
114 | 
115 | export default Table


--------------------------------------------------------------------------------
/src/assets/user.js:
--------------------------------------------------------------------------------
 1 | import { sendMsg } from "@/api/api"
 2 | class User {
 3 |     constructor(name) {
 4 |         this.name = name;
 5 |     }
 6 | 
 7 |     joinChartRoom(msgList) {
 8 |         this.msgList = msgList;
 9 |         this.sendMsg(`欢迎[${this.name}]光临`)
10 |     }
11 | 
12 |     sendMsg(msg) {
13 |         this.msgList.push(msg);
14 |         sendMsg(this.name, msg)
15 |     }
16 | }
17 | export default User


--------------------------------------------------------------------------------
/src/components/Box.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :style="boxStyle">
 3 |     <Cell v-for="(cell, index) in box.getCells()" :key="index" :cell="cell"></Cell>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import Cell from "./Cell";
 9 | export default {
10 |   props: ["box"],
11 |   components: {
12 |     Cell,
13 |   },
14 |   computed: {
15 |     boxStyle() {
16 |       return {
17 |         display: "grid",
18 |         "grid-template-columns": "repeat(3, 50px)",
19 |         "grid-template-rows": "repeat(3, 50px)",
20 |         // "grid-gap": "1px 1px",
21 |         border:"2px solid #000"
22 |       };
23 |     },
24 |   },
25 | };
26 | </script>
27 | 
28 | <style>
29 | </style>


--------------------------------------------------------------------------------
/src/components/ButtonGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="margin-top: 20px">
 3 |     <button
 4 |       @click="click(i)"
 5 |       :class="
 6 |         $root.curIndex === i.label
 7 |           ? 'btn-handle btn-handle-active'
 8 |           : 'btn-handle'
 9 |       "
10 |       v-for="(i, index) of buttons"
11 |       :key="index"
12 |     >
13 |       {{ i.label }}
14 |     </button>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | export default {
20 |   props: ["table"],
21 |   data() {
22 |     return {
23 |       buttons: [
24 |         { label: "1" },
25 |         { label: "2" },
26 |         { label: "3" },
27 |         { label: "4" },
28 |         { label: "5" },
29 |         { label: "6" },
30 |         { label: "7" },
31 |         { label: "8" },
32 |         { label: "9" },
33 |         { label: "×" },
34 |       ],
35 |     };
36 |   },
37 |   methods: {
38 |     click(i) {
39 |       // 更换指针
40 |       this.$root.curIndex = i.label;
41 |       // 同类变色
42 |       this.table
43 |         .getCells()
44 |         .filter((cell) => {
45 |           cell.hint = false;
46 |           return cell.value === i.label;
47 |         })
48 |         .forEach((cell) => {
49 |           cell.hint = true;
50 |         });
51 |     },
52 |   },
53 | };
54 | </script>
55 | 
56 | <style scoped>
57 | .btn-handle {
58 |   margin: 5px;
59 |   display: inline-block;
60 |   line-height: 1;
61 |   white-space: nowrap;
62 |   cursor: pointer;
63 |   background: #fff;
64 |   border: 2px solid #000;
65 |   color: #000;
66 |   -webkit-appearance: none;
67 |   text-align: center;
68 |   box-sizing: border-box;
69 |   outline: none;
70 |   transition: 0.1s;
71 |   font-weight: 500;
72 |   -moz-user-select: none;
73 |   -webkit-user-select: none;
74 |   -ms-user-select: none;
75 |   padding: 12px 20px;
76 |   font-size: 20px;
77 |   border-radius: 0px;
78 |   font-family: dingmou, Avenir, Helvetica, Arial, sans-serif;
79 | }
80 | .btn-handle:active {
81 |   border-color: #d3b472;
82 |   color: #f4f4f1;
83 | }
84 | .btn-handle:hover {
85 |   background: #000;
86 |   border-color: #000;
87 |   color: #fff;
88 | }
89 | .btn-handle-active {
90 |   background: #000;
91 |   border-color: #000;
92 |   color: #fff;
93 | }
94 | </style>


--------------------------------------------------------------------------------
/src/components/Cell.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <span @click="fillGap($event)" :style="cellStyle" class="cell">
  3 |     <span :style="valueStyle">{{ cell.value }} </span>
  4 |   </span>
  5 | </template>
  6 | 
  7 | <script>
  8 | import { updateTable } from "@/api/api";
  9 | export default {
 10 |   props: ["cell"],
 11 |   methods: {
 12 |     fillGap(ev) {
 13 |       if (this.cell.allowFill === false) {
 14 |         return;
 15 |       }
 16 |       if (this.cell.needFill === false) {
 17 |         return;
 18 |       }
 19 |       this.$parent.$parent.$parent.$emit("startGame");
 20 |       let user = this.$root.$children[0].user;
 21 |       if (this.$root.curIndex === "×") {
 22 |         // 如果是x直接更新
 23 |         this.cell.value = undefined;
 24 |         updateTable(this.cell.table);
 25 |         user.sendMsg(
 26 |           `[${user.name}] 将 x:${this.cell.x},y:${this.cell.y} 清空了`
 27 |         );
 28 |       } else {
 29 |         this.cell.value = this.$root.curIndex;
 30 |       }
 31 |       // 验证是否可以填空
 32 |       let verify = this.cell.table.verify(this.cell);
 33 |       if (verify) {
 34 |         // 验证通过 再更新
 35 |         this.$root.$children[0];
 36 |         // 后端提交
 37 |         updateTable(this.cell.table);
 38 |         user.sendMsg(
 39 |           `[${user.name}] 将 x:${this.cell.x},y:${this.cell.y} 修改为:${this.cell.value}`
 40 |         );
 41 |         // 验证是否通关
 42 |         if (this.cell.table.verifyPass()) {
 43 |           window.clearInterval(this.$parent.$parent.$parent.timeId);
 44 |           user.sendMsg(
 45 |             `[${user.name}] 下完了最后一步，重新开始`
 46 |           );
 47 |           this.$root.$children[0].restart();
 48 |           alert("恭喜你通关了");
 49 |         }
 50 |       } else {
 51 |         // 有相同数据 验证不通过 禁止0.5秒
 52 |         this.cell.value = undefined;
 53 |         let tmpBackground = ev.target.style.background;
 54 |         ev.target.style.background = "#eb2d2d46";
 55 |         this.cell.allowFill = false;
 56 |         setTimeout(() => {
 57 |           ev.target.style.background = tmpBackground;
 58 |           this.cell.allowFill = true;
 59 |         }, 500);
 60 |       }
 61 |     },
 62 |   },
 63 |   computed: {
 64 |     valueStyle() {
 65 |       if (this.cell.needFill) {
 66 |         return {
 67 |           color: "green",
 68 |           "font-size": "35px",
 69 |         };
 70 |       } else {
 71 |         return {
 72 |           "font-size": "25px",
 73 |         };
 74 |       }
 75 |     },
 76 |     hint() {
 77 |       return this.cell.value === this.$root.curIndex;
 78 |     },
 79 |     cellStyle() {
 80 |       if (this.hint) {
 81 |         return {
 82 |           background: "#0000004f",
 83 |           color: "#fff",
 84 |           // "box-sizing": "border-box",
 85 |           // border: "5px solid #000",
 86 |         };
 87 |       } else {
 88 |         return {};
 89 |       }
 90 |     },
 91 |   },
 92 | };
 93 | </script>
 94 | 
 95 | <style scoped>
 96 | .cell {
 97 |   width: 50px;
 98 |   height: 50px;
 99 |   border: 1px solid #000;
100 |   display: grid;
101 |   justify-items: center;
102 |   align-items: center;
103 | }
104 | .cell:hover {
105 |   background-color: #0000004f;
106 | }
107 | .user-fill {
108 |   color: green;
109 |   font-size: 25px;
110 | }
111 | </style>


--------------------------------------------------------------------------------
/src/components/ChartRoom.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <textarea
 4 |       readonly
 5 |       style="width: 300px; height: 468px; margin-top: 30px"
 6 |       v-model="msg"
 7 |       ref="textarea"
 8 |     >
 9 |     </textarea>
10 |     <div>
11 |       <input v-model="willSendMsg" @keyup.enter="onEnter" />
12 |     </div>
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import { listenChartChange } from "@/api/api";
18 | export default {
19 |   props: ["user"],
20 |   computed: {
21 |     msg() {
22 |       return this.msgList.join("\n");
23 |     },
24 |   },
25 |   data() {
26 |     return {
27 |       msgList: [],
28 |       willSendMsg: "",
29 |     };
30 |   },
31 |   methods: {
32 |     onEnter() {
33 |       this.user.sendMsg(this.user.name + ":" + this.willSendMsg);
34 |       this.willSendMsg = "";
35 |       this.$nextTick(() => {
36 |         this.setScrollLastPositon();
37 |       });
38 |     },
39 |     startListen() {
40 |       listenChartChange((message) => {
41 |         if (message) {
42 |           this.msgList.push(message.msg);
43 |           this.$nextTick(() => {
44 |             this.setScrollLastPositon();
45 |           });
46 |         }
47 |       });
48 |     },
49 |     setScrollLastPositon() {
50 |       this.$refs.textarea.scrollTop = this.$refs.textarea.scrollHeight + 500;
51 |     },
52 |   },
53 | };
54 | </script>
55 | 
56 | <style scope>
57 | input {
58 |   -webkit-appearance: none;
59 |   background-image: none;
60 |   border-radius: 0px;
61 |   border: 2px solid #000;
62 |   box-sizing: border-box;
63 |   color: #000;
64 |   font-size: inherit;
65 |   height: 40px;
66 |   line-height: 40px;
67 |   outline: none;
68 |   padding: 0 15px;
69 |   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
70 |   margin-top: 25px;
71 |   width: 100%;
72 | }
73 | textarea {
74 |   -webkit-appearance: none;
75 |   background-image: none;
76 |   border-radius: 0px;
77 |   border: 2px solid #000;
78 |   box-sizing: border-box;
79 |   color: #000;
80 |   font-size: inherit;
81 |   height: 40px;
82 |   outline: none;
83 |   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
84 |   font-family: dingmou, Avenir, Helvetica, Arial, sans-serif;
85 | }
86 | </style>
87 | 


--------------------------------------------------------------------------------
/src/components/Dialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog
 3 |     title="请问"
 4 |     :visible.sync="dialogVisible"
 5 |     width="300px"
 6 |     :show-close="false"
 7 |     :close-on-click-modal="false"
 8 |     :close-on-press-escape="false"
 9 |     custom-class="custom-dialog"
10 |   >
11 |     <slot></slot>
12 |     <span slot="footer" class="dialog-footer"> </span>
13 |   </el-dialog>
14 | </template>
15 | 
16 | <script>
17 | export default {
18 |   data() {
19 |     return {
20 |       dialogVisible: true,
21 |     };
22 |   },
23 | };
24 | </script>
25 | 
26 | <style >
27 | .custom-dialog {
28 |   border: 3px solid #000;
29 |   border-radius: 0px;
30 |   background: #fff;
31 |   box-shadow:unset;
32 | }
33 | </style>


--------------------------------------------------------------------------------
/src/components/Table.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="table" :style="tableStyle" v-if="this.table.boxs !== undefined">
 3 |     <Box
 4 |       v-for="(box, index) of this.table.getBoxs()"
 5 |       :key="index"
 6 |       :box="box"
 7 |     ></Box>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import Box from "./Box";
13 | 
14 | export default {
15 |   props: ["table"],
16 |   components: {
17 |     Box,
18 |   },
19 |   data() {
20 |     return {
21 |       curIndex: "1",
22 |     };
23 |   },
24 |   computed: {
25 |     tableStyle() {
26 |       return {
27 |         cursor: 'url("./images/' + this.$root.curIndex + '.png") 1 1, auto',
28 |       };
29 |     },
30 |   },
31 |   mounted() {
32 |     console.log();
33 |   },
34 | };
35 | </script>
36 | 
37 | <style scoped>
38 | .table {
39 |   display: grid;
40 |   margin-top: 30px;
41 |   grid-template-columns: repeat(3, auto);
42 |   grid-template-rows: repeat(3, auto);
43 |   justify-items: center;
44 |   align-items: center;
45 |   justify-content: center;
46 |   border: 3px solid #000;
47 |   width: fit-content;
48 |   /* cursor: url("~@/assets/images/1.png") 1 1, auto; */
49 | }
50 | </style>


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import { Dialog } from 'element-ui';
 4 | 
 5 | 
 6 | Vue.use(Dialog);
 7 | 
 8 | Vue.config.productionTip = false
 9 | 
10 | 
11 | 
12 | 
13 | 
14 | 
15 | new Vue({
16 |     render: h => h(App),
17 |     data: {
18 |         curIndex: "1"
19 |     }
20 | }).$mount('#app')


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | publicPath = './'
2 | module.exports = {
3 |     publicPath: publicPath,
4 |     outputDir: 'docs',
5 |     productionSourceMap: false,
6 | }


--------------------------------------------------------------------------------