Skip to content
This repository has been archived by the owner on Jun 27, 2022. It is now read-only.

Commit

Permalink
Rename some CSS to be more understandable
Browse files Browse the repository at this point in the history
  • Loading branch information
@iotku
iotku committed Feb 28, 2015
1 parent b82ff03 commit 181dd87
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 36 deletions.
32 changes: 16 additions & 16 deletions css/timer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,20 +46,20 @@ input:disabled {

#splits,#splits-editor {width: 200px; font-family: "Segoe UI"; font-size: 14px;}

#dattable {
#splits-table {
table-layout: fixed;
width: 100%;

}

#splits-title {
#splits-header {
text-align: center;
font-size: 14px;
line-height: 16px;
padding-bottom: 2px;
}

#dattable div {
#splits-table div {
border-bottom: 1px solid #1D1D1D;
padding-top: 1.5px;
padding-bottom: 1.5px;
Expand All @@ -70,7 +70,7 @@ input:disabled {
background-color: #111;
}

#timers {
#timer {
border-top: 2px solid #555;
background-color: #0F0F0F;
padding-bottom: 5px;
Expand All @@ -81,32 +81,32 @@ input:disabled {
}

/* Gradient Colors for #timer_realtime */
#timers .stop1 { stop-color: white; }
#timers .stop2 { stop-color: gray; }
#timer .stop1 { stop-color: white; }
#timer .stop2 { stop-color: gray; }

#prevsplit,#dattable div:nth-child(3n+3) {
#prevsplit,#splits-table div:nth-child(3n+3) {
text-align: right;
padding-right: 5px;
}

#dattable {
#splits-table {
display: table;
width: 100%;
}

#dattable span {
#splits-table span {
display: table-row;
}

#dattable span div:nth-child(2n+1) {
#splits-table span div:nth-child(2n+1) {
display: table-cell;
}

#dattable span div:nth-child(2n+2) {
#splits-table span div:nth-child(2n+2) {
display: table-cell;
}

#dattable span div:nth-child(3n+1) {
#splits-table span div:nth-child(3n+1) {
/*float: left;*/
display: table-cell;
text-align: left;
Expand All @@ -116,15 +116,15 @@ input:disabled {
text-overflow: ellipsis;
}

#dattable span:nth-child(2n+1) {
#splits-table span:nth-child(2n+1) {
background-color: #111;
}

#dattable span:nth-child(2n+2) {
#splits-table span:nth-child(2n+2) {
background-color: #171717;
}

#dattable span div:nth-child(2n+2) {
#splits-table span div:nth-child(2n+2) {
text-align: center;
display: table-cell;
}
Expand All @@ -142,7 +142,7 @@ input:disabled {
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3373f4', endColorstr='#153574',GradientType=0 );
}

