Generation/5

lifegame-vue/package.json

@@ -43,7 +43,9 @@
       "plugin:vue/essential",
       "@vue/prettier"
     ],
-    "rules": {},
+    "rules": {
+      "no-console": "off"
+    },
     "parserOptions": {
       "parser": "babel-eslint"
     },

lifegame-vue/src/components/Board.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="board">
+    <button @click="nextGeneration" class="generation">next generation</button>
     <div v-for="(cellsState, n) in cellsStateArray" :key="n" class="row">
       <div v-for="(cellState, m) in cellsState" :key="String(m)+n" class="col">
         <Cell :state="cellState" />
@@ -11,19 +12,26 @@
 <script>
 import Cell from "@/components/Cell.vue";
 
+import { calcNextGeneration } from "@/scripts/lifegame.js";
+
 export default {
   name: "Board",
-  data: function () {
+  data: function() {
     return {
-      cellsStateArray: [...Array(100)].map(() => [...Array(100)].map(() => this.generateRandomState()))
-    }
+      cellsStateArray: [...Array(100)].map(() =>
+        [...Array(100)].map(() => this.generateRandomState())
+      )
+    };
   },
   components: {
     Cell
   },
   methods: {
-    generateRandomState: function () {
+    generateRandomState: function() {
       return Math.random() >= 0.5; //https://stackoverflow.com/a/36756480
+    },
+    nextGeneration: function() {
+      this.cellsStateArray = calcNextGeneration(this.cellsStateArray);
     }
   }
 };

lifegame-vue/src/scripts/lifegame.js

@@ -0,0 +1,56 @@
+export function calcNextGeneration(statesArray) {
+  const size = statesArray.length;
+  const nextStatesArray = [...Array(size)].map(() => Array(size));
+  // 速度重視
+  for (let i = 0; i < size; i++) {
+    for (let j = 0; j < size; j++) {
+      const neighborhood = calcNeighborhood(statesArray, i, j);
+      const currentState = statesArray[i][j];
+      nextStatesArray[i][j] = calcnNextStateByNeighborhood(
+        currentState,
+        neighborhood
+      );
+    }
+  }
+  return nextStatesArray;
+}
+
+function calcNeighborhood(a, i, j) {
+  return [
+    accessState(a, i - 1, j - 1),
+    accessState(a, i - 1, j),
+    accessState(a, i - 1, j + 1),
+    accessState(a, i, j - 1),
+    accessState(a, i, j + 1),
+    accessState(a, i + 1, j - 1),
+    accessState(a, i + 1, j),
+    accessState(a, i + 1, j + 1)
+  ];
+}
+
+function calcnNextStateByNeighborhood(currentState, neighborhood) {
+  const aliveNumber = neighborhood.filter(s => s).length;
+  if (currentState) {
+    if (2 <= aliveNumber && aliveNumber <= 3) {
+      return true;
+    } else if (aliveNumber <= 1 || 4 <= aliveNumber) {
+      return false;
+    }
+  } else {
+    if (aliveNumber === 3) {
+      return true;
+    }
+    return false;
+  }
+}
+
+function accessState(a, i, j) {
+  // 範囲外はdead扱いにしてるけど，後でトーラス的な位置関係にする
+  if (a[i] !== undefined) {
+    if (a[i][j] !== undefined) {
+      return a[i][j];
+    }
+    return false;
+  }
+  return false;
+}

lifegame-vue/tests/unit/example.spec.js

@@ -35,4 +35,57 @@ describe("Board.vue", () => {
     const cellArray = wrapper.findAll(Cell);
     expect(cellArray).toHaveLength(100 * 100);
   });
+  describe("generation buttonについて", () => {
+    it("generation buttonを持っている", () => {
+      expect(wrapper.contains("button.generation")).toBe(true);
+    });
+    const stateTest = (testStates, expectState) => {
+      wrapper = mount(Board, {
+        propsData: { size: 3 }
+      });
+      wrapper.setData({ cellsStateArray: testStates });
+      wrapper.find("button.generation").trigger("click");
+      expect(wrapper.vm.cellsStateArray[1][1]).toBe(expectState);
+    };
+    describe("generation buttonを押したら世代が進む", () => {
+      it("過密は死", () => {
+        const dieStates = [
+          [true, true, true],
+          [true, true, false],
+          [false, false, false]
+        ];
+        stateTest(dieStates, false);
+      });
+      it("誕生は生", () => {
+        const liveStates = [
+          [true, true, false],
+          [true, false, false],
+          [false, false, false]
+        ];
+        stateTest(liveStates, true);
+        const liveStates2 = [
+          [true, true, false],
+          [false, false, false],
+          [false, false, false]
+        ];
+        stateTest(liveStates2, false);
+      });
+      it("生存は生", () => {
+        const liveStates = [
+          [true, false, false],
+          [true, true, false],
+          [false, false, false]
+        ];
+        stateTest(liveStates, true);
+      });
+      it("過疎は死", () => {
+        const liveStates = [
+          [false, false, false],
+          [true, true, false],
+          [false, false, false]
+        ];
+        stateTest(liveStates, false);
+      });
+    });
+  });
 });