<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Indian Train Simulator</title>

<style>
*{box-sizing:border-box}
body{
    margin:0;
    overflow:hidden;
    background:#101010;
    font-family:Arial,sans-serif;
    color:white;
}
canvas{
    display:block;
    width:100vw;
    height:100vh;
    background:linear-gradient(#71b7e6 0%,#cfeeff 48%,#4b8b3b 49%,#24551e 100%);
}
#hud{
    position:fixed;
    top:10px;
    left:10px;
    background:rgba(0,0,0,.75);
    padding:12px;
    border-radius:12px;
    min-width:190px;
    font-size:14px;
}
#signal{
    position:fixed;
    top:10px;
    right:10px;
    background:#111;
    border-radius:12px;
    padding:12px 20px;
    text-align:center;
}
.light{
    width:25px;
    height:25px;
    border-radius:50%;
    margin:5px auto;
    background:#333;
}
#controls{
    position:fixed;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    align-items:center;
    background:rgba(0,0,0,.7);
    padding:10px;
    border-radius:15px;
}
button{
    border:0;
    border-radius:10px;
    padding:12px 15px;
    background:#222;
    color:white;
    font-weight:bold;
}
button:active{transform:scale(.95)}
#notch{
    font-size:22px;
    min-width:60px;
    text-align:center;
}
#station{
    position:fixed;
    bottom:100px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(0,0,0,.75);
    padding:10px 18px;
    border-radius:10px;
}
</style>
</head>

<body>

<canvas id="game"></canvas>

<div id="hud">
<b>🇮🇳 INDIAN TRAIN SIMULATOR</b><br><br>
Speed: <span id="speed">0</span> km/h<br>
Throttle: <span id="throttle">0</span>/8<br>
Brake: <span id="brake">0</span>%<br>
Distance: <span id="distance">0.0</span> km
</div>

<div id="signal">
SIGNAL
<div id="signalLight" class="light"></div>
<span id="signalText">GREEN</span>
</div>

<div id="station">Next: Jaipur Junction</div>

<div id="controls">
<button onclick="throttleDown()">− THROTTLE</button>
<div id="notch">0</div>
<button onclick="throttleUp()">THROTTLE +</button>
<button onclick="brakeDown()">BRAKE −</button>
<button onclick="brakeUp()">BRAKE +</button>
</div>

<script>

const canvas=document.getElementById("game");
const ctx=canvas.getContext("2d");

function resize(){
    canvas.width=innerWidth;
    canvas.height=innerHeight;
}
resize();
addEventListener("resize",resize);

let throttle=0;
let brake=0;
let speed=0;
let distance=0;

let signal="GREEN";
let stationDistance=8.5;

let aiTrain={
    distance:3.8,
    speed:52
};

const stations=[
    "Jaipur Junction",
    "Gandhi Nagar",
    "Durgapura",
    "Sanganer",
    "Phulera Junction",
    "Ajmer Junction"
];

let stationIndex=0;

function throttleUp(){
    if(throttle<8) throttle++;
}

function throttleDown(){
    if(throttle>0) throttle--;
}

function brakeUp(){
    brake=Math.min(100,brake+10);
}

function brakeDown(){
    brake=Math.max(0,brake-10);
}

document.addEventListener("keydown",e=>{

    if(e.key==="ArrowUp" || e.key==="w") throttleUp();
    if(e.key==="ArrowDown" || e.key==="s") throttleDown();
    if(e.key===" ") brakeUp();

    if(e.key==="b"){
        brake=0;
    }

});

