CHIP8-Interpreter-Vanilla-Javascript/index.html at master · plrang/CHIP8-Interpreter-Vanilla-Javascript · 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
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CHIP 8 INTERPRETER in Javascript WIP</title>

        <style type="text/css">
            body {
                background-color: #000;
                color: rgb(0, 170, 0);
                font-family: 'Lucida Sans', 'Lucida Sans Regular', Geneva, Verdana, sans-serif;
                font-size: 0.9em;

                font-weight: normal;
                white-space: nowrap;

            }

            #status_display {
                margin-top: 1em;
            }

            #chip8_monitor {
                display: grid;
                width: 100%;
                border: 1px solid red;
                grid-column-gap: 2px;
                grid-row-gap: 2px;
                grid-template-columns: repeat(32, 18px);

                height: 20em;

                /* BAR Works on Firefox */

                scrollbar-width: thin;
                scrollbar-color: red green;
                overflow: scroll;
                cursor: pointer;

            }

            #chip8_program_listing {
                height: 10em;

                /* BAR Works on Firefox */

                scrollbar-width: thin;
                scrollbar-color: red green;
                overflow: scroll;
                cursor: pointer;

            }


            .ch8MonCell,
            .ch8MonCell-active {
                display: inline-grid;
                border: 1px solid rgb(0, 110, 33);
                width: 19px;
                height: 16px;
                background-color: rgb(17, 63, 17);
                color: white;
                font-size: 0.7rem;
                align-items: center;
                justify-items: center;
            }

            .ch8MonCell-active {

                background-color: black !important;

            }


            h1 {
                margin-top: 1rem;
                margin-bottom: 1rem;
                font-size: 1.4em;
            }
        </style>

    </head>

    <body>
        <div><b>CHIP 8</b></div>
        <main>

            <div id="chip8_program_listing">
                IDLE: CHIP8 Loaded Program Listing Display
            </div>

            <div id="chip8_monitor">
                IDLE: CHIP8 Visual Monitor
            </div>

            <div class="console">
                <h1>DISPLAY SCREEN</h1>
                <canvas id="screen"></canvas>

            </div>


            <div id="status_display">
                <div id="Vstatus_field">
                    STATUS IDLE...
                </div>
                <div id="Vlog_field">
                    LOG IDLE...
                </div>
            </div>

        </main>


    </body>
    <script src="JS/index.js" type="module"></script>

</html>