|
72 | 72 | background: #edf0f0;
|
73 | 73 | }
|
74 | 74 |
|
75 |
| - #root { |
76 |
| - display: flex; |
77 |
| - position: relative; |
78 |
| - justify-content: center; |
79 |
| - align-items: center; |
80 |
| - flex-wrap: wrap; |
81 |
| - padding: 10px; |
82 |
| - } |
83 |
| - |
84 | 75 | #description {
|
85 | 76 | z-index: 2;
|
86 | 77 | width: 100%;
|
|
97 | 88 | opacity: 0;
|
98 | 89 | }
|
99 | 90 |
|
| 91 | + .wasmboy-container { |
| 92 | + display: flex; |
| 93 | + justify-content: center; |
| 94 | + align-items: center; |
| 95 | + |
| 96 | + width: 100%; |
| 97 | + |
| 98 | + margin-bottom: 10px; |
| 99 | + } |
| 100 | + |
| 101 | + #wasmboy-amp-script { |
| 102 | + border: 1px solid black; |
| 103 | + |
| 104 | + display: flex; |
| 105 | + position: relative; |
| 106 | + justify-content: center; |
| 107 | + align-items: center; |
| 108 | + flex-wrap: wrap; |
| 109 | + } |
| 110 | + |
100 | 111 | #fps {
|
101 | 112 | text-align: center;
|
102 | 113 | margin-top: 10px;
|
|
107 | 118 | display: block;
|
108 | 119 |
|
109 | 120 | width: 100%;
|
110 |
| - max-width: 400px; |
111 |
| - border: solid 1px #000; |
112 | 121 |
|
113 | 122 | text-align: center;
|
114 | 123 | margin-top: 10px;
|
|
118 | 127 | }
|
119 | 128 | </style>
|
120 | 129 |
|
| 130 | + <meta |
| 131 | + name="amp-experiment-token" |
| 132 | + content="AAAAAFl7Im9yaWdpbiI6Imh0dHBzOi8vd3d3Lndhc21ib3kuYXBwIiwiZXhwZXJpbWVudCI6ImFtcC1zY3JpcHQiLCJleHBpcmF0aW9uIjoxNTY3Mjk2MDAwMDAwfVFCT5mEg3FCtSDuJzKQYQhpPn8lEFY93MBV1Dil9fge2LTUFehhUFWd3ozbMUZz+71aiCsR+t0sM2jng+o7GOzBc9oZIP0ruHdDdjnL1bdUmRPjd4IbbVz9b3WRJIBCBzfadrJPxRsHyMDgLIEAlPWCwtHL5St5ZKMTNPSkWRbS8RQ99FeRJCHstZtMAZPG7lXzGLopFCcVy6wyET8j6Ly6a0+SukRVmPNyz/7Kxh3c6RqPKwxZ/riJLK/DzJb9/9GI5xLlD/dgS+s0P+GL5UFdfk/I6VqK6S16KaXCdA3Q8gPxi83XmJmhJksNFscV+Foi/fc7GY4SV7kU5r6gefY=" |
| 133 | + /> |
| 134 | + |
121 | 135 | <script async src="https://cdn.ampproject.org/v0.js"></script>
|
122 | 136 | <script async src="https://torch2424-amp-glitch-express.glitch.me/amp-script.js"></script>
|
123 | 137 | </head>
|
124 | 138 |
|
125 | 139 | <body>
|
126 |
| - <!-- need to serve cors because of new amp-script requirement --> |
127 |
| - <amp-script layout="container" src="<%BUNDLE%>"> |
128 |
| - <div id="root"> |
129 |
| - <h1>⚡wAsMP Boy⚡</h1> |
130 |
| - <p id="description"> |
131 |
| - <a href="https://github.com/torch2424/wasmBoy" target="_blank">WasmBoy</a> TS Core Running within |
132 |
| - <a href="https://github.com/ampproject/amphtml/tree/master/extensions/amp-script" target="_blank">amp-script</a> and |
133 |
| - <a href="https://github.com/ampproject/worker-dom" target="_blank">Worker DOM</a>. Runs slow due to experimenal amp-script / |
134 |
| - Worker DOM limitations. Which is worked around using a Pixel-by-pixel RGBA ImageData Array to SVG solution. |
135 |
| - |
136 |
| - <b>NOTE:</b> |
137 |
| - Play on desktop. You must click the game to control it. |
138 |
| - |
139 |
| - <b>You must toggle the amp-script experiment:</b> |
140 |
| - `AMP.toggleExperiment('amp-script')` in Dev tools console. |
141 |
| - |
142 |
| - <b>Lifted the <a href="https://github.com/ampproject/amphtml/pull/20427" target="_blank">AMP Script Size restriction</a></b> |
143 |
| - |
144 |
| - <b>ROM played is: <a href="http://tangramgames.dk/tobutobugirl/" target="_blank">Tobu Tobu Girl</a></b> |
145 |
| - |
146 |
| - <b>Controls:</b> |
147 |
| - Up,Down,Left,Right = Arrow Keys, WASD A = Z B = X Start = Enter Select = Shift Play/Pause = Space |
148 |
| - </p> |
149 |
| - </div> |
150 |
| - </amp-script> |
| 140 | + <h1>⚡wAsMP Boy⚡</h1> |
| 141 | + <p id="description"> |
| 142 | + <a href="https://github.com/torch2424/wasmBoy" target="_blank">WasmBoy</a> TS Core Running within |
| 143 | + <a href="https://github.com/ampproject/amphtml/tree/master/extensions/amp-script" target="_blank">amp-script</a> and |
| 144 | + <a href="https://github.com/ampproject/worker-dom" target="_blank">Worker DOM</a>. Runs slow due to experimenal amp-script / Worker |
| 145 | + DOM limitations. Which is worked around using a Pixel-by-pixel RGBA ImageData Array to SVG solution. |
| 146 | + |
| 147 | + <b>NOTE:</b> |
| 148 | + Play on desktop. You must click the game to control it. |
| 149 | + |
| 150 | + <b>AMP Script is automatically enabled by the Origin Trial.</b> |
| 151 | + If it isn't working, run `AMP.toggleExperiment('amp-script')` in Dev tools console. |
| 152 | + |
| 153 | + <b>Lifted the <a href="https://github.com/ampproject/amphtml/pull/20427" target="_blank">AMP Script Size restriction</a></b> |
| 154 | + |
| 155 | + <b>ROM played is: <a href="http://tangramgames.dk/tobutobugirl/" target="_blank">Tobu Tobu Girl</a></b> |
| 156 | + |
| 157 | + <b>Controls:</b> |
| 158 | + Up,Down,Left,Right = Arrow Keys, WASD A = Z B = X Start = Enter Select = Shift Play/Pause = Space |
| 159 | + </p> |
| 160 | + |
| 161 | + <div class="wasmboy-container"> |
| 162 | + <!-- need to serve cors because of new amp-script requirement --> |
| 163 | + <amp-script layout="fixed" width="322px" height="290px" id="wasmboy-amp-script" src="<%BUNDLE%>"> </amp-script> |
| 164 | + </div> |
151 | 165 | </body>
|
152 | 166 | </html>
|
0 commit comments