Skip to content

Commit

Permalink
Weather Icons
Browse files Browse the repository at this point in the history 
Replaced font awesome with weather icons.

Added moon phases. These don't yet do anything other then look cool but will be involved in the upcoming weather 2.0 revamp.
  • Loading branch information
@pmotschmann
pmotschmann committed Feb 22, 2019
1 parent 592013a commit aaed031
Show file tree
Hide file tree
Showing 12 changed files with 500 additions and 35 deletions.
2 changes: 1 addition & 1 deletion evolved.css
View file

Large diffs are not rendered by default.

17 changes: 11 additions & 6 deletions evolved.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,23 +416,28 @@ a {
margin: 0 auto;
.temp {
margin-left: 0.125rem;
font-size: 0.875rem;
}
.fa-temperature-low {
.weather,
.moon {
font-size: 0.875rem;
}
.wi-thermometer-exterior {
color: #00d6b2;
}
.fa-temperature-high {
.wi-thermometer {
color: #f10202;
}
.fa-sun {
.wi-day-sunny {
color: #d0ff00;
}
.fa-cloud {
.wi-cloud {
color: #9ea387;
}
.fa-cloud-rain {
.wi-rain {
color: #00d6b2;
}
.fa-snowflake {
.wi-snowflake-cold {
color: #fff;
}
}
Expand Down
Binary file added font/weathericons-regular-webfont.eot
View file
Binary file not shown.
257 changes: 257 additions & 0 deletions font/weathericons-regular-webfont.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added font/weathericons-regular-webfont.ttf
View file
Binary file not shown.
Binary file added font/weathericons-regular-webfont.woff
View file
Binary file not shown.
Binary file added font/weathericons-regular-webfont.woff2
View file
Binary file not shown.
8 changes: 5 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<link rel="icon" href="evolved.ico" type="images/x-icon">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/buefy.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="lib/weather-icons.min.css">
<link rel="stylesheet" type="text/css" href="lib/weather-icons-wind.min.css">
<link rel="stylesheet" type="text/css" href="evolved.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
Expand All @@ -25,10 +26,11 @@
<div id="topBar" class="topBar">
<span class="planet">{{ race.species | planet }}</span>
<span class="calendar" v-show="city.calendar.day">
<b-tooltip :label="moon()" position="is-bottom" size="is-small" multilined animated><i id="moon" class="moon wi"></i></b-tooltip>
<span class="year">Year <span class="has-text-warning">{{ city.calendar.year }}</span></span>
<span class="day">Day <span class="has-text-warning">{{ city.calendar.day }}</span></span>
<b-tooltip :label="weather()" position="is-bottom" size="is-small" multilined animated><i id="weather" class="fas"></i></b-tooltip>
<b-tooltip :label="temp()" position="is-bottom" size="is-small" multilined animated><i id="temp" class="temp fas"></i></b-tooltip>
<b-tooltip :label="weather()" position="is-bottom" size="is-small" multilined animated><i id="weather" class="weather wi"></i></b-tooltip>
<b-tooltip :label="temp()" position="is-bottom" size="is-small" multilined animated><i id="temp" class="temp wi"></i></b-tooltip>
</span>
<span class="version">v0.1.0</span>
</div>
Expand Down
1 change: 1 addition & 0 deletions lib/weather-icons-wind.min.css
View file

Large diffs are not rendered by default.

41 changes: 41 additions & 0 deletions lib/weather-icons.min.css
View file

Large diffs are not rendered by default.

205 changes: 180 additions & 25 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,32 @@ vues['topBar'] = new Vue({
case 2:
return 'Hot';// weather, hot weather may reduce worker productivity.';
}
},
moon(){
if (global.city.calendar.moon === 0){
return 'New Moon';
}
else if (global.city.calendar.moon > 0 && global.city.calendar.moon < 7){
return 'Waxing Crescent Moon';
}
else if (global.city.calendar.moon === 7){
return 'First Quarter Moon';
}
else if (global.city.calendar.moon > 7 && global.city.calendar.moon < 14){
return 'Waxing Gibbous Moon';
}
else if (global.city.calendar.moon === 14){
return 'Full Moon';
}
else if (global.city.calendar.moon > 14 && global.city.calendar.moon < 21){
return 'Waning Gibbous Moon';
}
else if (global.city.calendar.moon === 21){
return 'Third Quarter Moon';
}
else if (global.city.calendar.moon > 21){
return 'Waning Crescent Moon';
}
}
},
filters: {
Expand Down Expand Up @@ -176,6 +202,7 @@ else {
addAction('tech',tech);
}
});
setWeather();
}

// Start game loop
Expand Down Expand Up @@ -1040,33 +1067,14 @@ function mainLoop() {
global.city.calendar.temp = new_temp;
}
}
$('#weather').removeClass('fa-sun');
$('#weather').removeClass('fa-cloud');
$('#weather').removeClass('fa-cloud-rain');
$('#weather').removeClass('fa-snowflake');
$('#temp').removeClass('fa-temperature-low');
$('#temp').removeClass('fa-temperature-high');

if (global.city.calendar.temp === 0){
$('#temp').addClass('fa-temperature-low');
}
else if (global.city.calendar.temp === 2){
$('#temp').addClass('fa-temperature-high');
}
if (global.city.calendar.weather === 0){
if (global.city.calendar.temp === 0){
$('#weather').addClass('fa-snowflake');
}
else {
$('#weather').addClass('fa-cloud-rain');
}
}
else if (global.city.calendar.weather === 1){
$('#weather').addClass('fa-cloud');
}
else if (global.city.calendar.weather === 2){
$('#weather').addClass('fa-sun');
// Moon Phase
global.city.calendar.moon++;
if (global.city.calendar.moon > 27){
global.city.calendar.moon = 0;
}

setWeather();
}

// Event triggered
Expand Down Expand Up @@ -1151,3 +1159,150 @@ window.cheat = function cheat(){
global.resource.DNA.amount = 10000;
global.resource.RNA.amount = 10000;
}

function setWeather(){
// Moon Phase
switch(global.city.calendar.moon){
case 0:
$('#moon').removeClass('wi-moon-waning-crescent-6');
$('#moon').addClass('wi-moon-new');
break;
case 1:
$('#moon').removeClass('wi-moon-new');
$('#moon').addClass('wi-moon-waxing-crescent-1');
break;
case 2:
$('#moon').removeClass('wi-moon-waxing-crescent-1');
$('#moon').addClass('wi-moon-waxing-crescent-2');
break;
case 3:
$('#moon').removeClass('wi-moon-waxing-crescent-2');
$('#moon').addClass('wi-moon-waxing-crescent-3');
break;
case 4:
$('#moon').removeClass('wi-moon-waxing-crescent-3');
$('#moon').addClass('wi-moon-waxing-crescent-4');
break;
case 5:
$('#moon').removeClass('wi-moon-waxing-crescent-4');
$('#moon').addClass('wi-moon-waxing-crescent-5');
break;
case 6:
$('#moon').removeClass('wi-moon-waxing-crescent-5');
$('#moon').addClass('wi-moon-waxing-crescent-6');
break;
case 7:
$('#moon').removeClass('wi-moon-waxing-crescent-6');
$('#moon').addClass('wi-moon-first-quarter');
break;
case 8:
$('#moon').removeClass('wi-moon-first-quarter');
$('#moon').addClass('wi-moon-waxing-gibbous-1');
break;
case 9:
$('#moon').removeClass('wi-moon-waxing-gibbous-1');
$('#moon').addClass('wi-moon-waxing-gibbous-2');
break;
case 10:
$('#moon').removeClass('wi-moon-waxing-gibbous-2');
$('#moon').addClass('wi-moon-waxing-gibbous-3');
break;
case 11:
$('#moon').removeClass('wi-moon-waxing-gibbous-3');
$('#moon').addClass('wi-moon-waxing-gibbous-4');
break;
case 12:
$('#moon').removeClass('wi-moon-waxing-gibbous-4');
$('#moon').addClass('wi-moon-waxing-gibbous-5');
break;
case 13:
$('#moon').removeClass('wi-moon-waxing-gibbous-5');
$('#moon').addClass('wi-moon-waxing-gibbous-6');
break;
case 14:
$('#moon').removeClass('wi-moon-waxing-gibbous-6');
$('#moon').addClass('wi-moon-full');
break;
case 15:
$('#moon').removeClass('wi-moon-full');
$('#moon').addClass('wi-moon-waning-gibbous-1');
break;
case 16:
$('#moon').removeClass('wi-moon-waning-gibbous-1');
$('#moon').addClass('wi-moon-waning-gibbous-2');
break;
case 17:
$('#moon').removeClass('wi-moon-waning-gibbous-2');
$('#moon').addClass('wi-moon-waning-gibbous-3');
break;
case 18:
$('#moon').removeClass('wi-moon-waning-gibbous-3');
$('#moon').addClass('wi-moon-waning-gibbous-4');
break;
case 19:
$('#moon').removeClass('wi-moon-waning-gibbous-4');
$('#moon').addClass('wi-moon-waning-gibbous-5');
break;
case 20:
$('#moon').removeClass('wi-moon-waning-gibbous-5');
$('#moon').addClass('wi-moon-waning-gibbous-6');
break;
case 21:
$('#moon').removeClass('wi-moon-waning-gibbous-6');
$('#moon').addClass('wi-moon-third-quarter');
break;
case 22:
$('#moon').removeClass('wi-moon-third-quarter');
$('#moon').addClass('wi-moon-waning-crescent-1');
break;
case 23:
$('#moon').removeClass('wi-moon-waning-crescent-1');
$('#moon').addClass('wi-moon-waning-crescent-2');
break;
case 24:
$('#moon').removeClass('wi-moon-waning-crescent-2');
$('#moon').addClass('wi-moon-waning-crescent-3');
break;
case 25:
$('#moon').removeClass('wi-moon-waning-crescent-3');
$('#moon').addClass('wi-moon-waning-crescent-4');
break;
case 26:
$('#moon').removeClass('wi-moon-waning-crescent-4');
$('#moon').addClass('wi-moon-waning-crescent-5');
break;
case 27:
$('#moon').removeClass('wi-moon-waning-crescent-5');
$('#moon').addClass('wi-moon-waning-crescent-6');
break;
}

// Sky and Temp
$('#weather').removeClass('wi-day-sunny');
$('#weather').removeClass('wi-cloud');
$('#weather').removeClass('wi-rain');
$('#weather').removeClass('wi-snowflake-cold');
$('#temp').removeClass('wi-thermometer-exterior');
$('#temp').removeClass('wi-thermometer');

if (global.city.calendar.temp === 0){
$('#temp').addClass('wi-thermometer-exterior');
}
else if (global.city.calendar.temp === 2){
$('#temp').addClass('wi-thermometer');
}
if (global.city.calendar.weather === 0){
if (global.city.calendar.temp === 0){
$('#weather').addClass('wi-snowflake-cold');
}
else {
$('#weather').addClass('wi-rain');
}
}
else if (global.city.calendar.weather === 1){
$('#weather').addClass('wi-cloud');
}
else if (global.city.calendar.weather === 2){
$('#weather').addClass('wi-day-sunny');
}
}
4 changes: 4 additions & 0 deletions vars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@ if (!global.city['calendar']){
};
}

if (!global.city.calendar['moon']){
global.city.calendar['moon'] = 0;
}

if (!global.city['powered']){
global.city['powered'] = false;
global.city['power'] = 0;
Expand Down

0 comments on commit aaed031

Please sign in to comment.