init

3f7909f9 · castleiMac · 3f7909f9 · 3f7909f9 · 3f7909f9 · 3f7909f9
Commit 3f7909f9 authored 4 years ago by castleiMac
19 changed files
--- a/.browserslistrc
+++ b/.browserslistrc
+> 1%
+last 2 versions
+not dead
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
+# wuziqi
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/package.json
+++ b/package.json
+{
+  "name": "wuziqi",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.1.2",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "typescript": "~4.1.5",
+    "vue-template-compiler": "^2.6.11"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
+<!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.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
+<template>
+  <div id="app" style="display:flex;flex-wrap:wrap;width:550px">
+    <div
+      v-for="(v, k) in Cols"
+      :key="k"
+      :id="v.id"
+      :x="v.x"
+      :y="v.y"
+      :class="v.select ? 'select' : ''"
+      @click="click(v)"
+      :color="v.color"
+      style="width:50px;height:50px;border:1px solid;margin-left:-1px;margin-top:-1px;"
+    >
+      <div style="font-size:3px">{{ v.id }}</div>
+      <div>{{ v.color }}</div>
+    </div>
+
+    <!-- <h2>累计最大连续：{{ Count }}</h2> -->
+  </div>
+</template>
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+
+let addr = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
+
+@Component
+export default class App extends Vue {
+  Cols: any = [];
+
+  Last = false;
+
+  Colors = ["#0000fd", "#d600fd", "#e47bac", "#21bb49", "#ea9f14"];
+
+  ColorIndex = -1;
+
+  Count = 0;
+
+  click(e: any) {
+    if (e.color == "") {
+      //有效下棋
+      e.color = this.Last ? "黑" : "白";
+      this.Last = !this.Last;
+      // let id = e.id;
+      // e.colorIndex=(this.ColorIndex++)
+      for (let i = e.x - 4; i <= e.x + 4; i++) {
+        for (let o = e.y - 4; o <= e.y + 4; o++) {
+          if (i == e.x && o == e.y) {
+          } else {
+            if (
+              i == e.x ||
+              o == e.y || //横竖相等
+              Math.abs(i - e.x) == Math.abs(o - e.y) //斜角
+            ) {
+              let id = Number([i, o].join(""));
+              if (this.Cols[id]) {
+                // this.Cols[id].select = true;
+                //取得是否有跟当前值一样的
+                // if(e.color==this.Cols[id].color){
+                //   alert("恭喜你，"+e.color+'棋 已胜利')
+                // }
+              }
+            }
+          }
+        }
+      }
+
+      //计算范围标识结束
+
+      //开始竖向计算
+      // let count=0;
+      this.Count = 0;
+      for (let x = Math.max(e.x - 4, 0); x <= Math.min(e.x + 4, 9); x++) {
+        let id = Number([x, e.y].join(""));
+        console.log(id);
+        // debugger
+        if (this.Cols[id]) {
+          if (this.Cols[id].color == e.color) {
+            this.Count++;
+          } else if (this.Cols[id].color != "") {
+            this.Count = 0;
+          }
+        }
+      }
+      if (this.Count >= 5) {
+        alert("胜利");
+        this.mounted();
+      }
+
+      //开始横向计算
+      this.Count = 0;
+      for (let y = Math.max(e.y - 4, 0); y <= Math.min(e.y + 4, 9); y++) {
+        let id = Number([e.x, y].join(""));
+        console.log(id);
+        // debugger
+        if (this.Cols[id]) {
+          if (this.Cols[id].color == e.color) {
+            this.Count++;
+          } else if (this.Cols[id].color != "") {
+            this.Count = 0;
+          }
+        }
+      }
+      if (this.Count >= 5) {
+        alert("胜利");
+        this.mounted();
+      }
+
+      //开始\计算
+      this.Count = 0;
+      for (let i = -4; i < 5; i++) {
+        let id = Number([e.x - i, e.y - i].join(""));
+        if (this.Cols[id]) {
+          if (this.Cols[id].color == e.color) {
+            this.Count++;
+          } else if (this.Cols[id].color != "") {
+            this.Count = 0;
+          }
+        }
+      }
+      if (this.Count >= 5) {
+        alert("胜利");
+        this.mounted();
+      }
+
+      //开始/计算
+      this.Count = 0;
+      for (let i = -4; i < 5; i++) {
+        let id = Number([e.x - i, e.y + i].join(""));
+        if (this.Cols[id]) {
+          if (this.Cols[id].color == e.color) {
+            this.Count++;
+          } else if (this.Cols[id].color != "") {
+            this.Count = 0;
+          }
+        }
+      }
+      if (this.Count >= 5) {
+        alert("胜利");
+        this.mounted();
+      }
+
+      console.log("横向累计连续 ", this.Count);
+    } else {
+      //重复点击了
+    }
+  }
+
+  calc(e: any) {
+    this.Count;
+  }
+
+  mounted() {
+    this.Cols = [];
+    for (let i = 0; i < 10; i++) {
+      //10列，
+      for (let o = 0; o < 10; o++) {
+        //10行
+        this.Cols.push({
+          id: [addr[i], o].join(""),
+          x: i,
+          y: o,
+          colorIndex: -1,
+          select: false,
+          color: "",
+        });
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+.select {
+  background-color: #42b983;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
+}
+</style>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class HelloWorld extends Vue {
+  @Prop() private msg!: string;
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/main.ts
+++ b/src/main.ts
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
--- a/src/router/index.ts
+++ b/src/router/index.ts
+import Vue from 'vue'
+import VueRouter, { RouteConfig } from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes: Array<RouteConfig> = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router
--- a/src/shims-tsx.d.ts
+++ b/src/shims-tsx.d.ts
+import Vue, { VNode } from 'vue'
+
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    interface Element extends VNode {}
+    // tslint:disable no-empty-interface
+    interface ElementClass extends Vue {}
+    interface IntrinsicElements {
+      [elem: string]: any
+    }
+  }
+}
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}
--- a/src/store/index.ts
+++ b/src/store/index.ts
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
--- a/src/views/About.vue
+++ b/src/views/About.vue
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
+
+@Component({
+  components: {
+    HelloWorld,
+  },
+})
+export default class Home extends Vue {}
+</script>
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/yarn.lock
+++ b/yarn.lock