pxt-arcade 1.7.3 → 1.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (227) hide show
  1. package/built/common-sim.d.ts +2 -0
  2. package/built/common-sim.js +4 -0
  3. package/built/target.js +1788 -236
  4. package/built/target.json +1788 -236
  5. package/built/targetlight.json +5 -5
  6. package/built/theme.json +3 -2
  7. package/docs/gamejam/global-2021.html +459 -0
  8. package/docs/hour-of-code/all.md +27 -0
  9. package/docs/hour-of-code/{educators.html → educators-2020.html} +25 -25
  10. package/docs/hour-of-code/educators-2021.html +625 -0
  11. package/docs/{hour-of-code.html → hour-of-code-2020.html} +37 -37
  12. package/docs/hour-of-code-2021.html +438 -183
  13. package/docs/hour-of-code-ref.json +3 -0
  14. package/docs/index-ref.json +1 -1
  15. package/docs/multipart-tutorials.md +0 -8
  16. package/docs/projects/SUMMARY.md +3 -2
  17. package/docs/recipes.md +0 -7
  18. package/docs/skillmap/clicker/clicker1.md +7 -7
  19. package/docs/skillmap/clicker/clicker2.md +9 -9
  20. package/docs/skillmap/clicker/clicker3.md +8 -8
  21. package/docs/skillmap/clicker/clicker4.md +8 -8
  22. package/docs/skillmap/clicker/clicker4a.md +7 -7
  23. package/docs/skillmap/clicker/clicker5.md +3 -3
  24. package/docs/skillmap/clicker-themed/clickert1.md +66 -38
  25. package/docs/skillmap/clicker-themed/clickert2.md +77 -58
  26. package/docs/skillmap/clicker-themed/clickert3.md +75 -55
  27. package/docs/skillmap/clicker-themed/clickert4.md +105 -118
  28. package/docs/skillmap/collector/collector1.md +11 -11
  29. package/docs/skillmap/collector/collector1a.md +8 -8
  30. package/docs/skillmap/collector/collector2.md +8 -8
  31. package/docs/skillmap/collector/collector3.md +8 -8
  32. package/docs/skillmap/collector/collector3a.md +7 -7
  33. package/docs/skillmap/collector/collector4.md +8 -8
  34. package/docs/skillmap/collector/collector5.md +2 -2
  35. package/docs/skillmap/collector-themed/collectort1.md +107 -88
  36. package/docs/skillmap/collector-themed/collectort2.md +109 -87
  37. package/docs/skillmap/collector-themed/collectort3.md +138 -115
  38. package/docs/skillmap/collector-themed/collectort4.md +130 -118
  39. package/docs/skillmap/collector-themed/collectort4old.md +23 -23
  40. package/docs/skillmap/collector-themed/collectort5.md +2 -2
  41. package/docs/skillmap/educator-info/forest-map-info.md +34 -25
  42. package/docs/skillmap/educator-info/pongo-map-info.md +55 -0
  43. package/docs/skillmap/educator-info/racer-map-info.md +105 -0
  44. package/docs/skillmap/educator-info/rockstar-map-info.md +1 -1
  45. package/docs/skillmap/educator-info/simple-shark-map-info.md +101 -0
  46. package/docs/skillmap/forest/forest1.md +1 -69
  47. package/docs/skillmap/forest/forest2.md +5 -65
  48. package/docs/skillmap/forest/forest3.md +1 -174
  49. package/docs/skillmap/forest/forest4.md +2 -336
  50. package/docs/skillmap/forest/forest5.md +1 -396
  51. package/docs/skillmap/forest/forest6.md +6 -372
  52. package/docs/skillmap/forest-old.md +92 -0
  53. package/docs/skillmap/forest.md +9 -9
  54. package/docs/skillmap/forest_new/forest1.md +191 -0
  55. package/docs/skillmap/forest_new/forest2.md +217 -0
  56. package/docs/skillmap/forest_new/forest3.md +333 -0
  57. package/docs/skillmap/forest_new/forest4.md +196 -0
  58. package/docs/skillmap/forest_new/forest5.md +291 -0
  59. package/docs/skillmap/forest_new/forest6.md +272 -0
  60. package/docs/skillmap/interface/activity1.md +41 -49
  61. package/docs/skillmap/jungle/jungle1.md +48 -28
  62. package/docs/skillmap/jungle/jungle2.md +50 -26
  63. package/docs/skillmap/jungle/jungle3.md +48 -27
  64. package/docs/skillmap/jungle/jungle4.md +76 -58
  65. package/docs/skillmap/jungle/jungle5.md +31 -25
  66. package/docs/skillmap/jungle/jungle6.md +34 -28
  67. package/docs/skillmap/jungle/jungle7.md +36 -24
  68. package/docs/skillmap/jungle/jungle8.md +27 -25
  69. package/docs/skillmap/jungle.md +7 -3
  70. package/docs/skillmap/long-shark.md +119 -0
  71. package/docs/skillmap/pongo/pongo1.md +256 -0
  72. package/docs/skillmap/pongo/pongo2.md +179 -0
  73. package/docs/skillmap/pongo/pongo3.md +177 -0
  74. package/docs/skillmap/pongo.md +59 -0
  75. package/docs/skillmap/racer.md +7 -7
  76. package/docs/skillmap/rockstar/rockstar1.md +32 -41
  77. package/docs/skillmap/rockstar/rockstar2.md +45 -27
  78. package/docs/skillmap/rockstar/rockstar3.md +45 -27
  79. package/docs/skillmap/rockstar.md +3 -1
  80. package/docs/skillmap/shark/shark1-simple.md +151 -0
  81. package/docs/skillmap/shark/shark2-simple.md +203 -0
  82. package/docs/skillmap/shark/shark3-simple.md +204 -0
  83. package/docs/skillmap/shark/shark4-simple.md +246 -0
  84. package/docs/skillmap/shark/shark4a-simple.md +244 -0
  85. package/docs/skillmap/shark.md +25 -58
  86. package/docs/skillmap/space/space1.md +63 -29
  87. package/docs/skillmap/space/space2.md +34 -25
  88. package/docs/skillmap/space/space3.md +86 -69
  89. package/docs/skillmap/space/space4.md +96 -65
  90. package/docs/skillmap/space/space4a.md +34 -25
  91. package/docs/skillmap/space/space5.md +81 -45
  92. package/docs/skillmap/space/space6.md +59 -81
  93. package/docs/skillmap/space.md +8 -5
  94. package/docs/skillmap/story/card.md +6 -6
  95. package/docs/skillmap/story/card2.md +6 -6
  96. package/docs/skillmap/story/story1.md +60 -175
  97. package/docs/skillmap/story/story2.md +89 -327
  98. package/docs/skillmap/story/story3.md +238 -228
  99. package/docs/skillmap/story/story4.md +23 -23
  100. package/docs/skillmap/zoo/zoo1.md +31 -16
  101. package/docs/skillmap/zoo/zoo2.md +45 -30
  102. package/docs/skillmap/zoo/zoo2a.md +51 -36
  103. package/docs/skillmap/zoo/zoo3.md +8 -7
  104. package/docs/skillmap/zoo/zoo4.md +61 -32
  105. package/docs/skillmap/zoo/zoo5.md +41 -31
  106. package/docs/skillmap/zoo.md +2 -2
  107. package/docs/skillmaps.md +20 -4
  108. package/docs/static/experiments/accessibleblocks.png +0 -0
  109. package/docs/static/experiments/blockserrorlist.png +0 -0
  110. package/docs/static/gamejam/jams/global-2021/assets/banner.png +0 -0
  111. package/docs/static/gamejam/jams/global-2021/info.json +10 -0
  112. package/docs/static/gamejam/jams/global-2021/rules.md +22 -0
  113. package/docs/static/gamejam/jams/global-2021/style.css +141 -0
  114. package/docs/static/gamejam/lib/gamejam.d.ts +1 -0
  115. package/docs/static/gamejam/lib/gamejam.js +34 -24
  116. package/docs/static/gamejam/lib/gamejam.ts +35 -24
  117. package/docs/static/hero-gallery/stream.png +0 -0
  118. package/docs/static/hour-of-code/{apple.png → 2020/apple.png} +0 -0
  119. package/docs/static/hour-of-code/{arcade.png → 2020/arcade.png} +0 -0
  120. package/docs/static/hour-of-code/{asphodel.png → 2020/asphodel.png} +0 -0
  121. package/docs/static/hour-of-code/{card.png → 2020/card.png} +0 -0
  122. package/docs/static/hour-of-code/{chase-the-pizza.png → 2020/chase-the-pizza.png} +0 -0
  123. package/docs/static/hour-of-code/{clovers.png → 2020/clovers.png} +0 -0
  124. package/docs/static/hour-of-code/{design.png → 2020/design.png} +0 -0
  125. package/docs/static/hour-of-code/{educators → 2020/educators}/asphodel-level1.png +0 -0
  126. package/docs/static/hour-of-code/{educators → 2020/educators}/asphodel-level4.png +0 -0
  127. package/docs/static/hour-of-code/{educators → 2020/educators}/asphodel-level6.png +0 -0
  128. package/docs/static/hour-of-code/{educators → 2020/educators}/asphodel-level7.png +0 -0
  129. package/docs/static/hour-of-code/{educators → 2020/educators}/asphodel-level9.png +0 -0
  130. package/docs/static/hour-of-code/{educators → 2020/educators}/clover-design.gif +0 -0
  131. package/docs/static/hour-of-code/{educators → 2020/educators}/shark-attack-tutorial.png +0 -0
  132. package/docs/static/hour-of-code/{galga.png → 2020/galga.png} +0 -0
  133. package/docs/static/hour-of-code/{lemon-leak.png → 2020/lemon-leak.png} +0 -0
  134. package/docs/static/hour-of-code/{micro-bit.png → 2020/micro-bit.png} +0 -0
  135. package/docs/static/hour-of-code/{minecraft.png → 2020/minecraft.png} +0 -0
  136. package/docs/static/hour-of-code/{nfl.png → 2020/nfl.png} +0 -0
  137. package/docs/static/hour-of-code/{ocean-jam.png → 2020/ocean-jam.png} +0 -0
  138. package/docs/static/hour-of-code/{pixel-background-primary.png → 2020/pixel-background-primary.png} +0 -0
  139. package/docs/static/hour-of-code/{pixel-background-secondary.png → 2020/pixel-background-secondary.png} +0 -0
  140. package/docs/static/hour-of-code/{shadowed-aside-frame.png → 2020/shadowed-aside-frame.png} +0 -0
  141. package/docs/static/hour-of-code/{shadowed-button-frame.png → 2020/shadowed-button-frame.png} +0 -0
  142. package/docs/static/hour-of-code/{shadowed-primary-frame.png → 2020/shadowed-primary-frame.png} +0 -0
  143. package/docs/static/hour-of-code/{shark-attack.png → 2020/shark-attack.png} +0 -0
  144. package/docs/static/hour-of-code/{simulator.gif → 2020/simulator.gif} +0 -0
  145. package/docs/static/hour-of-code/{simulator.png → 2020/simulator.png} +0 -0
  146. package/docs/static/hour-of-code/{styles.css → 2020/styles.css} +1 -1
  147. package/docs/static/hour-of-code/2021/Rowdies/OFL.txt +93 -0
  148. package/docs/static/hour-of-code/2021/Rowdies/Rowdies-Bold.ttf +0 -0
  149. package/docs/static/hour-of-code/2021/Rowdies/Rowdies-Regular.ttf +0 -0
  150. package/docs/static/hour-of-code/2021/beginner-skillmap.png +0 -0
  151. package/docs/static/hour-of-code/2021/favicon.png +0 -0
  152. package/docs/static/hour-of-code/2021/forest-skillmap-game.gif +0 -0
  153. package/docs/static/hour-of-code/2021/game-jam-hero.png +0 -0
  154. package/docs/static/hour-of-code/2021/hoc-2020.png +0 -0
  155. package/docs/static/hour-of-code/2021/hoc-card.png +0 -0
  156. package/docs/static/hour-of-code/2021/hoc-header-educators.png +0 -0
  157. package/docs/static/hour-of-code/2021/hoc-header-plane.gif +0 -0
  158. package/docs/static/hour-of-code/2021/hoc-header-scene.gif +0 -0
  159. package/docs/static/hour-of-code/2021/jungle-skillmap.png +0 -0
  160. package/docs/static/hour-of-code/2021/makecode-example.png +0 -0
  161. package/docs/static/hour-of-code/2021/microbit.png +0 -0
  162. package/docs/static/hour-of-code/2021/minecraft.png +0 -0
  163. package/docs/static/hour-of-code/2021/rockstar-skillmap.png +0 -0
  164. package/docs/static/hour-of-code/2021/styles.css +660 -62
  165. package/docs/static/logo.png +0 -0
  166. package/docs/static/skillmap/assets/my-assets-three.png +0 -0
  167. package/docs/static/skillmap/assets/sprite-from-container.gif +0 -0
  168. package/docs/static/skillmap/backgrounds/jungle-bg.png +0 -0
  169. package/docs/static/skillmap/backgrounds/jungle-map.png +0 -0
  170. package/docs/static/skillmap/backgrounds/rock-map.png +0 -0
  171. package/docs/static/skillmap/backgrounds/rockstar-card.gif +0 -0
  172. package/docs/static/skillmap/backgrounds/space-comp.png +0 -0
  173. package/docs/static/skillmap/backgrounds/space.png +0 -0
  174. package/docs/static/skillmap/certificates/forest-cert.pdf +0 -0
  175. package/docs/static/skillmap/certificates/forest-cert.png +0 -0
  176. package/docs/static/skillmap/certificates/jungle-cert.pdf +0 -0
  177. package/docs/static/skillmap/certificates/jungle-cert.png +0 -0
  178. package/docs/static/skillmap/certificates/rockstar-cert.pdf +0 -0
  179. package/docs/static/skillmap/certificates/rockstar-cert.png +0 -0
  180. package/docs/static/skillmap/certificates/shark-cert.pdf +0 -0
  181. package/docs/static/skillmap/certificates/shark-cert.png +0 -0
  182. package/docs/static/skillmap/certificates/space-cert.pdf +0 -0
  183. package/docs/static/skillmap/certificates/space-cert.png +0 -0
  184. package/docs/static/skillmap/pongo/pongo1.gif +0 -0
  185. package/docs/static/skillmap/pongo/pongo2gif +0 -0
  186. package/docs/static/skillmap/pongo/pongo3.gif +0 -0
  187. package/docs/static/skillmap/racer/racer1.gif +0 -0
  188. package/docs/static/skillmap/racer/racer2.gif +0 -0
  189. package/docs/static/skillmap/racer/racer3.gif +0 -0
  190. package/docs/static/skillmap/rockstar/rockstar1.gif +0 -0
  191. package/docs/static/skillmap/rockstar/rockstar2.gif +0 -0
  192. package/docs/static/skillmap/rockstar/rockstar3.gif +0 -0
  193. package/docs/static/skillmap/shark/shark1-simple.gif +0 -0
  194. package/docs/static/skillmap/shark/shark4a-simple.gif +0 -0
  195. package/docs/static/skillmap/zoo/overlaps-food-sprite.gif +0 -0
  196. package/docs/tutorials/barrel-dodger.md +4 -4
  197. package/docs/tutorials/collect-the-clovers.md +2 -2
  198. package/docs/tutorials/froggy.md +105 -90
  199. package/docs/tutorials/hundred.md +400 -0
  200. package/package.json +3 -3
  201. package/pxtarget.json +3 -2
  202. package/targetconfig.json +4 -1
  203. package/docs/recipes/wonder-woman-1984/01-maze.md +0 -291
  204. package/docs/recipes/wonder-woman-1984/02-artifact.md +0 -70
  205. package/docs/recipes/wonder-woman-1984/03-enemies.md +0 -65
  206. package/docs/skillmap/forest/forest9.md +0 -714
  207. package/docs/static/hour-of-code/2021/placeholder.png +0 -0
  208. package/docs/static/hour-of-code/ww-maze.png +0 -0
  209. package/docs/static/recipes/wonder-woman-1984/artifact-preview.png +0 -0
  210. package/docs/static/recipes/wonder-woman-1984/artifacts-location.gif +0 -0
  211. package/docs/static/recipes/wonder-woman-1984/draw-maze-backup.png +0 -0
  212. package/docs/static/recipes/wonder-woman-1984/draw-walls-backup.png +0 -0
  213. package/docs/static/recipes/wonder-woman-1984/end-position.png +0 -0
  214. package/docs/static/recipes/wonder-woman-1984/enemies-location.gif +0 -0
  215. package/docs/static/recipes/wonder-woman-1984/enemies-preview.png +0 -0
  216. package/docs/static/recipes/wonder-woman-1984/fill-maze.gif +0 -0
  217. package/docs/static/recipes/wonder-woman-1984/fill-walls.gif +0 -0
  218. package/docs/static/recipes/wonder-woman-1984/wonder-woman3.png +0 -0
  219. package/docs/static/recipes/wonder-woman-1984/ww-splash3.gif +0 -0
  220. package/docs/static/recipes/wonder-woman-1984/ww-splash3.mp4 +0 -0
  221. package/docs/static/ww84-background.png +0 -0
  222. package/docs/static/ww84-header.png +0 -0
  223. package/docs/ww84.html +0 -276
  224. package/sim/public/locales/zh-CN/bundled-strings.json +0 -1800
  225. package/sim/public/locales/zh-CN/target-strings.json +0 -13
  226. package/sim/public/locales/zh-TW/bundled-strings.json +0 -1903
  227. package/sim/public/locales/zh-TW/target-strings.json +0 -8
