Skip to content

Commit

Permalink
Cleaned up info at bottom of editor, added tooltips that look exactly…
Browse files Browse the repository at this point in the history 
… like the concept art.
  • Loading branch information
@Untrustedlife
Untrustedlife committed Dec 17, 2018
1 parent 31185a6 commit 3747ad7
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 13 deletions.
42 changes: 32 additions & 10 deletions scripts/gui/thrive_gui.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -349,33 +349,50 @@
<div class="OrganelleListTitle">STRUCTURAL ORGANELLES</div>
<table class="OrganelleTable"><tr>
<td id="addCytoplasm" class="OrganelleListItem">
<div id="CytoplasmIcon"></div>Cytoplasm<br>10 MP</td>
<div id="CytoplasmIcon"><span class="tooltiptext">Cytoplasm <br> Cost: 10 mutation points <br> The gooey innards of a cell, they do also glycolysis.</span></div>Cytoplasm<br>10 MP</td>
</tr></table>
<div class="OrganelleListTitle">INTERNAL ORGANELLES</div>
<table class="OrganelleTable"><tr>
<td id="addMitochondrion" class="OrganelleListItem">
<div id="MitochondrionIcon"></div>Mitochondrion<br>40 MP</td>
<div id="MitochondrionIcon"><span class="tooltiptext">
Mitochondria <br> Cost: 40 mutation points <br>
A captured prokaryote used by eukaryotic cells to perform respiration.<br>
The Mitochondria is the powerhouse of the cell</span>
</div>Mitochondrion<br>40 MP</td>
<td id="addChloroplast" class="OrganelleListItem">
<div id="ChloroplastIcon"></div>Chloroplast<br>40 MP</td>
<div id="ChloroplastIcon"><span class="tooltiptext">
Chloroplast <br> Cost: 40 mutation points <br>
A captured prokaryote used by eukaryotic cells to perform photosynthesis.<br>
The chloroplast is used primarily by plant cells on earth, but some ciliates and other organisms use it too.</span></div>Chloroplast<br>40 MP</td>
<td id="addThermoplast" class="OrganelleListItem DisabledButton">
<div id="ThermoplastIcon"></div>Thermoplast<br>40 MP</td>
</tr><tr>
<td id="addVacuole" class="OrganelleListItem">
<div id="VacuoleIcon"></div>Vacuole<br>30 MP</td>
<div id="VacuoleIcon"><span class="tooltiptext">
Vacuole <br> Cost: 30 mutation points <br>
a space or vesicle within the cytoplasm of a cell, enclosed by a membrane used to hold compounds</span></div>Vacuole<br>30 MP</td>
<td id="addToxinVacuole" class="OrganelleListItem">
<div id="ToxinVacuoleIcon"></div>Toxin Vacuole<br>80 MP</td>
<div id="ToxinVacuoleIcon"><span class="tooltiptext">
Toxin Vacuole <br> Cost: 80 mutation points <br>
Allows for production and storage of OxytoxyNT which can be shot at enemy cells</span></div>Toxin Vacuole<br>80 MP</td>
<td id="addBioluminescent" class="OrganelleListItem DisabledButton">
<div id="BioluminescentIcon"></div>Bioluminescent Vacuole<br>N/A MP</td>
</tr><tr>
<td id="addChemoplast" class="OrganelleListItem">
<div id="ChemoplastIcon"></div>Chemoplast<br>40 MP</td>
<div id="ChemoplastIcon"><span class="tooltiptext">
Chemoplast <br> Cost: 40 mutation points <br>
Allows for synthesis of hydrogen sulfide into glucose.</span></div>Chemoplast<br>40 MP</td>
<td id="addNitrogenFixingPlastid" class="OrganelleListItem">
<div id="PlastidIcon"></div>Nitrogen Fixing Plastid<br>80 MP</td>
<div id="PlastidIcon"><span class="tooltiptext">
Nitrogen Fixing Plastid <br> Cost: 80 mutation points <br>
Allows for synthesis of ammonia from atmospheric nitrogen.</span></div>Nitrogen Fixing Plastid<br>80 MP</td>
</tr></table>
<div class="OrganelleListTitle">EXTERNAL ORGANELLES</div>
<table><tr>
<td id="addFlagellum" class="OrganelleListItem">
<div id="FlagellumIcon"></div>Flagellum<br>30 MP</td>
<div id="FlagellumIcon"><span class="tooltiptext">
Flagellum <br> Cost: 30 mutation points <br>
A whip like structure used microbes for movement.</span></div>Flagellum<br>30 MP</td>
<td id="addPilus" class="OrganelleListItem DisabledButton">
<div id="PilusIcon"></div>Predatory Pilus<br>30 MP</td>
<td id="addCilia" class="OrganelleListItem DisabledButton">
Expand All @@ -384,9 +401,14 @@
<div class="OrganelleListTitle">PROKARYOTIC STRUCTURES</div>
<table><tr>
<td id="addMetabolosome" class="OrganelleListItem">
<div id="MetabolosomeIcon"></div>Metabolosomes<br>20 MP</td>
<div id="MetabolosomeIcon"><span class="tooltiptext">
Metabolosomes <br> Cost: 20 mutation points <br>
organelle-like Bacterial microcompartments (BMCs) consisting of a protein shell that encloses enzymes used for respiration.</span></div>Metabolosomes<br>20 MP</td>
<td id="addChromatophor" class="OrganelleListItem">
<div id="ChromatophorIcon"></div>Chromatophores<br>25 MP</td>
<div id="ChromatophorIcon"><span class="tooltiptext">
Chromatophores <br> Cost: 25 mutation points <br>
Coloured, membrane-associated vesicles used by various prokaryotes perform photosynthesis.
Chromatophores contain bacteriochlorophyll pigments and carotenoids.</span></div>Chromatophores<br>25 MP</td>
</tr></table>
</div>
</div>
Expand Down
69 changes: 66 additions & 3 deletions scripts/gui/thrive_style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -800,6 +800,7 @@ video {
#generation,
#speed,
#size {
background-color: rgba(0, 139, 139, 0.3);
position: absolute;
height: 26px;
margin-top: 7px;
Expand All @@ -815,15 +816,15 @@ video {
}

#generation {
left: 420px;
left: 390px;
}

