{"id":64,"date":"2026-09-06T03:21:33","date_gmt":"2026-09-06T03:21:33","guid":{"rendered":"https:\/\/conwaycraftsmanship.com\/?page_id=64"},"modified":"2026-09-15T00:52:43","modified_gmt":"2026-09-15T00:52:43","slug":"hive-pong","status":"publish","type":"page","link":"https:\/\/conwaycraftsmanship.com\/index.php\/hive-pong\/","title":{"rendered":"Hive Pong"},"content":{"rendered":"<p><!-- ccs-hive-pong-gold38:v1 --><br \/>\n<!-- Durable Hive Pong \u2014 paste this as the Hive Pong page Custom HTML on Hostinger.\n     Replaces the empty canvas + wandering Ask Sanctuary bee.\n     WordPress-safe: no \\u0026\\u0026 in JavaScript (WP encodes & and can kill the script). --><\/p>\n<style>\nbody.page-id-64{background:#0f1a0f!important}\nbody.page-id-64 #asb-bee,\nbody.page-id-64 #asb-panel,\nbody.page-id-64 #asb-root{display:none!important}\n#hp-wrap{max-width:920px;margin:0 auto;padding:.75rem 1rem 2rem;font-family:\"Source Sans 3\",system-ui,sans-serif;color:#fff8ee}\n#hp-wrap h1{font-family:\"Cormorant Garamond\",Georgia,serif;margin:.2rem 0 .35rem}\n#hp-wrap .meta{opacity:.85;font-weight:600;margin-bottom:.7rem}\n#hp-stage{position:relative;width:100%;max-width:920px;margin:0 auto}\n#hp-canvas{width:100%;max-width:920px;height:auto;aspect-ratio:16\/10;display:block;border:2px solid #e8b84a;border-radius:16px;background:#0b140b;touch-action:none;-webkit-user-select:none;user-select:none}\n@media (max-width:639px){\n  #hp-canvas{aspect-ratio:auto;height:58dvh;max-height:70dvh}\n  #hp-wrap h1,#hp-wrap .meta{display:none}\n}\n#hp-play{\n  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem;\n  background:rgba(11,20,11,.48);border-radius:16px;border:0;cursor:pointer;touch-action:manipulation;\n  color:#ffe566;font-family:\"Cormorant Garamond\",Georgia,serif\n}\n#hp-play[hidden]{display:none!important}\n#hp-play strong{display:inline-flex;align-items:center;justify-content:center;min-height:4.25rem;padding:.7rem 1.6rem;border-radius:14px;\n  background:linear-gradient(135deg,#ffe566,#e8b84a);color:#1a140e;font:800 1.35rem\/1 \"Source Sans 3\",system-ui,sans-serif}\n#hp-play span{font-weight:600;font-size:.92rem;max-width:16rem;text-align:center}\n#hp-wrap .row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;align-items:center}\n#hp-wrap a.btn{appearance:none;border:1.5px solid #c4892a;border-radius:999px;padding:.55rem 1rem;font-weight:800;background:linear-gradient(135deg,#ffe566,#e8b84a);color:#1a140e;text-decoration:none}\n#hp-score{font-weight:800;color:#ffe566}\n<\/style>\n<div id=\"hp-wrap\">\n<h1>Hive Pong<\/h1>\n<p class=\"meta\">Rose paddle (you) \u00b7 Pumpkin paddle (hive) \u00b7 first to 5 \u00b7 tap Play on the table<\/p>\n<div id=\"hp-stage\">\n    <canvas id=\"hp-canvas\" width=\"920\" height=\"575\" aria-label=\"Hive Pong table. Tap Play, then keep your thumb on the rose.\"><\/canvas><br \/>\n    <button type=\"button\" id=\"hp-play\" aria-label=\"Play Hive Pong\"><br \/>\n      <strong>Play Hive Pong<\/strong><br \/>\n      <span>Tap Play. Keep your thumb on the rose.<\/span><br \/>\n    <\/button>\n  <\/div>\n<div class=\"row\">\n    <span id=\"hp-score\">You 0 \u00b7 Hive 0<\/span><br \/>\n    <a class=\"btn\" href=\"https:\/\/conwaycraftsmanship.com\/\">Back to Foyer<\/a>\n  <\/div>\n<\/div>\n<p><script>\n(function(){\n  var c = document.getElementById(\"hp-canvas\");\n  var play = document.getElementById(\"hp-play\");\n  var scoreEl = document.getElementById(\"hp-score\");\n  if (!c) return;\n  var ctx = c.getContext(\"2d\");\n  if (!ctx) return;\n  var W = c.width, H = c.height, WIN = 5;\n  var you = 0, hive = 0, running = false;\n  var ball = { x: W \/ 2, y: H \/ 2, vx: 0, vy: 0, r: 11 };\n  var p1 = { y: H \/ 2 - 55, h: 110, w: 16 };\n  var p2 = { y: H \/ 2 - 45, h: 90, w: 14 };\n  function clamp(v, lo, hi) {\n    if (v < lo) return lo;\n    if (v > hi) return hi;\n    return v;\n  }\n  function resetBall(dir) {\n    ball.x = W * 0.38;\n    ball.y = p1.y + p1.h \/ 2;\n    ball.vx = 0;\n    ball.vy = 0;\n    window.setTimeout(function() {\n      var sign = dir;\n      if (!sign) sign = 1;\n      ball.vx = 4.2 * sign;\n      ball.vy = (Math.random() * 3 + 1.2) * (Math.random() > 0.5 ? 1 : -1);\n    }, 700);\n  }\n  function roundRect(x, y, w, h, r) {\n    ctx.beginPath();\n    ctx.moveTo(x + r, y);\n    ctx.arcTo(x + w, y, x + w, y + h, r);\n    ctx.arcTo(x + w, y + h, x, y + h, r);\n    ctx.arcTo(x, y + h, x, y, r);\n    ctx.arcTo(x, y, x + w, y, r);\n    ctx.fill();\n  }\n  function draw() {\n    ctx.fillStyle = \"#0b140b\";\n    ctx.fillRect(0, 0, W, H);\n    ctx.strokeStyle = \"rgba(232,184,74,.35)\";\n    ctx.setLineDash([8, 12]);\n    ctx.beginPath();\n    ctx.moveTo(W \/ 2, 0);\n    ctx.lineTo(W \/ 2, H);\n    ctx.stroke();\n    ctx.setLineDash([]);\n    ctx.fillStyle = \"#e8a0b8\";\n    roundRect(18, p1.y, p1.w, p1.h, 8);\n    ctx.fillStyle = \"#e8b84a\";\n    roundRect(W - 32, p2.y, p2.w, p2.h, 8);\n    ctx.fillStyle = \"#ffe566\";\n    ctx.beginPath();\n    ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);\n    ctx.fill();\n  }\n  function plant(clientY) {\n    var r = c.getBoundingClientRect();\n    if (r.height <= 0) return;\n    var y = (clientY - r.top) * (H \/ r.height);\n    p1.y = clamp(y - p1.h \/ 2, 0, H - p1.h);\n  }\n  function updateScore() {\n    scoreEl.textContent = \"You \" + you + \" \u00b7 Hive \" + hive;\n  }\n  function startMatch() {\n    if (running) return;\n    you = 0;\n    hive = 0;\n    updateScore();\n    running = true;\n    play.hidden = true;\n    resetBall(-1);\n  }\n  function endMatch() {\n    running = false;\n    play.hidden = false;\n    play.querySelector(\"strong\").textContent = \"Play again\";\n  }\n  function step() {\n    if (!running) {\n      draw();\n      return;\n    }\n    var target = ball.y - p2.h \/ 2;\n    p2.y += clamp(target - p2.y, -5.2, 5.2);\n    p2.y = clamp(p2.y, 0, H - p2.h);\n    ball.x += ball.vx;\n    ball.y += ball.vy;\n    if (ball.y < ball.r) {\n      ball.y = ball.r;\n      ball.vy *= -1;\n    }\n    if (ball.y > H - ball.r) {\n      ball.y = H - ball.r;\n      ball.vy *= -1;\n    }\n    if (ball.vx < 0) {\n      if (ball.x - ball.r < 34) {\n        if (ball.y > p1.y) {\n          if (ball.y < p1.y + p1.h) {\n            ball.vx = Math.abs(ball.vx) + 0.25;\n            ball.x = 34 + ball.r;\n            ball.vy += ((ball.y - (p1.y + p1.h \/ 2)) \/ p1.h) * 3;\n          }\n        }\n      }\n    }\n    if (ball.vx > 0) {\n      if (ball.x + ball.r > W - 32) {\n        if (ball.y > p2.y) {\n          if (ball.y < p2.y + p2.h) {\n            ball.vx = -Math.abs(ball.vx) - 0.25;\n            ball.x = W - 32 - ball.r;\n          }\n        }\n      }\n    }\n    if (ball.x < 0) {\n      hive += 1;\n      updateScore();\n      if (hive >= WIN) endMatch();\n      else resetBall(-1);\n    }\n    if (ball.x > W) {\n      you += 1;\n      updateScore();\n      if (you >= WIN) endMatch();\n      else resetBall(1);\n    }\n    draw();\n  }\n  function loop() {\n    step();\n    requestAnimationFrame(loop);\n  }\n  function onPointer(e) {\n    plant(e.clientY);\n    if (!running) startMatch();\n    if (e.cancelable) e.preventDefault();\n  }\n  play.addEventListener(\"pointerdown\", function(e) {\n    if (e.button !== 0) return;\n    plant(e.clientY);\n    startMatch();\n  });\n  play.addEventListener(\"click\", function() {\n    startMatch();\n  });\n  c.addEventListener(\"pointerdown\", onPointer);\n  c.addEventListener(\"pointermove\", function(e) {\n    if (e.buttons === 0) {\n      if (e.pointerType === \"mouse\") return;\n    }\n    plant(e.clientY);\n  });\n  c.addEventListener(\"touchstart\", function(e) {\n    var t = e.changedTouches[0];\n    if (t) plant(t.clientY);\n    if (!running) startMatch();\n    if (e.cancelable) e.preventDefault();\n  }, { passive: false });\n  c.addEventListener(\"touchmove\", function(e) {\n    var t = e.changedTouches[0];\n    if (t) plant(t.clientY);\n    if (e.cancelable) e.preventDefault();\n  }, { passive: false });\n  draw();\n  loop();\n})();\n<\/script><\/p>\n<p><!-- ccs-wl-embers:v3 -->\n<link rel=\"stylesheet\" id=\"ccs-wl-embers-css\" href=\"https:\/\/conwaycraftsmanship.com\/wp-content\/uploads\/2026\/09\/ember-sitewide-v3.css?v=3\" \/>\n<script id=\"ccs-wl-embers-js\" src=\"https:\/\/conwaycraftsmanship.com\/wp-content\/uploads\/2026\/09\/ember-sitewide-v3.js?v=3\" defer><\/script><br \/>\n<!-- \/ccs-wl-embers:v3 --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hive Pong Rose paddle (you) \u00b7 Pumpkin paddle (hive) \u00b7 first to 5 \u00b7 tap Play on the table Play Hive Pong Tap Play. Keep your thumb on the rose. You 0 \u00b7 Hive 0 Back to Foyer<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-64","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/conwaycraftsmanship.com\/index.php\/wp-json\/wp\/v2\/pages\/64","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/conwaycraftsmanship.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/conwaycraftsmanship.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/conwaycraftsmanship.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/conwaycraftsmanship.com\/index.php\/wp-json\/wp\/v2\/comments?post=64"}],"version-history":[{"count":21,"href":"https:\/\/conwaycraftsmanship.com\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions"}],"predecessor-version":[{"id":388,"href":"https:\/\/conwaycraftsmanship.com\/index.php\/wp-json\/wp\/v2\/pages\/64\/revisions\/388"}],"wp:attachment":[{"href":"https:\/\/conwaycraftsmanship.com\/index.php\/wp-json\/wp\/v2\/media?parent=64"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}