package/docs/hour-of-code-2021.html CHANGED
@@ -7,9 +7,11 @@
7
7
  >
8
8
  <head>
9
9
  <meta charset="UTF-8" />
10
- <title>Microsoft MakeCode Arcade Hour of Code 2021</title>
11
- <meta name="Description" content="" />
12
- <!-- TODO: Description Copy -->
10
+ <title>Microsoft MakeCode Arcade Hour of Code™ 2021</title>
11
+ <meta
12
+ name="Description"
13
+ content="Join us in celebrating this year's Computer Science Education Week by playing, designing and coding your very own retro arcade games!"
14
+ />
13
15
  <meta
14
16
  name="viewport"
15
17
  content="width=device-width, initial-scale=1.0, user-scalable=yes"
@@ -21,7 +23,7 @@
21
23
  <meta name="apple-mobile-web-app-capable" content="yes" />
22
24
  <meta
23
25
  name="apple-mobile-web-app-title"
24
- content="Microsoft MakeCode Arcade Hour of Code 2021"
26
+ content="Microsoft MakeCode Arcade Hour of Code™ 2021"
25
27
  />
26
28
  <meta
27
29
  name="apple-mobile-web-app-status-bar-style"
@@ -30,92 +32,85 @@
30
32
  <meta name="format-detection" content="telephone=no" />
