The Re4pers > Public Announcements
The Re4pers Ranking Map 1.01 Beta
(1/1)
FelixTheLion:
I present:
The Re4pers Ranking Map 1.01 Beta
This project is still under heavy construction due to several issues with the interface.
Infoboxes will be filled soon currently planned containing a short description of the rank in a few words,access to Outfit resources and probably rights in the community. (If you want more or have suggestion please don't hold yourself back)
I hope to be able to fix most problems in the near future.
Current Infobox layout:
-Rank name
-short discription
-accessible resources
-kind of promotion
-requirements
-procedure
-link to page of application if needed
Please share your experience if you use some kind of exotic device or browser leading to shit "unique" outcomes
90% done on Microsoft Edge
90% done on Firefox and Chrome
No bright furure for Internet Explorer
known issues:
-Grid gets displayed improperly in the post. (solved) (It might be moved to a external place)
-Infoboxes don't get dissplaid at the proper possition in Firefox (Infobox has been shrinked to work better on the forum)
-Properties of elements don't apply in IE leading to a unbuild grid.
-Hierarchy of elements doesn't work on every browser.
-Promotion process in the center of the map including the promotion to the council and close elements has been disabled due to problems with the rectangular hitbox of the icons. (still working to include a syntax making it possible to apply a polygon hitbox for elements)
/*-- GENERAL SETTINGS */
.container {
display: block;
position: fixed;
width: 60%;
}
.RankingGrid {
display: grid;
position: relative;
grid-template-columns: repeat(12, 8%);
grid-template-rows: repeat(32, 56px);
grid-row-gap: 0px;
}
.bottom-left_general {
position: relative;
bottom: 40%;
left: 4%;
font-size:26px;
color: black;
font-family: 'Quantico', sans-serif;
text-shadow: 0 0 4px #c3f1f7;
z-index: 20;
}
.closebtn {
float: right;
color: black;
text-align: right;
left: 50px;
font-size: 55px;
cursor: pointer;
text-shadow: 0 0 10px red, 0 0 5px red, 0 0 2px red;
}
.textPromote {
background-color: #FFD9C6;
border-radius: 10px;
border: 3px solid #000000;
width: 600px;
color: black;
margin-left: auto;
font-size: 20px;
padding: 40px 50px;
}
.middlecenter {
position: fixed;
transition: .5s ease;
top: 50%;
left: 50%;
margin-top: 00px; /* Negative half of height. */
margin-left: 00px; /* Negative half of width. */
text-align: left;
z-index: 20;
box-shadow: 10px 10px 5px black;
}
z:hover {
opacity: 0.5;
}
/*-------------------------------------------- COUNCIL SETTINGS */
.boxCouncil {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 2;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
.textCouncil {
background-color: #E15E0C;
border: 3px solid #000000;
width: 600px;
color: black;
margin-left: auto;
font-size: 20px;
padding: 40px 50px;
}
/*-------------------------------------------- PLATOON LEADER SETTINGS */
.boxPlatoonLead {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 5;
grid-row-end: 7;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 2;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
.textPlatoonLead {
background-color: #ECC123;
border: 3px solid #000000;
width: 600px;
color: black;
margin-left: auto;
font-size: 20px;
padding: 40px 50px;
}
/*-------------------------------------------- SQUAD LEADER SETTINGS */
.boxSquadLead {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 9;
grid-row-end: 11;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 2;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
.textSquadLead {
background-color: #56AD25;
border: 3px solid #000000;
width: 600px;
color: black;
margin-left: auto;
font-size: 20px;
padding: 40px 50px;
}
/*-------------------------------------------- SPECIALIST SETTINGS */
.boxSpecialist {
grid-column-start: 8;
grid-column-end: 11;
grid-row-start: 11;
grid-row-end: 13;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 2;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
.textSpecialist {
background-color: #A53E71 ;
border: 3px solid #000000;
width: 600px;
color: black;
margin-left: auto;
font-size: 20px;
padding: 40px 50px;
}
/*-------------------------------------------- VETERAN SETTINGS */
.boxVeteran {
grid-column-start: 5;
grid-column-end: 8;
grid-row-start: 15;
grid-row-end: 17;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 2;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
.textVeteran {
background-color: #6212B0 ;
border: 3px solid #000000;
width: 600px;
color: black;
margin-left: auto;
font-size: 20px;
padding: 40px 50px;
}
/*-------------------------------------------- FIELD OFFICER SETTINGS */
.boxFieldOfficer {
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 19;
grid-row-end: 21;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 2;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
.textFieldOfficer {
background-color: #F5EFB1;
border: 3px solid #000000;
width: 600px;
color: black;
margin-left: auto;
font-size: 20px;
padding: 40px 50px;
}
/*-------------------------------------------- SOLDIER SETTINGS */
.boxSoldier {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 23;
grid-row-end: 25;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 2;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
.textSoldier {
background-color: #3366ff ;
border: 3px solid #000000;
width: 600px;
color: black;
margin-left: auto;
font-size: 20px;
padding: 40px 50px;
}
/*-------------------------------------------- GRUNT SETTINGS */
.boxGrunt {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 27;
grid-row-end: 29;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 2;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
.textGrunt{
background-color: #66CCFF;
border: 3px solid #000000;
width: 600px;
color: black;
margin-left: auto;
font-size: 20px;
padding: 40px 50px;
}
/*-------------------------------------------- PROMOTION ARROW ----------------------------------------------------- */
/*-------------------------------------------- PROMOTION TO PLATOON LEADER SETTINGS */
.boxPromToPlatoon {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 7;
grid-row-end: 9;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 1;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
/*-------------------------------------------- PROMOTION TO SOLDIER SETTINGS */
.boxPromToSoldier {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 25;
grid-row-end: 27;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 1;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
/*-------------------------------------------- PROMOTION TO GRUNT SETTINGS */
.boxPromToGrunt {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 29;
grid-row-end: 31;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 1;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
/*-------------------------------------------- PROMOTION TO SPECIALISZ SETTINGS */
.boxPromToSpecialist {
grid-column-start: 9;
grid-column-end: 10;
grid-row-start: 13;
grid-row-end: 15;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 1;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
/*-------------------------------------------- PROMOTION TO FIELD OFFICER SETTINGS */
.boxPromToFieldOfficer {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 21;
grid-row-end: 23;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 1;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
/*-------------------------------------------- PROMOTION VETERAN SETTINGS */
.boxPromToVeteran {
grid-column-start: 7;
grid-column-end: 8;
grid-row-start: 13;
grid-row-end: 15;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 20;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
/*-------------------------------------------- PROMOTION TO COUNCIL SETTINGS ----------------------------------------- */
/*-------------------------------------------- PROMOTION To COUNCIL PART 1 */
.boxPromToCouncil {
grid-column-start: 4;
grid-column-end: 8;
grid-row-start: 1;
grid-row-end: 15;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 3;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
.hitboxPromToCouncil_1 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
height: 100%;
width: 100%;
z-index: 5;
}
.hitboxPromToCouncil_2 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 5;
grid-row-end: 6;
z-index: 5;
}
.hitboxPromToCouncil_3 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 9;
grid-row-end: 10;
z-index: 5;
}
.hitboxPromToCouncil_4 {
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 15;
z-index: 5;
}
.hitboxPromToCouncil_5 {
grid-column-start: 6;
grid-column-end: 8;
grid-row-start: 12;
grid-row-end: 13;
z-index: 5;
}
/*-------------------------------------------- PROMOTION FROM SPECIALIST SETTINGS */
.boxPromFromSpecialist {
grid-column-start: 4;
grid-column-end: 8;
grid-row-start: 6;
grid-row-end: 12;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 1;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
.boxPromFromSpecialist:hover .boxPromToSpecialist {
opacity: 0.6;
}
.middlePromFromSpecialist {
transition: .5s ease;
opacity: 0;
position: fixed;
bottom: 20px;
right: 20px;
text-align: left;
z-index: -5;
box-shadow: 10px 10px 5px black;
}
.boxPromFromSpeciailst:hover .middlePromFromSpecialist {
opacity: 1;
z-index: 9;
}
/*-------------------------------------------- PROMOTION FROM SPECIALIST SETTINGS */
.boxPromToSquadLeader {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 11;
grid-row-end: 23;
height: 100%;
width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
z-index: 1;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
.boxPromToSquadLeader:hover .boxPromToSquadLeader {
opacity: 0.6;
}
.middlePromToSquadLeader {
transition: .5s ease;
opacity: 0;
position: fixed;
bottom: 20px;
right: 20px;
text-align: left;
z-index: -5;
box-shadow: 10px 10px 5px black;
}
.boxPromToSquadLeader:hover .middlePromToSquadLeader {
opacity: 1;
z-index: 9;
}
/*________________________________________________________________________________________ */
The Council
Platoon Leader
Squad Leader
Specialist
Veteran
Fielder Officer
Soldier
Grunt
×
The Council
---------
---------
---------
×
Platoon Leader
---------
---------
---------
×
Squad Leader
---------
---------
---------
×
Specialist
---------
---------
---------
×
Veteran
---------
---------
---------
×
Field Officer
---------
---------
---------
×
Soldier
---------
---------
---------
×
Grunt
---------
---------
---------
×
Promotion SL to PL
---------
---------
---------
×
Promotion
---------
---------
---------
function openTab(tabName) {
var m, x;
x = document.getElementsByClassName("middlecenter");
for (m = 0; m < x.length; m++) {
x[m].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
FelixTheLion:
Due to several unexpected problems connected to the way the map behaves in the forum i decided to work on a different approach.
This would allow me to fix minor mistakes connected to basic features (like making elements easy to view and interactable)
and in the best case a more handy way for the development.
While this would change little parts of the appearance the main format would not change at all which would stay in the current form.
This means i can't say how soon i have the map in an accessible state.
FelixTheLion:
The Re4pers Ranking Map 1.02 is out
https://re4pers.com/index.php?page=outfitranks
Text will be added soon.
Pls report additional problems with other browser or devices.
Currently known issues:
Firefox:
Promotion Arrows which are bigger (like those in the center) don't respond when hovering with a mouse over them.
Microsoft Edge:
Multiple arrows don't respond and it's not possible to interact with them.
Chrome:
Elements get deformed.
InternetExplorer:
Internet Explorer
FelixTheLion:
I'm done with updating the Ranking-map and it's working now as intended 100% for Firefox. Only the text and visual representation might be updated in the future.
https://re4pers.com/index.php?page=outfitranks
At this point i'm not sure how far i get with other Browser.
Currently status:
Firefox:
100%
Microsoft Edge:
80% certain elements don't appear in the right layer making them not accessible
Chrome:
50% same as ME plus wrong (stretched) displaying of elements
InternetExplorer:
Internet Explorer, don't hold your breath for this
Wolkenwand:
Looks good on mobile so far!
Navigation
[0] Message Index
Go to full version