agb/website/site/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>agb - a rust framework for making Game Boy Advance games</title>
    <style>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }

      body {
        font: 1.2em/1.62 sans-serif;
        background-color: white;
        font-size: 1.5rem;
        line-height: 1.6;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        margin: 0;
      }

      h1,
      h2,
      h3 {
        line-height: 1.2;
      }

      .gameDisplay > div {
        display: flex;
        justify-content: center;
        height: 100%;
      }

      .gameDisplay {
        height: clamp(480px, 40vh, calc(100vw / 3));
        max-width: 100vw;
        margin-top: 20px;
        overflow: hidden;
      }

      .gameDisplay .imageWrapper {
        aspect-ratio: 15 / 31;
        height: 100%;
      }

      .gameDisplay .imageWrapper > img {
        height: 100%;
        image-rendering: pixelated;
      }

      .gameDisplay iframe {
        border: 0;
        height: 100%;
        max-width: 100vw;
        aspect-ratio: 240 / 160;
      }

      header,
      .desktopHelp {
        max-width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-block-end: 40px;
      }

      .red {
        background-color: #f5755e;
        flex-grow: 1;
      }

      .links {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: space-around;
        margin-top: 40px;
        margin-bottom: 40px;
        max-width: 40rem;
      }

      .links > a {
        text-decoration: none;
        color: black;
        background-color: #fad288;
        border: solid #fad288 2px;
        border-radius: 5px;
        padding: 5px 10px;
      }

      .links > a:hover {
        border: solid black 2px;
      }

      .mobileControls {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 40px;
      }

      .mobileControls img {
        image-rendering: pixelated;
        height: 100%;
      }

      .mobileControlsRow {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 40px;
      }

      @media (max-width: 800px) {
        .desktopHelp {
          display: none;
        }
        header,
        .desktopHelp {
          max-width: 90%;
        }
      }

      @media (min-width: 800px) {
        .mobileControls {
          display: none;
        }
      }

      .mobileControlsBig {
        height: calc(32px * 6);
      }

      .mobileControlsSmall {
        height: calc(32px * 3);
      }
    </style>
  </head>

  <body>
    <header>
      <h1>agb - a rust framework for making Game Boy Advance games</h1>
    </header>
    <section>
      <div class="gameDisplay">
        <div>
          <div class="imageWrapper"><img src="assets/left.png" /></div>
          <iframe
            id="gameFrame"
            onload="this.contentWindow.focus()"
            src="mgba/index.html#/assets/combo.gba"
          ></iframe>
          <div class="imageWrapper"><img src="assets/right.png" /></div>
        </div>
      </div>
      <div id="mobileControls" class="mobileControls">
        <div class="mobileControlsRow mobileControlsSmall">
          <img id="mobileL" src="assets/L.png" />
          <img id="mobileR" src="assets/R.png" />
        </div>
        <div class="mobileControlsRow mobileControlsBig">
          <img id="mobileDpad" src="assets/dpad.png" />
          <img id="mobileAb" src="assets/ab.png" />
        </div>
        <div class="mobileControlsRow mobileControlsSmall">
          <img id="mobileSelect" src="assets/SELECT.png" />
          <img id="mobileStart" src="assets/START.png" />
        </div>
        <div class="mobileControlsRow">
          <button id="mobileRestart">Restart</button>
        </div>
      </div>
      <div class="desktopHelp">
        <p>
          Press escape to open the menu where you can view or change controls
          and restart the game. The game provided is a combination of multiple
          Game Boy Advance games made using agb, you can press left or right on
          the main menu to switch game.
        </p>
      </div>
    </section>

    <section class="red">
      <div class="links">
        <a href="https://github.com/agbrs/agb">GitHub</a>
        <a href="book/">Book</a>
        <a href="https://docs.rs/agb/latest/agb/">Docs</a>
      </div>
    </section>

    <script>
      const addSimpleButton = (ele, key) => {
        ele.addEventListener("touchstart", (evt) => pressButton(key));
        ele.addEventListener("touchend", (evt) => releaseButton(key));
      };

      mobileRestart.addEventListener("click", () => {
        gameFrame.contentWindow.postMessage({ reset: true });
      });

      const pressButton = (key) => {
        gameFrame.contentWindow.postMessage({ isPressed: true, button: key });
      };

      const releaseButton = (key) => {
        gameFrame.contentWindow.postMessage({ isPressed: false, button: key });
      };

      mobileControls.addEventListener("touchmove", (evt) =>
        evt.preventDefault()
      );

      mobileControls.addEventListener("contextmenu", (evt) =>
        evt.preventDefault()
      );

      addSimpleButton(mobileL, "L");
      addSimpleButton(mobileR, "L");
      addSimpleButton(mobileStart, "Start");
      addSimpleButton(mobileSelect, "Select");

      let previouslyPressedButtons = new Set();

      const dpadMovement = (touch) => {
        const currentlyPressed = new Set();
        for (let touch of touches) {
          const target = touch.target.getBoundingClientRect();

          const touchPoint = { x: touch.clientX, y: touch.clientY };
          const targetArea = {
            x: target.left,
            y: target.top,
            width: target.width,
            height: target.height,
          };

          const relativePosition = {
            x: touchPoint.x - targetArea.x,
            y: touchPoint.y - targetArea.y,
          };

          const touchedBox = {
            x: Math.floor(relativePosition.x / (targetArea.width / 3)),
            y: Math.floor(relativePosition.y / (targetArea.height / 3)),
          };

          const buttonBoxMapping = [
            [["Up", "Left"], ["Up"], ["Up", "Right"]],
            [["Left"], [], ["Right"]],
            [["Down", "Left"], ["Down"], ["Down", "Right"]],
          ];

          const buttonsToPress =
            (buttonBoxMapping[touchedBox.y] ?? [])[touchedBox.x] ?? [];

          for (let button of buttonsToPress) {
            currentlyPressed.add(button);
          }
        }

        for (let oldButton of previouslyPressedButtons) {
          if (!buttonsToPress.has(oldButton)) {
            releaseButton(oldButton);
          }
        }

        for (let newButton of buttonsToPress) {
          if (!previouslyPressedButtons.has(newButton)) {
            pressButton(newButton);
          }
        }

        previouslyPressedButtons = buttonsToPress;
      };

      mobileDpad.addEventListener("touchstart", (evt) =>
        dpadMovement(evt.targetTouches)
      );

      mobileDpad.addEventListener("touchmove", (evt) =>
        dpadMovement(evt.targetTouches)
      );

      mobileDpad.addEventListener("touchend", (evt) => {
        dpadMovement(evt.targetTouches);
      });

      mobileDpad.addEventListener("touchcancel", (evt) => {
        dpadMovement(evt.targetTouches);
      });

      let mobileAbAPress = new Set();
      const mobileAbMovement = (touches) => {
        const currentTouches = new Set();
        for (let touch of touches) {
          const target = touch.target.getBoundingClientRect();

          const touchPoint = { x: touch.clientX, y: touch.clientY };
          const targetArea = {
            x: target.left,
            y: target.top,
            width: target.width,
            height: target.height,
          };

          const relativePosition = {
            x: touchPoint.x - targetArea.x,
            y: touchPoint.y - targetArea.y,
          };

          const aPress = relativePosition.x > relativePosition.y;
          currentTouches.add(aPress ? "A" : "B");
        }

        for (let oldTouch of mobileAbAPress) {
          if (!currentTouches.has(oldTouch)) {
            console.log("Release", oldTouch);
            releaseButton(oldTouch);
          }
        }

        for (let newTouch of currentTouches) {
          if (!mobileAbAPress.has(newTouch)) {
            console.log("Press", newTouch);
            pressButton(newTouch);
          }
        }
        mobileAbAPress = currentTouches;
      };

      mobileAb.addEventListener("touchstart", (evt) => {
        mobileAbMovement(evt.targetTouches);
      });

      mobileAb.addEventListener("touchmove", (evt) => {
        mobileAbMovement(evt.targetTouches);
      });

      mobileAb.addEventListener("touchend", (evt) => {
        mobileAbMovement(evt.targetTouches);
      });

      mobileAb.addEventListener("touchcancel", (evt) => {
        mobileAbMovement(evt.targetTouches);
      });
    </script>
  </body>
