{"id":9,"date":"2026-11-08T18:58:34","date_gmt":"2026-11-08T18:58:34","guid":{"rendered":"https:\/\/4bes.sarl\/?page_id=9"},"modified":"2026-11-08T19:07:00","modified_gmt":"2026-11-08T19:07:00","slug":"play","status":"publish","type":"page","link":"https:\/\/4bes.sarl\/?page_id=9","title":{"rendered":"Pipeline Snake"},"content":{"rendered":"\n<div id=\"ps-app\">\n  <style>\n  #ps-app{\n    --bg:#0f172a; --panel:#111827; --ink:#e2e8f0; --muted:#94a3b8;\n    --indigo:#a5b4fc; --indigo2:#6366f1; --amber:#f59e0b;\n    background:radial-gradient(1200px 600px at 50% -10%, #1b2541 0%, var(--bg) 60%);\n    color:var(--ink);\n    font-family:ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif;\n    display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;\n  }\n  #ps-app *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}\n  #ps-app .ps-wrap{width:100%;max-width:520px;}\n  #ps-app .ps-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}\n  #ps-app .ps-brand{font-weight:800;letter-spacing:3px;color:var(--indigo);font-size:14px;}\n  #ps-app .ps-tag{font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase;}\n  #ps-app .ps-hud{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px;}\n  #ps-app .ps-stat{background:var(--panel);border:1px solid #1f2937;border-radius:12px;padding:10px 12px;text-align:center;}\n  #ps-app .ps-stat .k{font-size:10px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;}\n  #ps-app .ps-stat .v{font-size:22px;font-weight:800;margin-top:2px;color:var(--ink);}\n  #ps-app .ps-stat .v.amber{color:var(--amber);} #ps-app .ps-stat .v.indigo{color:var(--indigo);}\n  #ps-app .ps-cwrap{height:6px;background:#1f2937;border-radius:99px;overflow:hidden;margin-bottom:10px;opacity:.35;transition:opacity .2s;}\n  #ps-app .ps-cwrap.live{opacity:1;}\n  #ps-app .ps-cbar{height:100%;width:0%;background:linear-gradient(90deg,var(--amber),#fbbf24);border-radius:99px;}\n  #ps-app .ps-stage{position:relative;border-radius:16px;overflow:hidden;border:1px solid #1f2937;background:#0b1120;box-shadow:0 20px 50px -20px rgba(0,0,0,.7);}\n  #ps-app canvas{display:block;width:100%;height:auto;touch-action:none;}\n  #ps-app .ps-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;\n    background:linear-gradient(180deg,rgba(15,23,42,.72),rgba(15,23,42,.92));backdrop-filter:blur(3px);padding:24px;}\n  #ps-app .ps-ov.hidden{display:none;}\n  #ps-app .ps-ov h1{font-size:26px;font-weight:800;margin-bottom:6px;color:var(--ink);}\n  #ps-app .ps-ov h1 .hl{color:var(--amber);}\n  #ps-app .ps-ov p{color:var(--muted);font-size:14px;line-height:1.5;max-width:340px;margin-bottom:18px;}\n  #ps-app .ps-big{font-size:40px;font-weight:800;color:var(--amber);margin:2px 0;}\n  #ps-app .ps-sub{font-size:13px;color:var(--muted);margin-bottom:16px;}\n  #ps-app .ps-btn{appearance:none;border:0;cursor:pointer;font-weight:700;font-size:15px;border-radius:10px;padding:13px 22px;\n    background:var(--amber);color:#0f172a;text-decoration:none;display:inline-block;transition:transform .05s ease;}\n  #ps-app .ps-btn:active{transform:translateY(1px);}\n  #ps-app .ps-btn.cta{background:var(--indigo2);color:#fff;margin-top:10px;}\n  #ps-app .ps-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}\n  #ps-app .ps-hint{margin-top:14px;font-size:12px;color:var(--muted);}\n  #ps-app .ps-foot{margin-top:12px;text-align:center;font-size:11px;color:#475569;letter-spacing:.5px;}\n  #ps-app .ps-key{display:inline-block;border:1px solid #334155;border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:11px;color:var(--ink);margin:0 1px;}\n  <\/style>\n\n  <div class=\"ps-wrap\">\n    <div class=\"ps-top\">\n      <div class=\"ps-brand\">4BES<\/div>\n      <div class=\"ps-tag\">Pipeline Snake<\/div>\n    <\/div>\n    <div class=\"ps-hud\">\n      <div class=\"ps-stat\"><div class=\"k\">Leads closed<\/div><div class=\"v\" id=\"ps-leads\">0<\/div><\/div>\n      <div class=\"ps-stat\"><div class=\"k\">Score<\/div><div class=\"v amber\" id=\"ps-score\">0<\/div><\/div>\n      <div class=\"ps-stat\"><div class=\"k\">Combo<\/div><div class=\"v indigo\" id=\"ps-combo\">1&#215;<\/div><\/div>\n    <\/div>\n    <div class=\"ps-cwrap\" id=\"ps-cwrap\"><div class=\"ps-cbar\" id=\"ps-cbar\"><\/div><\/div>\n    <div class=\"ps-stage\">\n      <canvas id=\"ps-game\" width=\"440\" height=\"440\"><\/canvas>\n      <div class=\"ps-ov\" id=\"ps-start\">\n        <h1>Grow your <span class=\"hl\">pipeline<\/span>.<\/h1>\n        <p>Chase leads to grow. Grab the next one fast to build a <strong>combo multiplier<\/strong> &mdash; the quicker you close, the more each lead is worth. Don&#8217;t hit the walls or your own pipeline.<\/p>\n        <button class=\"ps-btn\" id=\"ps-startBtn\">Start closing<\/button>\n        <div class=\"ps-hint\"><span class=\"ps-key\">&larr;<\/span><span class=\"ps-key\">&uarr;<\/span><span class=\"ps-key\">&darr;<\/span><span class=\"ps-key\">&rarr;<\/span> or <span class=\"ps-key\">W<\/span><span class=\"ps-key\">A<\/span><span class=\"ps-key\">S<\/span><span class=\"ps-key\">D<\/span> &middot; swipe on mobile<\/div>\n      <\/div>\n      <div class=\"ps-ov hidden\" id=\"ps-over\">\n        <h1>Quarter&#8217;s <span class=\"hl\">closed<\/span>.<\/h1>\n        <div class=\"ps-big\" id=\"ps-finalLeads\">0<\/div>\n        <div class=\"ps-sub\">leads closed &middot; <span id=\"ps-finalScore\">0<\/span> points &middot; best <span id=\"ps-best\">0<\/span><\/div>\n        <div class=\"ps-row\">\n          <button class=\"ps-btn\" id=\"ps-againBtn\">Run it back<\/button>\n          <a class=\"ps-btn cta\" href=\"\/?page_id=7#contact\">Book a real strategy call<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"ps-foot\">4BES Nearshore Growth Studio<\/div>\n  <\/div>\n\n  <script>\n  (function(){\n    \"use strict\";\n    var canvas = document.getElementById('ps-game');\n    if(!canvas) return;\n    var ctx = canvas.getContext('2d');\n    var CELLS = 22, SIZE = canvas.width, CELL = SIZE\/CELLS;\n    var COMBO_WINDOW = 2600, COMBO_MAX = 5, BASE_POINTS = 10;\n    var START_STEP = 150, MIN_STEP = 70, STEP_RAMP = 2.2;\n    var MULT = String.fromCharCode(215);\n    var state='start', snake, dir, nextDir, lead, score, leads, combo, comboDeadline, stepMs, acc, lastT, best;\n    best = parseInt(localStorage.getItem('pipeSnakeBest')||'0',10)||0;\n\n    function reset(){\n      var mid=Math.floor(CELLS\/2);\n      snake=[{x:mid-1,y:mid},{x:mid-2,y:mid},{x:mid-3,y:mid}];\n      dir={x:1,y:0}; nextDir={x:1,y:0};\n      score=0; leads=0; combo=1; comboDeadline=0; stepMs=START_STEP; acc=0; lastT=0;\n      placeLead(); updateHUD();\n    }\n    function placeLead(){\n      var open=[];\n      for(var y=0;y<CELLS;y++) for(var x=0;x<CELLS;x++){\n        var hit=false,i;\n        for(i=0;i<snake.length;i++){ if(snake[i].x===x){ if(snake[i].y===y){hit=true;break;} } }\n        if(!hit) open.push({x:x,y:y});\n      }\n      lead = open[(Math.random()*open.length)|0] || {x:0,y:0};\n    }\n    function updateHUD(){\n      document.getElementById('ps-leads').textContent=leads;\n      document.getElementById('ps-score').textContent=score;\n      document.getElementById('ps-combo').textContent=combo+MULT;\n    }\n    function setDir(nx,ny){ if(nx=== -dir.x){ if(ny=== -dir.y) return; } nextDir={x:nx,y:ny}; }\n    var keymap={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0],w:[0,-1],s:[0,1],a:[-1,0],d:[1,0],W:[0,-1],S:[0,1],A:[-1,0],D:[1,0]};\n    window.addEventListener('keydown',function(e){\n      var m=keymap[e.key];\n      if(m){ if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].indexOf(e.key)>=0) e.preventDefault(); if(state==='playing') setDir(m[0],m[1]); }\n      if(e.key===' '||e.key==='Enter'){ if(state==='start'||state==='over') start(); }\n    },{passive:false});\n    var tsx=0,tsy=0,tracking=false;\n    canvas.addEventListener('touchstart',function(e){var t=e.changedTouches[0];tsx=t.clientX;tsy=t.clientY;tracking=true;},{passive:true});\n    canvas.addEventListener('touchmove',function(e){e.preventDefault();},{passive:false});\n    canvas.addEventListener('touchend',function(e){\n      if(!tracking) return; tracking=false;\n      var t=e.changedTouches[0],dx=t.clientX-tsx,dy=t.clientY-tsy;\n      if(Math.abs(dx)<18){ if(Math.abs(dy)<18) return; }\n      if(Math.abs(dx)>Math.abs(dy)) setDir(dx>0?1:-1,0); else setDir(0,dy>0?1:-1);\n    },{passive:true});\n    function start(){\n      reset();\n      document.getElementById('ps-start').classList.add('hidden');\n      document.getElementById('ps-over').classList.add('hidden');\n      state='playing'; lastT=0; requestAnimationFrame(loop);\n    }\n    function gameOver(){\n      state='over';\n      if(score>best){ best=score; localStorage.setItem('pipeSnakeBest',String(best)); }\n      document.getElementById('ps-finalLeads').textContent=leads;\n      document.getElementById('ps-finalScore').textContent=score;\n      document.getElementById('ps-best').textContent=best;\n      document.getElementById('ps-over').classList.remove('hidden');\n    }\n    function step(){\n      dir=nextDir;\n      var head={x:snake[0].x+dir.x,y:snake[0].y+dir.y},i;\n      if(head.x<0||head.y<0||head.x>=CELLS||head.y>=CELLS) return gameOver();\n      for(i=0;i<snake.length;i++){ if(snake[i].x===head.x){ if(snake[i].y===head.y) return gameOver(); } }\n      snake.unshift(head);\n      var ate=false;\n      if(head.x===lead.x){ if(head.y===lead.y) ate=true; }\n      if(ate){\n        var now=performance.now();\n        if(now<=comboDeadline) combo=Math.min(COMBO_MAX,combo+1); else combo=1;\n        comboDeadline=now+COMBO_WINDOW;\n        score+=BASE_POINTS*combo; leads+=1;\n        stepMs=Math.max(MIN_STEP,START_STEP-leads*STEP_RAMP);\n        placeLead(); updateHUD();\n      } else { snake.pop(); }\n    }\n    function loop(t){\n      if(state!=='playing') return;\n      if(!lastT) lastT=t;\n      var dt=t-lastT; lastT=t; acc+=dt;\n      while(acc>=stepMs){ acc-=stepMs; if(state==='playing') step(); }\n      var now=performance.now(), remain=comboDeadline-now;\n      var wrap=document.getElementById('ps-cwrap'), bar=document.getElementById('ps-cbar');\n      var live=false; if(combo>1){ if(remain>0) live=true; }\n      if(live){ wrap.classList.add('live'); bar.style.width=Math.max(0,Math.min(100,(remain\/COMBO_WINDOW)*100))+'%'; }\n      else { if(combo>1){ combo=1; updateHUD(); } wrap.classList.remove('live'); bar.style.width='0%'; }\n      draw(); requestAnimationFrame(loop);\n    }\n    function roundRect(x,y,w,h,r){\n      ctx.beginPath(); ctx.moveTo(x+r,y);\n      ctx.arcTo(x+w,y,x+w,y+h,r); ctx.arcTo(x+w,y+h,x,y+h,r);\n      ctx.arcTo(x,y+h,x,y,r); ctx.arcTo(x,y,x+w,y,r); ctx.closePath();\n    }\n    function draw(){\n      ctx.fillStyle='#0b1120'; ctx.fillRect(0,0,SIZE,SIZE);\n      ctx.strokeStyle='rgba(148,163,184,0.06)'; ctx.lineWidth=1;\n      for(var i=1;i<CELLS;i++){\n        ctx.beginPath(); ctx.moveTo(i*CELL,0); ctx.lineTo(i*CELL,SIZE); ctx.stroke();\n        ctx.beginPath(); ctx.moveTo(0,i*CELL); ctx.lineTo(SIZE,i*CELL); ctx.stroke();\n      }\n      var pulse=0.5+0.5*Math.sin(performance.now()\/180);\n      var lx=lead.x*CELL+CELL\/2, ly=lead.y*CELL+CELL\/2;\n      ctx.save(); ctx.shadowColor='rgba(245,158,11,0.9)'; ctx.shadowBlur=14+pulse*10;\n      ctx.fillStyle='#f59e0b'; ctx.beginPath(); ctx.arc(lx,ly,CELL*0.32,0,Math.PI*2); ctx.fill(); ctx.restore();\n      for(var s=snake.length-1;s>=0;s--){\n        var seg=snake[s], f=s\/Math.max(1,snake.length-1), pad=1.5;\n        if(s===0){ ctx.fillStyle='#c7d2fe'; }\n        else { ctx.fillStyle='rgb('+((129-(129-79)*f)|0)+','+((140-(140-70)*f)|0)+','+((248-(248-160)*f)|0)+')'; }\n        roundRect(seg.x*CELL+pad,seg.y*CELL+pad,CELL-pad*2,CELL-pad*2,5); ctx.fill();\n      }\n      var hh=snake[0]; ctx.fillStyle='#0f172a';\n      var cx=hh.x*CELL+CELL\/2, cy=hh.y*CELL+CELL\/2;\n      ctx.beginPath(); ctx.arc(cx+dir.x*3,cy+dir.y*3,CELL*0.11,0,Math.PI*2); ctx.fill();\n    }\n    document.getElementById('ps-startBtn').addEventListener('click',start);\n    document.getElementById('ps-againBtn').addEventListener('click',start);\n    function fit(){\n      var disp=Math.min(520, canvas.parentNode.clientWidth);\n      var dpr=window.devicePixelRatio||1;\n      canvas.width=Math.round(disp*dpr); canvas.height=Math.round(disp*dpr);\n      SIZE=canvas.width; CELL=SIZE\/CELLS; ctx.setTransform(1,0,0,1,0,0);\n      if(state!=='playing') draw();\n    }\n    window.addEventListener('resize',fit);\n    fit(); draw();\n  })();\n  <\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>4BES Pipeline Snake Leads closed 0 Score 0 Combo 1&#215; Grow your pipeline. Chase leads to grow. Grab the next one fast to build a combo multiplier &mdash; the quicker you close, the more each lead is worth. Don&#8217;t hit the walls or your own pipeline. Start closing &larr;&uarr;&darr;&rarr; or WASD &middot; swipe on mobile [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-template-blank.php","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/4bes.sarl\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/4bes.sarl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/4bes.sarl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/4bes.sarl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/4bes.sarl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":2,"href":"https:\/\/4bes.sarl\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/4bes.sarl\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/4bes.sarl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}