-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdialog.html
70 lines (66 loc) · 4.28 KB
/
dialog.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Gameboy Sheets</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="p-5 flex flex-col gap-y-5 group">
<div id="container mb-5">
<h3 class="font-medium mb-5">Client Side View</h3>
<div class="canvas-container">
<canvas tabindex="1" class="shadow-md rounded-md mx-auto ring-2 ring-offset-4 ring-red-600 focus:ring-green-600 focus:outline-none" id="canvas" width="160" height="144">Your browser does not seem to support canvas.</canvas>
</div>
<div class="text-sm text-slate-500 text-center mt-4">Click canvas above ☝️ to capture input</div>
</div>
<div class="rom-section">
<h3 class="font-medium mb-2">Upload Rom</h3>
<div id="dropzone" class="flex justify-center items-center w-full">
<label for="file" class="flex flex-col justify-center items-center w-full h-15 rounded-lg border-2 cursor-pointer hover:bg-gray-100">
<div class="flex flex-col justify-center items-center pt-2 pb-2">
<svg aria-hidden="true" class="mb-3 w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path></svg>
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop rom</p>
</div>
<input id="file" type="file" class="hidden" />
</label>
</div>
</div>
<div>
<h3 class="font-medium mb-2">Controls</h3>
<div class="flex flex-col">
<div>D-Pad: <span class="font-light">Arrow Keys</span></div>
<div>A: <span class="font-light">X</span></div>
<div>B: <span class="font-light">Z</span></div>
<div>Start: <span class="font-light">Enter</span></div>
<div>Select: <span class="font-light">Space</span></div>
</div>
</div>
<footer class="text-sm text-slate-600 border-t text-center">
<div class="text-slate-600 mb-2 pt-3">Made with ❤️ by <a class="font-medium underline text-blue-500" href="https://twitter.com/GregoryAGaines" target="_BLANK" rel="noopener noreferrer">@GregoryAGaines</a></div>
<div class="flex items-center justify-center text-slate-600"><svg class="h-4 mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<a class="underline" href="https://github.com/gregorygaines/GameboySheets" target="_blank" rel="noopener">View Source</a>
</div>
<div class="text-slate-600 pt-3"><a class="font-medium underline text-blue-500" href="https://dev.to/gregorygaines/my-attempt-at-running-a-gameboy-emulator-in-google-sheets-24fp" target="_BLANK" rel="noopener">Wanna read my write up?</a></div>
</footer>
</div>
<?!= include('gameboy'); ?>
<script>
// Create emulator instance
var opts = {
romReaders: [
new GameboyJS.RomFileReader(),
new GameboyJS.RomDropFileReader(document.getElementById('dropzone'))
]
};
new GameboyJS.Gameboy(document.getElementById('canvas'), opts);
console.log(google.script.run.withFailureHandler((e) => {
console.log(e);
}).withSuccessHandler((e) => {
console.log(e);
}).getUserEmail());
</script>
</body>
</html>