31
33
  <meta
32
34
  name="application-name"
33
- content="Microsoft MakeCode Arcade Hour of Code 2021"
35
+ content="Microsoft MakeCode Arcade Hour of Code™ 2021"
34
36
  />
35
37
 
36
- <meta name="msapplication-TileColor" content="#ff7b22" />
37
- <meta name="msapplication-TileImage" content="" />
38
- <!-- TODO: Card Image -->
38
+ <meta name="msapplication-TileColor" content="#3DC1AA" />
39
+ <meta
40
+ name="msapplication-TileImage"
41
+ content="/static/hour-of-code/2021/hoc-card.png"
42
+ />
39
43
  <meta name="msapplication-config" content="none" />
40
- <meta name="theme-color" content="#ff7b22" />
44
+ <meta name="theme-color" content="#3DC1AA" />
41
45
 
42
46
  <meta name="twitter:card" content="summary" />
43
47
  <meta name="twitter:site" content="MSMakeCode" />
44
48
  <meta
45
49
  name="twitter:title"
46
- content="Microsoft MakeCode Arcade Hour of Code 2021"
50
+ content="Microsoft MakeCode Arcade Hour of Code™ 2021"
51
+ />
52
+ <meta
53
+ name="twitter:description"
54
+ content="Join us in celebrating this year's Computer Science Education Week by playing, designing and coding your very own retro arcade games!"
55
+ />
56
+
57
+ <meta
58
+ name="twitter:image"
59
+ content="/static/hour-of-code/2021/hoc-card.png"
47
60
  />