#size {
left: 720px;
left: 620px;
}

#speed {
left: 600px;
left: 520px;
}

#SymmetryButton {
Expand Down Expand Up @@ -1067,6 +1068,28 @@ video {
background-image: url("../../Textures/gui/bevel/CytoplasmIcon.png");
}

/* Tooltip text */
.tooltiptext {
visibility: hidden;
width: 320px;
height: 30%;
right: 5%;
top: 10%;
font-size: 10pt;
background-color: rgba(0, 139, 139, 0.5);
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: fixed;
z-index: 1;
}


#CytoplasmIcon:hover .tooltiptext {
visibility: visible;
}

#PlastidIcon {
position: relative;
left: calc(50% - 30px);
Expand All @@ -1076,6 +1099,10 @@ video {
background-image: url("../../Textures/gui/bevel/NitroplastidIcon.png");
}

#PlastidIcon:hover .tooltiptext {
visibility: visible;
}

#MitochondrionIcon {
position: relative;
left: calc(50% - 30px);
Expand All @@ -1085,6 +1112,10 @@ video {
background-image: url("../../Textures/gui/bevel/MitochondrionIcon.png");
}

#MitochondrionIcon:hover .tooltiptext {
visibility: visible;
}

#ChloroplastIcon {
position: relative;
left: calc(50% - 30px);
Expand All @@ -1094,6 +1125,10 @@ video {
background-image: url("../../Textures/gui/bevel/ChloroplastIcon.png");
}

#ChloroplastIcon:hover .tooltiptext {
visibility: visible;
}

#ThermoplastIcon {
position: relative;
left: calc(50% - 30px);
Expand All @@ -1103,6 +1138,10 @@ video {
background-image: url("../../Textures/gui/bevel/ThermoplastIcon.png");
}

#ThermoplastIcon:hover .tooltiptext {
visibility: visible;
}

#VacuoleIcon {
position: relative;
left: calc(50% - 30px);
Expand All @@ -1112,6 +1151,10 @@ video {
background-image: url("../../Textures/gui/bevel/VacuoleIcon.png");
}

#VacuoleIcon:hover .tooltiptext {
visibility: visible;
}

#ToxinVacuoleIcon {
position: relative;
left: calc(50% - 30px);
Expand All @@ -1121,6 +1164,10 @@ video {
background-image: url("../../Textures/gui/bevel/ToxinVacuoleIcon.png");
}

#ToxinVacuoleIcon:hover .tooltiptext {
visibility: visible;
}

#BioluminescentIcon {
position: relative;
left: calc(50% - 30px);
Expand All @@ -1139,6 +1186,10 @@ video {
background-image: url("../../Textures/gui/bevel/ChemoplastIcon.png");
}

#ChemoplastIcon:hover .tooltiptext {
visibility: visible;
}

#FlagellumIcon {
position: relative;
left: calc(50% - 30px);
Expand All @@ -1148,6 +1199,10 @@ video {
background-image: url("../../Textures/gui/bevel/FlagellumIcon.png");
}

#FlagellumIcon:hover .tooltiptext {
visibility: visible;
}

#MetabolosomeIcon {
position: relative;
left: calc(50% - 30px);
Expand All @@ -1157,6 +1212,10 @@ video {
background-image: url("../../Textures/gui/bevel/MetabolosomeIcon.png");
}

#MetabolosomeIcon:hover .tooltiptext {
visibility: visible;
}

#ChromatophorIcon {
position: relative;
left: calc(50% - 30px);
Expand All @@ -1166,6 +1225,10 @@ video {
background-image: url("../../Textures/gui/bevel/ChromatophorIcon.png");
}

#ChromatophorIcon:hover .tooltiptext {
visibility: visible;
}

#PilusIcon {
position: relative;
left: calc(50% - 30px);
Expand Down

0 comments on commit 3747ad7

Please sign in to comment.