Question

I’m building what will be a very information-heavy game screen, and, with even just the first bit of code, which displays a number of planets on the screen, my code is starting to look a bit messy/complicated.

I’d also like to hide some of it from the uses looking at “view source”, if posible, but that’s a secondary concern.

Basically, the code below draws X planets at various Absolute positions on the screen, and provides a mouseover tooltip for each planet.

There simply must be a “nicer” and/or more efficient way to do this? I’d appreciate any tips, basically.

My main reason for being concerned is that the Qtip2 tooltips are going to become a lot more complex, and there’ll be all sorts of player info added to the page, and a couple of chat/news/info boxes. I don’t want to start with spaghetti code, when I’ve still got the main course to deliver to the page!

I think my main concern is the masses of script tags I’ll be generating. At the rate of one per tooltip that I add to the page. The “echo”s for the planet images (and their labels) are surely unavoidable….I don’t really know, I’;m a bit new to this.

<!-- File: /app/View/Games/main.ctp -->
<?php

    echo $this->Html->script('jquery-1.8.2.min');
    echo $this->Html->script('jquery.qtip');

    $game = $this->Session->read('Game');
?>
<?php
    foreach ($game['Planet'] as $planet) {
        echo $this->Html->image('../img/planet/' . $planet['planet_image_file'] .'.png', array('class' => 'planet_img planet_' . $planet['id'], 'id' => 'planet_' . $planet['id'], 'alt' => $planet['planet_name'], 'style' => 'position:absolute;top:' . $planet['y_position'] . 'px;left:' . $planet['x_position'] . 'px;'));
        echo '<script>$(\'.planet_' . $planet['id'] . '\').qtip({content: \'' . $planet['planet_name'] . '\'});</script>';
        echo '<label for="' . $planet['planet_name'] . $planet['id'] . '" style="position:absolute;top:' . ($planet['y_position'] - 20) . 'px;left:' . $planet['x_position'] . 'px;">' . $planet['planet_name'] . '</label>';
    }
?>

Answer 1

1. Use stylesheets instead of all those inline styles. If you add styles dynamically, you could always have a <style> element in the header, to which you dynamically append css definitions as needed.

2. Use image sprites to help with optimisation. This is more appropriate for manipulating background images, rather than inline images, but for the performance gains it offers, it may be worth it.

   You would need elements using css image backgrounds, not inline images, but the DOM can be just as simple.

3. Instead of calling a bunch of scripts to add the qtip thingy, have the information qtip needs as a data attribute for each of these elements, and have one function, in an external js file, which loops through the elements and does the qtip stuff based on the data attribute.

   foreach ($game[‘Planet’] as $planet) {
   echo $this->Html->image(‘../img/planet/’ . $planet[‘planet_image_file’] .’.png’, array(‘class’ => ‘planet_img planet_’ . $planet[‘id’], ‘id’ => ‘planet_’ . $planet[‘id’], ‘alt’ => $planet[‘planet_name’], ‘data-planet-name’ => $planet[‘planet_name’]));
   echo ” . $planet[‘planet_name’] . ”;
   }

jQuery

$('.planet_img').each(function(){
  $(this).qtip({content: $(this).data('planet-name')});
})