48
- <meta name="twitter:description" content="" />
49
- <!-- TODO: Description Copy -->
50
- <meta name="twitter:image" content="/static/hour-of-code/card.png" />
51
- <!-- TODO: Card Image -->
52
61
 
53
62
  <meta
54
63
  property="og:title"
55
- content="Microsoft MakeCode Arcade Hour of Code 2021"
64
+ content="Microsoft MakeCode Arcade Hour of Code™ 2021"
56
65
  />
57
66
  <meta
58
67
  property="og:site_name"
59
- content="Microsoft MakeCode Arcade Hour of Code 2021"
68
+ content="Microsoft MakeCode Arcade Hour of Code™ 2021"
69
+ />
70
+ <meta
71
+ property="og:description"
72
+ content="Join us in celebrating this year's Computer Science Education Week by playing, designing and coding your very own retro arcade games!"
60
73
  />
61
- <meta property="og:description" content="" />
62
- <!-- TODO: Description Copy -->
63
- <meta property="og:image" content="" />
64
- <!-- TODO: Card Image -->
65
74
 
66
- <link rel="apple-touch-icon" href="" />
67
- <!-- TODO: Card Image -->
68
- <link rel="icon" type="image/png" href="" />
69
- <!-- TODO: Card Image -->
70
- <link rel="shortcut icon" href="" />
71
- <!-- TODO: Card Image -->
75
+ <meta
76
+ property="og:image"
77
+ content="/static/hour-of-code/2021/hoc-card.png"
78
+ />
79
+
80
+ <link
81
+ rel="apple-touch-icon"
82
+ href="/static/hour-of-code/2021/favicon.png"
83
+ />
84
+ <link
85
+ rel="icon"
86
+ type="image/png"
87
+ href="/static/hour-of-code/2021/favicon.png"
88
+ />
89
+ <link
90
+ rel="shortcut icon"
91
+ href="/static/hour-of-code/2021/favicon.png"
92
+ />
72
93
 
73
- <!-- @include scripthead.html -->
74
- <!-- TODO: Font compliance for "Rowdies" Google Font (400 weight) -->
75
- <link rel="preconnect" href="https://fonts.googleapis.com" />
76
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
77
94
  <link
78
- href="https://fonts.googleapis.com/css2?family=Rowdies&display=swap"
79
95
  rel="stylesheet"