</html>
update site 2024-04-04 10:54:11 +11:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
update site 2024-04-04 10:54:11 +11:00			`<title>agb - a rust framework for making Game Boy Advance games</title>`
			`<style>`
			`*,`
			`*::before,`
			`*::after {`
			`box-sizing: border-box;`
			`}`

			`body {`
			`font: 1.2em/1.62 sans-serif;`
			`background-color: white;`
			`font-size: 1.5rem;`
			`line-height: 1.6;`
			`min-height: 100vh;`
			`display: flex;`
			`flex-direction: column;`
			`margin: 0;`
			`}`
finish adding mobile controls 2024-04-06 05:47:04 +11:00
update site 2024-04-04 10:54:11 +11:00			`h1,`
			`h2,`
			`h3 {`
			`line-height: 1.2;`
			`}`
finish adding mobile controls 2024-04-06 05:47:04 +11:00
update site 2024-04-04 10:54:11 +11:00			`.gameDisplay > div {`
			`display: flex;`
			`justify-content: center;`
			`height: 100%;`
			`}`

			`.gameDisplay {`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`height: clamp(480px, 40vh, calc(100vw / 3));`
update site 2024-04-04 10:54:11 +11:00			`max-width: 100vw;`
			`margin-top: 20px;`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`overflow: hidden;`
update site 2024-04-04 10:54:11 +11:00			`}`

clean up the edges 2024-04-05 03:46:11 +11:00			`.gameDisplay .imageWrapper {`
			`aspect-ratio: 15 / 31;`
update site 2024-04-04 10:54:11 +11:00			`height: 100%;`
			`}`

clean up the edges 2024-04-05 03:46:11 +11:00			`.gameDisplay .imageWrapper > img {`
update site 2024-04-04 10:54:11 +11:00			`height: 100%;`
			`image-rendering: pixelated;`
			`}`

clean up the edges 2024-04-05 03:46:11 +11:00			`.gameDisplay iframe {`
update site 2024-04-04 10:54:11 +11:00			`border: 0;`
			`height: 100%;`
			`max-width: 100vw;`
			`aspect-ratio: 240 / 160;`
			`}`

			`header,`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`.desktopHelp {`
update site 2024-04-04 10:54:11 +11:00			`max-width: 60%;`
			`margin-left: auto;`
			`margin-right: auto;`
			`margin-block-end: 40px;`
			`}`

			`.red {`
			`background-color: #f5755e;`
			`flex-grow: 1;`
			`}`

			`.links {`
			`margin-left: auto;`
			`margin-right: auto;`
			`display: flex;`
			`justify-content: space-around;`
			`margin-top: 40px;`
			`margin-bottom: 40px;`
			`max-width: 40rem;`
			`}`

			`.links > a {`
			`text-decoration: none;`
			`color: black;`
			`background-color: #fad288;`
			`border: solid #fad288 2px;`
			`border-radius: 5px;`
			`padding: 5px 10px;`
			`}`

			`.links > a:hover {`
			`border: solid black 2px;`
			`}`
finish adding mobile controls 2024-04-06 05:47:04 +11:00
			`.mobileControls {`
			`display: flex;`
			`gap: 10px;`
			`justify-content: center;`
			`align-items: center;`
			`flex-direction: column;`
			`margin-bottom: 40px;`
			`}`

			`.mobileControls img {`
			`image-rendering: pixelated;`
			`height: 100%;`
			`}`

			`.mobileControlsRow {`
			`display: flex;`
			`align-items: center;`
			`justify-content: center;`
			`gap: 40px;`
			`}`

			`@media (max-width: 800px) {`
			`.desktopHelp {`
			`display: none;`
			`}`
make wider on mobile 2024-04-06 08:23:35 +11:00			`header,`
			`.desktopHelp {`
we should be overwriting max width 2024-04-06 12:17:01 +11:00			`max-width: 90%;`
make wider on mobile 2024-04-06 08:23:35 +11:00			`}`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`}`

			`@media (min-width: 800px) {`
			`.mobileControls {`
			`display: none;`
			`}`
			`}`

			`.mobileControlsBig {`
			`height: calc(32px * 6);`
			`}`

			`.mobileControlsSmall {`
			`height: calc(32px * 3);`
			`}`
update site 2024-04-04 10:54:11 +11:00			`</style>`
			`</head>`
finish adding mobile controls 2024-04-06 05:47:04 +11:00
update site 2024-04-04 10:54:11 +11:00			`<body>`
			`<header>`
			`<h1>agb - a rust framework for making Game Boy Advance games</h1>`
			`</header>`
			`<section>`
			`<div class="gameDisplay">`
			`<div>`
