add game instructions to index.html

index.html

@@ -130,6 +130,39 @@ <h1 class="text-4xl text-blue-700 text-center mt-8 mb-16">
         </div>
       </div>
     </div>
+    <div
+      id="gameInstructions"
+      class="bg-white justify-center items-start flex flex-col gap-4 mx-auto max-w-xl mb-12 mt-24 p-6 rounded-lg shadow-sm text-xs"
+    >
+      <h2 class="font-semibold text-sm">Instructions</h2>
+      <ul class="list-disc space-y-2">
+        <li class="list-none">The game is played against the Computer.</li>
+        <li class="list-none">
+          Begin by <span class="font-semibold">positioning</span> your ships on
+          the board. Drag each ship from its first block or click on the random
+          button for a random positioning.
+        </li>
+        <li class="list-none">
+          You can
+          <span class="font-semibold">rotate a ship by clicking</span> on it if
+          the move is legal. The rotation will only be applied if the move is
+          allowed by the game rules.
+        </li>
+        <li class="list-none">
+          Once all ships are positioned, confirm your setup to
+          <span class="font-semibold">start</span> the game.
+        </li>
+        <li class="list-none">
+          Full
+          <a
+            class="text-blue-600 hover:text-blue-800"
+            href="https://en.wikipedia.org/wiki/Battleship_(game)"
+            >game rules</a
+          >.
+        </li>
+      </ul>
+    </div>
+
     <script src="bundle.js"></script>
   </body>
 </html>