RustBoy/index.html at main · RaoulLuque/RustBoy · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gameboy Emulator</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #2c2c2c;
            font-family: sans-serif;
        }

        #screen-container canvas {
            width: 100%;
            height: 100%;
            image-rendering: pixelated;
        }

        .gameboy-container {
            position: relative;
            width: 313px;
            height: 515px;
            z-index: 2;
        }

        .screen-container {
            position: absolute;
            top: 13%;
            left: 24%;
            width: 160px;
            height: 144px;
            image-rendering: pixelated;
            z-index: 2;
        }

        .gameboy-frame {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            pointer-events: none;
        }

        .file-input-label {
            margin: 20px 0;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .file-input-label:hover {
            background-color: #45a049;
        }

        #rom-input {
            display: none;
        }

        h1 {
            color: #fff;
            text-shadow: 2px 2px #000;
            margin-bottom: 30px;
        }
    </style>
</head>
<body id="emulator-body">
<h1>RustBoy 🦀</h1>

<label class="file-input-label" for="rom-input">
    Load ROM
</label>
<input type="file" id="rom-input"/>

<div class="gameboy-container" id="gameboy-container">
    <img src="img/gameboy.png" class="gameboy-frame" alt="GameBoy Frame">
    <div class="screen-container" id="screen-container">
    </div>
</div>

<p style="color: #ccc; margin-top: 40px;">
    Image source: <a href="https://commons.wikimedia.org/wiki/File:Gameboy.svg" target="_blank" style="color: #4CAF50;">Wikimedia
    Commons</a>
</p>

<script type="module">
    import initSync, {run} from './pkg/rustboy.js';

    async function main() {
        console.log("Loading Game Boy Emulator...");
        await initSync();

        const romInput = document.getElementById("rom-input");
        romInput.addEventListener("change", (event) => {
            console.log("Loading ROM...");
            const file = event.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = async () => {
                const arrayBuffer = reader.result;
                const romData = new Uint8Array(arrayBuffer);
                await run(
                    false,  // headless
                    false,  // game_boy_doctor_mode
                    false,  // file_logs
                    false,  // binjgb_mode
                    false,  // timing_mode
                    false,  // print_serial_output_to_terminal
                    romData
                );
                console.log("Game Boy Emulator Loaded with ROM");
            };
            reader.readAsArrayBuffer(file);
        });
    }

    main();
</script>
</body>
</html>