Rival

Gemma 3n 4BvsOpenAI o3

18 challenges

3 / 18

Pokémon Battle UI Recreation

web design·hard

Recreate an interactive, nostalgic Pokémon battle UI in a single HTML file.

Gemma 3n 4B

Google · May 2025website

OpenAI o3

Openai · Apr 2025website

Couldn't render this response

This model didn't return a displayable web page for this challenge.

View raw output

<style>
/* --- RESET & GENERAL ---------------------------------------------------- */
*{box-sizing:border-box;padding:0;margin:0;font-family:'Courier New',monospace}
body{display:flex;align-items:center;justify-content:center;height:100vh;background:#222;color:#000}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}

/* --- "GAME BOY" SHELL --------------------------------------------------- */
#gameboy{
    width:480px;max-width:90vw;aspect-ratio:1/0.8;background:#7aab6f;
    padding:18px;border-radius:12px;border:4px solid #3d6841;
    box-shadow:0 0 0 6px #1b2f1f inset,0 8px 16px rgba(0,0,0,.6)
}

/* --- LCD SCREEN --------------------------------------------------------- */
#lcd{
    width:100%;height:100%;background:#a9d84b;
    border:4px solid #3d6841;border-radius:4px;
    position:relative;overflow:hidden
}

/* --- SPRITE ZONES ------------------------------------------------------- */
#enemySprite,#playerSprite{
    position:absolute;font-size:3.2rem;user-select:none;
    filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))
}
#enemySprite{top:8%;right:8%}
#playerSprite{bottom:35%;left:8%}

/* --- STATUS BOXES ------------------------------------------------------- */
.status{
    position:absolute;width:45%;border:2px solid #000;background:#dfe3d4;
    padding:4px;font-size:.8rem
}
#enemyStatus{top:4%;left:4%}
#playerStatus{bottom:43%;right:4%}

.nameLv{display:flex;justify-content:space-between}
.bar{
    height:6px;background:#666;margin-top:2px;overflow:hidden
}
.gauge{
    height:100%;background:#34c039;width:100%;transition:width .3s
}
.hpText{text-align:right;font-size:.7rem}

/* --- TEXT & MENU BOX ---------------------------------------------------- */
#textbox{
    position:absolute;bottom:0;left:0;width:100%;height:36%;
    background:#dfe3d4;border-top:4px solid #000;
    padding:6px;display:flex;flex-direction:column;justify-content:space-between
}
#text{
    flex:1;font-size:.9rem;white-space:pre-line;line-height:1.2;
    overflow:hidden
}
#menu{
    display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:4px
}
#menu button{
    padding:4px;background:#a9d84b;border:2px solid #000;border-radius:2px
}
#menu button:disabled{opacity:.4;cursor:default}

/* --- TYPE‑WRITER CURSOR ------------------------------------------------- */
#cursor{
    display:inline-block;width:6px;background:#000;animation:blink 1s steps(1) infinite
}
@keyframes blink{50%{opacity:0}}
</style>
</head>
<body>
<div id="gameboy">
    <div id="lcd">
        <div id="enemySprite">🔥</div>
        <div id="playerSprite">⚡</div>

        <div id="enemyStatus" class="status">
            <div class="nameLv"><span id="enemyName">CHARMANDER</span><span>Lv5</span></div>
            <div class="bar"><div id="enemyHPBar" class="gauge"></div></div>
            <div id="enemyHpText" class="hpText"></div>
        </div>

        <div id="playerStatus" class="status">
            <div class="nameLv"><span id="playerName">PIKACHU</span><span>Lv5</span></div>
            <div class="bar"><div id="playerHPBar" class="gauge"></div></div>
            <div id="playerHpText" class="hpText"></div>
        </div>

        <div id="textbox">
            <div id="text"></div>
            <div id="menu"></div>
        </div>
    </div>
</div>

