44:["$","title",null,{"children":"Battleships | bmdatavisualisation | Observable"}] 4c:T133e,chart = { const svg = d3.create("svg"); svg.attr("width",width).attr("height",height); const square_width = (width - 80)/11; const remaining = height - (square_width * 9) - 80; const legend_width = (remaining-20)/5; let moves = 0; let ships_sunk = 0; const ship_colour = d3.scaleOrdinal() .domain(d3.range(0,ships.length,1)) .range(["#74c476","#41ab5d","#238b45","#006d2c","#00441b"]); const margins = {"left": 40,"right":40,"top":60,"bottom":remaining}; //background rect and title svg.append("rect") .attr("class","background_rect") .attr("x",margins.left - 4) .attr("y",margins.top - 4) .attr("width", (square_width * 11)+ 8) .attr("height",(square_width * 9) + 8); svg.append("text") .attr("class","battle_title") .attr("x",width/2) .attr("y",20) .text("MOVES: 0"); var x_scale = d3.scaleBand().domain(d3.range(0,11,1)).range([0,square_width*11]) var y_scale = d3.scaleBand().domain(d3.range(0,9,1)).range([0,square_width*9]); svg.append("g") .attr("class","axis") .call(d3.axisTop(x_scale).tickSizeOuter(0).tickFormat(d => +d + 1)) .attr("transform","translate(" + margins.left + "," + (margins.top-4) + ")"); svg.append("g") .attr("class","axis") .call(d3.axisLeft(y_scale).tickSizeOuter(0).tickFormat(d => String.fromCharCode(65 + d))) .attr("transform","translate(" + (margins.left - 4) + "," + (margins.top-4) + ")"); const square_group = svg.selectAll(".square_group") .data(square_data) .join(function(group){ var enter = group.append("g").attr("class","square_group"); enter.append("rect").attr("class","square_rect"); enter.append("text").attr("class","fa ship_icon"); return enter; }); square_group.select(".ship_icon") .attr("id", d => "icon_" + d.x + "_" + d.y) .attr("x", d => (d.x * square_width) + (square_width/2)) .attr("y", d => (d.y * square_width) + (square_width/2) + 5) .attr("fill","white") .attr("transform","translate(" + margins.left + "," + margins.top + ")") square_group.select(".square_rect") .attr("x", d => d.x * square_width + 2) .attr("y", d => d.y * square_width + 2) .attr("width",square_width - 4) .attr("height",square_width - 4) .attr("transform","translate(" + margins.left + "," + margins.top + ")") .on("mouseover",function(){ d3.select(this).attr("cursor","pointer").style("opacity",1); }) .on("mouseout",function(){ var my_fill = d3.select(this).style("fill"); d3.select(this).attr("cursor","pointer") .style("opacity",my_fill === "rgb(49, 130, 189)" ? 0.6 : 1); }) .on("click",function(event,d){ moves += 1; d3.select(".battle_title").text("MOVES: " + moves); var my_position = ship_positions[d.x + ":" + d.y]; if(my_position === undefined){ d3.select(this).style("fill","white"); } else { ships_sunk += 1; d3.select("#icon_" + d.x + "_" + d.y) .text(ships[my_position].icon) d3.select(this).style("fill",ship_colour(my_position)); if(ships_sunk === 17){ d3.select(".battle_title").text("HOORAY! you won in " + moves + " moves"); } } }); var ship_start = margins.left; var legend_y = height - (legend_width*5) - 10; for(let i = 0 ; i < ships.length ; i ++){ svg.append("rect") .attr("x", ship_start) .attr("y",legend_y) .attr("height", ships[i].pegs * legend_width) .attr("width",legend_width) .attr("fill",ship_colour(i)); svg.append("text") .attr("class","fa ship_icon") .attr("x", ship_start + (legend_width/2)) .attr("y", legend_y + 20) .attr("fill","white") .text(ships[i].icon); svg.append("text") .attr("class","ship_label") .attr("x", ship_start + (legend_width/2)) .attr("y", legend_y - 6) .text(ships[i].name); svg.append("text") .attr("x", ship_start + (legend_width/2)) .attr("text-anchor","middle") .attr("y", legend_y + (ships[i].pegs * legend_width) - 10) .attr("fill","white") .attr("font-weight","bold") .text(ships[i].pegs); ship_start += legend_width + 25; } return svg.node(); }4d:Tee3,ship_positions = { var all_positions = {}; //I'm sure a mathematician or Javascript expert would be able to do this better! //loop through ships for(let i = 0 ; i < ships.length ; i ++){ let position_1 = get_random_coords(); let positions_complete = false; while (positions_complete === false){ if(position_free(position_1) === true){ //we have first position; var pegs = ships[i].pegs; //so we have position_1. //we need to try x first if(check_horizontal(position_1,pegs,'left') === true){ //place ship for(let p = 0 ; p < pegs ; p ++){ all_positions[(position_1[0]-p) + ":" + position_1[1]] = i; } positions_complete = true; } else if (check_vertical(position_1,pegs,'down')){ //place ship for(let p = 0 ; p < pegs ; p ++){ all_positions[position_1[0]+ ":" + (position_1[1]+p)] = i; } positions_complete = true; } else if(check_horizontal(position_1,pegs,'right') === true) { //place ship for(let p = 0 ; p < pegs ; p ++){ all_positions[(position_1[0]+p) + ":" + position_1[1]] = i; } positions_complete = true; } else if (check_vertical(position_1,pegs,'up')){ //place ship for(let p = 0 ; p < pegs ; p ++){ all_positions[position_1[0]+ ":" + (position_1[1]-p)] = i; } positions_complete = true; } else { position_1 = get_random_coords(); } } else { position_1 = get_random_coords(); } } } function check_horizontal(start_position, pegs, direction){ let result = false; if(direction === 'left'){ if((start_position[0] + 1) >= pegs){ result = true; } } else { //direction === 'right' var my_pos = 8 - (start_position[0] + 1); if(my_pos >= pegs){ result = true; } } if(result === true){ for(let p = 0 ; p < pegs ; p ++){ let new_x = start_position[0] - (p+1); if(direction === 'right'){ new_x = start_position[0] + (p+1); } result = position_free([new_x,start_position[1]]); if(result === false){ p = pegs; } } } return result } function check_vertical(start_position, pegs, direction){ var result = false; if(direction === 'up'){ if((start_position[1] + 1) >= pegs){ result = true; } } else { //direction === 'down' var my_pos = 8 - (start_position[0] + 1); if(my_pos >= pegs){ result = true; } } if(result === true){ for(let p = 0 ; p < pegs ; p ++){ let new_y = start_position[1] - (p+1); if(direction === 'down'){ new_y = start_position[1] + (p+1); } result = position_free([start_position[0],new_y]); if(result === false){ p = pegs; } } } return result; } function position_free(coords){ if(all_positions[coords[0] + ":" + coords[1]] === undefined){ return true } else { return false } } function get_random_coords(){ var random_x = parseInt(Math.random() * 11); var random_y = parseInt(Math.random() * 9); return [random_x, random_y] } console.log(all_positions) return all_positions; }4e:[] 48:{"id":"e3022ba1a4f71d75","slug":"battleships","title":"Battleships","thumbnail":"4a234b2d2bf5aa990d8fb2db4d0f5e649283430b839570555b172bf485dd52c7","access_level":"public","create_time":"$D2021-02-11T17:12:10.394Z","update_time":"$D2021-04-13T14:29:47.736Z","view_time":null,"first_public_time":"$D2021-02-12T12:28:03.611Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"83f5a5fb6fe280ff","login":"bmdatavisualisation","name":"","avatar_url":"https://avatars-next.observableusercontent.com/1a158843df5971e68866096807cebb835fff8d443036113d0fbd4b85e4b67e90","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":182,"publish_version":182,"role":null,"authored":false,"authors":[{"type":"individual","id":"969703731d06ddfa","login":"bmdatavisualisation","name":"BM Data Visualisation","avatar_url":"https://avatars-next.observableusercontent.com/31eaca3376975eca84233c003165299087581c56283dddbec7bb35ae7c22b9cc","tier":null,"bio":"Bringing data to life with the power of d3.js.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"969703731d06ddfa","login":"bmdatavisualisation","name":"BM Data Visualisation","avatar_url":"https://avatars-next.observableusercontent.com/31eaca3376975eca84233c003165299087581c56283dddbec7bb35ae7c22b9cc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Battleships","cells":[{"id":0,"value":"md`# Battleships`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md`I had a bit of spare time and wanted to do a viz using Font Awesome Icons. A bit of fun!`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html` \n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"square_data = {\n const my_data = [];\n\n for(let x = 0 ; x < 11 ; x ++){\n for(let y = 0 ; y < 9 ; y ++){\n my_data.push({\n \"x\": x,\n \"y\": y\n })\n }\n }\n return my_data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"ships = [{\"name\": \"Carrier\",\"pegs\":5,\"icon\":\"\\uf0fb\"},{\"name\": \"Battleship\",\"pegs\":4,\"icon\":\"\\uf0e7\"},{\"name\": \"Cruiser\",\"pegs\":3,\"icon\":\"\\uf21a\"},{\"name\": \"Submarine\",\"pegs\":3,\"icon\":\"\\uf043\"},{\"name\": \"Destroyer\",\"pegs\":2,\"icon\":\"\\uf13d\"}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = width * 1.05","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null