Map type worldofstargate

[Sephi-Chan]

Pour modéliser mon univers dans le navigateur, je vais générer du HTML qui va décrire mon univers, puis je vais le mettre en forme avec CSS.
Je vais générer dynamiquement un CSS pour mon univers.

Je reprends un exemple d'une expérimentation récente. C'est du Ruby mais je suis sûr que vous comprendrez le principe avec les quelques commentaires que j'ajoute.

class UniversesController < GameController

  

  # Ce code est exécuté quand on envoie une requête HTTP avec la méthode GET aux URL :

  # monjeu.com/universes/:id (équivalent à monjeu.com/universes/:id.html)

  # monjeu.com/universes/:id.css

  def show

    @universe = Universe.find(params[:id])

    

    respond_to do |format|

      format.html # Va rendre le fichier de vue views/universes/show.html.erb et envoyer un MimeType text/html.

      format.css # Va rendre le fichier de vue views/universes/show.css.erb et envoyer un MimeType text/css.

    end

  end

  

end

Donc notre contrôleur Universes est capable de donner la représentation HTML et la représentation CSS d'un univers donné.

Dans la vue pour la représentation HTML (views/universes/show.html.erb), on génère le HTML requis :

<link rel="stylesheet"

      href="<%= link_to(@universe, :format => :css) %>"

      type="text/css" 

      media="screen"

      title="Univers <%= h(@universe.name) %>"

      charset="utf-8" />



<div class="universe" id="universe-<%= @universe.id %>">

	<% for galaxy in @universe.galaxies %>

		<div class="galaxy" id="galaxy-<%= galaxy.id %>">

			<% for planet in galaxy.planets %>

				<% 

				ownership = if planet.owner == nil

					'belongs_to_nobody'

				elsif planet.owner == current_player

					'belongs_to_me'

				else

					'belongs_to_ennemy'

				end

				%>

				<div class="planet <%= ownership %>" id="planet-<%= planet.id %>"></div>

			<% end %>

		</div>

	<% end %>

</div>

Ce sera donc interprété par le serveur, qui va donc générer un HTML qui aura cette tronche là :

<link rel="stylesheet"

      href="monjeu.com/universes/1.css"

      type="text/css" 

      media="screen"

      title="Univers Alpha"

      charset="utf-8" />



<div class="universe" id="universe-1">

	<div class="galaxy" id="galaxy-1">

		<div class="planet belongs_to_nobody" id="planet-1"></div>

		<div class="planet belongs_to_ennemy" id="planet-2"></div>

	</div>

	<div class="galaxy" id="galaxy-2">

		<div class="planet belongs_to_me" id="planet-3"></div>

		<div class="planet belongs_to_ennemy" id="planet-4"></div>

		<div class="planet belongs_to_nobody" id="planet-5"></div>

	</div>

</div>

On a donc un appel à un fichier CSS qui est généré dynamiquement. Ce script (sans doute écrit en PHP, dans votre cas) va renvoyer du texte (souvent vous générez du HTML, là vous allez générer du CSS) et il faudra bien prendre soin de dire au serveur d'envoyer ça comme un fichier CSS, avec le MimeType text/css (pour ça en PHP on utilise la fonction header('Content-type: text/css');).

Pour générer notre CSS, on met donc dans la vue /views/universes/show.css.erb :

.universe {

	position: absolute;

	background-color: #000;

}



.universe .galaxy {

	position: absolute;

}



.universe .planet {

	position: absolute

	height: 1px;

	width: 1px;

	background-color: #fff;

}



.universe .planet.belongs_to_me {

	background-color: blue;

}



.universe .planet.belongs_to_ennemy {

	background-color: red;

}



.universe .planet.belongs_to_nobody {

	background-color: grey;

}



#universe-<%= @universe.id %> {

	width: <%= @universe.width %>px;

	height: <%= @universe.height %>px;

}



/* On boucle sur les galaxies de l'univers. */

<% for galaxy in @universe.galaxies %>

	#galaxy-<%= galaxy.id %> {

		left: <%= galaxy.x * 10 %>px;

		top: <%= galaxy.y * 10 %>px;

	}

	

	/* On boucle sur les planètes de la galaxie. */

	<% for planet in galaxy.planets %>

		#galaxy-<%= planet.id %> {

			left: <%= galaxy.x * 10 %>px;

			top: <%= galaxy.y * 10 %>px;

		}

	<% end %>

<% end %>

Le CSS ainsi généré aura une tronche comme :

/* Je zappe la partie statique puisqu'elle reste identique. */



#universe-1 {

	width: 500px;

	height: 500px;

	position: relative;

}



#galaxy-1 {

	left: 50px;

	top: 30px;

}



#planet-1 {

	left: -10px;

	top: 20px;

}



/* Etc. */

Voilà, voilà, si vous avez des questions : relisez quelques fois.
Si vous avez encore des questions : posez-les. :p


Sephi-Chan