clean up the edges 2024-04-05 03:46:11 +11:00			`<div class="imageWrapper"><img src="assets/left.png" /></div>`
update site 2024-04-04 10:54:11 +11:00			`<iframe`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`id="gameFrame"`
update site 2024-04-04 10:54:11 +11:00			`onload="this.contentWindow.focus()"`
load game based on path hash 2024-04-05 03:57:06 +11:00			`src="mgba/index.html#/assets/combo.gba"`
update site 2024-04-04 10:54:11 +11:00			`></iframe>`
clean up the edges 2024-04-05 03:46:11 +11:00			`<div class="imageWrapper"><img src="assets/right.png" /></div>`
update site 2024-04-04 10:54:11 +11:00			`</div>`
			`</div>`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`<div id="mobileControls" class="mobileControls">`
			`<div class="mobileControlsRow mobileControlsSmall">`
			`<img id="mobileL" src="assets/L.png" />`
			`<img id="mobileR" src="assets/R.png" />`
			`</div>`
			`<div class="mobileControlsRow mobileControlsBig">`
			`<img id="mobileDpad" src="assets/dpad.png" />`
			`<img id="mobileAb" src="assets/ab.png" />`
			`</div>`
			`<div class="mobileControlsRow mobileControlsSmall">`
			`<img id="mobileSelect" src="assets/SELECT.png" />`
swap start and select 2024-04-06 08:23:47 +11:00			`<img id="mobileStart" src="assets/START.png" />`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`</div>`
			`<div class="mobileControlsRow">`
			`<button id="mobileRestart">Restart</button>`
			`</div>`
			`</div>`
			`<div class="desktopHelp">`
update site 2024-04-04 10:54:11 +11:00			`<p>`
			`Press escape to open the menu where you can view or change controls`
			`and restart the game. The game provided is a combination of multiple`
			`Game Boy Advance games made using agb, you can press left or right on`
			`the main menu to switch game.`
			`</p>`
			`</div>`
			`</section>`

			`<section class="red">`
			`<div class="links">`
			`<a href="https://github.com/agbrs/agb">GitHub</a>`
add book 2024-04-04 11:07:10 +11:00			`<a href="book/">Book</a>`
add docs link 2024-04-06 05:53:38 +11:00			`<a href="https://docs.rs/agb/latest/agb/">Docs</a>`
update site 2024-04-04 10:54:11 +11:00			`</div>`
			`</section>`
finish adding mobile controls 2024-04-06 05:47:04 +11:00
			`<script>`
			`const addSimpleButton = (ele, key) => {`
			`ele.addEventListener("touchstart", (evt) => pressButton(key));`
			`ele.addEventListener("touchend", (evt) => releaseButton(key));`
			`};`

			`mobileRestart.addEventListener("click", () => {`
			`gameFrame.contentWindow.postMessage({ reset: true });`
			`});`

			`const pressButton = (key) => {`
			`gameFrame.contentWindow.postMessage({ isPressed: true, button: key });`
			`};`

			`const releaseButton = (key) => {`
			`gameFrame.contentWindow.postMessage({ isPressed: false, button: key });`
			`};`

			`mobileControls.addEventListener("touchmove", (evt) =>`
			`evt.preventDefault()`
			`);`

			`mobileControls.addEventListener("contextmenu", (evt) =>`
			`evt.preventDefault()`
			`);`

			`addSimpleButton(mobileL, "L");`
			`addSimpleButton(mobileR, "L");`
			`addSimpleButton(mobileStart, "Start");`
			`addSimpleButton(mobileSelect, "Select");`

handle multiple dpad touches 2024-04-06 12:14:15 +11:00			`let previouslyPressedButtons = new Set();`
finish adding mobile controls 2024-04-06 05:47:04 +11:00
			`const dpadMovement = (touch) => {`
handle multiple dpad touches 2024-04-06 12:14:15 +11:00			`const currentlyPressed = new Set();`
			`for (let touch of touches) {`
			`const target = touch.target.getBoundingClientRect();`

			`const touchPoint = { x: touch.clientX, y: touch.clientY };`
			`const targetArea = {`
			`x: target.left,`
			`y: target.top,`
			`width: target.width,`
			`height: target.height,`
			`};`

			`const relativePosition = {`
			`x: touchPoint.x - targetArea.x,`
			`y: touchPoint.y - targetArea.y,`
			`};`

			`const touchedBox = {`
			`x: Math.floor(relativePosition.x / (targetArea.width / 3)),`
			`y: Math.floor(relativePosition.y / (targetArea.height / 3)),`
			`};`

			`const buttonBoxMapping = [`
			`[["Up", "Left"], ["Up"], ["Up", "Right"]],`
			`[["Left"], [], ["Right"]],`
			`[["Down", "Left"], ["Down"], ["Down", "Right"]],`
			`];`

			`const buttonsToPress =`
			`(buttonBoxMapping[touchedBox.y] ?? [])[touchedBox.x] ?? [];`

			`for (let button of buttonsToPress) {`
			`currentlyPressed.add(button);`
			`}`
			`}`
