app/controllers/worlds_controller.rb @@ -130,6 +130,15 @@ class GamesController < ApplicationController end end + def borders + world = Game.find(params[:id]).world + respond_to do |format| + format.js do + render :json => world.borders.to_json + end + end + end + def players game = Game.find(params[:id]) respond_to do |format| app/controllers/games_controller.rb @@ -29,23 +29,6 @@ class Country < ActiveRecord::Base %Q(#{id} [color="#{colour}",style=filled,label="#{name}"];) end - def to_js - text = %Q[countries[#{id}] = paper.circle(#{x_position}, #{y_position}, #{(Math::log(armies.to_f) + 1) * 10});\n] - text << unhighlight - text << %Q[var attr = {"font": '12px "Verdana"', opacity: 0.8};\narmies[#{id}] = paper.text(#{x_position}, #{y_position - 20}, "#{name}").attr(attr).attr("fill", "#0f0");\n] - text << %Q[var attr = {"font": '20px "Verdana"', opacity: 0.8};\narmies[#{id}] = paper.text(#{x_position}, #{y_position + 7}, "#{armies}").attr(attr).attr("fill", "#fff");\n] - text - end - - def highlight - %Q[countries[#{id}].attr("fill", "#000");\n countries[#{id}].attr("stroke", "#f00");\n countries[#{id}].attr("stroke-width", "20");\n] - end - - def unhighlight - %Q[countries[#{id}].attr("fill", "#000");\n countries[#{id}].attr("stroke", "##{game_player.colour.hex}");\n countries[#{id}].attr("stroke-width", "20").attr("id", "#{id}");\n] - end - - def attack(target, attacker_dice = 1, target_dice = 1) strengths = battle_strengths(attacker_dice, target) logger.info "battle_strengths [#{strengths}]" app/models/country.rb @@ -30,18 +30,6 @@ class World < ActiveRecord::Base #TODO award_bonuses game_player end - def to_js - text = %Q[function draw_map() {paper = Raphael("holder", 1150, 600);\n] - #countries.collect { |c| c.neighbours }.flatten.each_with_index do |n,i| - # text << n.to_js(i) - #end - countries.each_with_index do |c, i| - text << c.to_js - end - text << '}' - text - end - def generate_regions(options = {}, country_options = {}) options[:min] ||= 2 options[:max] ||= 4 @@ -61,6 +49,10 @@ class World < ActiveRecord::Base `dot -Tsvg -Gsize=800,600 -o#{out} #{File.join(RAILS_ROOT, 'tmp', id.to_s)}.dot` unless RAILS_ENV == 'testing' end + def borders + regions.collect { |r| r.borders }.flatten + end + protected def countries app/models/world.rb @@ -25,6 +25,7 @@ ActionController::Routing::Routes.draw do |map| } map.connect 'countries/:id', :controller => 'countries', :action => 'show' + map.connect 'borders/:id', :controller => 'worlds', :action => 'borders' # Sample resource route with options: # map.resources :products, :member => { :short => :get, :toggle => :post }, :collection => { :sold => :get } config/routes.rb @@ -13,12 +13,63 @@ function Map(target) { // Target div this.target = target; - // save the players so we can draw the countries with the correct colours + // Save the players so we can draw the countries with the correct colours this.players = {}; // countries this.countries = {}; + // borders + this.borders = {}; + + // setup the players so we can use the colours when we draw the map and connectors + this.setPlayers = function(players) { + for (var i = 0, ii = players.length; i < ii; i++) { + this.players[players[i].game_player.id] = players[i].game_player; + } + }; + + // draw one country on the map + this.drawCountry = function(country_json) { + var country = country_json.country; + var country_id = country.id; + $("g:contains('"+country.name+"')").remove(); + var colour = this.players[country.game_player_id].colour.hex; + var y = Math.round(country.y_position), + x = Math.round(country.x_position); + var radius = this.settings.countryRadius + this.settings.countryIncRadius * country.armies; + this.countries[country_id] = country; + var group = this.map.group(); + group.circle(x, y, radius).attr({fill:'#'+colour, stroke: "#fff", strokewidth: 2}); + group.text(x, y+radius+10, country.name + ' (' + country.armies + ')').attr(this.hoverLabelStyle).show(); + }; + + // Draw all the countries + this.drawCountries = function(countries) { + for (var i = 0, ii = countries.length; i < ii; i++) { + this.drawCountry(countries[i]); + } + }; + + // draw one border on the map + this.drawBorder = function(border_json) { + var border = border_json.neighbour; + var from = this.countries[border.country_id]; + var to = this.countries[border.neighbour_id]; + //$("g:contains('"+border.name+"')").remove(); + //var colour = this.players[border.game_player_id].colour.hex; + this.borders[border.id] = border; + var group = this.map.group(); + group.path({stroke: "#ddd"}).moveTo(from.x_position, from.y_position).lineTo(to.x_position, to.y_position); + }; + + // Draw all the borders + this.drawBorders = function(borders) { + for (var i = 0, ii = borders.length; i < ii; i++) { + this.drawBorder(borders[i]); + } + }; + this.settings = $.extend({ // Dimensions width: 1000, @@ -57,37 +108,6 @@ function Map(target) { }, (arguments[3] || {}) ); - this.map = Raphael(target, this.settings.width, this.settings.height); - - // setup the players so we can use the colours when we draw the map and connectors - this.setPlayers = function(players) { - for (var i = 0, ii = players.length; i < ii; i++) { - this.players[players[i].game_player.id] = players[i].game_player; - } - }; - - // plot one country on the map - this.plotCountry = function(country_json) { - var country = country_json.country; - var country_id = country.id; - $("g:contains('"+country.name+"')").remove(); - var colour = this.players[country.game_player_id].colour.colour.hex; - var y = Math.round(this.settings.height - this.settings.bottomGutter - country.y_position), - x = Math.round(this.settings.leftGutter + country.x_position); - var radius = this.settings.countryRadius + this.settings.countryIncRadius * country.armies; - this.countries[country_id] = this.map.group(); - var group = this.countries[country_id]; - group.circle(x, y, radius).attr({fill:'#'+colour, stroke: "#fff", strokewidth: 2}); - group.text(x, y+radius+10, country.name + ' (' + country.armies + ')').attr(this.hoverLabelStyle).show(); - }; - - // Plot all the countries - this.plot = function(countries) { - for (var i = 0, ii = countries.length; i < ii; i++) { - this.plotCountry(countries[i]); - } - }; - this.setStyleDefaults = function() { // X and Y axis labels and captions default to global style if not provided // - X Axis Labels @@ -171,6 +191,7 @@ function Map(target) { } }; + this.map = Raphael(target, this.settings.width, this.settings.height); this.setStyleDefaults(); this.setPenColor(); } public/javascripts/map.js @@ -2,7 +2,7 @@ function allocate_armies(game_id,game_player_id) { $.post("/games/allocate_armies",{game_id: game_id, game_player_id: game_player_id, country_id: $('#country_id').val(), armies: $('#armies').val(),authenticity_token: global_token}, function(data) { $("#out").html(data); }); - plot_map(); + draw_country($('#country_id').val()); } function pass_turn(game_id,game_player_id) { @@ -21,8 +21,8 @@ function attack(game_id,game_player_id,attacker_country_id, target_country_id,ar $.post("/games/attack",{game_id: game_id, game_player_id: game_player_id, attacker_country_id: attacker_country_id, target_country_id: target_country_id, armies: armies,authenticity_token: global_token}, function(data) { $("#out").html(data); }); - plot_country(attacker_country_id); - plot_country(target_country_id); + draw_country(attacker_country_id); + draw_country(target_country_id); } function draw_svg (game_id) { @@ -31,12 +31,25 @@ function draw_svg (game_id) { var map; -function plot_country(country_id) { - $.getJSON("/countries/" + country_id, function(data) { map.plotCountry(data)} ); +// draw one country on the map +function draw_country(country_id) { + $.getJSON("/countries/" + country_id, function(data) { map.drawCountry(data)} ); } -function plot_map() { - $.getJSON("/games/" + game_id + "/countries", function(data) { map.plot(data)} ); +// draw all the countries +function draw_map() { + draw_countries(); + draw_borders(); +} + +// draw all the countries +function draw_borders() { + $.getJSON("/borders/" + game_id, function(data) { map.drawBorders(data)} ); +} + +// draw all the countries +function draw_countries() { + $.getJSON("/games/" + game_id + "/countries", function(data) { map.drawCountries(data)} ); } function set_players() { @@ -47,6 +60,6 @@ $(document).ready(function() { map = new Map("map_holder"); set_players(); - plot_map(); + draw_map(); }); public/javascripts/risk.js c4ab2140b901b4841a096445907d774ee223479d Martin Stannard mstannard@gmail.com http://github.com/martinstannard/risque/commit/55e258ceb72f9f0c4693488ba3c6b95aec72fa0a 55e258ceb72f9f0c4693488ba3c6b95aec72fa0a 2008-12-21T15:40:52-08:00 2008-12-21T15:40:52-08:00 added borders - need to fix z-order 1cb53d92664c1780187c94489745de35d0cab7ed Martin Stannard mstannard@gmail.com