pxt-arcade 1.10.19 → 1.10.20

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 (6) hide show
  1. package/built/sim.js +27 -13
  2. package/built/target.js +71 -71
  3. package/built/target.json +71 -71
  4. package/built/targetlight.json +4 -4
  5. package/docs/ide-tour.md +11 -9
  6. package/package.json +2 -2
package/built/sim.js CHANGED
@@ -153,6 +153,21 @@ var pxsim;
153
153
  var pxsim;
154
154
  (function (pxsim) {
155
155
  let forcedUpdateLoop;
156
+ window.addEventListener("DOMContentLoaded", () => {
157
+ const searchParams = new URL(window.location.toString()).searchParams;
158
+ setSimThemeColor("background-color", searchParams.get("background-color"));
159
+ setSimThemeColor("button-stroke", searchParams.get("button-stroke"));
160
+ setSimThemeColor("text-color", searchParams.get("text-color"));
161
+ setSimThemeColor("button-fill", searchParams.get("button-fill"));
162
+ });
163
+ function setSimThemeColor(part, color) {
164
+ if (!part || !color || !/^[0-9A-F]{6}$/i.test(color))
165
+ return;
166
+ const propName = `--sim-${part}`;
167
+ const propColor = `#${color}`;
168
+ const wrapper = document.getElementById("wrap");
169
+ wrapper.style.setProperty(propName, propColor);
170
+ }
156
171
  /**
157
172
  * This function gets called each time the program restarts
158
173
  */
@@ -514,9 +529,9 @@ var pxsim;
514
529
  // <button class="share-mod-button">Share</button>
515
530
  // </div>
516
531
  // <svg xmlns="http://www.w3.org/2000/svg" class="game-button-svg" viewBox="0 0 40 40" width="200px" height="200px">
517
- // <circle class="button-b" cx="13" cy="28" r="9" fill="#333" stroke="#397382" strokeWidth="2.5" />
532
+ // <circle class="button-b" cx="13" cy="28" r="9" fill="var(--sim-button-fill)" stroke="var(--sim-button-stroke)" strokeWidth="2.5" />
518
533
  // <text class="label-b" x="13" y="28" textAnchor="middle" dy="2.5" fontSize="8">B</text>
519
- // <circle class="button-a" cx="28" cy="11" r="9" fill="#333" stroke="#397382" strokeWidth="2.5" />
534
+ // <circle class="button-a" cx="28" cy="11" r="9" fill="var(--sim-button-fill)" stroke="var(--sim-button-stroke)" strokeWidth="2.5" />
520
535
  // <text class="label-a" x="28" y="11" textAnchor="middle" dy="2.5" fontSize="8">A</text>
521
536
  // </svg>
522
537
  // </div>
@@ -587,9 +602,8 @@ var pxsim;
587
602
  const circle = isAButton ? this.aButton : this.bButton;
588
603
  const label = isAButton ? this.aLabel : this.bLabel;
589
604
  if (circle && label) {
590
- const pressedColor = "#249ca3";
591
- circle.setAttribute("fill", pressed ? pressedColor : "#333");
592
- label.setAttribute("fill", pressed ? "#333" : "");
605
+ circle.setAttribute("fill", pressed ? "var(--sim-background-color)" : "var(--sim-button-fill)");
606
+ label.setAttribute("fill", pressed ? "var(--sim-button-fill)" : "");
593
607
  }
594
608
  if (!quiet) {
595
609
  if (pressed) {
@@ -827,13 +841,13 @@ var pxsim;
827
841
  // <button class="share-mod-button">Mod</button>
828
842
  // </div>
829
843
  // <svg xmlns="http://www.w3.org/2000/svg" class="game-joystick-svg" viewBox="1 0 40 40" width="200px" height="200px">
830
- // <circle class="joystick-background" cx="20" cy="20" r="16" fill="#397382" stroke="#397382" strokeWidth="2"/>
831
- // <rect class="dpad-up" x="16" y="6" width="8" height="12" rx="2" fill="#cecece" stroke="none" strokeWidth="1" />
832
- // <rect class="dpad-down" x="16" y="22" width="8" height="12" rx="2" fill="#cecece" stroke="none" strokeWidth="1" />
833
- // <rect class="dpad-right" x="22" y="16" width="12" height="8" ry="2" fill="#cecece" stroke="none" strokeWidth="1" />
834
- // <rect class="dpad-left" x="6" y="16" width="12" height="8" ry="2" fill="#cecece" stroke="none" strokeWidth="1" />
835
- // <circle cx="20" cy="20" r="6" fill="#cecece" />
836
- // <circle class="joystick-handle" cx="20" cy="20" r="6" fill="#333" stroke="#999" strokeWidth="2" />
844
+ // <circle class="joystick-background" cx="20" cy="20" r="16" fill="var(--sim-button-stroke)" stroke="var(--sim-button-stroke)" strokeWidth="2"/>
845
+ // <rect class="dpad-up" x="16" y="6" width="8" height="12" rx="2" fill="var(--sim-text-color)" stroke="none" strokeWidth="1" />
846
+ // <rect class="dpad-down" x="16" y="22" width="8" height="12" rx="2" fill="var(--sim-text-color)" stroke="none" strokeWidth="1" />
847
+ // <rect class="dpad-right" x="22" y="16" width="12" height="8" ry="2" fill="var(--sim-text-color)" stroke="none" strokeWidth="1" />
848
+ // <rect class="dpad-left" x="6" y="16" width="12" height="8" ry="2" fill="var(--sim-text-color)" stroke="none" strokeWidth="1" />
849
+ // <circle cx="20" cy="20" r="6" fill="var(--sim-text-color)" />
850
+ // <circle class="joystick-handle" cx="20" cy="20" r="6" fill="var(--sim-button-fill)" stroke="#999" strokeWidth="2" />
837
851
  // </svg>
838
852
  // </div>
839
853
  constructor(container) {
@@ -895,7 +909,7 @@ var pxsim;
895
909
  }
896
910
  updateDirection(button, isPressed) {
897
911
  if (button) {
898
- button.setAttribute("fill", isPressed ? "#249ca3" : "#cecece");
912
+ button.setAttribute("fill", isPressed ? "var(--sim-background-color)" : "var(--sim-text-color)");
899
913
  }
900
914
  }
901
915
  bindEvents(surface) {