.public/index.html

<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      @font-face {
        font-family: 'DotGothic';
        src: url('/assets/DotGothic16-Regular.ttf');
      }
      html, body {
        padding: 0px;
        margin: 0px;
        touch-action: none;
      }
      body {
        z-index: 1;
        font-family: 'DotGothic', sans-serif;
      }
			canvas {
        position: absolute;
				width: 100% !important;
				height: 100% !important;
        z-index: 2;
			}
      #buttons {
        position: absolute;
        z-index: 3;
        width: 100%;
      }
      .button {
        display: block;
        float: left;
        border-style: solid;
        border-width: 2px;
        border-color: black;
        font-size: 50px;
        text-align: center;
        display: inline-block;
        font-family: 'DotGothic', sans-serif;
        margin: 0px 0px;
        padding: 0px 4px;
        height: 128px;
        line-height: 128px;
      }
      .button:hover {
        border-color: white !important;
      }
      .button:active {
        background-color: white !important;
      }
      #message, #alert {
        font-size: 2.7em;
      }
      #name {
        font-size: 2.7em;
        width: 30%;
        height: 132px;
        font-size: 50px;
        font-family: 'DotGothic', sans-serif;
      }
      #about {
        display: block;
        float: left;
        border-style: solid;
        border-width: 2px;
        border-color: black;
        width: 128px;
        height: 128px;
        background-image: url('/logo.png');
        background-size: contain;
      }
      #random, #room {
        background-color: #99ee77;
      }
      #share {
        background-color: #7799ee;
      }
    </style>
  </head>

  <body>
		<div id="iphone">
			<p>If you're using Safari on iPhone, please google how to enable WebGL2.0 on iPhone.</p>
			<p>iPhoneのSafariをお使いの方は、「iPhoneでWebGL2.0を有効にする方法」でググってください。</p>
		</div>
    <div id="buttons">
      <a id="about" href="https://hihaheho.com/hug"></a>
      <a class="button" id="random">Random</a>
      <a class="button" id="room">Invite</a>
      <a class="button" id="share">Share</a>
      <input id="name" type="text" placeholder="Name" />
      <p id="message"></p>
      <p id="alert"></p>
    </div>
  </body>

  <script type="module">
    import init, {
      on_output, on_name_change, on_click_random, on_click_room, on_click_share,
    } from './hug.js'
    import { Socket } from "./phoenix.esm.js"

    let socket;
    let params = new URLSearchParams(window.location.search);
    if (params.get("local")) {
      socket = new Socket("ws://localhost:4000/socket", {params: {}})
    } else {
      socket = new Socket("wss://server2.hug.hihaheho.com/socket", {params: {}})
    }
    socket.connect()
    let channel = socket.channel("player", {})
    channel.join()
      .receive("ok", resp => { console.log("Joined successfully", resp) })
      .receive("error", resp => { console.log("Unable to join", resp) })

    // register event handlers for input/output.
    document.push = payload => channel.push("input", JSON.parse(payload));
    channel.on("output", payload => {
      on_output(JSON.stringify(payload))
    });

    // join room by key
    if (params.get("key")) {
      window.localStorage.setItem("key", params.get("key"));
    } else {
      window.localStorage.removeItem("key");
    }

    let name = window.localStorage.getItem("name");
    if (name) {
      document.querySelector("#name").value = name;
    }

    document.on_load = () => {
      if (name) {
        on_name_change(name)
      }
      document.querySelector("#random").onclick = () => on_click_random();
      document.querySelector("#room").onclick = () => on_click_room();
      document.querySelector("#share").onclick = () => on_click_share();
      document.querySelector("#name").oninput = (event) => {
        window.localStorage.setItem("name", event.target.value);
        on_name_change(event.target.value);
      }
    }

    // https://stackoverflow.com/questions/7995752/detect-desktop-browser-not-mobile-with-javascript#comment106045591_16156769
    document.is_mobile = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    document.is_iphone = navigator.platform == 'iPhone' || (navigator.userAgent.indexOf('Mac') != -1 && window.is_mobile);

    document.querySelector("#name").focus

    // If key pressed and not focused on the name input, then focus the canvas.
    let name_focus = false;
    let name_input = document.querySelector("#name");
    name_input.addEventListener("blur", () => {name_focus = false});
    name_input.addEventListener("focus", () => {name_focus = true});
    window.onkeypress = (event) => {
      console.log(event);
      let canvas = document.querySelector("canvas");
      if (canvas && !name_focus) {
        canvas.focus()
      }
    };

    init()
  </script>
</html>