Skip to content
Snippets Groups Projects
Verified Commit 000b1a38 authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

feat: upload button support

parent cccbd0ad
No related branches found
No related tags found
No related merge requests found
Pipeline #725 passed
...@@ -317,6 +317,10 @@ p { ...@@ -317,6 +317,10 @@ p {
background-color: #50cb93; background-color: #50cb93;
} }
.tiny-button.file {
position: relative;
}
.tiny-button:hover { .tiny-button:hover {
background-color: #50cb93; background-color: #50cb93;
} }
...@@ -357,6 +361,22 @@ p { ...@@ -357,6 +361,22 @@ p {
margin-top: 0px; margin-top: 0px;
} }
.tiny-button.file > input[type="file"] {
cursor: pointer;
height: 100%;
margin-left: calc(-100% + 10px);
margin-top: -4px;
opacity: 0;
-o-opacity: 0;
-ms-opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
-webkit-opacity: 0;
position: absolute;
vertical-align: top;
width: 100%;
}
.overlay { .overlay {
align-items: center; align-items: center;
background-color: rgba(80, 203, 147, 0.95); background-color: rgba(80, 203, 147, 0.95);
......
...@@ -66,6 +66,10 @@ ...@@ -66,6 +66,10 @@
<span id="button-theme" class="tiny-button border padded"> <span id="button-theme" class="tiny-button border padded">
<img src="res/marker.svg"/><span>Theme</span> <img src="res/marker.svg"/><span>Theme</span>
</span> </span>
<span id="button-upload" class="tiny-button border padded file">
<img src="res/upload.svg"/><span>Upload ROM</span>
<input type="file" id="button-upload-file" name="button-upload-file" accept=".ch8">
</span>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -257,7 +257,7 @@ const start = async ({ ...@@ -257,7 +257,7 @@ const start = async ({
// updates the complete set of global information that // updates the complete set of global information that
// is going to be displayed // is going to be displayed
setEngine(engine); setEngine(state.engine);
setRom(romName, romData); setRom(romName, romData);
setLogicFrequency(state.logicFrequency); setLogicFrequency(state.logicFrequency);
setFps(state.fps); setFps(state.fps);
...@@ -280,8 +280,12 @@ const init = async () => { ...@@ -280,8 +280,12 @@ const init = async () => {
const registerDrop = () => { const registerDrop = () => {
document.addEventListener("drop", async (event) => { document.addEventListener("drop", async (event) => {
if (!event.dataTransfer.files || event.dataTransfer.files.length === 0) if (
!event.dataTransfer.files ||
event.dataTransfer.files.length === 0
) {
return; return;
}
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
...@@ -299,10 +303,7 @@ const registerDrop = () => { ...@@ -299,10 +303,7 @@ const registerDrop = () => {
const arrayBuffer = await file.arrayBuffer(); const arrayBuffer = await file.arrayBuffer();
const romData = new Uint8Array(arrayBuffer); const romData = new Uint8Array(arrayBuffer);
state.chip8.reset_hard_ws(); start({ engine: null, romName: file.name, romData: romData });
state.chip8.load_rom_ws(romData);
setRom(file.name, romData);
showToast(`Loaded ${file.name} ROM successfully!`); showToast(`Loaded ${file.name} ROM successfully!`);
}); });
...@@ -452,6 +453,20 @@ const registerButtons = () => { ...@@ -452,6 +453,20 @@ const registerButtons = () => {
const background = BACKGROUNDS[state.background_index]; const background = BACKGROUNDS[state.background_index];
setBackground(background); setBackground(background);
}); });
const buttonUploadFile = document.getElementById(
"button-upload-file"
) as HTMLInputElement;
buttonUploadFile.addEventListener("change", async () => {
const file = buttonUploadFile.files[0];
const arrayBuffer = await file.arrayBuffer();
const romData = new Uint8Array(arrayBuffer);
start({ engine: null, romName: file.name, romData: romData });
showToast(`Loaded ${file.name} ROM successfully!`);
});
}; };
const registerCanvas = () => { const registerCanvas = () => {
......
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="48px" height="48px" viewBox="0 0 24 24" aria-labelledby="uploadIconTitle" stroke="#ffffff" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter" fill="none" color="#ffffff"> <title id="uploadIconTitle">Upload</title> <path d="M12,4 L12,17"/> <polyline points="7 8 12 3 17 8"/> <path d="M20,21 L4,21"/> </svg>
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment