@gjsify/example-dom-excalibur-jelly-jumper 0.1.9

package/LICENSE

@@ -0,0 +1,25 @@
+BSD 2-Clause License
+
+Copyright (c) 2023, Excalibur.js
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,46 @@
+# Jelly Jumper — Excalibur.js Showcase
+
+2D platformer showcase using [Excalibur.js](https://excaliburjs.com/) 0.32.0 with Tiled tilemaps, running natively on GJS/GTK4 and in the browser via gjsify.
+
+Physics settings inspired by Super Mario World.
+
+Based on the original [sample-jelly-jumper](https://github.com/excaliburjs/sample-jelly-jumper) by the Excalibur.js team.
+
+![jelly jumper sample](./jelly-jumper.gif)
+
+## Setup
+
+```bash
+yarn install
+yarn build
+```
+
+## Run
+
+```bash
+# GJS/GTK4 native
+yarn start
+
+# Browser
+yarn start:browser
+```
+
+## Controls
+
+| Action | Keyboard | Gamepad |
+|--------|----------|---------|
+| Move   | Arrow keys | Left stick |
+| Run    | S | B button |
+| Jump   | A | A button |
+
+## Credits
+
+Super Mango asset pack by [JuhoSprite](https://juhosprite.itch.io/super-mango-2d-pixelart-platformer-asset-pack16x16)
+
+Smoke FX by [@nyk_nck](https://nyknck.itch.io/fx062)
+
+Music & SFX by [Subspace Audio](https://opengameart.org/users/subspaceaudio)
+
+## License
+
+MIT — see [LICENSE](./LICENSE)

package/dist/browser.css

@@ -0,0 +1,505 @@
+/* ../../../packages/web/adwaita-fonts/400.css */
+@font-face {
+  font-family: "Adwaita Sans";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url("./adwaita-sans-400-VCQV646T.ttf") format("truetype");
+}
+
+/* ../../../packages/web/adwaita-fonts/index.css */
+
+/* ../../../packages/web/adwaita-web/dist/adwaita-web.css */
+:root {
+  --icon-edit-paste: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%207%200%20c%20-0.554688%200%20-1%200.445312%20-1%201%20h%20-2%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%209%20c%200%201.644531%201.355469%203%203%203%20h%208%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-9%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20h%20-2%20c%200%20-0.554688%20-0.445312%20-1%20-1%20-1%20z%20m%20-3%203%20h%201%20v%201%20c%200%200.554688%200.445312%201%201%201%20h%204%20c%200.554688%200%201%20-0.445312%201%20-1%20v%20-1%20h%201%20c%200.570312%200%201%200.429688%201%201%20v%209%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-8%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-9%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
+  --icon-go-down: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%201%205%20c%200%20-0.265625%200.105469%20-0.519531%200.292969%20-0.707031%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20l%205.292969%205.292969%20l%205.292969%20-5.292969%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20c%200.1875%200.1875%200.292969%200.441406%200.292969%200.707031%20s%20-0.105469%200.519531%20-0.292969%200.707031%20l%20-6%206%20c%20-0.390625%200.390625%20-1.023437%200.390625%20-1.414062%200%20l%20-6%20-6%20c%20-0.1875%20-0.1875%20-0.292969%20-0.441406%20-0.292969%20-0.707031%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
+  --icon-sidebar-show: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cg%20fill%3D'currentColor'%3E%20%3Cpath%20d%3D'm%206%2013%20v%20-10%20h%20-3%20c%20-0.550781%200%20-1%200.449219%20-1%201%20v%208%20c%200%200.550781%200.449219%201%201%201%20z%20m%200%200'%20fill-opacity%3D'0.34902'%2F%3E%20%3Cpath%20d%3D'm%203%201%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%208%20c%200%201.644531%201.355469%203%203%203%20h%2010%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-8%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20z%20m%200%202%20h%203%20v%2010%20h%20-3%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-8%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%204%200%20h%206%20c%200.570312%200%201%200.429688%201%201%20v%208%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-6%20z%20m%200%200'%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
+}
+:root {
+  --window-bg-color: #fafafb;
+  --window-fg-color: rgba(0, 0, 6, 0.8);
+  --view-bg-color: #ffffff;
+  --view-fg-color: rgba(0, 0, 6, 0.8);
+  --headerbar-bg-color: #ffffff;
+  --headerbar-fg-color: rgba(0, 0, 6, 0.8);
+  --headerbar-shade-color: rgba(0, 0, 6, 0.12);
+  --sidebar-bg-color: #ebebed;
+  --card-bg-color: #ffffff;
+  --card-fg-color: rgba(0, 0, 6, 0.8);
+  --card-shade-color: rgba(0, 0, 6, 0.07);
+  --accent-bg-color: #3584e4;
+  --accent-fg-color: #ffffff;
+  --accent-color: #1c71d8;
+  --switch-off-bg: rgba(0, 0, 0, 0.2);
+  --switch-knob-bg: #ffffff;
+  --window-radius: 15px;
+  --card-radius: 12px;
+  --button-radius: 9px;
+  --spacing-xs: 6px;
+  --spacing-s: 9px;
+  --spacing-m: 12px;
+  --spacing-l: 18px;
+  --spacing-xl: 24px;
+  --font-family:
+    "Adwaita Sans",
+    "Cantarell",
+    "Inter",
+    "Segoe UI",
+    sans-serif;
+  --font-size-base: 11pt;
+  --font-size-small: 9pt;
+  --font-size-heading: 12pt;
+  --dim-opacity: 0.55;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not(.theme-light) {
+    --window-bg-color: #222226;
+    --window-fg-color: #ffffff;
+    --view-bg-color: #1d1d20;
+    --view-fg-color: #ffffff;
+    --headerbar-bg-color: #2e2e32;
+    --headerbar-fg-color: #ffffff;
+    --headerbar-shade-color: rgba(0, 0, 6, 0.36);
+    --sidebar-bg-color: #2e2e32;
+    --card-bg-color: rgba(255, 255, 255, 0.08);
+    --card-fg-color: #ffffff;
+    --card-shade-color: rgba(0, 0, 6, 0.36);
+    --accent-color: #78aeed;
+    --switch-off-bg: rgba(255, 255, 255, 0.2);
+    --switch-knob-bg: #deddda;
+  }
+}
+:root.theme-dark {
+  --window-bg-color: #222226;
+  --window-fg-color: #ffffff;
+  --view-bg-color: #1d1d20;
+  --view-fg-color: #ffffff;
+  --headerbar-bg-color: #2e2e32;
+  --headerbar-fg-color: #ffffff;
+  --headerbar-shade-color: rgba(0, 0, 6, 0.36);
+  --sidebar-bg-color: #2e2e32;
+  --card-bg-color: rgba(255, 255, 255, 0.08);
+  --card-fg-color: #ffffff;
+  --card-shade-color: rgba(0, 0, 6, 0.36);
+  --accent-color: #78aeed;
+  --switch-off-bg: rgba(255, 255, 255, 0.2);
+  --switch-knob-bg: #deddda;
+}
+adw-window {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  border-radius: var(--window-radius);
+  box-shadow:
+    0 0 14px 5px rgba(0, 0, 0, 0.15),
+    0 0 5px 2px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  outline: 1px solid rgba(255, 255, 255, 0.07);
+  outline-offset: -1px;
+}
+adw-header-bar {
+  display: flex;
+  align-items: center;
+  min-height: 47px;
+  padding: 0 6px;
+  background-color: var(--headerbar-bg-color);
+  color: var(--headerbar-fg-color);
+  box-shadow: inset 0 -1px var(--headerbar-shade-color);
+  flex-shrink: 0;
+}
+adw-header-bar .adw-header-bar-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+adw-header-bar .adw-header-bar-title {
+  font-weight: bold;
+  font-size: var(--font-size-base);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+adw-header-bar .adw-header-bar-start {
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+  gap: 4px;
+}
+adw-header-bar .adw-header-bar-end {
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+  gap: 4px;
+}
+adw-header-bar .adw-header-btn {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  border: none;
+  border-radius: var(--button-radius);
+  background: transparent;
+  color: var(--headerbar-fg-color);
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  flex-shrink: 0;
+}
+adw-header-bar .adw-header-btn:hover {
+  background: rgba(128, 128, 128, 0.12);
+}
+adw-header-bar .adw-header-btn:active {
+  background: rgba(128, 128, 128, 0.22);
+}
+adw-preferences-group {
+  display: block;
+}
+adw-preferences-group .adw-preferences-group-header {
+  padding: var(--spacing-xs) 2px;
+}
+adw-preferences-group .adw-preferences-group-title {
+  font-size: var(--font-size-small);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: var(--dim-opacity);
+  margin: 0;
+  color: var(--window-fg-color);
+}
+adw-preferences-group .adw-preferences-group-listbox {
+  background-color: var(--card-bg-color);
+  color: var(--card-fg-color);
+  border-radius: var(--card-radius);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 6, 0.03),
+    0 1px 3px 1px rgba(0, 0, 6, 0.07),
+    0 2px 6px 2px rgba(0, 0, 6, 0.03);
+  overflow: hidden;
+}
+adw-card,
+.adw-card {
+  display: block;
+  background-color: var(--card-bg-color);
+  color: var(--card-fg-color);
+  border-radius: var(--card-radius);
+  padding: var(--spacing-l);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 6, 0.03),
+    0 1px 3px 1px rgba(0, 0, 6, 0.07),
+    0 2px 6px 2px rgba(0, 0, 6, 0.03);
+  overflow: hidden;
+}
+adw-switch-row,
+adw-combo-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 50px;
+  padding: var(--spacing-s) var(--spacing-m);
+  gap: var(--spacing-m);
+  border-bottom: 1px solid var(--card-shade-color);
+}
+adw-switch-row:last-child,
+adw-combo-row:last-child {
+  border-bottom: none;
+}
+.adw-separator-vertical {
+  width: 1px;
+  align-self: stretch;
+  background-color: var(--card-shade-color);
+  flex-shrink: 0;
+}
+adw-switch-row .adw-row-title {
+  flex: 1;
+  font-size: var(--font-size-base);
+  color: var(--card-fg-color);
+}
+adw-switch-row .adw-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  flex-shrink: 0;
+}
+adw-switch-row .adw-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+adw-switch-row .adw-switch-slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: var(--switch-off-bg);
+  border-radius: 12px;
+  transition: background-color 0.15s ease-out;
+}
+adw-switch-row .adw-switch-slider::before {
+  content: "";
+  position: absolute;
+  height: 20px;
+  width: 20px;
+  left: 2px;
+  bottom: 2px;
+  background-color: var(--switch-knob-bg);
+  border-radius: 50%;
+  transition: transform 0.15s ease-out;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+adw-switch-row .adw-switch input:checked + .adw-switch-slider {
+  background-color: var(--accent-bg-color);
+}
+adw-switch-row .adw-switch input:checked + .adw-switch-slider::before {
+  transform: translateX(20px);
+}
+adw-switch-row .adw-switch input:focus-visible + .adw-switch-slider {
+  outline: 2px solid var(--accent-color);
+  outline-offset: 2px;
+}
+adw-combo-row {
+  position: relative;
+  cursor: pointer;
+}
+adw-combo-row .adw-row-title {
+  font-size: var(--font-size-base);
+  color: var(--card-fg-color);
+  pointer-events: none;
+}
+adw-combo-row select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: transparent;
+  border: none;
+  padding: 6px 24px 6px 8px;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  color: var(--card-fg-color);
+  cursor: pointer;
+  text-align: right;
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+adw-combo-row select:focus-visible {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -1px;
+}
+adw-combo-row select option {
+  background-color: var(--window-bg-color);
+  color: var(--window-fg-color);
+}
+adw-combo-row .adw-row-value {
+  font-size: var(--font-size-base);
+  color: var(--card-fg-color);
+  opacity: var(--dim-opacity);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+adw-combo-row .adw-row-value::after {
+  content: "";
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background-color: currentColor;
+  -webkit-mask-image: var(--icon-go-down);
+  mask-image: var(--icon-go-down);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+adw-spin-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 50px;
+  padding: var(--spacing-s) var(--spacing-m);
+  gap: var(--spacing-m);
+  border-bottom: 1px solid var(--card-shade-color);
+}
+adw-spin-row:last-child {
+  border-bottom: none;
+}
+adw-spin-row .adw-row-title {
+  flex: 1;
+  font-size: var(--font-size-base);
+  color: var(--card-fg-color);
+}
+.adw-spin-control {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.adw-spin-control button {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--button-radius);
+  background: transparent;
+  color: var(--card-fg-color);
+  cursor: pointer;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.adw-spin-control button:hover {
+  background: rgba(128, 128, 128, 0.15);
+}
+.adw-spin-control input {
+  width: 56px;
+  text-align: center;
+  border: none;
+  border-radius: var(--button-radius);
+  background: rgba(128, 128, 128, 0.1);
+  color: var(--card-fg-color);
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  padding: 4px 2px;
+}
+.adw-spin-control input:focus {
+  outline: 2px solid var(--accent-color);
+  outline-offset: -1px;
+}
+adw-toast-overlay {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 9px;
+  align-items: center;
+  pointer-events: none;
+}
+.adw-toast {
+  background-color: #3d3846;
+  color: #ffffff;
+  padding: 9px 12px;
+  border-radius: var(--card-radius);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: max-content;
+  max-width: 400px;
+  min-height: 36px;
+  pointer-events: auto;
+  font-family: var(--font-family);
+  font-size: var(--font-size-base);
+  opacity: 0;
+  transform: translateY(100%) scale(0.9);
+  transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1);
+  will-change: transform, opacity;
+}
+.adw-toast.visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+.adw-toast.hiding {
+  opacity: 0;
+  transform: translateY(100%) scale(0.9);
+  transition-duration: 0.15s;
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+.adw-toast .adw-toast-title {
+  font-weight: normal;
+  line-height: 1.3;
+}
+adw-overlay-split-view {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+}
+adw-overlay-split-view .adw-osv-sidebar {
+  background-color: var(--sidebar-bg-color);
+  overflow-y: auto;
+  flex-shrink: 0;
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease,
+    margin 0.2s ease;
+  z-index: 10;
+  align-self: stretch;
+}
+adw-overlay-split-view .adw-osv-content {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+}
+adw-overlay-split-view:not(.collapsed) .adw-osv-sidebar {
+  position: relative;
+}
+adw-overlay-split-view:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
+  transform: translateX(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+adw-overlay-split-view.collapsed .adw-osv-sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+adw-overlay-split-view.collapsed.sidebar-end .adw-osv-sidebar {
+  left: auto;
+  right: 0;
+  transform: translateX(100%);
+}
+adw-overlay-split-view.collapsed.show-sidebar .adw-osv-sidebar {
+  transform: translateX(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+adw-overlay-split-view .adw-osv-backdrop {
+  display: none;
+}
+adw-overlay-split-view.collapsed.show-sidebar .adw-osv-backdrop {
+  display: block;
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 9;
+}
+.adw-sidebar-content {
+  padding: var(--spacing-m);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-m);
+}
+.adw-sidebar-toggle-icon::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: currentColor;
+  -webkit-mask-image: var(--icon-sidebar-show);
+  mask-image: var(--icon-sidebar-show);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 16px 16px;
+  mask-size: 16px 16px;
+  -webkit-mask-position: center;
+  mask-position: center;
+  pointer-events: none;
+}