Skip to content

Commit 43ad0a6

Browse files
authored
Some AMP Script height fixes, and Implemented origin trial (#296)
* Fixed for new AMP Script height, added token * Changed some messaging
1 parent 8342726 commit 43ad0a6

File tree

2 files changed

+54
-36
lines changed

2 files changed

+54
-36
lines changed

demo/amp/index.html

Lines changed: 50 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -72,15 +72,6 @@
7272
background: #edf0f0;
7373
}
7474

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-
8475
#description {
8576
z-index: 2;
8677
width: 100%;
@@ -97,6 +88,26 @@
9788
opacity: 0;
9889
}
9990

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+
100111
#fps {
101112
text-align: center;
102113
margin-top: 10px;
@@ -107,8 +118,6 @@
107118
display: block;
108119

109120
width: 100%;
110-
max-width: 400px;
111-
border: solid 1px #000;
112121

113122
text-align: center;
114123
margin-top: 10px;
@@ -118,35 +127,40 @@
118127
}
119128
</style>
120129

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+
121135
<script async src="https://cdn.ampproject.org/v0.js"></script>
122136
<script async src="https://torch2424-amp-glitch-express.glitch.me/amp-script.js"></script>
123137
</head>
124138

125139
<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>
151165
</body>
152166
</html>

demo/amp/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,10 @@ const runTask = async () => {
120120

121121
// Start playing the rom
122122
const play = () => {
123+
if (!isPlaying) {
124+
return;
125+
}
126+
123127
// Run a frame
124128
WasmBoy.instance.exports.executeFrame();
125129

0 commit comments

Comments
 (0)