<script>
/* ---------------------------------------------------------------------
   Tiny Pokémon battle engine – just enough for nostalgia!
--------------------------------------------------------------------- */
const player = {
    name:"Pikachu",sprite:"⚡",level:5,maxHp:35,hp:35,
    moves:[
        {name:"Thunderbolt",power:25},
        {name:"Quick Attack",power:12},
        {name:"Tail Whip",power:0},
        {name:"Growl",power:0}
    ]
};
const enemy = {
    name:"Charmander",sprite:"🔥",level:5,maxHp:30,hp:30,
    moves:[
        {name:"Ember",power:15},
        {name:"Scratch",power:10}
    ]
};

const textEl = document.getElementById("text");
const menuEl = document.getElementById("menu");
const cursor = document.createElement("span");
cursor.id="cursor";
cursor.textContent=" ";

document.getElementById("enemySprite").textContent = enemy.sprite;
document.getElementById("playerSprite").textContent = player.sprite;

function updateBars(){
    document.getElementById("playerHpText").textContent = 'HP: ' + player.hp + '/' + player.maxHp;
    document.getElementById("enemyHpText").textContent  = 'HP: ' + enemy.hp + '/' + enemy.maxHp;
    document.getElementById("playerHPBar").style.width  = '' + player.hp/player.maxHp*100 + '%';
    document.getElementById("enemyHPBar").style.width   = '' + enemy.hp/enemy.maxHp*100 + '%';
}
updateBars();

/* ---- Text‑box Typewriter -------------------------------------------- */
function showText(msg, cb){
    menuEl.innerHTML="";
    textEl.innerHTML="";
    let i=0;
    textEl.appendChild(cursor);
    const speed=25;
    const interval = setInterval(()=>{
        if(i<msg.length){
            cursor.before(msg[i++]);
        }else{
            clearInterval(interval);
            cursor.remove();
            setTimeout(cb,300);
        }
    },speed);
}

/* ---- Menu helpers --------------------------------------------------- */
function mainMenu(){
    menuEl.innerHTML="";
    const options=["FIGHT","BAG","POKÉMON","RUN"];
    options.forEach((opt,idx)=>{
        const b=document.createElement("button");
        b.textContent=opt;
        b.onclick=()=>{
            if(opt==="FIGHT") moveMenu();
            else showText(opt + ' is not implemented yet!',playerTurn);
        };
        if(idx>1) b.disabled=true; // keep only FIGHT for real.
        menuEl.appendChild(b);
    });
}
function moveMenu(){
    menuEl.innerHTML="";
    player.moves.forEach((m,idx)=>{
        const b=document.createElement("button");
        b.textContent=m.name;
        b.onclick=()=>chooseMove(idx);
        menuEl.appendChild(b);
    });
}

function chooseMove(idx){
    const move=player.moves[idx];
    if(move.power===0){
        showText(player.name + ' used ' + move.name + '!
But nothing happened…',enemyTurn);
        return;
    }
    const dmg = rand(move.power/2,move.power);
    enemy.hp=Math.max(0,enemy.hp-dmg);
    updateBars();
    showText(player.name + ' used ' + move.name + '!
It did ' + dmg + ' damage!',()=>{
        if(enemy.hp===0){
            showText(enemy.name + ' fainted!
You win!',()=>{
                menuEl.innerHTML="";
            });
        }else{
            enemyTurn();
        }
    });
}

function enemyTurn(){
    const move = enemy.moves[rand(0, enemy.moves.length-1)];
    const dmg   = rand(move.power/2,move.power);
    player.hp   = Math.max(0, player.hp-dmg);
    updateBars();
    showText(enemy.name + ' used ' + move.name + '!
' + dmg + ' damage to ' + player.name + '!',()=>{
        if(player.hp===0){
            showText(player.name + ' fainted!
You blacked out…',()=>menuEl.innerHTML="");
        }else{
            playerTurn();
        }
    });
}

function playerTurn(){
    showText('What will ' + player.name + ' do?',mainMenu);
}

/* ---- Utility --------------------------------------------------------- */
function rand(min,max){ // inclusive int
    return Math.floor(Math.random()*(max-min+1))+min;
}

/* ---- START THE BATTLE ------------------------------------------------- */
showText('Wild ' + enemy.name + ' appeared!',()=>{
    showText(player.name + ', I choose you!',playerTurn);
});
</script>

Vote