retroReversing/_includes/file-parser.html at master · halamix2/retroReversing · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<script type="application/javascript" src="/public/js/binary_parser.bundle.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-dropzone/6.0.4/index.js"></script>


<style>
 #result {
 display:flex;
 flex-wrap: wrap;
 justify-items: start;
 height: 100%;
 width: 100%;
 }

 #result div {
 padding:5px;
 cursor: pointer;
 flex: 0 0 15%;
 max-height: 10px;
 }

 #mySection {
 display: flex;
 flex-wrap: wrap;
 }

 #mySection div {
 padding: 10px;
 }

 .invalid {
 color: red !important
 }

 .dragHintText {
 padding-bottom:30px;
 }

 .draghint {
 background-color: inherit !important;
 border-width: 2px !important;
 }
</style>

<!-- <details id='iff_canvas_debug_container' class="debug_container">
 <summary>Debug Output</summary>
 <div id="iff_canvas_debug"></div>
 </details> -->


 <div class="draghint hidden screen" id="draghint">
<!-- <input type="file" id="chooser" class="chooser"/> -->
 <div class="dragtext">
 <h1 class="dragHintText">Drop {{include.format}} files here to view</h1>
 <div id='ilbm'>
 </div>
 </div>
 </div>

<div id="root">
 <!-- This element's contents will be replaced with your component. -->
</div>

<script>

 function parseFile(file, n64Header, n64HeaderUP, showJson, onParseCallback) {
 var reader = new FileReader();
 reader.onload = function () {
 var fileAsBinaryString = reader.result;
 // do whatever you want with the file content
 var fileBuffer = Buffer.from(fileAsBinaryString);
 var parsedResult = n64Header.parse(fileBuffer);
 //this.setState({jsonResult: JSON.stringify(parsedResult, 4, 4)});
 if (onParseCallback) {
 onParseCallback(fileBuffer, parsedResult);
 }

 var reactResult = n64HeaderUP.unparse(parsedResult, [], React);
 ReactDOM.render(
 React.createElement("section", {id: "mySection"}, " ", React.createElement("div", { id: "result" },
 reactResult),
 React.createElement("div", null,
 (!showJson)? null:
 ( React.createElement("textarea", { rows: 20, cols: 50, value: JSON.stringify(parsedResult, 4, 4) }) )
 )
 ),
 document.querySelector('#root'));
 };
 reader.onabort = function () {return console.log('file reading was aborted');};
 reader.onerror = function () {return console.log('file reading has failed');};

 reader.readAsArrayBuffer(file);
}


 var draghint = document.getElementById('draghint');
 window.addEventListener('dragover', function (event) {
 event.preventDefault();
 draghint.classList.add('hover');
 return false;
 });
 window.addEventListener('dragleave', function (event) {
 event.preventDefault();
 draghint.classList.remove('hover');
 return false;
 });
 window.addEventListener('focus', function () {
 return draghint.classList.remove('hover');
 });
</script>