CODEWITHSUNDEEP
phphtmlcss
TechGames
TechGames

Reputation: 21

create border around icon depending on variable

What i currently have

what im trying to make

I need it when i throw for example 2 and 3 it goes down 2 and marks it from left to right using black borders, and then it goes 3 to the right and mark from top to bottem using black borders, at the point they cross i need it to be a red border.

<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="form.css">
</head>
<body>
  <div class="wrapper">
  <?php
  if(isset($_POST['submit'])) {
  $dice1 = mt_rand(1,6);
  $dice2 = mt_rand(1,6);

  echo "<table class='table'>";
  for ($i=0; $i < 6 ; $i++) {
    echo "<tr>";
    for ($j=0; $j < 6 ; $j++) {
      echo "<td> <img class='icon cell color".mt_rand(1,4)."' src='img/icon".mt_rand(1,4).".svg ' </td>";
    }
    echo "</tr>";
  }
  echo "</table>";
  echo "<img class='dice1' src='img/dice".$dice1.".gif'>";
  echo "<img class='dice2' src='img/dice".$dice2.".gif'>";
}
   ?>
   <form method="get" action="/php1/eindopdracht/cal.php">
    <button type="submit" class="button1">renew</button>
</form>
   <form method="POST">
     <button type='submit' class='button2' name='submit' value='submit'>throw</button>
   </form>
</div>
 </body>
 </html>```

Upvotes: 2

Views: 108

Answers (2)

TechGames
TechGames

Reputation: 21

<html lang="en" dir="ltr">
 <head>
   <meta charset="utf-8">
   <title></title>
   <link rel="stylesheet" href="form.css">
 </head>
 <body>
   <div class="wrapper">
   <?php
   if(isset($_POST['submit'])) {
   $dice1 = mt_rand(1,6);
   $dice2 = mt_rand(1,6);

   function chooseBorder($i,$j,$dice1,$dice2) {
       $class = "";
       if ($dice1 == $i && $dice2 == $j) {
           $class = "border-red";
           return $class;
       }

       if ($dice1 == $i || $dice2 == $j) {
           $class = "border-black";
           return $class;
       }
       return $class;
   }
   for ($i=1; $i < 7; $i++) {
       echo "<tr>";
       for ($j=1; $j < 7 ; $j++) {
           $class = chooseBorder($i,$j,$dice1,$dice2);
           echo "<td> <img class='icon cell color".mt_rand(1,4). " " . $class . "' src='img/icon".mt_rand(1,4).".svg ' </td>";
       }
       echo "</tr>";
   }
echo "</table>";
echo "<img class='dice1' src='img/dice".$dice1.".gif'>";
echo "<img class='dice2' src='img/dice".$dice2.".gif'>";

}
    ?>
    <form method="get" action="/php1/eindopdracht/cal.php">
     <button type="submit" class="button1">renew</button>
 </form>
    <form method="POST">
      <button type='submit' class='button2' name='submit' value='submit'>throw</button>
    </form>
</div>
  </body>
  </html>

Upvotes: 0

Thanasis Balatsoykas
Thanasis Balatsoykas

Reputation: 176

You can check if dice1 value is equal to $i you can add a certain class that makes the color black. Same if dice2 value is equal to $i. If then dice1 is equal to $i and dice2 value is equal to $j choose a different class to make the border red.

function chooseBorder($i,$j,$dice1,$dice2) {
    $class = "";
    if ($dice1 == $i && $dice2 == $j) {
        $class = "border-red";
        return $class;
    }

    if ($dice1 == $i || $dice2 == $j) {
        $class = "border-black";
        return $class;
    }

    return $class;
}


for ($i=0; $i < 6 ; $i++) {
    echo "<tr>";
    for ($j=0; $j < 6 ; $j++) {
        $class = chooseBorder($i,$j,$dice1,$dice2);
        echo "<td> <img class='icon cell color".mt_rand(1,4). " " . $class . "' src='img/icon".mt_rand(1,4).".svg ' </td>";
    }
    echo "</tr>";
}

Upvotes: 1

Related Questions