diff --git a/index.html b/index.html index 70899a5..58b6d93 100644 --- a/index.html +++ b/index.html @@ -14,4 +14,5 @@
+ diff --git a/js/main.mjs b/js/main.mjs index 8b5b5ec..712d20a 100644 --- a/js/main.mjs +++ b/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); diff --git a/js/save_load.mjs b/js/save_load.mjs index 7583408..753b40f 100644 --- a/js/save_load.mjs +++ b/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()); + } +}; diff --git a/js/world.mjs b/js/world.mjs index fd7b180..fdec33d 100644 --- a/js/world.mjs +++ b/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;