Skip to content

Commit

Permalink
update components
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomjackman
tomjackman committed Feb 1, 2023
1 parent f622902 commit cde38b2
Show file tree
Hide file tree
Showing 42 changed files with 1,337 additions and 1,190 deletions.
21 changes: 14 additions & 7 deletions assets/base/base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ UI.c = function createReactComponent(type, data) {
};

UI.controllerUpdateRate = 999;
UI.spectatorUpdateRate = 1000/6;
UI.spectatorUpdateRate = 1000/20;

UI.getUserInfo = (function() {
var userCache = {};
Expand All @@ -41,9 +41,9 @@ UI.getUserInfo = (function() {

$.getJSON('/user-info/' + id, function(data) {
if (data.error) {
console.log(data.error)
return;
}

userCache[id] = data;
});

Expand All @@ -57,11 +57,17 @@ UI.fixName = function(name) {
});
};

UI.getClassColour = function(classId) {
if (r3eData.classes[classId] != null && r3eClassColours.classes[classId] != null) {
return r3eClassColours.classes[classId].colour;
UI.getClassColour = function(performanceIndex) {
var classColour = "rgba(38, 50, 56, 0.8)";
if (performanceIndex != null) {
var b = -performanceIndex * 11000 & 0xFF,
g = (-performanceIndex * 11000 & 0xFF00) >>> 8,
r = (-performanceIndex * 111000 & 0xFF0000) >>> 16,
a = ( (-performanceIndex * 10000 & 0xFF000000) >>> 24 ) / 255 ;
classColour = "rgba(" + [r, g, b, a].join(",") + ")";
return classColour;
} else {
return null;
return classColour;
}
};

Expand Down Expand Up @@ -140,8 +146,9 @@ UI.formatTime = function(ms, options) {
}

if (minutesLeft) {
str += ('0'+minutesLeft).slice(-2)+':';
str += (''+minutesLeft).slice(-2)+':';
}

return str+('0'+secondsLeft).slice(-2)+'.'+('00'+msLeft).slice(-3);
};

Expand Down
10 changes: 9 additions & 1 deletion assets/base/base.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,20 @@
url(/fonts/hel.woff) format('woff');
}

@font-face {
font-family: 'Formula1-Regular';
font-style: normal;
font-weight: 400;
src: local('Formula1-Regular'),
url(/fonts/Formula1-Regular.woff2) format('woff2');
}


/* ---------------------------------------------------------------------------------------- */

html, body {
background: transparent;
font: 14px/1 Helvetica, verdana, arial, sans-serif;
font: 14px/1 Formula1-Regular, Helvetica, verdana, arial, sans-serif;
color: #000;
}
body {
Expand Down
6 changes: 3 additions & 3 deletions assets/components/base/commentatorDashboard/commentatorDashboard.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
color: white;
background: #15202b;
z-index: 2;
font-family: Abel;
font-family: Formula1-Regular;
line-height: 0.9;
&.isLastLaps {
background: @warningColor;
Expand All @@ -65,7 +65,7 @@
padding: 0 0 0 5px;
opacity: 0.5;
.values {
font-family: arial;
font-family: Formula1-Regular;
}
}

Expand All @@ -85,7 +85,7 @@
font-size: 25px;
padding: 10px 15px;
background: rgba(0, 0, 0, 0.3);
font-family: Abel;
font-family: Formula1-Regular;
}
.row-entries {
padding: 5px;
Expand Down
70 changes: 47 additions & 23 deletions assets/components/base/controller/controller.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,8 +277,8 @@ var Driver = React.createClass({
var divStyle = {
position: "absolute"
};
if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(driver.classId) != null) {
classColour = UI.getClassColour(driver.classId);
if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(driver.performanceIndex) != null) {
classColour = UI.getClassColour(driver.performanceIndex);
divStyle = {
background: classColour,
position: "absolute"
Expand Down Expand Up @@ -360,14 +360,14 @@ var ControlOption = React.createClass({
'controlPanelOption': true
});

var color = self.state.value != "false" ? '#4CAF50' : '#F44336';
var color = self.state.value != "false" ? 'rgb(118 255 3)' : '#F44336';

return (
<div className={classes}>
<form>
<div className="option">
<label>
<span title={UI.getStringTranslation("configFile", self.state.translationDescription)} style={{'font-size': '20px', 'color': color}}>🛈 {UI.getStringTranslation("configFile", self.state.translationDisplayName)}</span>
<span title={UI.getStringTranslation("configFile", self.state.translationDescription)} style={{'font-size': '15px', 'color': color}}>🛈 {UI.getStringTranslation("configFile", self.state.translationDisplayName)}</span>
<input
defaultValue={self.state.value}
type={self.state.type}
Expand Down Expand Up @@ -615,7 +615,7 @@ UI.components.Controller = React.createClass({
Overview
</a>
{session.type && session.phase ?
<span>{UI.getStringTranslation("sessionInfoWidget", session.type.toLowerCase().replace(/ /g,""))} - {UI.getStringTranslation("sessionInfoWidget", session.phase.toLowerCase().replace(/ /g,""))}: {UI.formatSessionTime(session.timeLeft)}/{UI.formatSessionTime(session.timeTotal)} - {UI.state.eventInfo.serverName}</span>
<span>{UI.getStringTranslation("sessionInfoWidget", session.type.toLowerCase().replace(/ /g,""))} /// {UI.getStringTranslation("sessionInfoWidget", session.phase.toLowerCase().replace(/ /g,""))}: {UI.formatSessionTime(session.timeLeft)}/{UI.formatSessionTime(session.timeTotal)} /// {UI.state.eventInfo.serverName}</span>
:
null
}
Expand Down Expand Up @@ -655,6 +655,7 @@ UI.components.Controller = React.createClass({
<div className="drivers-container-beta-title">
<div className="tabled-driver-entry">
<div className="position">{UI.getStringTranslation("controller", "position")}</div>
<div className="positionIncrease">+ -</div>
<div className="lap">{UI.getStringTranslation("controller", "lap")}</div>
<div className="interesting">{UI.getStringTranslation("controller", "difference")}</div>
<div className="flag"></div>
Expand All @@ -666,13 +667,10 @@ UI.components.Controller = React.createClass({
<div className="pit">{UI.getStringTranslation("controller", "pitCount")}</div>
<div className="mandatoryPit">{UI.getStringTranslation("controller", "mandatoryPit")}</div>
<div className="tyre">{UI.getStringTranslation("controller", "tyre")}</div>
<div className="tyreWear">{UI.getStringTranslation("controller", "tyreWear")}</div>
<div className="damage">{UI.getStringTranslation("controller", "damage")}</div>
<div className="flags">{UI.getStringTranslation("controller", "flags")}</div>
<div className="ptp">{UI.getStringTranslation("controller", "ptp")}</div>
<div className="drs">{UI.getStringTranslation("controller", "drs")}</div>
<div className="best-lap-s1">{UI.getStringTranslation("controller", "sector1")}</div>
<div className="best-lap-s2">{UI.getStringTranslation("controller", "sector2")}</div>
<div className="best-lap-time">{UI.getStringTranslation("controller", "bestLap")}</div>
<div className="last-lap-time">{UI.getStringTranslation("controller", "lastLap")}</div>
{isRace && <div className="action"></div>}
Expand Down Expand Up @@ -814,10 +812,10 @@ var TabledDriver = React.createClass({
},
renderPostion: function(driver) {
var divStyle = {};
if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(driver.classId) != null) {
classColour = UI.getClassColour(driver.classId);
if (UI.state.controllerOptions.options.multiclass.value === "true" && UI.getClassColour(driver.performanceIndex) != null) {
classColour = UI.getClassColour(driver.performanceIndex);
divStyle = {
background: classColour
'border-left': classColour + '5px solid'
};
return <div className="position" style={divStyle} title={UI.getStringTranslation("controller", "overall") + " - P" + driver.scoreInfo.positionOverall + ", " + UI.getStringTranslation("controller", "class") + " - P" + driver.scoreInfo.positionClass}>{driver.scoreInfo.positionClass}</div>
} else {
Expand Down Expand Up @@ -854,9 +852,22 @@ var TabledDriver = React.createClass({
},
getTimeDiff: function(driver, fastestDriver) {
var self = this;

const statusNames = [
'NONE',
'FINISHED',
'DNF',
'DNQ',
'DNS',
'DQ',
];


// Race
if (UI.state.sessionInfo.type.match(/^race/i)) {
if (driver.scoreInfo.positionOverall === 1) {
if (driver.scoreInfo.status > 1) {
return statusNames[driver.scoreInfo.status];
} else if (driver.scoreInfo.positionOverall === 1) {
return UI.getStringTranslation("controller", "lap") + " " + (driver.scoreInfo.laps + 1);
} else if (driver.scoreInfo.lapDiff === 1) {
return "+1 " + UI.getStringTranslation("controller", "lap");
Expand Down Expand Up @@ -887,14 +898,24 @@ var TabledDriver = React.createClass({
return UI.fixName(name);
}
},
getPositionIncrease(value) {
if(value === 0) {
return '-';
} else if (value > 0) {
return '+' + value;
} else if (value < 0) {
return value;
}
},
render: function() {
var self = this;

var classes = cx({
'tabled-driver-entry': true,
'focused': this.props.focused,
'idle': self.props.driver.vehicleInfo.speed < 5,
'hasModal': this.state.actionModalActive
'hasModal': this.state.actionModalActive,
'striped': self.props.driver.scoreInfo.positionOverall % 2
});
var driver = self.props.driver;
var state = self.state;
Expand All @@ -905,6 +926,12 @@ var TabledDriver = React.createClass({
return (
<div className={classes} style={{'azIndex': (100-this.props.position)}}>
{self.renderPostion(driver)}
{ UI.state.sessionInfo.type.match(/^race/i) ?
<div className={cx({'positionIncrease': true, 'level': driver.scoreInfo.positionClass === driver.scoreInfo.positionRaceGridClass, 'gained': driver.scoreInfo.positionClass < driver.scoreInfo.positionRaceGridClass, 'lost': driver.scoreInfo.positionClass > driver.scoreInfo.positionRaceGridClass})}>{self.getPositionIncrease(driver.scoreInfo.positionRaceGridClass - driver.scoreInfo.positionClass)}</div>
:
<div className={cx({'positionIncrease': true, 'level': true})}> - </div>
}

<div className="lap">{driver.scoreInfo.laps + 1}</div>
{isRace ?
<div className={self.getInterestingStyle(timeDiff)} onClick={() => {this.changeCamera('trackside', driver.slotId)}}>{self.getTimeDiff(driver, fastestDriver)}</div>
Expand All @@ -917,30 +944,29 @@ var TabledDriver = React.createClass({
<img className="flag" src={'/img/flags/rr.png'}/>
}
<div className={cx({'name': true, 'focused': this.props.focused})} onClick={() => {this.changeCamera('trackside', driver.slotId)}} title={UI.getStringTranslation("controller", "portalId") + " - " + driver.portalId}>{self.getName(driver.name)}</div>
<img className="manufacturer" src={'/render/'+driver.manufacturerId+'/small/?type=manufacturer'}/>
<img className="manufacturer" src={'/img/manufacturers/'+driver.manufacturerId+'.png'}/>
<img className="livery" onClick={() => {this.changeCamera('trackside', driver.slotId)}} src={'/render/'+driver.liveryId+'/'+this.props.imageSize+'/'}/>
<div className="tvCam" onClick={() => {this.changeCamera('trackside', driver.slotId)}} title={UI.getStringTranslation("controller", "tvTracksideCamera")}>TV</div>
<div className="dashCam" onClick={() => {this.changeCamera('onboard1', driver.slotId)}} title={UI.getStringTranslation("controller", "dashCamera")}>D</div>
<div className="cockpitCam" onClick={() => {this.changeCamera('onboard2', driver.slotId)}} title={UI.getStringTranslation("controller", "cockpitCamera")}>C</div>
<div className="frontCam" onClick={() => {this.changeCamera('frontCam', driver.slotId)}} title={UI.getStringTranslation("controller", "frontCamera")}>F</div>
<div className="rearCam" onClick={() => {this.changeCamera('rearCam', driver.slotId)}} title={UI.getStringTranslation("controller", "rearCamera")}>R</div>
<div className="wingCam" onClick={() => {this.changeCamera('wing', driver.slotId)}} title={UI.getStringTranslation("controller", "wingCamera")}>W</div>
<div className="actionCam" onClick={() => {this.changeCamera('action', driver.slotId)}} title="Action Camera">A</div>
<div className="heliCam" onClick={() => {this.changeCamera('heli', driver.slotId)}} title="Heli Camera">H</div>
<div className="staticCam" onClick={() => {this.changeCamera('static', driver.slotId)}} title="Static Camera">S</div>
<div className="currentSpeed" title={UI.getStringTranslation("controller", "currentSpeed")}>{driver.vehicleInfo.speed}</div>
<div className="pit" title={UI.getStringTranslation("controller", "pitCountStatus")}>{UI.getStringTranslation("controller", "notAvailable")}</div>
<div className="pit" title={UI.getStringTranslation("controller", "pitCountStatus")}>{driver.pitInfo.numPitstops}</div>
{self.renderMandatoryPit(driver.mandatoryPitstopPerformed)}
{r3eTyreDB.classes[driver.classId] != null || ["Soft", "Hard", "Primary", "Alternate", "Medium"].indexOf(driver.pitInfo.tyreType) > -1 ?
{["Soft", "Hard", "Primary", "Alternate", "Medium", "Prime", "Slicks"].indexOf(driver.pitInfo.tyreType) > -1 ?
<div className="tyre">
<img src={'/img/tyres/'+driver.pitInfo.tyreType+'.png'} />
<img src={'/img/tyres/'+driver.pitInfo.tyreType+'.png'} title={driver.pitInfo.tyreType} />
</div>
:
<div className="tyre">
<img src={'/img/tyres/dedicated.png'} title={driver.pitInfo.tyreType} />
</div>
}
<div className="tyreWear" title={UI.getStringTranslation("controller", "tyreWearStatus")}>{UI.getStringTranslation("controller", "notAvailable")}</div>
{self.renderDamage(driver.pitInfo.damage)}
<div className="flags">
<div className={cx({'blackFlag': true, 'active': driver.scoreInfo.flagInfo.black === 1})} title={UI.getStringTranslation("controller", "blackFlag")}>!</div>
<div className={cx({'blueFlag': true, 'active': driver.scoreInfo.flagInfo.blue === 1})} title={UI.getStringTranslation("controller", "blueFlag")}>!</div>
<div className={cx({'yellowFlag': true, 'active': driver.scoreInfo.flagInfo.yellow === 1})} title={UI.getStringTranslation("controller", "yellowFlag")}>!</div>
</div>
Expand All @@ -950,8 +976,6 @@ var TabledDriver = React.createClass({
:
<div className={cx({'drs': true, 'active': driver.vehicleInfo.drsEnabled})} title={UI.getStringTranslation("controller", "drsRemaining")}>{driver.vehicleInfo.drsLeft > -1 ? driver.vehicleInfo.drsLeft : UI.getStringTranslation("controller", "notAvailable")}</div>
}
<div className="best-lap-s1">{driver.scoreInfo.bestLapInfo.sector1 != -1 ? UI.formatTime(driver.scoreInfo.bestLapInfo.sector1, {ignoreSign: true}) : UI.getStringTranslation("controller", "notAvailable")}</div>
<div className="best-lap-s2">{driver.scoreInfo.bestLapInfo.sector2 != -1 ? UI.formatTime(driver.scoreInfo.bestLapInfo.sector2, {ignoreSign: true}) : UI.getStringTranslation("controller", "notAvailable")}</div>
{driver.scoreInfo.bestLapInfo.sector3 !== -1 ?
<div className="best-lap-time">{UI.formatTime(driver.scoreInfo.bestLapInfo.sector3, {ignoreSign: true})}</div>
:
Expand Down
Loading

0 comments on commit cde38b2

Please sign in to comment.