function update(){

    /*
    BASIC TRAIN PHYSICS
    */
    let acceleration=throttle*0.045;

    let braking=(brake/100)*0.22;

    let resistance=0.012;

    speed+=acceleration;
    speed-=braking;
    speed-=resistance;

    if(speed<0) speed=0;

    if(speed>160) speed=160;

    distance+=speed/3600;

    /*
    STATION
    */

    stationDistance-=speed/3600;

    if(stationDistance<=0){

        stationIndex++;

        if(stationIndex>=stations.length)
            stationIndex=0;

        stationDistance=5+Math.random()*8;

        document.getElementById("station").innerText=
        "Next: "+stations[stationIndex];

    }

    /*
    AI TRAIN
    */

    aiTrain.distance-=aiTrain.speed/3600;

    if(aiTrain.distance<0){
        aiTrain.distance=12+Math.random()*10;
        aiTrain.speed=40+Math.random()*70;
    }

    /*
    SIGNAL LOGIC
    */

    if(aiTrain.distance<2.5 && speed>80){

        signal="RED";

    }else if(aiTrain.distance<5){

        signal="YELLOW";

    }else{

        signal="GREEN";

    }

    updateHUD();
}

function updateHUD(){

    document.getElementById("speed").innerText=
        Math.round(speed);

    document.getElementById("throttle").innerText=
        throttle;

    document.getElementById("brake").innerText=
        brake;

    document.getElementById("distance").innerText=
        distance.toFixed(1);

    document.getElementById("notch").innerText=
        throttle;

    const light=document.getElementById("signalLight");
    const text=document.getElementById("signalText");

    if(signal==="RED"){
        light.style.background="red";
        text.innerText="RED — STOP";
    }

    if(signal==="YELLOW"){
        light.style.background="yellow";
        text.innerText="YELLOW — CAUTION";
    }

    if(signal==="GREEN"){
        light.style.background="lime";
        text.innerText="GREEN — PROCEED";
    }
}

/*
DRAW WORLD
*/

function draw(){

    ctx.clearRect(0,0,canvas.width,canvas.height);

    const w=canvas.width;
    const h=canvas.height;

    /*
    SKY
    */

    let sky=ctx.createLinearGradient(0,0,0,h*.55);
    sky.addColorStop(0,"#62b5ed");
    sky.addColorStop(1,"#dff5ff");

    ctx.fillStyle=sky;
    ctx.fillRect(0,0,w,h*.55);

    /*
    SUN
    */

    ctx.fillStyle="#fff3a1";
    ctx.beginPath();
    ctx.arc(w-100,90,40,0,Math.PI*2);
    ctx.fill();

    /*
    MOUNTAINS
    */

    ctx.fillStyle="#557c62";

    ctx.beginPath();
    ctx.moveTo(0,h*.52);

    for(let x=0;x<=w;x+=80){

        let y=h*.40+
        Math.sin(x*.008)*45+
        Math.sin(x*.021)*25;

        ctx.lineTo(x,y);
    }

    ctx.lineTo(w,h*.52);
    ctx.closePath();
    ctx.fill();

    /*
    GROUND
    */

    ctx.fillStyle="#39732f";
    ctx.fillRect(0,h*.52,w,h*.48);

    /*
    RAILWAY
    */

    let horizon=h*.48;
    let bottom=h;

    ctx.fillStyle="#4d4038";

    ctx.beginPath();
    ctx.moveTo(w*.42,horizon);
    ctx.lineTo(w*.58,horizon);
    ctx.lineTo(w*.95,bottom);
    ctx.lineTo(w*.05,bottom);
    ctx.closePath();
    ctx.fill();

    /*
    RAILS
    */

    ctx.strokeStyle="#bfc2c4";
    ctx.lineWidth=7;

    ctx.beginPath();
    ctx.moveTo(w*.47,horizon);
    ctx.lineTo(w*.34,bottom);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(w*.53,horizon);
    ctx.lineTo(w*.66,bottom);
    ctx.stroke();

    /*
    SLEEPERS
    */

    ctx.strokeStyle="#382b25";
    ctx.lineWidth=5;

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

        let p=i/20;
        let y=horizon+(bottom-horizon)*p;

        let half=15+(w*.42*p);

        ctx.beginPath();
        ctx.moveTo(w/2-half,y);
        ctx.lineTo(w/2+half,y);
        ctx.stroke();
    }

    /*
    SIGNAL POST
    */

    ctx.strokeStyle="#222";
    ctx.lineWidth=5;

    ctx.beginPath();
    ctx.moveTo(w*.