Implement sharing and loading grids from URL with a very naive encoding

css/grid.css

@@ -34,10 +34,10 @@
 	filter: invert(1);
 }
 
-#save {
+#export > * {
 	display: none;
 }
 
-#save.active {
+#save.active, #share.active {
 	display: initial;
 }

js/Grid/Color.js

@@ -1,10 +1,13 @@
 import CellSet;
 import Grid;
+import iter from Grid.Util;
 import Toolbox;
+import Mode;
 
 return {
 	ize: colorize,
-	paint: paint
+	paint: paint,
+	set: set
 };
 
 function colorize(row, column, color) {
@@ -20,3 +23,18 @@ function paint(row, column) {
 	);
 	cellSet.iter(colorize);
 }
+
+function set(grid) {
+	if(grid != undefined) {
+		iter(grid, function(row, column) {
+			if(grid[row][column] != undefined) {
+				colorize(row, column, grid[row][column]);
+			}
+		});
+		if(Grid.get().missing.isEmpty()) {
+			Mode.setEnabled(true, ['play', 'solve']);
+		} else {
+			Mode.set('edit');
+		}
+	}
+}

js/Grid/IO.js

@@ -2,7 +2,6 @@ import * as File from WTK.File;
 import * as Async from UnitJS.Async;
 import Grid;
 import Grid.Color;
-import iter from Grid.Util;
 import Mode;
 
 return {
@@ -24,27 +23,13 @@ function load() {
 				return File.load(input.files[0]);
 			},
 			function(data) {
-				return Async.wrap(setGridData(JSON.parse(data)));
+				Grid.Color.set(JSON.parse(data));
+				return Async.wrap();
 			}
 		)
 	);
 }
 
-function setGridData(data) {
-	if(data != undefined) {
-		iter(data, function(row, column) {
-			if(data[row][column] != undefined) {
-				Grid.Color.ize(row, column, data[row][column]);
-			}
-		});
-		if(Grid.get().missing.isEmpty()) {
-			Mode.setEnabled(true, ['play', 'solve']);
-		} else {
-			Mode.set('edit');
-		}
-	}
-}
-
 function save() {
 	File.save('data:text/json,' + JSON.stringify(Grid.get().colors), "grid.json");
 }

js/Main.js

@@ -1,5 +1,7 @@
 import Grid;
 import Grid.IO;
+import Grid.Color;
+import Share;
 import Toolbox;
 import Mode;
 import * as Play from Mode.Play;
@@ -15,4 +17,8 @@ Mode.init({
 	edit: Edit
 });
 Grid.init(size, Mode.dispatch);
+if(window.location.search.length > 0) {
+	var urlSearchParameters = new URLSearchParams(window.location.search);
+	Grid.Color.set(Share.naiveDecode(size, urlSearchParameters.get('game')));
+}
 Grid.IO.init();

js/Mode/Edit.js

@@ -10,7 +10,6 @@ Grid.get().element.addEventListener('mouseleave', function() {
 	down = false;
 });
 var save = document.getElementById('save');
-var share = document.getElementById('share')
 
 return {
 	events: {
@@ -26,11 +25,13 @@ function onEnter() {
 	GUI.activate(true, [Grid.get().element, Toolbox.get(), save]);
 	if(!Grid.get().missing.isEmpty()) {
 		Mode.setEnabled(false, ['play', 'solve']);
+	} else {
+		Share.link(Grid.get().colors);
 	}
 }
 
 function onLeave() {
-	GUI.activate(false, [Grid.get().element, Toolbox.get(), save]);
+	GUI.activate(false, [Grid.get().element, Toolbox.get(), save, Share.get()]);
 }
 
 function onMousedown(e, row, column) {
@@ -66,6 +67,6 @@ function colorCell(row, column) {
 function checkCompleteness() {
 	if(Grid.get().missing.isEmpty()) {
 		Mode.setEnabled(true, ['play', 'solve']);
-		share.href = '?game=' + Share.naiveEncode(Grid.get().data);
+		Share.link(Grid.get().colors);
 	}
 }

js/Share.js

@@ -1,13 +1,19 @@
 import * as Decoder from Share.Decoder;
 import * as Encoder from Share.Encoder;
-import {iter, square} from Grid.Util;
+import {generate, iter, square} from Grid.Util;
+import GUI;
+import Grid;
+
+var share = document.getElementById('share')
 
 return {
-	compress: compress,
-	naive: naive
+	get: get,
+	naiveDecode: naiveDecode,
+	link: link
 }
 
-function compress(grid) {
+function get() {
+	return share;
 }
 
 function naiveEncode(grid) {
@@ -19,6 +25,13 @@ function naiveEncode(grid) {
 }
 
 function naiveDecode(size, input) {
-	var decoder = Decoder.make(input);
-	return generate(size, size, function() {return decoder.int(3);});
+	if(input != undefined) {
+		var decoder = Decoder.make(input);
+		return generate(size, size, function() {return decoder.int(3);});
+	}
+}
+
+function link(grid) {
+	share.href = '?game=' + naiveEncode(Grid.get().colors);
+	GUI.activate(true, share);
 }