Start responsive, degrade gracefully

Author: randomairborne

assets/ping.js

@@ -0,0 +1,8 @@
+const frame = document.getElementById("response-fake-frame");
+
+async function load() {
+  const req = await fetch(frame.dataset.src);
+  frame.innerHTML = await req.text();
+}
+
+load().then(() => {});

src/main.rs

@@ -80,6 +80,7 @@ async fn main() {
         .route_with_tsr("/ping/:edition/:hostname", get(ping_page))
         .route("/ping/redirect", get(ping_redirect))
         .route("/internal/ping-frame/:edition/:hostname", get(ping_frame))
+        .route("/internal/ping-markup/:edition/:hostname", get(ping_markup))
         .route("/api/:address", get(handle_java_ping))
         .route("/api/java/:address", get(handle_java_ping))
         .route("/api/bedrock/:address", get(handle_bedrock_ping))
@@ -110,6 +111,7 @@ static CACHE_CONTROL_AGE: HeaderValue = HeaderValue::from_static("s-maxage=30");
 
 static CSP_VALUE: HeaderValue = HeaderValue::from_static(
     "default-src 'self'; \
+    frame-src 'self'; \
     img-src 'self' data:; \
     connect-src 'self' https://v4.giveip.io; \
     script-src 'self' https://static.cloudflareinsights.com; \
@@ -194,17 +196,11 @@ async fn ping_page(
     })
 }
 
-#[derive(Template)]
-#[template(path = "ping-frame.html")]
-pub struct PingFrameTemplate {
-    ping: MCPingResponse,
-    root_url: String,
-}
-
-async fn ping_frame(
-    State(state): State<AppState>,
-    Path((edition, hostname)): Path<(String, String)>,
-) -> Result<PingFrameTemplate, ErrorTemplate> {
+async fn ping_generic(
+    edition: String,
+    hostname: String,
+    state: &AppState,
+) -> Result<MCPingResponse, ErrorTemplate> {
     let ping = match edition.as_str() {
         "java" => ping_java(hostname).await,
         "bedrock" => ping_bedrock(hostname).await,
@@ -219,12 +215,45 @@ async fn ping_frame(
         Ok(v) => v,
         Err(e) => return Err(ErrorTemplate::from_failure(&e, &state)),
     };
+    Ok(ping)
+}
+
+#[derive(Template)]
+#[template(path = "ping-frame.html")]
+pub struct PingFrameTemplate {
+    ping: MCPingResponse,
+    root_url: String,
+}
+
+async fn ping_frame(
+    State(state): State<AppState>,
+    Path((edition, hostname)): Path<(String, String)>,
+) -> Result<PingFrameTemplate, ErrorTemplate> {
+    let ping = ping_generic(edition, hostname, &state).await?;
     Ok(PingFrameTemplate {
         ping,
         root_url: state.root_url.to_string(),
     })
 }
 
+#[derive(Template)]
+#[template(path = "ping-element.html")]
+pub struct PingElementTemplate {
+    ping: MCPingResponse,
+    root_url: String,
+}
+
+async fn ping_markup(
+    State(state): State<AppState>,
+    Path((edition, hostname)): Path<(String, String)>,
+) -> Result<PingElementTemplate, ErrorTemplate> {
+    let ping = ping_generic(edition, hostname, &state).await?;
+    Ok(PingElementTemplate {
+        ping,
+        root_url: state.root_url.to_string(),
+    })
+}
+
 #[derive(Template)]
 #[template(path = "api.html")]
 pub struct ApiTemplate {

templates/ping-element.html

@@ -0,0 +1,27 @@
+{% let icon %}
+{% match ping.icon %}
+{% when Some with (raw_icon) %}
+{% let icon = "{}"|format(raw_icon) %}
+{% when None %}
+{% let icon = "{}/icon.png"|format(root_url) %}
+{% endmatch %}
+<div class="server-response">
+  <div class="server-response-stack">
+    <img
+      id="server-favicon"
+      height="256"
+      width="256"
+      alt="The pixel-art icon for this server."
+      src="{{ icon }}"
+    />
+    <div class="small-vspacer"></div>
+    <span class="server-online">Server online!</span>
+    <div id="server-latency">Ping: {{ ping.latency }}ms</div>
+    <div id="server-players">
+      Players: {{ ping.players.online }} / {{ ping.players.maximum }}
+    </div>
+    <div id="server-version">Version: {{ ping.version.broadcast }}</div>
+    <div id="server-motd">{{ ping.motd|mojang_colorize|safe }}</div>
+  </div>
+  <div class="small-vspacer"></div>
+</div>

templates/ping-frame.html

@@ -3,30 +3,5 @@
   mcping - internal iframe
 {% endblock description %}
 {% block body %}
-  {% let icon %}
-  {% match ping.icon %}
-    {% when Some with (raw_icon) %}
-    {% let icon = "{}"|format(raw_icon) %}
-    {% when None %}
-    {% let icon = "{}/icon.png"|format(root_url) %}
-  {% endmatch %}
-  <div class="server-response" id="server-response">
-    <div class="server-response-stack">
-      <img
-        id="server-favicon"
-        height="256"
-        width="256"
-        alt="The pixel-art icon for this server."
-        src="{{ icon }}"
-      />
-      <div class="small-vspacer"></div>
-      <span class="server-online">Server online!</span>
-      <div id="server-latency">Ping: {{ ping.latency }}ms</div>
-      <div id="server-players">
-        Players: {{ ping.players.online }} / {{ ping.players.maximum }}
-      </div>
-      <div id="server-version">Version: {{ ping.version.broadcast }}</div>
-      <div id="server-motd">{{ ping.motd|mojang_colorize|safe }}</div>
-    </div>
-  </div>
+  {% include "ping-element.html" %}
 {% endblock %}

templates/ping-page.html

@@ -1,18 +1,27 @@
 {% extends "base.html" %}
 {% block description %}
-  mcping - ping {{ hostname }}
+mcping - ping {{ hostname }}
 {% endblock description %}
 {% block body %}
-  <div class="server-response" id="server-response">
-    <div class="server-response-stack">
-      <h1>Pinging <code>{{ hostname }}</code></h1>
+<div class="server-response">
+  <div class="server-response-stack">
+    <h1>Pinging <code>{{ hostname }}</code></h1>
+    <noscript>
       <iframe
         class="ping-frame"
         src="{{ root_url }}/internal/ping-frame/{{ edition }}/{{ hostname }}"
       ></iframe>
-      {% include "ping-form.html" %}
-    </div>
+    </noscript>
+    <div
+      id="response-fake-frame"
+      class="server-response-stack"
+      data-src="{{ root_url }}/internal/ping-markup/{{ edition }}/{{ hostname }}"
+    ></div>
+    <h2>Ping another?</h2>
+    {% include "ping-form.html" %}
   </div>
-  <div class="vspacer"></div>
-  {% include "api-status.html" %}
+</div>
+<script src="{{ root_url }}/ping.js"></script>
+<div class="vspacer"></div>
+{% include "api-status.html" %}
 {% endblock %}