Skip to content

Commit

Permalink
Add the ability to toggle visibility of each column (#28)
Browse files Browse the repository at this point in the history
  • Loading branch information
meooow25 authored Nov 4, 2020
1 parent cd7dd86 commit 6666525
Show file tree
Hide file tree
Showing 10 changed files with 312 additions and 102 deletions.
3 changes: 2 additions & 1 deletion carrot/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@
"content_scripts": [
{
"matches": ["*://*.codeforces.com/*"],
"js": ["src/content/content.js"]
"js": ["src/content/content.js"],
"css": ["src/content/content.css"]
}
],
"options_ui": {
Expand Down
42 changes: 19 additions & 23 deletions carrot/src/background/background.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Ratings from './cache/ratings.js';
import TopLevelCache from './cache/top-level-cache.js';
import predict, { Contestant, PredictResult } from './predict.js';
import PredictResponse from './predict-response.js';
import UserPrefs from './user-prefs.js';
import UserPrefs from '../util/user-prefs.js';
import * as api from './cf-api.js';

const DEBUG_FORCE_PREDICT = false;
Expand All @@ -19,25 +19,20 @@ const RATINGS = new Ratings(api, LOCAL);
const CONTESTS_COMPLETE = new ContestsComplete(api);
const TOP_LEVEL_CACHE = new TopLevelCache();

browser.runtime.onMessage.addListener(listener);

async function listener(message) {
try {
switch (message.type) {
case 'PREDICT':
return await getDeltas(message.contestId);
case 'PING':
await maybeUpdateContestList();
await maybeUpdateRatings();
return;
default:
throw new Error('Unknown message type');
}
} catch (er) {
console.error(er);
throw er;
browser.runtime.onMessage.addListener((message) => {
let responsePromise;
if (message.type === 'PREDICT') {
responsePromise = getDeltas(message.contestId);
} else if (message.type === 'PING') {
responsePromise = Promise.all([maybeUpdateContestList(), maybeUpdateRatings()]);
} else {
return;
}
}
return responsePromise.catch((e) => {
console.error(e);
throw e;
});
});

// Prediction related code starts.

Expand All @@ -59,15 +54,16 @@ function checkRatedByTeam(rows) {
}

async function getDeltas(contestId) {
const prefs = await UserPrefs.create(settings);
if (!TOP_LEVEL_CACHE.hasCached(contestId)) {
const deltasPromise = calcDeltas(contestId);
const deltasPromise = calcDeltas(contestId, prefs);
TOP_LEVEL_CACHE.cache(contestId, deltasPromise);
}
return await TOP_LEVEL_CACHE.getCached(contestId);
const predictResponse = await TOP_LEVEL_CACHE.getCached(contestId);
return { predictResponse, prefs };
}

async function calcDeltas(contestId) {
const prefs = await UserPrefs.create(settings);
async function calcDeltas(contestId, prefs) {
prefs.checkAnyDeltasEnabled();

if (CONTESTS.hasCached(contestId)) {
Expand Down
35 changes: 0 additions & 35 deletions carrot/src/background/user-prefs.js

This file was deleted.

3 changes: 3 additions & 0 deletions carrot/src/content/content.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.carrot-display-none {
display: none;
}
91 changes: 77 additions & 14 deletions carrot/src/content/content.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
const PING_INTERVAL = 3 * 60 * 1000; // 3 minutes
const PREDICT_TEXT_ID = 'predict_text';

const PREDICT_TEXT_ID = 'carrot-predict-text';
const DISPLAY_NONE_CLS = 'carrot-display-none';

const Unicode = {
BLACK_CURVED_RIGHTWARDS_AND_UPWARDS_ARROW: '\u2BAD',
Expand All @@ -10,6 +12,44 @@ const Unicode = {
BACKSLANTED_SOUTH_ARROW_WITH_HORIZONTAL_TAIL: '\u2B5D',
};

const PREDICT_COLUMNS = [
{
text: 'current performance',
id: 'carrot-current-performance',
setting: 'showColCurrentPerformance',
},
{
text: 'predicted delta',
id: 'carrot-predicted-delta',
setting: 'showColPredictedDelta',
},
{
text: 'delta required to rank up',
id: 'carrot-rank-up-delta',
setting: 'showColRankUpDelta',
},
];
const FINAL_COLUMNS = [
{
text: 'final performance',
id: 'carrot-final-performance',
setting: 'showColFinalPerformance',
},
{
text: 'final delta',
id: 'carrot-final-delta',
setting: 'showColFinalDelta',
},
{
text: 'rank change',
id: 'carrot-rank-change',
setting: 'showColRankChange',
},
];
const ALL_COLUMNS = PREDICT_COLUMNS.concat(FINAL_COLUMNS);

let columns; // Populated later

function makeGreySpan(text, title) {
const span = document.createElement('span');
span.style.fontWeight = 'bold';
Expand Down Expand Up @@ -196,11 +236,13 @@ function updateStandings(resp) {
deltaColTitle = 'Final rating change';
rankUpColWidth = '6.5em';
rankUpColTitle = 'Rank change';
columns = FINAL_COLUMNS;
break;
case 'PREDICTED':
deltaColTitle = 'Predicted rating change';
rankUpColWidth = '7.5em';
rankUpColTitle = 'Rating change for rank up';
columns = PREDICT_COLUMNS;
break;
default:
throw new Error('Unknown prediction type: ' + resp.type);
Expand Down Expand Up @@ -233,15 +275,26 @@ function updateStandings(resp) {
populateCells(resp.rowMap[handle], resp.type, rankUpTint, perfCell, deltaCell, rankUpCell);
}

if (idx % 2) {
perfCell.classList.add('dark');
deltaCell.classList.add('dark');
rankUpCell.classList.add('dark');
const cells = [perfCell, deltaCell, rankUpCell];
for (let i = 0; i < cells.length; i++) {
const cell = cells[i];
if (idx % 2) {
cell.classList.add('dark');
}
cell.classList.add(columns[i].id, DISPLAY_NONE_CLS);
tableRow.appendChild(cell);
}
}
}

tableRow.appendChild(perfCell);
tableRow.appendChild(deltaCell);
tableRow.appendChild(rankUpCell);
function updateColumnVisibility(prefs) {
for (const col of ALL_COLUMNS) {
const showCol = prefs[col.setting];
const func =
showCol ?
(cell) => cell.classList.remove(DISPLAY_NONE_CLS) :
(cell) => cell.classList.add(DISPLAY_NONE_CLS);
document.querySelectorAll(`.${col.id}`).forEach(func);
}
}

Expand All @@ -267,9 +320,9 @@ function showTimer(fetchTime) {
}

async function predict(contestId) {
let resp;
let data;
try {
resp = await browser.runtime.sendMessage({ type: 'PREDICT', contestId: contestId });
data = await browser.runtime.sendMessage({ type: 'PREDICT', contestId: contestId });
} catch (er) {
switch (er.message) {
case 'UNRATED_CONTEST':
Expand All @@ -284,17 +337,18 @@ async function predict(contestId) {
return;
}

updateStandings(resp);
switch (resp.type) {
updateStandings(data.predictResponse);
switch (data.predictResponse.type) {
case 'FINAL':
showFinal();
break;
case 'PREDICTED':
showTimer(resp.fetchTime);
showTimer(data.predictResponse.fetchTime);
break;
default:
throw new Error('Unknown prediction type: ' + resp.type);
throw new Error('Unknown prediction type: ' + data.predictResponse.type);
}
updateColumnVisibility(data.prefs);
}

function main() {
Expand All @@ -313,3 +367,12 @@ function main() {
}

main();

browser.runtime.onMessage.addListener((message) => {
if (message.type === 'LIST_COLS') {
return Promise.resolve(columns);
} else if (message.type == 'UPDATE_COLS') {
updateColumnVisibility(message.prefs);
return Promise.resolve();
}
});
85 changes: 81 additions & 4 deletions carrot/src/popup/popup.css
Original file line number Diff line number Diff line change
@@ -1,27 +1,38 @@
:root {
--carrot-orange: #e46d21;
}

body {
background-color:#fff9f5;
width: max-content;
margin: 0;
}

.main {
padding: 15px 20px;
}

.header {
display: flex;
align-items: center;
padding: 15px 20px;
}

.text {
font-weight: bold;
font-style: italic;
color: #e46d21;
color: var(--carrot-orange);
}

#icon {
width: 32px;
}

#title-version {
flex-grow: 1;
}

#title {
font-size: 18px;
font-size: 20px;
font-family: Georgia, serif;
margin-left: 8px;
}
Expand All @@ -32,6 +43,72 @@ body {
}

#settings {
margin-left: 15px;
margin-left: 20px;
cursor: pointer;
}

#options {
font-family: sans-serif;
font-size: 13px;
color: #222;
text-align: center;
margin: 10px 10px 5px 5px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
text-align: initial;
}

li {
margin-top: 8px;
}

label {
padding-left: 8px;
cursor: pointer;
vertical-align: middle;
}

input[type=checkbox] {
vertical-align: middle;
}

/* Disable Chrome's black outline */
input[type=checkbox]:focus {
outline: none;
}

/* Fancy toggle switch adapted from Firefox's extension enable/disable switch */
input[type=checkbox] {
appearance: none;
height: 15px;
width: 25px;
margin: 0;
background-color: #888;
border-radius: 999px;
cursor: pointer;
}

input[type=checkbox]::before {
display: block;
content: '';
background: #fff;
height: 11px;
width: 11px;
margin: 2px;
border-radius: 50%;
transition: 50ms;
}

input[type=checkbox]:checked {
background: var(--carrot-orange);
}

input[type=checkbox]:checked::before {
transform: translate(10px);
}
/* Fancy toggle switch end */
Loading

0 comments on commit 6666525

Please sign in to comment.