aimacode · redblobgames · Jun 24, 2017 · Jun 24, 2017
diff --git a/4-Beyond-Classical-Search/index.html b/4-Beyond-Classical-Search/index.html
@@ -31,7 +31,7 @@
 <body>
 
   <div class="row">
-    <div class="col-sm-6 col-md-8 col-md-offset-1" id="content">
+    <div class="col-sm-6 col-md-10 col-md-offset-1" id="content">
       <h1>Beyond classical search</h1>
 
       <h2>Optimization Problem</h2>
@@ -230,7 +230,6 @@ <h4>Third Party License Information</h4>
 
     </div>
   </div>
-  </div>
 </body>
 
 </html>
diff --git a/6-Constraint-Satisfaction-Problems/c_mapColoring.js b/6-Constraint-Satisfaction-Problems/c_mapColoring.js
@@ -0,0 +1,141 @@
+class AustraliaMapDiagram {
+  constructor(selector, h, w) {
+    this.w = w;
+    this.h = h;
+    this.root = selector;
+    this.territories = [
+      ['WA','#WA',1/16,1/4],
+      ['NT','#NT',1/7.5,1/6],
+      ['SA','#SA',1/7,1/3.5],
+      ['Q','#Q',1/4.5,1/4.5],
+      ['NSW','#NSW',1/4.5,1/3],
+      ['V','#V',1/5,1/2.45],
+      ['T','#T',1/4.4,1/2]
+    ];
+    this.colors = [
+      ['nc'],
+      ['r','.r',this.h/50,this.w/4],
+      ['g','.g',this.h/50,this.w/4+30],
+      ['b','.b',this.h/50,this.w/4+60]
+    ];
+  }
+
+  init(problem) {
+    this.problem = problem;
+    this.activeColor = 'nc';
+    this.drawText();
+    this.bindClicks();
+    this.drawPalette();
+    this.drawStatus();
+  }
+
+  drawStatus() {
+    this.status = this.root.select('#states')
+      .append('g')
+      .classed('status', true);
+    this.statusText = this.status.append('text')
+      .attr('y', this.h / 2.2)
+      .attr('x', this.w / 50)
+      .text('7 uncolored states');
+  }
+
+  updateStatus() {
+    let unassigned = this.problem.countUnassigned();
+    if (unassigned > 0) {
+      this.statusText.attr('fill', 'black').text(`${unassigned} uncolored states`);
+    } else {
+      this.statusText.attr('fill', 'green').text(`Correct Assignment \u2714`);
+    }
+  }
+
+  checkConsistency() {
+    //Remove any previous highlights for inconsistencies
+    this.root.selectAll('.inconsistent-state').classed('inconsistent-state', false);
+    let result = this.problem.checkConsistency();
+    //If not consistent, highlight the inconsistent states.
+    if (!result.consistent) {
+      for (let i = 0; i < result.inconsistencies.length; i++) {
+        this.root.select(`#${result.inconsistencies[i][0]}`).classed('inconsistent-state', true);
+        this.root.select(`#${result.inconsistencies[i][1]}`).classed('inconsistent-state', true);
+      }
+      this.statusText.attr('fill', 'red').text('Inconsistent \u2718');
+    } else {
+      this.updateStatus();
+    }
+  }
+
+  drawPalette() {
+    this.palette = this.root.select('#states')
+      .append('g')
+      .classed('palette', true);
+    for(let i = 1; i < this.colors.length; i++) {
+      let color = this.colors[i];
+      this.palette
+        .append('circle')
+        .attr('r', 10)
+        .attr('cy', color[2])
+        .attr('cx', color[3])
+        .classed('palette-color', true)
+        .classed(color[0], true)
+        .classed('clickable', true)
+        .on('mousedown', () => {
+          this.palette.selectAll('.active-palette').classed('active-palette',false);
+          this.palette.select(color[1]).classed('active-palette',true);
+          this.activeColor = color[0];
+        });
+    }
+  }
+
+  removeColor(state) {
+    this.root.select(`#${state}`)
+      .classed('nc', false)
+      .classed('r', false)
+      .classed('g', false)
+      .classed('b', false)
+  }
+
+  colorState(state) {
+    //Remove previous colors
+    this.removeColor(state);
+    this.root.select(`#${state}`)
+      .classed(this.activeColor, true);
+    this.problem.assign(state, this.activeColor);
+    this.checkConsistency();
+  }
+
+  bindClicks() {
+    for(let i = 0; i < this.territories.length; i++) {
+      let territory = this.territories[i];
+      this.root.select(territory[1]).classed('clickable', true).on('mousedown', () => {
+        this.colorState(territory[0]);
+      });
+    }
+  }
+
+  drawText() {
+    for(let i = 0; i < this.territories.length; i++) {
+      let territory = this.territories[i];
+      this.root.select(territory[1])
+
+        .append('text')
+        .classed('territory-text',true)
+        .attr('x', this.w *territory[2])
+        .attr('y', this.h *territory[3])
+        .text(territory[0]);
+    }
+  }
+}
+
+$(document).ready(function() {
+  function init() {
+    //Load external SVG async
+    d3.xml('../third-party/australia.svg', (xml) => {
+      $('#mapColoring .canvas').html(xml.documentElement);
+      var australiaMapDiagram = new AustraliaMapDiagram(d3.select('#mapColoring').select('.canvas'), 500, 1000);
+      australiaMapColoringProblem.emptyAssignment();
+      australiaMapDiagram.init(australiaMapColoringProblem);
+    })
+  }
+  init();
+  $('#mapColoring .restart-button').click(init);
+});
diff --git a/6-Constraint-Satisfaction-Problems/index.html b/6-Constraint-Satisfaction-Problems/index.html
@@ -1,26 +1,55 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <title>6 Constraint Satisfaction Problems</title>
   <link rel="stylesheet" href="../styles.css">
