Olivia
Online
Geoff Krombach
@GeoffKrombach
Joined December 2024
171 Following
49 Followers
223 Posts
Loop summary:
Added the full Viking/Nordic identity: Rune Wake Pong, Jarl vs Varangian, Fjord/Saga/Raid modes, Wake/Oath language.
Added sea-lane court art, runes, longship mark, sun-compass, axe/spear corner motifs, shield paddles, wake/spark/ember effects.
Reworked status copy around raids, shields, spoils, tides, and shieldwall language.
Fixed responsive HUD overlap at 1440px and then again at 1600px by keeping the compact mode control active through 1700px.
Browser-smoked desktop and mobile controls, Start/Pause/Resume, mode cycling, telemetry motion, layout overlap, visible text, and console errors.
Now I'm doing this prompt on it:
"Do another goal prompt of improvement loops based on design. After each improvement pass, review and write a paragraph prompt for yourself to do. Once that improvement prompt is implemented, review and write another paragraph prompt for yourself. Stop when two subsequent prompts yield minimal improvement. Do improvements in viking symbolism/implements of war/seafaring travel/nordic culture."
Loop log:
Pass 1: material. Added Chill, Classic, and Blitz pace modes with different score targets, serve speed, ramping, max speed, and AI tuning. Fixed a telemetry lag found during testing.
Pass 2: material. Made pace modes usable on mobile with a compact cycle button and fixed desktop/tablet overlap by switching controls responsively.
Pass 3: moderate. Added a momentum feedback layer for player hits, perfects, saves, and scoring, with visual/status feedback and telemetry.
Pass 4: minimal. Added speedTier telemetry for better verification.
Pass 5: minimal. Bug-scanned mode/persistence/breakpoint/reset behavior; no concrete issue found, so stopped.
From my loop results:
"Loop log:
Pass 1: material improvement. Added perfect hits, focus pulse, incoming landing cue, comeback paddle assist, richer rally/status feedback.
Pass 2: material improvement. Added shot vector feedback, side danger gates, near-miss saves, and cleaner collision return flow.
Pass 3: material improvement. Added finale effects, reactive court ambience, focus-loss input cleanup, and fixed a real tablet-width HUD overlap bug.
Pass 4: small but useful. Improved audio resume, persisted mute, accurate sound button state, and spacebar/button behavior.
Pass 5: minimal. Added touch comfort, overscroll suppression, and reduced-motion handling.
Pass 6: minimal. Tightened sound accessibility labels and telemetry. Stopped here."
I'm running the following prompt myself "Do another goal prompt of improvement loops. After each improvement pass, review and write a paragraph prompt for yourself to do. Once that improvement prompt is implemented, review and write another paragraph prompt for yourself. Stop when two subsequent prompts yield minimal improvement. Do improvements in fun/bugs/balance/polish/awe."
I don't think it looped. It completed in less than 10min.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pulse Pong</title>
<style>
:root {
color-scheme: dark;
--bg: #071014;
--panel: rgba(14, 24, 30, 0.82);
--line: rgba(207, 239, 234, 0.18);
--text: #e8fbf4;
--muted: #9bb4ad;
--player: #42f6b6;
--enemy: #ff6b8a;
--ball: #fff7cd;
--gold: #f8c95c;
}
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background:
radial-gradient(circle at 18% 12%, rgba(66, 246, 182, 0.18), transparent 28%),
radial-gradient(circle at 82% 74%, rgba(255, 107, 138, 0.14), transparent 30%),
linear-gradient(135deg, #071014 0%, #0b1719 52%, #101418 100%);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text);
user-select: none;
}
body {
display: grid;
place-items: center;
}
.shell {
position: relative;
display: grid;
place-items: center;
width: min(100vw, 1180px);
height: min(100vh, 720px);
min-height: 420px;
padding: clamp(10px, 1.8vw, 22px);
}
.game-wrap {
position: relative;
width: min(100%, calc((100vh - clamp(20px, 3.6vw, 44px)) * 16 / 9));
height: auto;
aspect-ratio: 16 / 9;
max-height: 100%;
border: 1px solid rgba(232, 251, 244, 0.18);
border-radius: 8px;
overflow: hidden;
background:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(180deg, rgba(8, 18, 22, 0.94), rgba(7, 14, 17, 0.96));
background-size: 34px 34px, 34px 34px, auto;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}
canvas {
display: block;
width: 100%;
height: 100%;
image-rendering: auto;
}
.hud {
position: absolute;
inset: 0;
pointer-events: none;
}
.scoreboard {
position: absolute;
top: clamp(12px, 2.2vw, 20px);
left: 50%;
display: grid;
grid-template-columns: minmax(84px, 1fr) auto minmax(84px, 1fr);
align-items: center;
gap: clamp(12px, 2.2vw, 26px);
transform: translateX(-50%);
min-width: min(62vw, 520px);
color: var(--text);
text-align: center;
text-shadow: 0 0 16px rgba(232, 251, 244, 0.24);
}
.side {
display: grid;
gap: 2px;
min-width: 0;
}
.name {
overflow: hidden;
color: var(--muted);
font-size: clamp(0.68rem, 1.2vw, 0.78rem);
font-weight: 700;
letter-spacing: 0.12em;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.score {
font-variant-numeric: tabular-nums;
font-size: clamp(2.7rem, 8vw, 5.8rem);
font-weight: 850;
line-height: 0.95;
}
.divider {
width: 8px;
height: clamp(48px, 8vw, 76px);
border-radius: 999px;
background: linear-gradient(180deg, transparent, rgba(232, 251, 244, 0.54), transparent);
opacity: 0.74;
}
.topbar {
position: absolute;
top: clamp(10px, 1.8vw, 18px);
right: clamp(10px, 1.8vw, 18px);
display: flex;
align-items: center;
gap: 8px;
pointer-events: auto;
}
.icon-btn,
.primary-btn {
appearance: none;
border: 1px solid rgba(232, 251, 244, 0.18);
border-radius: 8px;
background: rgba(10, 21, 26, 0.76);
color: var(--text);
cursor: pointer;
font: inherit;
font-weight: 800;
outline: none;
transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.icon-btn {
display: grid;
width: 40px;
height: 40px;
place-items: center;
padding: 0;
}
.primary-btn {
min-width: 116px;
min-height: 42px;
padding: 0 16px;
}
.icon-btn:hover,
.primary-btn:hover,
.icon-btn:focus-visible,
.primary-btn:focus-visible {
border-color: rgba(66, 246, 182, 0.7);
background: rgba(18, 35, 40, 0.88);
transform: translateY(-1px);
}
.icon-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.25;
}
.status {
position: absolute;
left: 50%;
bottom: clamp(18px, 3.4vw, 34px);
width: min(86%, 560px);
transform: translateX(-50%);
color: rgba(232, 251, 244, 0.9);
font-size: clamp(0.86rem, 1.8vw, 1rem);
font-weight: 750;
letter-spacing: 0.04em;
line-height: 1.35;
text-align: center;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
.meter {
position: absolute;
left: clamp(12px, 2vw, 20px);
bottom: clamp(12px, 2vw, 20px);
display: grid;
gap: 6px;
min-width: 130px;
color: var(--muted);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.meter-track {
width: 100%;
height: 8px;
overflow: hidden;
border: 1px solid rgba(232, 251, 244, 0.15);
border-radius: 999px;
background: rgba(232, 251, 244, 0.08);
}
.meter-fill {
width: 40%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--player), var(--gold));
box-shadow: 0 0 18px rgba(66, 246, 182, 0.4);
transition: width 180ms ease;
}
@media (max-width: 680px) {
.shell {
width: 100vw;
height: 100vh;
min-height: 360px;
padding: 8px;
}
.game-wrap {
width: min(100%, calc((100vh - 16px) * 16 / 9));
}
.scoreboard {
min-width: 66vw;
top: 12px;
}
.topbar {
top: auto;
right: 12px;
bottom: 12px;
}
.status {
bottom: 62px;
font-size: 0.78rem;
}
.primary-btn {
min-width: 94px;
padding-inline: 12px;
}
.meter {
display: none;
}
}
</style>
</head>
<body>
<main class="shell" aria-label="Pulse Pong">
<section class="game-wrap">
<canvas id="game" aria-label="Pong game canvas"></canvas>
<div class="hud" aria-hidden="true">
<div class="scoreboard">
<div class="side">
<span class="name">You</span>
<span class="score" id="playerScore">0</span>
</div>
<span class="divider"></span>
<div class="side">
<span class="name">CPU</span>
<span class="score" id="cpuScore">0</span>
</div>
</div>
<div class="meter">
<span id="rallyLabel">Rally 0</span>
<span class="meter-track"><span class="meter-fill" id="rallyFill"></span></span>
</div>
<div class="status" id="statusText"></div>
</div>
<div class="topbar">
<button class="icon-btn" id="soundButton" type="button" aria-label="Toggle sound" title="Sound">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M4 9v6h4l5 4V5L8 9H4z"></path>
<path d="M16.5 8.5a5 5 0 0 1 0 7"></path>
<path d="M19 6a8 8 0 0 1 0 12"></path>
</svg>
</button>
<button class="primary-btn" id="mainButton" type="button">Start</button>
</div>
</section>
</main>
<script>
(() => {
"use strict";
const canvas = document.querySelector("#game");
const ctx = canvas.getContext("2d", { alpha: false });
const playerScoreEl = document.querySelector("#playerScore");
const cpuScoreEl = document.querySelector("#cpuScore");
const statusText = document.querySelector("#statusText");
const rallyLabel = document.querySelector("#rallyLabel");
const rallyFill = document.querySelector("#rallyFill");
const mainButton = document.querySelector("#mainButton");
const soundButton = document.querySelector("#soundButton");
const DPR_LIMIT = 2;
const WINNING_SCORE = 7;
const COURT = {
width: 960,
height: 540,
wall: 18,
paddleInset: 42
};
const keys = new Set();
const pointer = {
active: false,
y: COURT.height / 2
};
const state = {
mode: "ready",
width: COURT.width,
height: COURT.height,
scale: 1,
lastTime: 0,
accumulator: 0,
flash: 0,
shake: 0,
muted: false,
winner: null,
pausedFrom: null,
serveTimer: 0,
serveDirection: -1,
rally: 0,
paddleHits: 0,
difficulty: 0.52,
particles: [],
playerScore: 0,
cpuScore: 0,
player: makePaddle("player"),
cpu: makePaddle("cpu"),
ball: {
x: COURT.width / 2,
y: COURT.height / 2,
vx: 0,
vy: 0,
radius: 9,
speed: 0,
trail: []
}
};
function makePaddle(side) {
return {
side,
x: side === "player" ? COURT.paddleInset : COURT.width - COURT.paddleInset,
y: COURT.height / 2,
width: 14,
height: 98,
vy: 0,
targetY: COURT.height / 2,
color: side === "player" ? "#42f6b6" : "#ff6b8a"
};
}
function resize() {
const rect = canvas.parentElement.getBoundingClientRect();
const ratio = COURT.width / COURT.height;
let width = Math.max(320, rect.width);
let height = Math.max(260, rect.height);
if (width / height > ratio) {
width = height * ratio;
} else {
height = width / ratio;
}
const dpr = Math.min(window.devicePixelRatio || 1, DPR_LIMIT);
canvas.width = Math.round(width * dpr);
canvas.height = Math.round(height * dpr);
https://t.co/C1U0IewQrB.width = `${width}px`;
https://t.co/C1U0IewQrB.height = `${height}px`;
ctx.setTransform(dpr * (width / COURT.width), 0, 0, dpr * (height / COURT.height), 0, 0);
state.width = COURT.width;
state.height = COURT.height;
state.scale = width / COURT.width;
}
function resetMatch() {
state.playerScore = 0;
state.cpuScore = 0;
state.winner = null;
state.rally = 0;
state.paddleHits = 0;
state.difficulty = 0.52;
state.player.y = COURT.height / 2;
state.cpu.y = COURT.height / 2;
updateScoreboard();
queueServe(Math.random() > 0.5 ? 1 : -1, 0.72);
}
function queueServe(direction, delay = 0.85) {
state.mode = "serve";
state.serveDirection = direction;
state.serveTimer = delay;
state.rally = 0;
state.paddleHits = 0;
state.ball.x = COURT.width / 2;
state.ball.y = COURT.height / 2;
state.ball.vx = 0;
state.ball.vy = 0;
state.ball.speed = 0;
state.ball.trail.length = 0;
setStatus(direction < 0 ? "Ready" : "Return");
}
function launchServe() {
const angle = randomBetween(-0.36, 0.36);
const speed = 430;
state.ball.speed = speed;
state.ball.vx = Math.cos(angle) * speed * state.serveDirection;
state.ball.vy = Math.sin(angle) * speed;
state.mode = "playing";
setStatus("");
}
function setStatus(text) {
statusText.textContent = text;
}
function updateScoreboard() {
playerScoreEl.textContent = state.playerScore;
cpuScoreEl.textContent = state.cpuScore;
rallyLabel.textContent = `Rally ${state.rally}`;
https://t.co/PLlnVERDI9.width = `${Math.min(100, 16 + state.rally * 6)}%`;
}
function syncTelemetry() {
canvas.dataset.mode = state.mode;
canvas.dataset.playerY = String(Math.round(state.player.y));
canvas.dataset.playerVy = String(Math.round(state.player.vy));
canvas.dataset.cpuY = String(Math.round(state.cpu.y));
canvas.dataset.ballX = String(Math.round(state.ball.x));
canvas.dataset.ballY = String(Math.round(state.ball.y));
canvas.dataset.ballSpeed = String(Math.round(state.ball.speed));
canvas.dataset.playerScore = String(state.playerScore);
canvas.dataset.cpuScore = String(state.cpuScore);
canvas.dataset.rally = String(state.rally);
canvas.dataset.difficulty = state.difficulty.toFixed(2);
}
function startOrToggle() {
ensureAudio();
if (state.mode === "ready" || state.mode === "gameover") {
resetMatch();
mainButton.textContent = "Pause";
return;
}
if (state.mode === "paused") {
state.mode = state.pausedFrom || "playing";
state.pausedFrom = null;
mainButton.textContent = "Pause";
setStatus(state.mode === "serve" ? "Ready" : "");
return;
}
if (state.mode === "playing" || state.mode === "serve") {
state.pausedFrom = state.mode;
state.mode = "paused";
mainButton.textContent = "Resume";
setStatus("Paused");
}
}
function update(dt) {
if (state.flash > 0) state.flash = Math.max(0, state.flash - dt * 3.4);
if (state.shake > 0) state.shake = Math.max(0, state.shake - dt * 18);
updateParticles(dt);
updatePlayer(dt);
updateCpu(dt);
if (state.mode === "serve") {
state.serveTimer -= dt;
state.ball.y = COURT.height / 2 + Math.sin(https://t.co/tUKqq5L3j8() / 220) * 18;
if (state.serveTimer <= 0) launchServe();
} else if (state.mode === "playing") {
updateBall(dt);
}
}
function updatePlayer(dt) {
const paddle = state.player;
const prevY = paddle.y;
let input = 0;
if (keys.has("arrowup") || keys.has("w")) input -= 1;
if (keys.has("arrowdown") || keys.has("s")) input += 1;
if (https://t.co/5vC3Y5REcf) {
const diff = pointer.y - paddle.y;
paddle.vy = clamp(diff * 11, -760, 760);
} else {
const acceleration = 2200;
const friction = Math.pow(0.0009, dt);
paddle.vy += input * acceleration * dt;
paddle.vy *= input === 0 ? friction : 0.93;
paddle.vy = clamp(paddle.vy, -760, 760);
}
paddle.y += paddle.vy * dt;
clampPaddle(paddle);
paddle.vy = (paddle.y - prevY) / Math.max(dt, 0.001);
}
function updateCpu(dt) {
const paddle = state.cpu;
const prevY = paddle.y;
const reaction = lerp(0.17, 0.09, state.difficulty);
const maxSpeed = lerp(410, 625, state.difficulty);
const trackingError = lerp(58, 18, state.difficulty);
const ball = state.ball;
let target = COURT.height / 2;
if (state.mode === "playing" && ball.vx > 0) {
target = predictBallY(paddle.x - ball.radius * 2) + Math.sin((https://t.co/tUKqq5L3j8() / 310) + state.rally) * trackingError;
} else if (state.mode === "serve") {
target = COURT.height / 2 + Math.sin(https://t.co/tUKqq5L3j8() / 300) * 24;
} else {
target = COURT.height / 2;
}
paddle.targetY += (target - paddle.targetY) * Math.min(1, dt / reaction);
const diff = paddle.targetY - paddle.y;
paddle.vy = clamp(diff * 8.8, -maxSpeed, maxSpeed);
paddle.y += paddle.vy * dt;
clampPaddle(paddle);
paddle.vy = (paddle.y - prevY) / Math.max(dt, 0.001);
}
function updateBall(dt) {
const ball = state.ball;
ball.trail.push({ x: ball.x, y: ball.y, life: 1 });
if (ball.trail.length > 12) ball.trail.shift();
for (const point of ball.trail) {
https://t.co/Pc66zLwx8Z -= dt * 4.8;
}
ball.trail = ball.trail.filter((point) => https://t.co/Pc66zLwx8Z > 0);
ball.x += ball.vx * dt;
ball.y += ball.vy * dt;
if (ball.y - ball.radius < COURT.wall) {
ball.y = COURT.wall + ball.radius;
ball.vy = Math.abs(ball.vy);
wallBurst(ball.x, ball.y, 1);
playTone(180, 0.035, "sine", 0.035);
} else if (ball.y + ball.radius > COURT.height - COURT.wall) {
ball.y = COURT.height - COURT.wall - ball.radius;
ball.vy = -Math.abs(ball.vy);
wallBurst(ball.x, ball.y, -1);
playTone(150, 0.035, "sine", 0.035);
}
collidePaddle(state.player);
collidePaddle(state.cpu);
if (ball.x + ball.radius < 0) {
scorePoint("cpu");
} else if (ball.x - ball.radius > COURT.width) {
scorePoint("player");
}
}
function collidePaddle(paddle) {
const ball = state.ball;
const halfW = paddle.width / 2;
const halfH = paddle.height / 2;
const left = paddle.x - halfW;
const right = paddle.x + halfW;
const top = paddle.y - halfH;
const bottom = paddle.y + halfH;
if (
ball.x + ball.radius < left ||
ball.x - ball.radius > right ||
ball.y + ball.radius < top ||
ball.y - ball.radius > bottom
) {
return;
}
const movingTowardPlayer = paddle.side === "player" && ball.vx < 0;
const movingTowardCpu = paddle.side === "cpu" && ball.vx > 0;
if (!movingTowardPlayer && !movingTowardCpu) return;
const side = paddle.side === "player" ? 1 : -1;
const offset = clamp((ball.y - paddle.y) / halfH, -1, 1);
const influence = clamp(paddle.vy / 760, -0.6, 0.6);
const angle = offset * 0.88 + influence * 0.34;
const speed = clamp(ball.speed * 1.045 + 16, 430, 760);
ball.speed = speed;
ball.vx = Math.cos(angle) * speed * side;
ball.vy = Math.sin(angle) * speed + paddle.vy * 0.08;
ball.x = paddle.side === "player" ? right + ball.radius + 0.2 : left - ball.radius - 0.2;
state.rally += 1;
state.paddleHits += 1;
state.difficulty = clamp(0.52 + state.paddleHits * 0.018 + (state.playerScore - state.cpuScore) * 0.035, 0.46, 0.82);
state.shake = 2.4;
paddleBurst(paddle, ball.y);
playTone(paddle.side === "player" ? 330 : 250, 0.055, "square", 0.045);
updateScoreboard();
}
function scorePoint(winner) {
const playerWon = winner === "player";
if (playerWon) {
state.playerScore += 1;
} else {
state.cpuScore += 1;
}
state.flash = 1;
state.shake = 7;
scoreBurst(playerWon ? COURT.width - 60 : 60, state.ball.y, playerWon ? "#42f6b6" : "#ff6b8a");
playTone(playerWon ? 520 : 110, 0.14, playerWon ? "triangle" : "sawtooth", 0.08);
updateScoreboard();
if (state.playerScore >= WINNING_SCORE || state.cpuScore >= WINNING_SCORE) {
state.mode = "gameover";
state.winner = playerWon ? "player" : "cpu";
mainButton.textContent = "Restart";
setStatus(playerWon ? "You win" : "CPU wins");
return;
}
queueServe(playerWon ? -1 : 1, 0.9);
}
function predictBallY(targetX) {
const ball = state.ball;
if (Math.abs(ball.vx) < 1) return ball.y;
let projectedY = ball.y + (targetX - ball.x) * (ball.vy / ball.vx);
const top = COURT.wall + ball.radius;
const bottom = COURT.height - COURT.wall - ball.radius;
const span = bottom - top;
projectedY = ((projectedY - top) % (span * 2) + span * 2) % (span * 2);
if (projectedY > span) projectedY = span * 2 - projectedY;
return projectedY + top;
}
function draw() {
const shakeX = state.shake ? randomBetween(-state.shake, state.shake) : 0;
const shakeY = state.shake ? randomBetween(-state.shake, state.shake) : 0;
https://t.co/I7vBRTQaiE();
ctx.translate(shakeX, shakeY);
drawCourt();
drawParticles();
drawPaddle(state.player);
drawPaddle(state.cpu);
drawBall();
if (state.mode === "paused" || state.mode === "ready" || state.mode === "gameover") {
drawVignette();
}
ctx.restore();
if (state.flash > 0) {
ctx.fillStyle = `rgba(255, 255, 255, ${state.flash * 0.08})`;
ctx.fillRect(0, 0, COURT.width, COURT.height);
}
}
function drawCourt() {
const gradient = ctx.createLinearGradient(0, 0, COURT.width, COURT.height);
gradient.addColorStop(0, "#081418");
gradient.addColorStop(0.45, "#0b181a");
gradient.addColorStop(1, "#111317");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, COURT.width, COURT.height);
ctx.strokeStyle = "rgba(232, 251, 244, 0.10)";
ctx.lineWidth = 2;
for (let y = 28; y < COURT.height; y += 34) {
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(COURT.width, y);
ctx.stroke();
}
for (let x = 28; x < COURT.width; x += 34) {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, COURT.height);
ctx.stroke();
}
ctx.strokeStyle = "rgba(232, 251, 244, 0.28)";
ctx.lineWidth = 3;
ctx.strokeRect(COURT.wall, COURT.wall, COURT.width - COURT.wall * 2, COURT.height - COURT.wall * 2);
ctx.setLineDash([12, 16]);
ctx.strokeStyle = "rgba(232, 251, 244, 0.32)";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(COURT.width / 2, COURT.wall + 16);
ctx.lineTo(COURT.width / 2, COURT.height - COURT.wall - 16);
ctx.stroke();
ctx.setLineDash([]);
ctx.strokeStyle = "rgba(248, 201, 92, 0.26)";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(COURT.width / 2, COURT.height / 2, 64, 0, Math.PI * 2);
ctx.stroke();
}
function drawPaddle(paddle) {
const x = paddle.x - paddle.width / 2;
const y = paddle.y - paddle.height / 2;
https://t.co/I7vBRTQaiE();
ctx.shadowColor = paddle.color;
ctx.shadowBlur = 20;
ctx.fillStyle = paddle.color;
roundRect(x, y, paddle.width, paddle.height, 7);
ctx.fill();
ctx.shadowBlur = 0;
ctx.fillStyle = "rgba(255,255,255,0.28)";
roundRect(x + 3, y + 6, 3, paddle.height - 12, 3);
ctx.fill();
ctx.restore();
}
function drawBall() {
const ball = state.ball;
for (const point of ball.trail) {
ctx.globalAlpha = https://t.co/Pc66zLwx8Z * 0.28;
ctx.fillStyle = "#fff7cd";
ctx.beginPath();
ctx.arc(point.x, point.y, ball.radius * (0.5 + https://t.co/Pc66zLwx8Z * 0.55), 0, Math.PI * 2);
ctx.fill();
}
ctx.globalAlpha = 1;
https://t.co/I7vBRTQaiE();
ctx.shadowColor = "#fff7cd";
ctx.shadowBlur = 18;
ctx.fillStyle = "#fff7cd";
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fill();
ctx.shadowBlur = 0;
ctx.fillStyle = "rgba(255,255,255,0.7)";
ctx.beginPath();
ctx.arc(ball.x - 3, ball.y - 3, ball.radius * 0.28, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
function drawParticles() {
for (const particle of state.particles) {
ctx.globalAlpha = https://t.co/rBhhqw5DNh;
ctx.fillStyle = particle.color;
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fill();
}
ctx.globalAlpha = 1;
}
function drawVignette() {
const gradient = ctx.createRadialGradient(
COURT.width / 2,
COURT.height / 2,
80,
COURT.width / 2,
COURT.height / 2,
COURT.width * 0.72
);
gradient.addColorStop(0, "rgba(0,0,0,0)");
gradient.addColorStop(1, "rgba(0,0,0,0.38)");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, COURT.width, COURT.height);
}
function updateParticles(dt) {
for (const particle of state.particles) {
particle.x += particle.vx * dt;
particle.y += particle.vy * dt;
particle.vx *= Math.pow(0.08, dt);
particle.vy *= Math.pow(0.08, dt);
https://t.co/rBhhqw5DNh -= dt * particle.decay;
particle.size *= Math.pow(0.28, dt);
}
state.particles = state.particles.filter((particle) => https://t.co/rBhhqw5DNh > 0 && particle.size > 0.4);
}
function paddleBurst(paddle, y) {
const color = paddle.color;
const direction = paddle.side === "player" ? 1 : -1;
for (let i = 0; i < 12; i += 1) {
state.particles.push({
x: paddle.x + direction * 10,
y,
vx: direction * randomBetween(80, 260),
vy: randomBetween(-160, 160),
size: randomBetween(2, 4.8),
life: randomBetween(0.45, 0.9),
decay: randomBetween(1.2, 2),
color
});
}
}
function wallBurst(x, y, direction) {
for (let i = 0; i < 8; i += 1) {
state.particles.push({
x,
y,
vx: randomBetween(-90, 90),
vy: direction * randomBetween(60, 180),
size: randomBetween(1.5, 3.5),
life: randomBetween(0.35, 0.7),
decay: randomBetween(1.5, 2.4),
color: "rgba(232, 251, 244, 0.84)"
});
}
}
function scoreBurst(x, y, color) {
for (let i = 0; i < 28; i += 1) {
const angle = randomBetween(0, Math.PI * 2);
const speed = randomBetween(90, 360);
state.particles.push({
x,
y,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
size: randomBetween(2, 5.4),
life: randomBetween(0.6, 1.15),
decay: randomBetween(1, 1.8),
color
});
}
}
function clampPaddle(paddle) {
const top = COURT.wall + paddle.height / 2;
const bottom = COURT.height - COURT.wall - paddle.height / 2;
paddle.y = clamp(paddle.y, top, bottom);
}
function loop(time) {
if (!state.lastTime) state.lastTime = time;
let dt = Math.min(0.05, (time - state.lastTime) / 1000);
state.lastTime = time;
if (state.mode !== "paused" && state.mode !== "ready" && state.mode !== "gameover") {
state.accumulator += dt;
const step = 1 / 120;
while (state.accumulator >= step) {
update(step);
state.accumulator -= step;
}
} else {
updateParticles(dt);
if (state.flash > 0) state.flash = Math.max(0, state.flash - dt * 2.2);
if (state.shake > 0) state.shake = Math.max(0, state.shake - dt * 14);
}
syncTelemetry();
draw();
requestAnimationFrame(loop);
}
function roundRect(x, y, width, height, radius) {
const r = Math.min(radius, width / 2, height / 2);
ctx.beginPath();
ctx.moveTo(x + r, y);
ctx.arcTo(x + width, y, x + width, y + height, r);
ctx.arcTo(x + width, y + height, x, y + height, r);
ctx.arcTo(x, y + height, x, y, r);
ctx.arcTo(x, y, x + width, y, r);
ctx.closePath();
}
let audioContext = null;
function ensureAudio() {
if (state.muted || audioContext) return;
audioContext = new (window.AudioContext || window.webkitAudioContext)();
}
function playTone(frequency, duration, type = "sine", gain = 0.04) {
if (state.muted || !audioContext) return;
const oscillator = audioContext.createOscillator();
const volume = audioContext.createGain();
oscillator.type = type;
oscillator.frequency.value = frequency;
volume.gain.setValueAtTime(gain, audioContext.currentTime);
volume.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + duration);
oscillator.connect(volume);
volume.connect(audioContext.destination);
oscillator.start();
oscillator.stop(audioContext.currentTime + duration);
}
function clamp(value, min, max) {
return Math.max(min, Math.min(max, value));
}
function lerp(a, b, t) {
return a + (b - a) * t;
}
function randomBetween(min, max) {
return min + Math.random() * (max - min);
}
function canvasYFromEvent(event) {
const rect = canvas.getBoundingClientRect();
return ((event.clientY - https://t.co/6rJ1T4nNRU) / rect.height) * COURT.height;
}
window.addEventListener("resize", resize);
window.addEventListener("keydown", (event) => {
const key = event.key.toLowerCase();
if (["arrowup", "arrowdown", "w", "s", " "].includes(key)) {
event.preventDefault();
}
if (key === " ") {
startOrToggle();
return;
}
keys.add(key);
});
window.addEventListener("keyup", (event) => {
keys.delete(event.key.toLowerCase());
});
canvas.addEventListener("pointerdown", (event) => {
ensureAudio();
canvas.setPointerCapture(event.pointerId);
https://t.co/5vC3Y5REcf = true;
pointer.y = canvasYFromEvent(event);
if (state.mode === "ready" || state.mode === "gameover") startOrToggle();
});
canvas.addEventListener("pointermove", (event) => {
if (!https://t.co/5vC3Y5REcf) return;
pointer.y = canvasYFromEvent(event);
});
canvas.addEventListener("pointerup", (event) => {
https://t.co/5vC3Y5REcf = false;
if (canvas.hasPointerCapture(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
});
canvas.addEventListener("pointercancel", () => {
https://t.co/5vC3Y5REcf = false;
});
mainButton.addEventListener("click", startOrToggle);
soundButton.addEventListener("click", () => {
state.muted = !state.muted;
if (!state.muted) ensureAudio();
https://t.co/yUvabqDzxO.opacity = state.muted ? "0.54" : "1";
});
resize();
updateScoreboard();
syncTelemetry();
setStatus("Pulse Pong");
requestAnimationFrame(loop);
})();
</script>
</body>
</html>
I'm running the following prompt now. I will update later with status.
"/goal Build and polish a playable Pong clone in one HTML/JS file until smooth, fun, and bug-free. Success = working controls, physics, scoring, AI opponent, and balanced gameplay. Work in chunks (mechanics, physics/controls, scoring, AI, polish). After each chunk: summarize progress. Review Progress vs goal for fun/bugs/balance/polish. If the chunk progress is stronger than before, identify the next biggest improvement and continue. Repeat until no material improvement or goal reached. Log status each loop + share full code."
Here's an actual prompt I did recently. What could I add to make it a loop prompt?
"Let's do a comprehensive testing session of this test plan using admin account and using the device XYZ in non-prod. Do as much as you can until you reach a state of only blocked tests remaining. The test plan is below. "C:\test\plan\path.xlsx" Use a goal prompt for this."
Let the agent decide. Add this to most prompts, "Use a goal prompt as you see fit"
Do you use codex /goal occasionally or as your main way to get things done?
@Aqui_mi_casa notice the video cut when he spread out the egg white. Probably because it's not easy to get all the egg white through the spoon holes onto the pan.
Last Seen Users on Sotwe
Deniz ♥️☀️💚
Seen from Turkey
இராசபாளையத்துக்காரன்
Seen from India
شيكور🤤
Seen from Algeria
Gay X Collection
Seen from Vietnam
My hotwife
Seen from Turkey
Quốc Bảo⚜️
Seen from Vietnam
Asya😊
Seen from Netherlands
Dream Live
Seen from Indonesia
KatieMai👸🏻
Seen from United Kingdom
Vanessa
Seen from Japan
Most Popular Users
Elon Musk
@elonmusk
240.3M followers
Barack Obama
@barackobama
119.3M followers
Donald J. Trump
@realdonaldtrump
111.6M followers
Cristiano Ronaldo
@cristiano
109.8M followers
Narendra Modi
@narendramodi
106.9M followers
Rihanna
@rihanna
97.5M followers
NASA
@nasa
92.1M followers
Justin Bieber
@justinbieber
90.7M followers
KATY PERRY
@katyperry
87.3M followers
Taylor Swift
@taylorswift13
81.1M followers
Lady Gaga
@ladygaga
72.6M followers
Kim Kardashian
@kimkardashian
69.6M followers
Virat Kohli
@imvkohli
69.3M followers
YouTube
@youtube
68.6M followers
Bill Gates
@billgates
63.6M followers
The Ellen Show
@theellenshow
62.5M followers
Neymar Jr
@neymarjr
61.9M followers
CNN
@cnn
61.9M followers
X
@x
60.9M followers
Selena Gomez
@selenagomez
60.4M followers