add autosave and world reset button.

index.html

@@ -14,4 +14,5 @@
 	<br>
 	<button id="save">save game to file</button>
 	<button id="load">load game from file</button>
+	<button id="restart">create new world</button>
 </body>

js/main.mjs

@@ -1,10 +1,12 @@
 import * as graphics from "./graphics.mjs";
 import { BOX_SIZE, get_tile } from "./world.mjs";
 import { get_player_box } from "./player.mjs";
-import "./save_load.mjs";
+import { save_in_browser, load_from_browser } from "./save_load.mjs";
 
 
 
+load_from_browser();
+
 function render (timestamp) {
 	graphics.clear();
 	graphics.draw_world(get_player_box());
@@ -14,3 +16,9 @@ function render (timestamp) {
 }
 
 requestAnimationFrame(render);
+
+function autosave () {
+	save_in_browser();
+}
+
+const autosave_interval = setInterval(autosave, 3000);

js/save_load.mjs

@@ -1,22 +1,28 @@
-import { get_root, replace_root } from "./world.mjs";
+import * as world from "./world.mjs";
 
 
 
+const DEFAULT_SAVE_NAME = "boxes_save_0";
+
 const get_elem = id => document.getElementById(id);
 const create_elem = type => document.createElement(type);
+
 const save_button = get_elem("save");
 const load_button = get_elem("load");
+const restart_button = get_elem("restart");
 
 save_button.onclick = _ => {
 	const timestamp = new Date().getTime();
 	const filename = `boxes_${timestamp}.boxes`;
 
-	const world = get_root();
-	const data = btoa(JSON.stringify(world));
-
-	save_text(filename, data);
+	save_text(filename, generate_save_data());
 };
 
+function generate_save_data () {
+	const root = world.get_root();
+	return btoa(JSON.stringify(root));
+}
+
 function save_text (filename, text) {
 	const link = create_elem("a");
 	const file = new Blob([text], { type: "text/plain" });
@@ -31,14 +37,35 @@ load_button.onclick = _ => {
 	input.addEventListener("change", e => {
 		const file = e.target.files[0];
 		const reader = new FileReader();
-		reader.onload = e => load_text(e.target.result);
+		reader.onload = e => load_from_text(e.target.result);
 		reader.onerror = error => alert("couldn't load the file.");
 		reader.readAsText(file);
 	});
 	input.click();
 }
 
-function load_text (text) {
+function load_from_text (text) {
 	const data = JSON.parse(atob(text));
-	replace_root(data);
+	world.replace_root(data);
 }
+
+
+
+export function save_in_browser (save_name = DEFAULT_SAVE_NAME) {
+	const data = generate_save_data();
+	localStorage.setItem(save_name, data);
+}
+
+export function load_from_browser (save_name = DEFAULT_SAVE_NAME) {
+	if (localStorage.getItem(save_name) === null) return;
+	const data = localStorage.getItem(save_name);
+	load_from_text(data);
+}
+
+
+
+restart_button.onclick = _ => {
+	if (confirm("are you sure you want to create a new world? this will delete any unsaved creations.")) {
+		world.replace_root(world.create_new());
+	}
+};

js/world.mjs

@@ -12,6 +12,10 @@ function create_world (size) {
 }
 const world = create_world(BOX_SIZE);
 
+export function create_new () {
+	return create_world(BOX_SIZE);
+}
+
 export function set_tile (world, x, y, tile) {
 	if (out_of_bounds(x, y)) return;
 	world.tiles[x][y] = tile;