+  <link rel="stylesheet" href="main.css">
   <script src="http://code.jquery.com/jquery-1.12.4.js"></script>
   <script type="text/javascript" src="../main.js"></script>
-  
+
   <script src="https://cdnjs.cloudflare.com/ajax/libs/two.js/0.6.0/two.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
   <script type="text/javascript" src="./AC3.js"></script>
   <script type="text/javascript" src="./backtracking.js"></script>
   <script type="text/javascript" src="./minConflicts.js"></script>
   <script type="text/javascript" src="./treeCSP.js"></script>
+  <script type="text/javascript" src="./mapColoring.js"></script>
+
   <script type="text/javascript" src="./c_AC3.js"></script>
   <script type="text/javascript" src="./c_backtracking.js"></script>
   <script type="text/javascript" src="./c_minConflicts.js"></script>
   <script type="text/javascript" src="./c_treeCSP.js"></script>
+  <script type="text/javascript" src="./c_mapColoring.js"></script>
 </head>
+
 <body>
 
   <div class="row">
-    <div class="col-sm-6 col-md-offset-3" id="content">
+    <div class="col-sm-8 col-md-10 col-md-offset-1" id="content">
       <h1>Constraint Satisfaction Problems</h1>
+      <h2>Defining CSP with Map Coloring Problem</h2>
+      <p>
+        A map coloring problem is a type of CSP where each state can be assigned a color from the set (red,green,blue). The constraint involved says that no two neighbouring state is allowed to have the same color.
+      </p>
+      <p>
+        Given below is a map of Australia showing its states and territories. You can select a color from the color palette given on the top right and then click on any state to color it with the selected color.
+      </p>
+      <p>
+        Try to color all the states while satisfying the condition that neighbouring states cannot have the same color.
+      </p>
+      <div id='mapColoring'>
+        <div class="row">
+          <div class='btn btn-primary restart-button'>Restart</div>
+        </div>
+        <div class="row">
+          <div class="canvas">
+
+          </div>
+        </div>
+      </div>
+
+
 
       <h2>Arc consistency</h2>
       <p>
@@ -32,30 +61,38 @@ <h2>Arc consistency</h2>
         </ul>
       </p>
       <p>Step by step visualization of the procedure. Click to restart the simulation.</p>
-      <div class = "canvas" id="ac3Canvas" height="300px">
+      <div class="canvas" id="ac3Canvas" height="300px">
       </div>
       <pre id="AC3Code"></pre>
 
       <h2>Backtracking</h2>
       <p>Map colouring using backtracking. Click to restart the simulation.</p>
-      <div class = "canvas" id="backtrackCanvas" height="300px">
+      <div class="canvas" id="backtrackCanvas" height="300px">
       </div>
       <pre id="backtrackingCode"></pre>
       <h2>Min Conflicts</h2>
       <p>Min conflicts stuff</p>
-      <div class = "canvas" id="minConflictsCanvas" height="300px">
+      <div class="canvas" id="minConflictsCanvas" height="300px">
       </div>
       <pre id="minConflictsCode"></pre>
 
       <h2>Tree CSP</h2>
       <p>Tree CSP Stuff</p>
-      <div class = "canvas" id="treeCspCanvas" height="300px">
+      <div class="canvas" id="treeCspCanvas" height="300px">
       </div>
       <pre id="treeCSPCode"></pre>
 
