🎮ArcadeLab

Chiper AI

by MegaFlare51
829 lines13.7 KB
▶ Play
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chiper AI</title>

<style>
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    height:100vh;
    overflow:hidden;
    font-family:Arial,sans-serif;
    color:white;
    background:
        radial-gradient(circle at 50% -10%,#0873c9,#031a30 40%,#01060c 80%);
}

.app{
    height:100vh;
    display:flex;
}

.sidebar{
    width:250px;
    padding:16px;
    background:#020914f5;
    border-right:1px solid #00aaff55;
    display:flex;
    flex-direction:column;
}

.logo{
    font-size:25px;
    font-weight:bold;
    padding:12px 8px 25px;
    text-shadow:0 0 10px white,0 0 25px #00aaff;
}

.newchat{
    padding:13px;
    border-radius:12px;
    border:1px solid #00baff;
    background:#062744;
    color:white;
    cursor:pointer;
    font-size:15px;
}

.history-title{
    margin-top:25px;
    font-size:12px;
    color:#66d5ff;
}

.history{
    margin-top:12px;
    color:#83a8bd;
    font-size:13px;
}

.version{
    margin-top:auto;
    color:#52778c;
    font-size:12px;
}

.main{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.top{
    padding:14px 22px;
    border-bottom:1px solid #00aaff44;
    background:#020b16dd;
}

.title{
    font-size:20px;
    font-weight:bold;
    text-shadow:0 0 10px #00aaff;
}

.online{
    margin-left:10px;
    font-size:10px;
    color:#66ddff;
}

.intro{
    margin-top:9px;
    color:#bcecff;
    font-size:13px;
    line-height:1.5;
}

.messages{
    flex:1;
    overflow-y:auto;
    padding:30px 15%;
}

.welcome{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
}

.robot{
    font-size:65px;
    filter:
        drop-shadow(0 0 10px white)
        drop-shadow(0 0 25px #00aaff);
}

.welcome h1{
    font-size:45px;
    margin-top:10px;
    text-shadow:0 0 10px white,0 0 25px #00aaff;
}

.welcome p{
    margin-top:12px;
    color:#8bd5ff;
}

.message{
    display:flex;
    gap:14px;
    margin-bottom:28px;
}

.avatar{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
}

.user-avatar{
    background:#007cff;
    box-shadow:0 0 15px #008cff;
}

.ai-avatar{
    background:white;
    color:#0077ff;
    box-shadow:0 0 15px white;
}

.text{
    padding-top:7px;
    max-width:850px;
    line-height:1.65;
    white-space:pre-wrap;
}

.input-area{
    padding:12px 15px 18px;
}

.input-box{
    display:flex;
    align-items:center;
    padding:8px 9px 8px 16px;
    border-radius:18px;
    background:#061a2d;
    border:1px solid #008cff;
    box-shadow:0 0 15px #008cff44;
}

textarea{
    flex:1;
    resize:none;
    border:0;
    outline:0;
    background:transparent;
    color:white;
    font-size:16px;
    padding:10px 5px;
}

textarea::placeholder{
    color:#6e9bb5;
}

.send{
    width:43px;
    height:43px;
    border:0;
    border-radius:13px;
    background:white;
    color:#0077ff;
    font-size:23px;
    cursor:pointer;
    box-shadow:0 0 10px white,0 0 25px #00aaff;
}

@media(max-width:700px){
    .sidebar{
        display:none;
    }

    .messages{
        padding:20px 15px;
    }

    .welcome h1{
        font-size:34px;
    }
}
</style>
</head>

<body>

<div class="app">

<aside class="sidebar">

    <div class="logo">
        ⚡ Chiper AI
    </div>

    <button class="newchat" onclick="novoChat()">
        ＋ Novo chat
    </button>

    <div class="history-title">
        HISTÓRICO
    </div>

    <div class="history" id="history">
        Nenhuma conversa ainda
    </div>

    <div class="version">
        Chiper AI • v6.0
    </div>

</aside>

<main class="main">

<header class="top">

    <div class="title">
        ⚡ Chiper AI
        <span class="online">● ONLINE</span>
    </div>

    <div class="intro">
        Olá ei sou a IA Chiper, e estou aqui para calcular contas,
        fazer top 1/20 de games e até mesmo cumprimentar você kkkk 😂
    </div>

</header>

<section class="messages" id="messages">

    <div class="welcome" id="welcome">

        <div class="robot">
            🤖
        </div>

        <h1>
            Chiper AI
        </h1>

        <p>
            Como posso ajudar você hoje?
        </p>

    </div>

</section>

<div class="input-area">

    <div class="input-box">

        <textarea
            id="input"
            rows="1"
            placeholder="Mensagem para a Chiper..."
        ></textarea>

        <button class="send" onclick="enviar()">
            ↑
        </button>

    </div>

</div>

</main>
</div>

<script>

/* ==============================
   MEMÓRIA
============================== */

let historico=[];


/* ==============================
   ELEMENTOS
============================== */

const input=document.getElementById("input");
const messages=document.getElementById("messages");
const history=document.getElementById("history");


/* ==============================
   ALEATÓRIO
============================== */

function aleatorio(lista){
    return lista[Math.floor(Math.random()*lista.length)];
}


/* ==============================
   NORMALIZAR
============================== */

function normalizar(texto){
    return texto
        .toLowerCase()
        .normalize("NFD")
        .replace(/[\u0300-\u036f]/g,"")
        .trim();
}


/* ==============================
   SAUDAÇÕES
============================== */

function ehSaudacao(texto){

    const t=normalizar(texto);

    return(
        /^o+i{1,1000}$/.test(t) ||
        /^oi+e{1,1000}$/.test(t) ||
        t==="ola" ||
        t==="opa" ||
        t==="como vai" ||
        t==="eai" ||
        t==="e ai"
    );
}


function responderSaudacao(){

    return(
        aleatorio([
            "Oi",
            "Olá",
            "Opaaa",
            "Eai"
        ])
        + ", "
        +
        aleatorio([
            "😁",
            "😎",
            "😏"
        ])
        + " "
        +
        aleatorio([
            "No que posso te ajudar hj?",
            "O que posso fazer pra tu hj?",
            "O que a gente vai fazer hj?"
        ])
    );
}


/* ==============================
   CONTAS
============================== */

function encontrarConta(texto){

    let frase=texto
        .replace(/×/g,"*")
        .replace(/÷/g,"/")
        .replace(/x/gi,"*")
        .replace(/,/g,".");

    const encontrado=frase.match(
        /\d+(?:\.\d+)?(?:\s*[+\-*/%]\s*\d+(?:\.\d+)?)+/
    );

    return encontrado ? encontrado[0] : null;
}


function calcularConta(conta){

    if(!/^[0-9+\-*/%.()\s]+$/.test(conta)){
        return null;
    }

    try{

        const resultado=Function(
            '"use strict";return ('+conta+')'
        )();

        if(
            typeof resultado!=="number" ||
            !Number.isFinite(resultado)
        ){
            return null;
        }

        return resultado;

    }catch{
        return null;
    }
}


function responderConta(texto){

    const conta=encontrarConta(texto);

    if(!conta){
        return null;
    }

    const resultado=calcularConta(conta);

    if(resultado===null){
        return null;
    }

    return(
        aleatorio([
            "Essa é fácil kkk:",
            "Boa, a resposta é:",
            "Legal, a resposta é:"
        ])
        + "\n\n🧮 "
        + resultado
        + "\n\n"
        +
        aleatorio([
            "Pode mandar mais kkk",
            "Manda ver nas contas 😎😎",
            "Manda verrr mn 😎😎"
        ])
    );
}


/* ==============================
   RANKING DE GAMES
============================== */

const rankingJogos=[

    "Minecraft",
    "Free Fire",
    "Roblox",
    "Fortnite",
    "Grand Theft Auto V",
    "Call of Duty",
    "PUBG",
    "Among Us",
    "League of Legends",
    "Valorant",
    "Counter-Strike 2",
    "Clash of Clans",
    "Brawl Stars",
    "Pokémon GO",
    "Genshin Impact",
    "Rocket League",
    "Apex Legends",
    "Fall Guys",
    "Terraria",
    "The Sims 4"

];


function ehRankingDeJogos(texto){

    const t=normalizar(texto);

    const temGame=
        t.includes("game") ||
        t.includes("games") ||
        t.includes("jogo") ||
        t.includes("jogos");

    const temRanking=
        t.includes("ranking") ||
        t.includes("raking") ||
        t.includes("rank") ||
        t.includes("top") ||
        t.includes("melhores");

    return temGame && temRanking;
}


function quantidadeTop(texto){

    const t=normalizar(texto);

    const encontrado=t.match(/top\s*(\d{1,2})/);

    if(!encontrado){
        return 20;
    }

    let n=parseInt(encontrado[1]);

    if(n<1)n=1;
    if(n>20)n=20;

    return n;
}


function responderRanking(texto){

    const quantidade=quantidadeTop(texto);

    let resultado="";

    for(let i=0;i<quantidade;i++){

        resultado+=
            (i+1)+
            " - "+
            rankingJogos[i]+
            "\n";
    }

    return(
        aleatorio([
            "Depende",
            "Humm. Dá pra fazer mais",
            "Aqui está mais"
        ])
        + "\n\n"
        +
        aleatorio([
            "Pode ser difícil fazer corretamente",
            "Pode ser complicado calcular de forma correta",
            "Pode ser complicado, mas dá pra estimar"
        ])
        + "\n\n"
        +
        resultado.trim()
    );
}


/* ==============================
   RESPOSTA PRINCIPAL
============================== */

function responder(texto){

    const t=normalizar(texto);

    if(ehSaudacao(texto)){
        return responderSaudacao();
    }

    if(ehRankingDeJogos(texto)){
        return responderRanking(texto);
    }

    const conta=responderConta(texto);

    if(conta){
        return conta;
    }

    if(t.includes("quem e voce") || t.includes("quem e vc")){
        return "Eu sou a Chiper AI 🤖⚡";
    }

    if(t.includes("qual seu nome")){
        return "Meu nome é Chiper AI 😎⚡";
    }

    if(t.includes("minecraft")){
        return "Minecraft! ⛏️😎 O que você quer saber?";
    }

    if(t.includes("roblox")){
        return "Roblox! 🎮😎 O que você quer saber?";
    }

    if(t.includes("html")){
        return "HTML é usado para criar a estrutura de páginas web. 💻";
    }

    if(t.includes("css")){
        return "CSS deixa a página bonita, organizada e animada. 🎨";
    }

    if(t.includes("javascript") || t==="js"){
        return "JavaScript adiciona lógica e interatividade ao site. ⚡";
    }

    if(t.includes("piada")){
        return aleatorio([
            "Por que o computador foi ao médico? Porque estava com um vírus 😂",
            "O programador deixou o Windows aberto e ficou com frio 🥶😂"
        ]);
    }

    if(
        t.includes("obrigado") ||
        t.includes("valeu")
    ){
        return aleatorio([
            "De nada! 😎",
            "Tamo junto! ⚡",
            "É nóis! 😁"
        ]);
    }

    return aleatorio([
        "Interessante! 🤔",
        "Boa pergunta! ⚡",
        "Hmm... me conta mais. 🤖",
        "Entendi! 😎"
    ]);
}


/* ==============================
   MENSAGENS
============================== */

function adicionarMensagem(texto,tipo){

    const mensagem=document.createElement("div");
    mensagem.className="message";

    const avatar=document.createElement("div");

    avatar.className=
        tipo==="user"
        ? "avatar user-avatar"
        : "avatar ai-avatar";

    avatar.textContent=
        tipo==="user" ? "U" : "AI";

    const conteudo=document.createElement("div");

    conteudo.className="text";
    conteudo.textContent=texto;

    mensagem.appendChild(avatar);
    mensagem.appendChild(conteudo);

    messages.appendChild(mensagem);

    messages.scrollTop=messages.scrollHeight;
}


/* ==============================
   ENVIAR
============================== */

function enviar(){

    const texto=input.value.trim();

    if(!texto)return;

    const welcome=document.getElementById("welcome");

    if(welcome){
        welcome.remove();
    }

    adicionarMensagem(texto,"user");

    historico.push(texto);

    atualizarHistorico();

    input.value="";
    input.style.height="auto";

    setTimeout(()=>{

        adicionarMensagem(
            responder(texto),
            "ai"
        );

    },400);
}


/* ==============================
   HISTÓRICO
============================== */

function atualizarHistorico(){

    if(historico.length===0){

        history.textContent=
            "Nenhuma conversa ainda";

        return;
    }

    history.innerHTML=
        historico.slice(-5)
        .map(x=>"💬 "+x.substring(0,30))
        .join("<br>");
}


/* ==============================
   NOVO CHAT
============================== */

function novoChat(){

    messages.innerHTML=`

        <div class="welcome" id="welcome">

            <div class="robot">
                🤖
            </div>

            <h1>
                Chiper AI
            </h1>

            <p>
                Como posso ajudar você hoje?
            </p>

        </div>
    `;

    historico=[];

    atualizarHistorico();

    input.focus();
}


/* ==============================
   ENTER
============================== */

input.addEventListener(
    "keydown",
    function(event){

        if(
            event.key==="Enter" &&
            !event.shiftKey
        ){

            event.preventDefault();

            enviar();
        }
    }
);


/* ==============================
   TAMANHO DO INPUT
============================== */

input.addEventListener(
    "input",
    function(){

        this.style.height="auto";

        this.style.height=
            Math.min(
                this.scrollHeight,
                140
            )+"px";
    }
);

</script>

</body>
</html>

Game Source: Chiper AI

Creator: MegaFlare51

Libraries: none

Complexity: complex (829 lines, 13.7 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: chiper-ai-megaflare51" to link back to the original. Then publish at arcadelab.ai/publish.