[DO NOT MERGE] Solutions

.scripts/rebase_solutions.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+# FOR PROJECT MAINTAINERS ONLY
+
+set -e
+# Update branches
+git checkout start-branch 
+git pull
+git checkout solutions
+# Rebase on solutions on start-branch
+git rebase start-branch
+
+# Check number of commits
+tags=("step2" "step3" "step4" "helpers" "step5" "step6" "step7" "step8" "step9" "step10" "step11" "_solution_")
+number_of_commits=$(git log --oneline solutions ^start-branch | wc -l)
+if [ "$commit_diff" -ne ${#tags[@]} ]; then
+    echo "The number of commits between start-branch and solutions is not correct, please update the branches or the script"
+    exit 2
+fi
+
+# Check tests pass
+CI=true yarn test || exit 3
+
+# Rebase interactively to re-apply tags 
+GIT_SEQUENCE_EDITOR="sed -i 's/^pick/edit/g'" git rebase -i start-branch
+
+# Apply tags to commits
+for tag in "${tags[@]}"
+do
+    echo "Tagging $tag"
+    git tag -f $tag
+    git rebase --continue
+done
+
+echo ""
+echo "======================================================"
+echo "Rebase done, please push changes:                     "
+echo "git push --force-with-lease && git push --force --tags"
+echo "You may allow force push on the repo settings         "
+echo "======================================================"

src/App.vue

@@ -1,5 +1,9 @@
+<script setup>
+import BattleBoard from "./components/BattleBoard.vue";
+</script>
+
 <template>
   <main>
-    <div>Battleship</div>
+    <BattleBoard />
   </main>
 </template>

src/components/BattleBoard.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="battle-board">
+      <div class="title">BATTLESHIP</div>
+
+      <div v-if="winner" class="end-game-message" :class="winner">
+        {{ winner }} wins !!!
+      </div>
+
+      <div v-else class="boards-container">
+        <PlayBoard
+          title="Player"
+          :rows-count="10"
+          :columns-count="10"
+          :board-cells="playerAssets.boardCells"
+        />
+
+        <PlayBoard
+          title="IA"
+          :board-cells="IAAssets.boardCells"
+          :should-display-ships="false"
+          @play="play"
+        />
+      </div>
+    </div>
+    <button class="start-button" @click="startGame">Start Game</button>
+  </div>
+</template>
+
+<script>
+import PlayBoard from "./PlayBoard.vue";
+import { generateRandomAssets } from "../services/board-helper.js";
+import { shoot } from "../services/play-helper.js";
+import { findTargetCell } from "../services/ia-helper.js";
+
+export default {
+  name: "BattleBoard",
+  components: {
+    PlayBoard,
+  },
+  data() {
+    return {
+      playerAssets: {
+        boardCells: {},
+        boats: {},
+      },
+      IAAssets: {
+        boardCells: {},
+        boats: {},
+      },
+      gameStarted: false,
+      humanCanPlay: false,
+      winner: null,
+    };
+  },
+  methods: {
+    startGame() {
+      this.setAssets(this.playerAssets);
+      this.setAssets(this.IAAssets);
+      this.gameStarted = true;
+      this.humanCanPlay = true;
+      this.winner = null;
+    },
+    setAssets(target) {
+      const targetRandomAssets = generateRandomAssets();
+      target["boardCells"] = targetRandomAssets.boardCells;
+      target["boats"] = targetRandomAssets.boats;
+    },
+    async play(cell) {
+      if (this.gameStarted && this.humanCanPlay) {
+        const isHumanShotAccepted = shoot(
+          cell,
+          this.IAAssets.boardCells,
+          this.IAAssets.boats,
+        );
+        if (this.IAAssets.boats.aliveShipsCount === 0) {
+          this.winner = "Player";
+        }
+
+        if (isHumanShotAccepted) {
+          this.humanCanPlay = false;
+          await new Promise((resolve) => setTimeout(resolve, 500));
+          const playerTargetCell = findTargetCell(this.playerAssets.boardCells);
+          shoot(
+            playerTargetCell,
+            this.playerAssets.boardCells,
+            this.playerAssets.boats,
+          );
+          if (this.playerAssets.boats.aliveShipsCount === 0) {
+            this.winner = "IAAssets";
+          }
+          this.humanCanPlay = true;
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 30px;
+  font-weight: bold;
+  margin-bottom: 30px;
+}
+.battle-board {
+  padding: 30px;
+}
+.boards-container {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 30px;
+}
+</style>

src/components/PlayBoard.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="playboard">
+    <div class="title">{{ title }}</div>
+    <div class="grid-container">
+      <div v-for="row in rowsCount" :key="'row'.concat(row)" class="line">
+        <div
+          v-for="column in columnsCount"
+          :key="''.concat(column).concat('-'.concat(row))"
+          class="cell"
+          :class="[getCellStatus(row, column), { hidden: !shouldDisplayShips }]"
+          @click="$emit('play', getCell(row, column))"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCell } from "../services/board-helper.js";
+
+export default {
+  name: "PlayBoard",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    columnsCount: {
+      type: Number,
+      default: 10,
+    },
+    rowsCount: {
+      type: Number,
+      default: 10,
+    },
+    boardCells: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    shouldDisplayShips: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  methods: {
+    getCell,
+    getCellStatus(row, column) {
+      return this.boardCells[this.getCell(row, column)]
+        ? this.boardCells[this.getCell(row, column)].status
+        : "";
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.playboard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.line {
+  margin: 0px;
+  width: fit-content;
+  display: flex;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  & + & {
+    border-top: none;
+  }
+}
+.cell {
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  & + & {
+    border-left: none;
+  }
+  height: 3vw;
+  width: 3vw;
+}
+
+.ship {
+  background-color: black;
+}
+.ship.hidden {
+  background-color: unset;
+}
+.missed {
+  background-color: blue;
+}
+.hit {
+  background-color: yellow;
+}
+.sunk {
+  background-color: red;
+}
+</style>

src/components/__tests__/BattleBoard.test.js

@@ -0,0 +1,11 @@
+import { describe, it, expect } from "vitest";
+
+import { mount } from "@vue/test-utils";
+import BattleBoard from "../BattleBoard.vue";
+
+describe("BattleBoard", () => {
+  it("renders properly", () => {
+    const wrapper = mount(BattleBoard);
+    expect(wrapper.text()).toContain("BATTLESHIP");
+  });
+});

src/services/__tests__/board-helper.test.js

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+import { getCell } from "../board-helper";
+
+describe("getCell", () => {
+  it("should return the correct case id for A1", () => {
+    expect(getCell(1, 1)).toBe("A1");
+  });
+  it("should return the correct case id for A2", () => {
+    expect(getCell(2, 1)).toBe("A2");
+  });
+  it("should return the correct case id for B1", () => {
+    expect(getCell(1, 2)).toBe("B1");
+  });
+  it("should return the correct case id for J10", () => {
+    expect(getCell(10, 10)).toBe("J10");
+  });
+});