+      <div class='license'>
+        <h4>Third Party License Information</h4>
+        <ul>
+          <li>Australia Map Lokal_Profil [<a href="http://creativecommons.org/licenses/by-sa/2.5">CC BY-SA 2.5</a>, <a href="http://www.gnu.org/copyleft/fdl.html">GFDL</a> or <a href="http://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA-3.0</a>], <a href="https://commons.wikimedia.org/wiki/File%3AAustralia_map%2C_States.svg">via Wikimedia Commons</a></li>
+        </ul>
+      </div>
+
     </div>
   </div>
 
-</div>
+  </div>
 </body>
+
 </html>
diff --git a/6-Constraint-Satisfaction-Problems/main.css b/6-Constraint-Satisfaction-Problems/main.css
@@ -0,0 +1,35 @@
+.clickable {
+  cursor: pointer;
+}
+
+/*nc -> No color*/
+.territory-text{
+  stroke:none;
+  fill:black;
+}
+svg .nc {
+  fill: hsl(0, 0%, 83%);
+}
+svg .r {
+  fill: hsl(20, 80%, 70%);
+}
+svg .g {
+  fill: hsl(110, 80%, 70%);
+}
+svg .b {
+  fill: hsl(250, 80%, 70%);
+}
+.palette-color {
+  opacity: 0.4;
+}
+.active-palette {
+  opacity: 1;
+}
+.inconsistent-state {
+  stroke: hsl(20, 100%, 50%);
+  stroke-width: 1.5;
+}
+.status {
+  fill: black;
+  stroke: none;
+}
diff --git a/6-Constraint-Satisfaction-Problems/mapColoring.js b/6-Constraint-Satisfaction-Problems/mapColoring.js
@@ -0,0 +1,88 @@
+class mapColoringProblem {
+  constructor(variables, domains, neighbours, condition) {
+      this.variables = variables;
+      this.domains = domains;
+      this.neighbours = neighbours;
+      this.condition = condition;
+      this.assignment = {};
+      this.emptyAssignment();
+    }
+    //Assigns value 'a' to variable 'A'
+  assign(A, a) {
+    //Check if given value is in domain
+    let domain = this.domains[A];
+    if (domain.includes(a)) {
+      this.assignment[A] = a;
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  emptyAssignment() {
+    for (let i = 0; i < this.variables.length; i++) {
+      //'NIL' represents No assignment
+      this.assignment[this.variables[i]] = 'nc';
+    }
+  }
+
+  countUnassigned() {
+    let answer = 0;
+    for (let i = 0; i < this.variables.length; i++) {
+      //'NIL' represents No assignment
+      if (this.assignment[this.variables[i]] == 'nc') {
+        answer++;
+      };
+    }
+    return answer;
+  }
+
+  checkConsistency() {
+    //'consistence' is true if the current assignment is correct
+    //inconsistencies contains the list of neighbours that violate the condition
+    let answer = {
+      'consistent': true,
+      'inconsistencies': []
+    }
+
+    for (let i = 0; i < this.variables.length; i++) {
+      let variable = this.variables[i];
+      for (let j = 0; j < this.neighbours[variable].length; j++) {
+        let neighbour = this.neighbours[variable][j];
+        if (!this.condition(variable, this.assignment[variable], neighbour, this.assignment[neighbour])) {
+          answer['consistent'] = false;
+          answer['inconsistencies'].push([variable, neighbour]);
+        }
+      }
+    }
+    return answer;
+  }
+
+}
+
+//Map Coloring Problem for Australia
+var australiaMapColoringProblem = new mapColoringProblem(
+  ["WA", "NT", "SA", "Q", "NSW", "V", "T"], {
+    "WA": ["r", "g", "b"],
+    "NT": ["r", "g", "b"],
+    "SA": ["r", "g", "b"],
+    "Q": ["r", "g", "b"],
+    "NSW": ["r", "g", "b"],
+    "V": ["r", "g", "b"],
+    "T": ["r", "g", "b"]
+  }, {
+    "WA": ["NT", "SA"],
+    "NT": ["WA", "SA", "Q"],
+    "SA": ["WA", "NT", "Q", "NSW", "V"],
+    "Q": ["NT", "SA", "NSW"],
+    "NSW": ["Q", "SA", "V"],
+    "V": ["SA", "NSW"],
+    "T": []
+  },
+  function(A, a, B, b) {
+    //If no color
+    if (a == 'nc' || b == 'nc') {
+      return true;
+    }
+    return a != b;
+  });