Touché Coulé

Touché Coulé en JQuery

by Gaelle

HTML

<div id="home">
  <h1>Mon QG</h1>
  <input id="moi" type="text" placeholder="Mon nom">
  <input id="canon" type="text" placeholder="Prochaine torpille en ...">
  <div id="history">
  </div>
</div>

<div id="no-mans-land">
  <code>NO MAN'S LAND</code>
</div>

<div id="enemy">
  <h1>Adversaire</h1>
  <p id="megaphone">> En attente d'un joueur</p>

  <table border="1">
    <tr>
      <th></th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>      
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
    </tr>
    <tr>
      <th>A</th>
      <td id="a1"></td>
      <td id="a2"></td>
      <td id="a3"></td>
      <td id="a4"></td>
      <td id="a5"></td>
      <td id="a6"></td>
      <td id="a7"></td>
      <td id="a8"></td>
      <td id="a9"></td>
    </tr>
    <tr>
      <th>B</th>
      <td id="b1"></td>
      <td id="b2"></td>
      <td id="b3"></td>
      <td id="b4">X</td>
      <td id="b5">X</td>
      <td id="b6">X</td>
      <td id="b7"></td>
      <td id="b8"></td>
      <td id="b9"></td>
    </tr>
    <tr>
      <th>C</th>
      <td id="c1"></td>
      <td id="c2"></td>
      <td id="c3"></td>
      <td id="c4"></td>
      <td id="c5"></td>
      <td id="c6"></td>
      <td id="c7"></td>
      <td id="c8"></td>
      <td id="c9"></td>
    </tr>
    <tr>
      <th>D</th>
      <td id="d1"></td>
      <td id="d2"></td>
      <td id="d3"></td>
      <td id="d4"></td>
      <td id="d5"></td>
      <td id="d6"></td>
      <td id="d7"></td>
      <td id="d8"></td>
      <td id="d9">X</td>
    </tr>
    <tr>
      <th>E</th>
      <td id="e1"></td>
      <td id="e2"></td>
      <td id="e3"></td>
      <td id="e4"></td>
      <td id="e5"></td>
      <td id="e6"></td>
      <td id="e7"></td>
      <td id="e8"></td>
      <td id="e9">X</td>
    </tr>
    <tr>
      <th>F</th>
      <td id="f1"></td>
      <td id="f2"></td>
      <td id="f3"></td>
      <td id="f4"></td>
      <td id="f5"></td>
      <td...

CSS

td, th {
  width: 20px;
  height: 20px;
  color: white;
}

th {
  background-color: black;
}

td {
  background-color: blue;
}

#no-mans-land {
  background-color: green;
  height: 100px;
  margin: 50px 0;
}

JavaScript

// Met à jour le message affiché à l´adversaire à chaque nouvelle
// lettre saisie dans l´input ´Mon nom´
$("#moi").keyup(function(event) {
  var myName = $("#moi").val();
  $("#megaphone").text(promptMessage(myName));
});

// Génère le message diffusé à l´adversaire
function promptMessage(playerName) {
  if (playerName.length > 0) {
    return ">> " + playerName + " va attaquer en ...";
  } else {
    return "> En attente d'un joueur";
  }
}