finish adding mobile controls 2024-04-06 05:47:04 +11:00
			`for (let oldButton of previouslyPressedButtons) {`
handle multiple dpad touches 2024-04-06 12:14:15 +11:00			`if (!buttonsToPress.has(oldButton)) {`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`releaseButton(oldButton);`
			`}`
			`}`

			`for (let newButton of buttonsToPress) {`
handle multiple dpad touches 2024-04-06 12:14:15 +11:00			`if (!previouslyPressedButtons.has(newButton)) {`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`pressButton(newButton);`
			`}`
			`}`

			`previouslyPressedButtons = buttonsToPress;`
			`};`

			`mobileDpad.addEventListener("touchstart", (evt) =>`
handle multiple dpad touches 2024-04-06 12:14:15 +11:00			`dpadMovement(evt.targetTouches)`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`);`

			`mobileDpad.addEventListener("touchmove", (evt) =>`
handle multiple dpad touches 2024-04-06 12:14:15 +11:00			`dpadMovement(evt.targetTouches)`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`);`

			`mobileDpad.addEventListener("touchend", (evt) => {`
handle multiple dpad touches 2024-04-06 12:14:15 +11:00			`dpadMovement(evt.targetTouches);`
			`});`

			`mobileDpad.addEventListener("touchcancel", (evt) => {`
			`dpadMovement(evt.targetTouches);`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`});`

handle many button presses and fix to use targetTouches 2024-04-06 12:12:39 +11:00			`let mobileAbAPress = new Set();`
			`const mobileAbMovement = (touches) => {`
			`const currentTouches = new Set();`
			`for (let touch of touches) {`
			`const target = touch.target.getBoundingClientRect();`

			`const touchPoint = { x: touch.clientX, y: touch.clientY };`
			`const targetArea = {`
			`x: target.left,`
			`y: target.top,`
			`width: target.width,`
			`height: target.height,`
			`};`

			`const relativePosition = {`
			`x: touchPoint.x - targetArea.x,`
			`y: touchPoint.y - targetArea.y,`
			`};`

			`const aPress = relativePosition.x > relativePosition.y;`
			`currentTouches.add(aPress ? "A" : "B");`
			`}`
finish adding mobile controls 2024-04-06 05:47:04 +11:00
handle many button presses and fix to use targetTouches 2024-04-06 12:12:39 +11:00			`for (let oldTouch of mobileAbAPress) {`
			`if (!currentTouches.has(oldTouch)) {`
			`console.log("Release", oldTouch);`
			`releaseButton(oldTouch);`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`}`
			`}`

handle many button presses and fix to use targetTouches 2024-04-06 12:12:39 +11:00			`for (let newTouch of currentTouches) {`
			`if (!mobileAbAPress.has(newTouch)) {`
			`console.log("Press", newTouch);`
			`pressButton(newTouch);`
			`}`
			`}`
			`mobileAbAPress = currentTouches;`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`};`

handle many button presses and fix to use targetTouches 2024-04-06 12:12:39 +11:00			`mobileAb.addEventListener("touchstart", (evt) => {`
			`mobileAbMovement(evt.targetTouches);`
			`});`
finish adding mobile controls 2024-04-06 05:47:04 +11:00
handle many button presses and fix to use targetTouches 2024-04-06 12:12:39 +11:00			`mobileAb.addEventListener("touchmove", (evt) => {`
			`mobileAbMovement(evt.targetTouches);`
			`});`
finish adding mobile controls 2024-04-06 05:47:04 +11:00
			`mobileAb.addEventListener("touchend", (evt) => {`
handle many button presses and fix to use targetTouches 2024-04-06 12:12:39 +11:00			`mobileAbMovement(evt.targetTouches);`
			`});`
finish adding mobile controls 2024-04-06 05:47:04 +11:00
handle many button presses and fix to use targetTouches 2024-04-06 12:12:39 +11:00			`mobileAb.addEventListener("touchcancel", (evt) => {`
			`mobileAbMovement(evt.targetTouches);`
finish adding mobile controls 2024-04-06 05:47:04 +11:00			`});`
			`</script>`
update site 2024-04-04 10:54:11 +11:00			`</body>`
			`</html>`