A pixel art painter geared specifically at NES pixel art. Includes export for .chr binary file as well as palette and namespace data.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

126 lines
2.9KB

  1. import GlobalEvents from "/app/js/common/EventCaller.js";
  2. import Utils from "/app/js/common/Utils.js";
  3. import NESBank from "/app/js/models/NESBank.js";
  4. import NESPalette from "/app/js/models/NESPalette.js";
  5. import CTRLPalettesStore from "/app/js/ctrls/CTRLPalettesStore.js";
  6. import CTRLBanksStore from "/app/js/ctrls/CTRLBanksStore.js";
  7. var SURF = null;
  8. function JSONFromProject(){
  9. var proj = {
  10. palettesStore:CTRLPalettesStore.obj,
  11. banksStore:CTRLBanksStore.obj
  12. };
  13. return JSON.stringify(proj);
  14. }
  15. function LoadFile(file){
  16. if (SURF !== null){
  17. var reader = new FileReader();
  18. if (SURF instanceof NESBank){
  19. reader.onload = function(e){
  20. try {
  21. SURF.chr = new Uint8Array(e.target.result);
  22. } catch (e) {
  23. console.log(e.toString());
  24. }
  25. }
  26. reader.readAsArrayBuffer(file);
  27. }
  28. }
  29. }
  30. function HANDLE_DragOver(e){
  31. e.stopPropagation();
  32. e.preventDefault();
  33. e.dataTransfer.dropEffect = 'copy';
  34. };
  35. function HANDLE_FileDrop(e){
  36. e.stopPropagation();
  37. e.preventDefault();
  38. var files = e.dataTransfer.files;
  39. for (let i=0; i < files.length; i++){
  40. LoadFile(files[i]);
  41. }
  42. }
  43. function HANDLE_SaveProject(e){
  44. var a = document.createElement("a");
  45. var file = new Blob([JSONFromProject()], {type: "text/plain"});
  46. a.href = window.URL.createObjectURL(file);
  47. a.download = "nesproject.json";
  48. var body = document.querySelector("body");
  49. body.appendChild(a);
  50. a.click();
  51. setTimeout(function(){ // fixes firefox html removal bug
  52. window.URL.revokeObjectURL(url);
  53. a.remove();
  54. }, 500);
  55. }
  56. function HANDLE_LoadProjectRequest(){
  57. var input = document.querySelectorAll("input.project-loader");
  58. if (input.length > 0){
  59. input[0].click();
  60. }
  61. }
  62. function HANDLE_LoadProject(e){
  63. if (this.files && this.files.length > 0){
  64. var reader = new FileReader();
  65. reader.onload = function(e) {
  66. var content = e.target.result;
  67. console.log(content);
  68. // TODO: Need to clear out the selected files after load.
  69. };
  70. reader.readAsText(this.files[0]);
  71. } else {
  72. console.log("Project file not found or no file selected.");
  73. }
  74. }
  75. function HANDLE_SurfChange(surf){
  76. if (surf instanceof NESBank){
  77. SURF = surf;
  78. } else {
  79. SURF = null;
  80. }
  81. }
  82. class CTRLIO{
  83. constructor(){
  84. GlobalEvents.listen("change_surface", HANDLE_SurfChange);
  85. GlobalEvents.listen("save-project", HANDLE_SaveProject);
  86. GlobalEvents.listen("load-project", HANDLE_LoadProjectRequest);
  87. var input = document.querySelectorAll("input.project-loader");
  88. if (input.length > 0){
  89. input[0].addEventListener("change", HANDLE_LoadProject);
  90. }
  91. }
  92. initialize(){
  93. var e = document.querySelectorAll(".drop-zone");
  94. for (let i=0; i < e.length; e++){
  95. e[i].addEventListener("dragover", HANDLE_DragOver);
  96. e[i].addEventListener("drop", HANDLE_FileDrop);
  97. }
  98. CTRLPalettesStore.initialize();
  99. CTRLBanksStore.initialize();
  100. }
  101. }
  102. const instance = new CTRLIO();
  103. export default instance;