vga-playground/index.html at main · TinyTapeout/vga-playground · 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
131
132
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VGA Playground</title>
    <meta
      name="description"
      content="Free online Verilog + VGA playground from Tiny Tapeout. Write your own VGA code and see it run in real-time on the screen."
    />
    <meta property="og:image" content="https://vga-playground.com/images/social-preview.jpg" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta name="twitter:card" content="summary_large_image" />

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="src/index.css" />
  </head>
  <body>
    <header>
      <span class="header-title">Tiny Tapeout VGA Playground</span>
      <span id="download-button" title="Download Zip">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          height="24px"
          viewBox="0 -960 960 960"
          width="24px"
          fill="#eee"
        >
          <path
            d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"
          />
        </svg>
      </span>
      <span class="flex-spacer"></span>
      <a
        href="https://github.com/TinyTapeout/vga-playground"
        target="_blank"
        rel="noopener noreferrer"
        title="GitHub Repository"
      >
        <svg width="32px" height="32px" fill="white" viewbox="0 0 24 24">
          <path
            d="M12 1.27a11 11 0 00-3.48 21.46c.55.09.73-.28.73-.55v-1.84c-3.03.64-3.67-1.46-3.67-1.46-.55-1.29-1.28-1.65-1.28-1.65-.92-.65.1-.65.1-.65 1.1 0 1.73 1.1 1.73 1.1.92 1.65 2.57 1.2 3.21.92a2 2 0 01.64-1.47c-2.47-.27-5.04-1.19-5.04-5.5 0-1.1.46-2.1 1.2-2.84a3.76 3.76 0 010-2.93s.91-.28 3.11 1.1c1.8-.49 3.7-.49 5.5 0 2.1-1.38 3.02-1.1 3.02-1.1a3.76 3.76 0 010 2.93c.83.74 1.2 1.74 1.2 2.94 0 4.21-2.57 5.13-5.04 5.4.45.37.82.92.82 2.02v3.03c0 .27.1.64.73.55A11 11 0 0012 1.27"
          />
        </svg>
      </a>
    </header>
    <nav id="preset-bar">
      <span class="preset-label">Presets:</span>
      <div id="preset-buttons"></div>
    </nav>
    <main>
      <div id="editor-panel">
        <div id="file-tabs"></div>
        <div id="code-editor"></div>
      </div>
      <div id="vga-canvas-container">
        <div id="input-values">
          <span class="input-label">ui_in</span>
          <div class="input-bits">
            <button title="Bit 0">0</button>
            <button title="Bit 1">1</button>
            <button title="Bit 2">2</button>
            <button title="Bit 3">3</button>
            <button title="Bit 4">4</button>
            <button title="Bit 5">5</button>
            <button title="Bit 6">6</button>
            <button title="Bit 7">7</button>
          </div>
          <div class="input-actions">
            <button data-role="audio" title="Toggle Audio">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
                <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
                <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
              </svg>
            </button>
            <button data-role="gamepad" title="Toggle Gamepad Mode">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="6" y1="11" x2="10" y2="11"/>
                <line x1="8" y1="9" x2="8" y2="13"/>
                <line x1="15" y1="12" x2="15.01" y2="12"/>
                <line x1="18" y1="10" x2="18.01" y2="10"/>
                <path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/>
              </svg>
            </button>
            <button data-role="reset" title="Reset (R)">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="1 4 1 10 7 10"/>
                <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
              </svg>
            </button>
          </div>
        </div>
        <div id="gamepad-pmod-inputs" style="display: none">
          <button data-index="6" title="Left">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M15 19l-7-7 7-7"/></svg>
          </button>
          <button data-index="7" title="Right">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M9 5l7 7-7 7"/></svg>
          </button>
          <button data-index="4" title="Up">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M19 15l-7-7-7 7"/></svg>
          </button>
          <button data-index="5" title="Down">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M5 9l7 7 7-7"/></svg>
          </button>
          <button data-index="8" title="A button">A</button>
          <button data-index="0" title="B button">B</button>
          <button data-index="9" title="X button">X</button>
          <button data-index="1" title="Y button">Y</button>
          <button data-index="2" title="Select">Sel</button>
          <button data-index="3" title="Start">Start</button>
          <button data-index="10" title="Left bumper">L</button>
          <button data-index="11" title="Right bumper">R</button>
        </div>
        <div class="status-bar">
          <span id="audio-latency-display" style="display: none"
            >Audio latency: <span id="audio-latency-ms">00</span> ms
          </span>
          <span id="fps-display">FPS: <span id="fps-count">00</span></span>
        </div>
        <div class="canvas-wrapper">
          <canvas width="736" height="520" id="vga-canvas"></canvas>
          <pre id="error-overlay" hidden></pre>
        </div>
      </div>
    </main>
    <script src="src/index.ts" type="module"></script>
  </body>
</html>