#splits-title {
#splits-header {
background: #2a2a2a;
background: -moz-linear-gradient(top, #2a2a2a 0%, #131313 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2a2a), color-stop(100%,#131313));
Expand Down
10 changes: 7 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,16 @@
</head>
<body>
<div id="container">
<div id="splits">
<div id="splits-header">
<div id="splits-title">No Title.</div>
<div id="dattable">
<div id="splits-game-name">No Game.</div>
<div id="attempt-counter">0</div>
</div>
<div id="splits">
<div id="splits-table">
</div>
</div>
<div id="timers">
<div id="timer">
<svg height="55" width="200">
<defs>
<linearGradient id="text-gradient" x1="0%" x2="0%" y1="0%" y2="100%">
Expand Down
36 changes: 19 additions & 17 deletions js/timer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,8 +227,10 @@ function GameTimer(d) {
// How many splits do we have? Don't count info.
this.totalSplits = Object.keys(splitsObject).length - 1;

document.getElementById("splits-title").innerHTML = splitsObject.info[0] + '<br>' + splitsObject.info[1] + '<div id="attempt-counter">' + splitsObject.info[2] + '</div>';
document.getElementById("dattable").innerHTML = ""; // Make sure table is empty
document.getElementById("splits-title").innerHTML = splitsObject.info[0];
document.getElementById("splits-game-name").innerHTML = splitsObject.info[1];
document.getElementById("attempt-counter").innerHTML = splitsObject.info[2];
document.getElementById("splits-table").innerHTML = ""; // Make sure table is empty

var addtime = 0;
for (var step = 1; step <= this.totalSplits; step++) {
Expand All @@ -237,7 +239,7 @@ function GameTimer(d) {
/* variables should be used properly here. (confusing) */

// Generate table (Now formatted DIVs) based on splitsObject
document.getElementById("dattable").innerHTML += '<span id="row' + this.currentSplit + '">' + '<div id="splitname' + this.currentSplit + '"></div>' + '<div id="split' + this.currentSplit + '"></div>' + '<div id="difference' + this.currentSplit + '"></div>' + '</span>';
document.getElementById("splits-table").innerHTML += '<span id="row' + this.currentSplit + '">' + '<div id="splitname' + this.currentSplit + '"></div>' + '<div id="split' + this.currentSplit + '"></div>' + '<div id="difference' + this.currentSplit + '"></div>' + '</span>';

// Insert split names
document.getElementById("splitname" + this.currentSplit).innerHTML = splitsObject[this.currentSplit][0];
Expand Down Expand Up @@ -339,12 +341,12 @@ function GameTimer(d) {
// Change title/goal/attempt counter may require html restructure
// document.getElementById("splits-title").innerHTML = '<input value="' + splitsObject.info[0] + '<br>' + splitsObject.info[1] + '<input id="attempt-counter" value="' + splitsObject.info[2] + '" />';

document.getElementById("dattable").innerHTML = ""; // Make sure table is empty
document.getElementById("dattable").innerHTML = '<input disabled value="Names" /><input disabled value="Best" /><input disabled value="Seg" /><br>';
document.getElementById("splits-table").innerHTML = ""; // Make sure table is empty
document.getElementById("splits-table").innerHTML = '<input disabled value="Names" /><input disabled value="Best" /><input disabled value="Seg" /><br>';
for (var step = 1; step <= this.totalSplits; step++) {
document.getElementById("dattable").innerHTML += '<span id="row' + step + '">' + '<input id="splitname' + step + '" type="text" value="' + splitsObject[step][0] + '" />' + '<input id="bestsegment' + step + '" type="text" value="' + this.editorRealTime(splitsObject[step][2]) + '">' + '<input id="difference' + step + '" type="text" value="' + this.editorRealTime(splitsObject[step][1]) + '">' + '</span>';
document.getElementById("splits-table").innerHTML += '<span id="row' + step + '">' + '<input id="splitname' + step + '" type="text" value="' + splitsObject[step][0] + '" />' + '<input id="bestsegment' + step + '" type="text" value="' + this.editorRealTime(splitsObject[step][2]) + '">' + '<input id="difference' + step + '" type="text" value="' + this.editorRealTime(splitsObject[step][1]) + '">' + '</span>';
}
document.getElementById("dattable").innerHTML += '<input type="button" value="Add split" onclick="t.addSplit()"/><input type="button" value="Del split" onclick="t.removeSplit()"/><input type="button" value="Save" onclick="t.saveNewSplits()"/>&nbsp<input type="button" value="Exit" onclick="t.genSplits()"/>';
document.getElementById("splits-table").innerHTML += '<input type="button" value="Add split" onclick="t.addSplit()"/><input type="button" value="Del split" onclick="t.removeSplit()"/><input type="button" value="Save" onclick="t.saveNewSplits()"/>&nbsp<input type="button" value="Exit" onclick="t.genSplits()"/>';
};

this.saveNewSplits = function () {
Expand Down Expand Up @@ -383,24 +385,24 @@ function GameTimer(d) {
document.getElementById("prevsplit").innerHTML = "Ready";
document.getElementById("prevtext").innerHTML = "";

this.cssChange('#timers .stop1', 'stop-color', 'white');
this.cssChange('#timers .stop2', 'stop-color', 'gray');
this.cssChange('#timer .stop1', 'stop-color', 'white');
this.cssChange('#timer .stop2', 'stop-color', 'gray');
} else if (currentState === 'play') {
if (this.currentSplit === 1) {
document.getElementById("row1").className += " active-split";
document.getElementById("prevsplit").innerHTML = "...";
}
this.cssChange('#timers .stop1', 'stop-color', '#00FF68');
this.cssChange('#timers .stop2', 'stop-color', '#00A541');
this.cssChange('#timer .stop1', 'stop-color', '#00FF68');
this.cssChange('#timer .stop2', 'stop-color', '#00A541');
} else if (currentState === 'pause') { // Same as stopped
this.cssChange('#timers .stop1', 'stop-color', 'white');
this.cssChange('#timers .stop2', 'stop-color', 'gray');
this.cssChange('#timer .stop1', 'stop-color', 'white');
this.cssChange('#timer .stop2', 'stop-color', 'gray');
} else if (currentState === 'ahead') {
this.cssChange('#timers .stop1', 'stop-color', '#00B3FF');
this.cssChange('#timers .stop2', 'stop-color', '#00A1E6');
this.cssChange('#timer .stop1', 'stop-color', '#00B3FF');
this.cssChange('#timer .stop2', 'stop-color', '#00A1E6');
} else if (currentState === 'behind') {
this.cssChange('#timers .stop1', 'stop-color', '#FF0000');
this.cssChange('#timers .stop2', 'stop-color', '#E30000');
this.cssChange('#timer .stop1', 'stop-color', '#FF0000');
this.cssChange('#timer .stop2', 'stop-color', '#E30000');
}
};

Expand Down

0 comments on commit 181dd87

Please sign in to comment.