96
+ href="https://pxt.azureedge.net/blob/2163189fd5e35c0981ed55318415582a7c9aeb12/doccdn/semantic.css"
97
+ type="text/css"
80
98
  />
81
- <link rel="stylesheet" href="/static/hour-of-code/2021/styles.css" />
99
+ <!-- @include scripthead.html -->
100
+
101
+ <style>
102
+ @font-face {
103
+ font-family: 'Rowdies';
104
+ src: url('/static/hour-of-code/2021/Rowdies/Rowdies-Bold.ttf')
105
+ format('truetype');
106
+ }
107
+ </style>
82
108
 
83
- <style></style>
109
+ <link rel="stylesheet" href="/static/hour-of-code/2021/styles.css" />
84
110
 
85
- <script
86
- src="https://kit.fontawesome.com/44ed5c071b.js"
87
- crossorigin="anonymous"
88
- ></script>
89
- <!-- TODO: Replace with existing method of using FontAwesome icons -->
90
111
  <script>
91
112
  // TODO: update tracking for 2021
92
113
  function handleOnLoad() {
93
- document
94
- .querySelector('#openhome')
95
- .addEventListener('click', function () {
96
- window.pxtTickEvent('hourofcode2020.home', {
97
- src: 'main'
98
- });
99
- });
100
-
101
- document
102
- .querySelector('#playbutton')
103
- .addEventListener('click', function () {
104
- window.pxtTickEvent('hourofcode2020.play');
105
- });
106
-
107
- document
108
- .querySelector('#designbutton')
109
- .addEventListener('click', function () {
110
- window.pxtTickEvent('hourofcode2020.design');
111
- });
112
-
113
- document
114
- .querySelector('#codebutton')
115
- .addEventListener('click', function () {
116
- window.pxtTickEvent('hourofcode2020.code');
117
- });
118
-
119
114
  var langPicker = document.querySelector('#langpicker');
120
115
  if (langPicker) {
121
116
  langPicker.remove();
@@ -126,186 +121,446 @@
126
121
 
127
122
  <body id="root" class="root background-eggplant" onload="handleOnLoad()">
128
123
  <div id="main" role="presentation">
129
- <nav class="background-eggplant" style="height: 6.4rem">
130
- <!-- TODO: Bring in standardized Arcade navbar and remove style prop -->
124
+ <nav
125
+ id="header-bar"
126
+ class="background-eggplant"
127
+ style="height: 60px"
128
+ >
129
+ <div class="header-bar-left">
130
+ <a
131
+ href="https://www.microsoft.com/en-us/makecode"
132
+ onClick="window.pxtTickEvent('hourofcode2021.header.logo')"
133
+ ><div class="header-org-logo" role="menuitem">
134
+ <img
135
+ src="/static/logo/Microsoft_logo_rgb_W-white_D.png"
136
+ alt="Microsoft"
137
+ />
138
+ </div>
139
+ <div class="header-org-logo-sm" role="menuitem">
140
+ <img
141
+ src="/static/logo/Microsoft_logo_rgb_W-white_D-square.png"
142
+ alt="Microsoft"
143
+ />
144
+ </div>
145
+ <div class="header-title" role="menuitem">
146
+ <span>MakeCode</span>
147
+ </div>
148
+ </a>
149
+ </div>
150
+ <div class="header-bar-right">
151
+ <a
152
+ class="header-icon"
153
+ role="menuitem"
154
+ aria-label="Return home"
155
+ tabindex="0"
156
+ href="https://arcade.makecode.com/"
157
+ onClick="window.pxtTickEvent('hourofcode2021.header.home')"
158
+ >
159
+ <i
160
+ class="icon home"
161
+ aria-hidden="true"
162
+ role="presentation"
163
+ ></i>
164
+ </a>
165
+ </div>
131
166
  </nav>
132
167
 
133
- <header class="hoc-header background-marina background-placeholder">
134
- <a class="educator-btn"
135
- >Educator Page <i class="fas fa-external-link-alt"></i
136
- ></a>
168
+ <header
169
+ class="hoc-header background-marina"
170
+ style="
171
+ background-image: url('./static/hour-of-code/2021/hoc-header-scene.gif');
172
+ "
173
+ >
137
174
  <div class="header-text">
138
175
  <h4 class="body-font">Microsoft MakeCode Arcade</h4>
139
176
  <div class="title">
140
- <h1 class="display-font">Hour</h1>
141
- <h2 class="display-font">of</h2>
142
- <h1 class="display-font">Code</h1>
177
+ <h1 class="display-font">Hour Of</h1>
178
+ <h1 class="display-font code">
179
+ Code<span class="small">™</span>
180
+ </h1>
143
181
  </div>
144
182
  <h3 class="display-font">2021</h3>
145
183
  </div>
184
+
185
+ <div
186
+ class="header-background-image foreground"
187
+ style="
188
+ background-image: url('./static/hour-of-code/2021/hoc-header-plane.gif');
189
+ "
190
+ ></div>
146
191
  </header>
147
192
 
148
193
  <section class="hoc-section-01">
149
- <a class="activity-btn">
194
+ <a
195
+ class="activity-btn"
196
+ target="_blank"
197
+ rel="noreferrer"
198
+ href="https://aka.ms/forestmap"
199
+ onClick="window.pxtTickEvent('hourofcode2021.skillmap.open.code')"
200
+ >
201
+ <!--TODO: Make sure link above is correct-->
150
202
  <div class="title background-papaya">
151
- <h5 class="display-font">Activity Title</h5>
203
+ <h5 class="display-font">Code a Game</h5>
152
204
  </div>
153
205
  <div
154
- class="body background-marina background-placeholder"
206
+ class="body background-marina"
207
+ style="
208
+ background-image: url('./static/hour-of-code/2021/forest-skillmap-game.gif');
209
+ "
155
210
  ></div>
156
211
  <div class="action background-sunflower">
157
212
  <h5 class="display-font">Launch</h5>
158
213
  </div>
159
214
  </a>
160
215
  <div class="section-text">
161
- <h3 class="title display-font sunflower">Section Title</h3>
216
+ <h3 class="title display-font sunflower">
217
+ Save the Forest!
218
+ </h3>
219
+ <p>
220
+ Technology and Computer Science is everywhere in the
221
+ world around us. And it’s helping to solve some of the
222
+ toughest problems we’re facing in the world.
223
+ </p>
162
224
  <p>
163
- Lorem ipsum dolor sit amet,
164
- <a href="https://google.com">consectetuer</a> adipiscing
165
- elit. Aenean commodo ligula eget dolor. Aenean massa.
166
- Cum sociis natoque penatibus et magnis dis parturient
167
- montes, nascetur ridiculus mus. Donec quam felis,
168
- ultricies nec, pellentesque eu, pretium quis, sem.
225
+ For this year’s Hour of Code™, let’s look at how
226
+ computers and technology can help combat forest fires.
169
227
  </p>
170
228
  <p>
171
- Nulla consequat massa quis enim. Donec pede justo,
172
- fringilla vel, aliquet nec, vulputate eget, arcu. In
173
- enim justo, rhoncus ut, imperdiet a, venenatis vitae,
174
- justo.
229
+ Code a game with Microsoft MakeCode Arcade that
230
+ recreates the conditions for a forest fire, and then
231
+ code your fire-fighting airtanker plane to spray water
232
+ and put out the flames!
175
233
  </p>
234
+ <a
235
+ class="btn"
236
+ target="_blank"
237
+ rel="noreferrer"
238
+ href="https://aka.ms/forestmap"
239
+ onClick="window.pxtTickEvent('hourofcode2021.skillmap.open.launch')"
240
+ >
241
+ <!--TODO: Make sure link above is correct-->
242
+ <h5 class="display-font">Launch Activity</h5></a
243
+ >
244
+ <a
245
+ class="btn secondary"
246
+ href="hour-of-code/educators-2021"
247
+ target="_blank"
248
+ rel="noreferrer"
249
+ onClick="window.pxtTickEvent('hourofcode2021.skillmap.educator')"
250
+ ><h5 class="display-font">Educator Guide</h5></a
251
+ >
176
252
  </div>
177
253
  </section>
178
254
 
179
255
  <section class="hoc-aside-01 background-marina">
180
- <div class="aside-text">
181
- <h3 class="title display-font">Aside Title</h3>
182
- <h5 class="subtitle body-font">Aside Subtitle</h5>
183
- <p>
184
- Lorem ipsum dolor sit amet,
185
- <a href="https://google.com">consectetuer</a> adipiscing
186
- elit. Aenean commodo ligula eget dolor. Aenean massa.
187
- Cum sociis natoque penatibus et magnis dis parturient
188
- montes, nascetur ridiculus mus. Donec quam felis,
189
- ultricies nec, pellentesque eu, pretium quis, sem.
190
- </p>
191
- <a class="btn"><h5 class="display-font">Button</h5></a>
256
+ <div class="wrapper">
257
+ <div class="aside-text">
258
+ <h3 class="title display-font">Join the Game Jam!</h3>
259
+ <p>
260
+ After the Hour of Code™ activity, use the skills you
261
+ gained to modify your existing game or create
262
+ something new to submit to this year's game jam.
263
+ MakeCode is proud to announce that we are partnering
264
+ with the US State Department to bring you the first
265
+ <b>Global MakeCode Arcade Game Jam</b>!
266
+ </p>
267
+ <a
268
+ class="btn"
269
+ href="https://aka.ms/ArcadeGJ"
270
+ onClick="window.pxtTickEvent('hourofcode2021.gamejam')"
271
+ target="_blank"
272
+ rel="noreferrer"
273
+ ><h5 class="display-font">Learn More</h5></a
274
+ >
275
+ </div>
276
+ <div
277
+ class="hero background-sunflower"
278
+ style="
279
+ background-image: url('./static/hour-of-code/2021/game-jam-hero.png');
280
+ "
281
+ ></div>
192
282
  </div>
193
- <div
194
- class="hero background-sunflower background-placeholder"
195
- ></div>
196
283
  </section>
197
284
 
198
285
  <section class="hoc-section-02">
199
286
  <div class="section-text">
200
- <h3 class="title display-font sunflower">Section Title</h3>
287
+ <h3 class="title display-font sunflower">
288
+ Go beyond Hour of Code™!
289
+ </h3>
201
290
  <p>
202
- Nulla consequat massa quis enim. Donec pede justo,
203
- fringilla vel, aliquet nec, vulputate eget, arcu.
291
+ Can’t get enough? Explore the activities below for more
292
+ MakeCode fun!
204
293
  </p>
205
294
  </div>
206
- <!-- TODO: Script to animate this carousel -->
207
295
  <div class="carousel">
208
296
  <div class="list">
209
- <a class="list-item display-font" data-ind="0"
210
- >List Item</a
297
+ <a
298
+ class="list-item display-font active"
299
+ onClick="onListItemClicked(0)"
300
+ data-ind="0"
301
+ >Hour of Code™ 2020</a
211
302
  >
212
- <a class="list-item display-font active" data-ind="1"
213
- >List Item</a
303
+ <a
304
+ class="list-item display-font"
305
+ onClick="onListItemClicked(1)"
306
+ data-ind="1"
307
+ >Beginner's Guide to Arcade Games</a
214
308
  >
215
- <a class="list-item display-font" data-ind="2"
216
- >List Item</a
309
+ <a
310
+ class="list-item display-font"
311
+ onClick="onListItemClicked(2)"
312
+ data-ind="2"
313
+ >Rockstar Maze</a
217
314
  >
218
- <a class="list-item display-font" data-ind="3"
219
- >List Item</a
315
+ <a
316
+ class="list-item display-font"
317
+ onClick="onListItemClicked(3)"
318
+ data-ind="3"
319
+ >Explore the Jungle</a
220
320
  >
221
- <a class="list-item display-font" data-ind="4"
222
- >List Item</a
321
+ <a
322
+ class="list-item display-font"
323
+ onClick="onListItemClicked(4)"
324
+ data-ind="4"
325
+ >Minecraft Hour of Code™</a
223
326
  >
224
- <a class="list-item display-font" data-ind="5"
225
- >List Item</a
327
+ <a
328
+ class="list-item display-font"
329
+ onClick="onListItemClicked(5)"
330
+ data-ind="5"
331
+ >Micro:bit Tutorials</a
226
332
  >
227
333
  </div>
228
- <div class="body background-marina background-placeholder">
229
- <a class="btn"><h5 class="display-font">Button</h5></a>
334
+ <div id="carousel-body" class="body background-marina">
335
+ <div class="body-overlay"></div>
336
+ <a
337
+ id="carousel-link"
338
+ target="_blank"
339
+ rel="noreferrer"
340
+ class="btn"
341
+ href=""
342
+ onClick="window.pxtTickEvent('hourofcode2021.carousel.action', { item: slides[globalInd].id })"
343
+ ><h5 id="carousel-text" class="display-font"></h5
344
+ ></a>
230
345
  </div>
231
346
  </div>
347
+ <script type="application/javascript">
348
+ let slides = [
349
+ {
350
+ id: 'hourofcode2020',
351
+ img: '/static/hour-of-code/2021/hoc-2020.png',
352
+ link: 'https://arcade.makecode.com/hour-of-code-2020',
353
+ text: 'Hour of Code™ 2020'
354
+ },
355
+ {
356
+ id: 'skillmap.beginner',
357
+ img: '/static/hour-of-code/2021/beginner-skillmap.png',
358
+ link: 'https://arcade.makecode.com/--skillmap#beginner',
359
+ text: 'Launch Skillmap'
360
+ },
361
+ {
362
+ id: 'skillmap.rockstar',
363
+ img: '/static/hour-of-code/2021/rockstar-skillmap.png',
364
+ link: 'https://arcade.makecode.com/--skillmap#rockstar',
365
+ text: 'Launch Skillmap'
366
+ },
367
+ {
368
+ id: 'skillmap.jungle',
369
+ img: '/static/hour-of-code/2021/jungle-skillmap.png',
370
+ link: 'https://arcade.makecode.com/--skillmap#jungle',
371
+ text: 'Launch Skillmap'
372
+ },
373
+ {
374
+ id: 'minecraft',
375
+ img: '/static/hour-of-code/2021/minecraft.png',
376
+ link: 'https://education.minecraft.net/en-us/resources/hour-code-2021',
377
+ text: 'Hour of Code™ 2021'
378
+ },
379
+ {
380
+ id: 'microbit',
381
+ img: '/static/hour-of-code/2021/microbit.png',
382
+ link: 'https://makecode.microbit.org',
383
+ text: 'Go to micro:bit'
384
+ }
385
+ ];
386
+
387
+ let globalInd = 0;
388
+ let intervalSpeed = 4000;
389
+
390
+ changeCarousel(0);
391
+
392
+ function intervalFunction() {
393
+ globalInd = (globalInd + 1) % 6;
394
+ changeCarousel(globalInd);
395
+ }
396
+
397
+ let transition = setInterval(
398
+ intervalFunction,
399
+ intervalSpeed
400
+ );
401
+
402
+ function onListItemClicked(ind) {
403
+ window.pxtTickEvent('hourofcode2021.carousel.list', {
404
+ item: slides[ind].id
405
+ });
406
+ clearInterval(transition);
407
+ globalInd = ind;
408
+ changeCarousel(globalInd);
409
+ transition = setInterval(
410
+ intervalFunction,
411
+ intervalSpeed
412
+ );
413
+ }
414
+
415
+ function changeCarousel(ind) {
416
+ let linkElems =
417
+ document.getElementsByClassName('list-item');
418
+ let carouselBody =
419
+ document.getElementById('carousel-body');
420
+ let carouselLink =
421
+ document.getElementById('carousel-link');
422
+ let carouselText =
423
+ document.getElementById('carousel-text');
424
+
425
+ [].forEach.call(linkElems, function (el) {
426
+ el.classList.remove('active');
427
+ });
428
+
429
+ linkElems[ind].classList.add('active');
430
+ carouselBody.style.backgroundImage =
431
+ 'url(' + slides[ind].img + ')';
432
+ carouselText.innerText = slides[ind].text;
433
+ carouselLink.href = slides[ind].link;
434
+ }
435
+ </script>
232
436
  </section>
233
437
 
234
- <section class="hoc-aside-02 background-sunflower">
235
- <div class="wrapper">
236
- <div class="aside-text">
237
- <h3 class="title display-font">Aside Title</h3>
238
- <p>
239
- Lorem ipsum dolor sit amet,
240
- <a href="https://google.com">consectetuer</a>
241
- adipiscing elit. Aenean commodo ligula eget dolor.
242
- Aenean massa. Cum sociis natoque penatibus et magnis
243
- dis parturient montes, nascetur ridiculus mus.
244
- </p>
245
- </div>
246
- <div class="tiles">
247
- <a
248
- class="
249
- tile
250
- background-marina background-placeholder
251
- "
252
- ></a>
438
+ <section class="hoc-aside-02 background-papaya">
439
+ <div class="aside-text">
440
+ <h3 class="title display-font">
441
+ Follow us on Social Media
442
+ </h3>
443
+ <p>
444
+ Share your fire-fighting game with us on social media.
445
+ Tag us in your creations using @msmakecode or the
446
+ hashtag #makecode. And don't forget to follow us to find
447
+ out about the newest MakeCode Arcade updates, games, and
448
+ competitions!
449
+ </p>
450
+ <div class="social-buttons">
253
451
  <a
254
- class="
255
- tile
256
- background-sunflower background-placeholder
257
- "
258
- ></a>
452
+ href="https://www.instagram.com/msmakecode"
453
+ target="_blank"
454
+ rel="noreferrer"
455
+ onClick="window.pxtTickEvent('hourofcode2021.social.instagram')"
456
+ >
457
+ <i class="icon instagram"></i>
458
+ </a>
259
459
  <a
260
- class="
261
- tile
262
- background-papaya background-placeholder
263
- "
264
- ></a>
460
+ href="https://www.youtube.com/microsoftmakecode"
461
+ target="_blank"
462
+ rel="noreferrer"
463
+ onClick="window.pxtTickEvent('hourofcode2021.social.youtube')"
464
+ >
465
+ <i class="icon youtube"></i>
466
+ </a>
265
467
  <a
266
- class="
267
- tile
268
- background-sunflower background-placeholder
269
- "
270
- ></a>
468
+ href="https://twitter.com/msmakecode"
469
+ target="_blank"
470
+ rel="noreferrer"
471
+ onClick="window.pxtTickEvent('hourofcode2021.social.twitter')"
472
+ >
473
+ <i class="icon twitter"></i>
474
+ </a>
271
475
  <a
272
- class="
273
- tile
274
- background-papaya background-placeholder
275
- "
276
- ></a>
476
+ href="https://www.twitch.tv/msmakecode"
477
+ target="_blank"
478
+ rel="noreferrer"
479
+ onClick="window.pxtTickEvent('hourofcode2021.social.twitch')"
480
+ >
481
+ <i class="icon twitch"></i>
482
+ </a>
277
483
  <a
278
- class="
279
- tile
280
- background-marina background-placeholder
281
- "
282
- ></a>
484
+ href="https://www.tiktok.com/@msmakecode"
485
+ target="_blank"
486
+ rel="noreferrer"
487
+ onClick="window.pxtTickEvent('hourofcode2021.social.tiktok')"
488
+ >
489
+ <svg
490
+ aria-hidden="true"
491
+ focusable="false"
492
+ data-prefix="fab"
493
+ data-icon="tiktok"
494
+ class="svg-inline--fa fa-tiktok fa-w-14"
495
+ role="img"
496
+ xmlns="http://www.w3.org/2000/svg"
497
+ viewBox="0 0 448 512"
498
+ >
499
+ <path
500
+ d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"
501
+ ></path>
502
+ </svg>
503
+ </a>
283
504
  </div>
284
505
  </div>
285
506
  </section>
286
507
 
287
- <section class="hoc-section-01 hoc-section-03">
288
- <div class="section-text">
289
- <h3 class="title display-font sunflower">Section Title</h3>
508
+ <footer class="hoc-footer background-papaya">
509
+ <div class="code-org-trademark">
290
510
  <p>
291
- Lorem ipsum dolor sit amet, consectetuer adipiscing
292
- elit. Aenean commodo ligula eget dolor. Aenean massa.
293
- Cum sociis natoque penatibus et magnis dis parturient
294
- montes, nascetur ridiculus mus.
511
+ The '<a
512
+ href="http://hourofcode.com/"
513
+ target="_blank"
514
+ rel="noreferrer"
515
+ >Hour of Code™</a
516
+ >' is a nationwide initiative by
517
+ <a
518
+ href="http://csedweek.org/"
519
+ target="_blank"
520
+ rel="noreferrer"
521
+ >Computer Science Education Week</a
522
+ >
523
+ and
524
+ <a
525
+ href="http://code.org/"
526
+ target="_blank"
527
+ rel="noreferrer"
528
+ >Code.org</a
529
+ >
530
+ to introduce millions of students to one hour of
531
+ computer science and computer programming
295
532
  </p>
296
533
  </div>
297
- <a class="certificate">
298
- <div
299
- class="body background-marina background-placeholder"
300
- ></div>
301
- <div class="action background-sunflower">
302
- <h5 class="display-font">Button</h5>
303
- </div>
304
- </a>
305
- </section>
306
-
307
- <!-- TODO: Customize footer to include insiders club message -->
308
- <!-- @include footer.html -->
534
+ <div class="msft">
535
+ <img
536
+ src="/static/logo/Microsoft_logo_rgb_W-white_D.png"
537
+ alt="Microsoft"
538
+ />
539
+ </div>
540
+ <div class="text-content">
541
+ <a
542
+ href="https://www.microsoft.com/en-us/makecode/about"
543
+ target="_blank"
544
+ rel="noreferrer"
545
+ onClick="window.pxtTickEvent('hourofcode2021.footer.about')"
546
+ >Microsoft MakeCode</a
547
+ >
548
+ <a
549
+ href="https://www.microsoft.com/en-us/legal/terms-of-use"
550
+ target="_blank"
551
+ rel="noreferrer"
552
+ onClick="window.pxtTickEvent('hourofcode2021.footer.terms')"
553
+ >Terms of Use</a
554
+ >
555
+ <a
556
+ href="https://privacy.microsoft.com/en-us/privacystatement"
557
+ target="_blank"
558
+ rel="noreferrer"
559
+ onClick="window.pxtTickEvent('hourofcode2021.footer.privacy')"
560
+ >Privacy</a
561
+ >
562
+ </div>
563
+ </footer>
309
564
  </div>
310
565
 
311
566
  <!-- @include tracking.html -->