Chess clock countdown

Question

I'm trying to cerate simple chess code, that I will understand how it works. I did find one or two samples, but I don't undersstand that code. (link 1, link 2) Can you help me?

I try to combine countdown timer to a checc clock, but with no succes. When I press button "start" the clock will start count down for player 1 (white). When this player press a button ("White") the time will stop for this player and start count down for black player and so when this one press button "black" the timer start count down for white. Do I need 2 seperate timers or it will be enough one that can 'save' timers? How do I set the "add time"? This is when player press button, the timer add few seconds?

this is what I try so far:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Chess clock</title>

    <style type="text/css">
        #MoveWhite{
            margin-left: 50px;
            float:Left;
            width:200px;
            height: 100px;
            background-color: silver;
            text-align: center;
        }

        #MoveBlack{
            float:left;
            width:200px;
            height: 100px;
            background-color: blue;
            text-align: center;
        }

        #Begin{
            margin-left: 50px;
            float:left;
            width: 400px;
            height: 100px;
            background-color: green;
            text-align: center;
        }
        #SetUp{
            margin-left: 50px;
            margin-right: 50px;
            float: left;
            width: 400px;
            height: 100px;
            background-color: green;
        }
        body{
            width: 500px;
            background-color: #06F;
        }

    </style>

    <script type="text/javascript">
    var minutesleft = 0;
    var secondsleft = 60;
    var finishedtext = "Lost"

    ura = new Date();

    ura.setMinutes(ura.getMinutes() + minutesleft);
    ura.setSeconds(ura.getSeconds() + secondsleft);

    function cdWhite(){
        now = new Date();
        diff = ura - now;
        diff = new Date(diff);
        var sec = diff.getSeconds();
        var min = diff.getMinutes();
        if (min < 10){
            min = "0" + min;
        }
        if (sec < 10){
            sec = "0" + sec;
        }

        if(now >= ura){
            clearTimeout(timerID);
            document.getElementById("cdtime").innerHTML = finishedtext;
        }
        else{
        document.getElementById("cdtime").innerHTML = min + ":" + sec;
        }
        timerID = setTimeout("cdWhite()", 10); 
    }

    </script>

</head>

<body>
    <div id = "Begin">
        <p>White player start game when press "Start game" button</p>
        <button onClick="cdWhite()">Start game!</button>

    </div>

    <div id = "num1">
        <div id = "MoveWhite">
            <h1 id = "White"><span id="cdtime">TimerWhite??<!-- Lost (if white player loose) -->
            </span></h1>
            <button onClick="startBlack()">White</button>

        </div>

        <div id = "MoveBlack">
             <h1 id = "Black">TimerBlack??</h1> <!-- Lost (if black player loose) -->
            <button onClick="startWhite()">Black</button>

         </div>

    </div>

    <div id = "SetUp">
        <p>Set different starting time <br/>
            Set starting time: ___min ___sec</p>
        <p>Add time: ____ sec</p>


    </div>

    <ul id = "cas">
    </ul>

</body>
</html>

I seriously suggest you move this code to JSFiddle so it's easier to read and debug. Also, anyone who decides to help will be able to create their own fork easily. I tried to move your code to JSFiddle myself, it didn't run and I didn't dig deeper to see why (since you claimed that it works and the timer starts to run). So I guess your first step should be to move to JSF. — Sergey Snegirev, Apr 08 '13 at 15:26

score 0 · Answer 1 · answered Apr 08 '13 at 16:01

I can help with the design, but you will have to work out the JS. You will need two separate timers to store the current time left for each player. Your current implementation seems to track the time left by finding the difference between a starting time and the current time. This is fine for one instance of the clock ticking down, but doesn't lend itself to stopping/starting the timer.

I would advise trying the following design. Create two timer variables whiteTime and blackTime. Initialize them to zero. Your add time button can call a function addTime():

function addTime(min, sec)
{
    whiteTime += 60 * min + sec;
    blackTime += 60 * min + sec;
}

You also need a variable to keep track of whose turn it is, and a variable to keep track of when the current turn began. When White's turn begins, create a new date to record the current time. Call this function when player hits the "white" button. Create a similar function for black.

var currentPlayer = "white";
var ura = new Date();
function whitesTurn()
{
    if (currentPlayer == "black")
    {
        // Get current time and subtract ura, subtract difference from black's timer
        currentPlayer = "white";
        ura = new Date();
    }
}
function blacksTurn() { }

Now, in your main timer function, you need to:

Find the current time
Subtract ura
Subtract the difference from the player referenced by currentPlayer's timer
Update that player's clock, check if it's hit zero, etc

Since most of the code is going to be the same, I'd consider using the same function for both buttons. Just add onclick="startTurn('black')" and onclick="startTurn('white')" to either button, and then decide whose turn it is inside the function startTurn(who){}. Likewise, there is no need for the third button, since pressing either button should start the timer. Heck, even one button is enough to start/switch the timer, but it'll be less like the mechanical chess clock. — Sergey Snegirev, Apr 08 '13 at 17:39
Any idea how "repair" showing time where seconds are less than 10. Now it shows 9,8,7...1 but I'd like to show seconds with 0 in front, like 09,08,07...01. How to repair that? — Phantom, Apr 19 '13 at 09:16
Take a look at http://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript — Otaia, Apr 19 '13 at 14:46

Chess clock countdown

1 Answers1