Skip to content

Commit

Permalink
Weather tooltip is a go, kinda
Browse files Browse the repository at this point in the history
  • Loading branch information
@Haxxer
Haxxer committed Oct 16, 2024
1 parent d0e9e21 commit f6d6887
Show file tree
Hide file tree
Showing 9 changed files with 365 additions and 299 deletions.
2 changes: 1 addition & 1 deletion makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ install_dev:
cp ./setup/docker.example.env .env || true # Copy env file, don't overwrite
docker-compose build # Gotta build our images before we can use them
docker run -it -u $(id -u):$(id -g) -v "${PWD}/:/app" -w /app node:20 npm install --legacy-peer-deps # NPM install inside docker container to avoid installing on host
docker run -it -u $(id -u):$(id -g) -v "${PWD}/:/var/task" -v ${COMPOSER_HOME:-$HOME/.composer}:/tmp -e COMPOSER_CACHE_DIR=/tmp/composer-cache -w /var/task fc-bref-composer composer install # Composer install inside docker container (it has all our required PHP modules)
docker run -it -u $(id -u):$(id -g) -v "${PWD}/:/var/task" -e COMPOSER_CACHE_DIR=/tmp/composer-cache -w /var/task fc-bref-composer composer install # Composer install inside docker container (it has all our required PHP modules)
docker-compose up -d # Start up our docker containers
until docker-compose exec php php artisan migrate:status; do sleep 1; done # Wait for mysql to be ready
docker-compose exec php php artisan migrate:fresh --seed # Run migrations
Expand Down
250 changes: 2 additions & 248 deletions resources/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,254 +313,8 @@ Alpine.data('rich_editor', RichEditor);
import MoonTooltip from './moon-tooltip.js';
Alpine.data('moon_tooltip', MoonTooltip);

window.calendar_weather = {
epoch_data: {},

start_epoch: null,
end_epoch: null,

processed_weather: true,

tooltip: {
set_up: function() {
this.weather_tooltip_box = $('#weather_tooltip_box');
this.base_height = parseInt(this.weather_tooltip_box.css('height'));
this.weather_title = $('.weather_title');
this.day_title = $('.day_title');
this.day_container = $('.day_container');
this.moon_title = $('.moon_title');
this.moon_container = $('.moon_container');
this.weather_temp_desc = $('.weather_temp_desc');
this.weather_temp = $('.weather_temp');
this.weather_wind = $('.weather_wind');
this.weather_precip = $('.weather_precip');
this.weather_clouds = $('.weather_clouds');
this.weather_feature = $('.weather_feature');
this.stop_hide = false;
this.sticky_icon = false;
},

sticky: function(icon) {

if (window.registered_click_callbacks['sticky_weather_ui']) {
return;
}

this.sticky_icon = icon;

this.sticky_icon.addClass('sticky');

this.stop_hide = true;

window.registered_click_callbacks['sticky_weather_ui'] = this.sticky_callback;

},

sticky_callback: function(event) {

if ($(event.target).closest('#weather_tooltip_box').length == 0 && $(event.target).closest('.sticky').length == 0) {

window.calendar_weather.tooltip.stop_hide = false;

window.calendar_weather.tooltip.hide();

delete window.registered_click_callbacks['sticky_weather_ui'];

window.calendar_weather.tooltip.sticky_icon.removeClass('sticky');

if ($(event.target).closest('.has_weather_popup').length != 0) {
window.calendar_weather.tooltip.show($(event.target).closest('.has_weather_popup'));
window.calendar_weather.tooltip.sticky($(event.target).closest('.has_weather_popup'));
}

}

},

show: function(icon) {

if (window.registered_click_callbacks['sticky_weather_ui']) {
return;
}

var day_container = icon.closest(".timespan_day");

var epoch = day_container.attr('epoch');

if (epoch === undefined) {
return;
}

this.moon_title.toggleClass('hidden', !icon.hasClass('moon_popup'));
this.moon_container.toggleClass('hidden', !icon.hasClass('moon_popup'));

this.day_title.toggleClass('hidden', !icon.hasClass('day_title_popup'));
this.day_container.toggleClass('hidden', !icon.hasClass('day_title_popup'));

if (icon.hasClass('day_title_popup')) {
let epoch_data = window.calendar_weather.epoch_data[epoch];
if (epoch_data.leap_day !== undefined) {
let index = epoch_data.leap_day;
leap_day = window.static_data.year_data.leap_days[index];
if (leap_day.show_text) {
this.day_container.text(leap_day.name);
}
}
}

if (icon.hasClass('moon_popup')) {
this.moon_container.html(this.insert_moons(epoch));
}

this.stop_hide = false;
this.sticky_icon = false;

if (window.calendar_weather.processed_weather && !icon.hasClass('noweather')) {

this.weather_title.toggleClass('hidden', !icon.hasClass('moon_popup'));
this.weather_temp_desc.parent().toggleClass('hidden', false);
this.weather_temp.parent().toggleClass('hidden', false);
this.weather_wind.parent().toggleClass('hidden', false);
this.weather_precip.parent().toggleClass('hidden', false);
this.weather_clouds.parent().toggleClass('hidden', false);
this.weather_feature.parent().toggleClass('hidden', false);

if (window.static_data.seasons.global_settings.cinematic) {
this.weather_temp_desc.parent().css('display', '');
} else {
this.weather_temp_desc.parent().css('display', 'none');
}

var weather = window.calendar_weather.epoch_data[epoch].weather;

var desc = weather.temperature.cinematic;

var temp_sys = window.static_data.seasons.global_settings.temp_sys;

var temp = "";
if (!window.static_data.settings.hide_weather_temp || Perms.player_at_least('co-owner')) {
if (temp_sys == 'imperial') {
temp_symbol = '°F';
var temp = `${precisionRound(weather.temperature[temp_sys].value[0], 1).toString() + temp_symbol} to ${precisionRound(weather.temperature[temp_sys].value[1], 1).toString() + temp_symbol}`;
} else if (temp_sys == 'metric') {
temp_symbol = '°C';
var temp = `${precisionRound(weather.temperature[temp_sys].value[0], 1).toString() + temp_symbol} to ${precisionRound(weather.temperature[temp_sys].value[1], 1).toString() + temp_symbol}`;
} else {
var temp_f = `<span class='newline'>${precisionRound(weather.temperature['imperial'].value[0], 1).toString()}°F to ${precisionRound(weather.temperature['imperial'].value[1], 1).toString()}°F</span>`;
var temp_c = `<span class='newline'>${precisionRound(weather.temperature['metric'].value[0], 1).toString()}°C to ${precisionRound(weather.temperature['metric'].value[1], 1).toString()}°C</span>`;
var temp = `${temp_f}${temp_c}`;
}
}
this.weather_temp.toggleClass('newline', (temp_sys == 'both_i' || temp_sys == 'both_m') && (!window.static_data.settings.hide_weather_temp || Perms.player_at_least('co-owner')));


var wind_sys = window.static_data.seasons.global_settings.wind_sys;

var wind_text = ""
if (wind_sys == 'both') {
wind_text = `${weather.wind_speed} (${weather.wind_direction})`;
if (!window.static_data.settings.hide_wind_velocity || Perms.player_at_least('co-owner')) {
wind_text += `<span class='newline'>(${weather.wind_velocity.imperial} MPH | ${weather.wind_velocity.metric} KPH | ${weather.wind_velocity.knots} KN)</span>`;
}
} else {
var wind_symbol = wind_sys == "imperial" ? "MPH" : "KPH";
wind_text = `${weather.wind_speed} (${weather.wind_direction})`
if (!window.static_data.settings.hide_wind_velocity || Perms.player_at_least('co-owner')) {
wind_text += `<span class='newline'>(${weather.wind_velocity[wind_sys]} ${wind_symbol} | ${weather.wind_velocity.knots} KN)</span>`;
}
}

this.weather_temp_desc.each(function() {
$(this).text(desc);
});

this.weather_temp.each(function() {
$(this).html(temp);
}).parent().toggleClass('hidden', window.static_data.settings.hide_weather_temp !== undefined && static_data.settings.hide_weather_temp && !Perms.player_at_least('co-owner'));

this.weather_wind.each(function() {
$(this).html(wind_text);
});

this.weather_precip.each(function() {
$(this).text(weather.precipitation.key);
});

this.weather_clouds.each(function() {
$(this).text(weather.clouds);
});

this.weather_feature.each(function() {
$(this).text(weather.feature);
});

this.weather_feature.parent().toggleClass('hidden', weather.feature == "" || weather.feature == "None");

} else {

this.weather_title.toggleClass('hidden', true);
this.weather_temp_desc.parent().toggleClass('hidden', true);
this.weather_temp.parent().toggleClass('hidden', true);
this.weather_wind.parent().toggleClass('hidden', true);
this.weather_precip.parent().toggleClass('hidden', true);
this.weather_clouds.parent().toggleClass('hidden', true);
this.weather_feature.parent().toggleClass('hidden', true);
}

if ((window.calendar_weather.processed_weather && !icon.hasClass('noweather')) || icon.hasClass('moon_popup')) {

// this.popper = new Popper(icon, this.weather_tooltip_box, {
// placement: 'top',
// modifiers: {
// preventOverflow: {
// boundariesElement: $('#calendar')[0],
// },
// offset: {
// enabled: true,
// offset: '0, 14px'
// }
// }
// });

this.weather_tooltip_box.show();

}
},

insert_moons: function(epoch) {

let render_data = CalendarRenderer.render_data.event_epochs[epoch];

var moon_text = [];

for (let index = 0; index < render_data.moons.length; index++) {

var moon = render_data.moons[index];

moon_text.push(`<svg class='moon protip' moon="${moon.index}" preserveAspectRatio="xMidYMid" width="32" height="32" viewBox="0 0 32 32" data-pt-position="top" data-pt-title='${moon.name}, ${moon.phase}'>`);
moon_text.push(`<circle cx="16" cy="16" r="10" style="fill: ${moon.color};"/>`);
if (moon.path) moon_text.push(`<path style="fill: ${moon.shadow_color};" d="${moon.path}"/>`);
moon_text.push(`<circle cx="16" cy="16" r="10" class="lunar_border"/>`);
moon_text.push("</svg>");

}

return moon_text.join('');

},

hide: function() {

document.removeEventListener('click', function() { });

if (!this.stop_hide) {
this.weather_tooltip_box.hide();
this.weather_tooltip_box.css({ "top": "", "left": "" });
this.weather_tooltip_box.removeClass();
}
}
}
};
import WeatherTooltip from './weather-tooltip.js';
Alpine.data("weather_tooltip", WeatherTooltip);

Alpine.start();

19 changes: 16 additions & 3 deletions resources/js/calendar-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,28 @@ export default () => ({
},

weather_click: function (day, event) {
window.calendar_weather.tooltip.sticky($(event.target));
// TODO: Make weather tooltip sticky
//window.calendar_weather.tooltip.sticky($(event.target));
},

weather_mouse_enter: function (day, event) {
window.calendar_weather.tooltip.show($(event.target));

let epoch_details = window.evaluated_static_data.epoch_data[day.epoch];
let has_weather = window.evaluated_static_data.processed_weather;

window.dispatchEvent(new CustomEvent('weather-mouse-enter', {
detail: {
element: event.target,
static_data: window.static_data,
epoch_details,
has_weather,
day
}
}));
},

weather_mouse_leave: function () {
window.calendar_weather.tooltip.hide();
window.dispatchEvent(new CustomEvent('weather-mouse-leave'));
},

moon_mouse_enter: function (moon, event) {
Expand Down
5 changes: 4 additions & 1 deletion resources/js/calendar/calendar_global_week.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@ export default () => ({
show_custom_week_warning: false,
deleting: -1,
load(static_data) {
if(!static_data){
return;
}
this.refreshWeekdays(static_data);
this.customWeekWarningCheck(static_data);
},
refreshWeekdays(static_data) {
this.weekdays = [...static_data.year_data.global_week];
this.weekdays = static_data ? [...static_data.year_data.global_week] : [];
this.deleting = -1;
},
customWeekWarningCheck(static_data) {
Expand Down
16 changes: 2 additions & 14 deletions resources/js/calendar/calendar_manager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,6 @@ export function bind_calendar_events() {
toggle_sidebar();
});

window.calendar_weather.tooltip.set_up();

$('#calendar_container').on('scroll', function() {
window.calendar_weather.tooltip.hide();
});

$(document).on('change', '.event-text-input', function() {

let parent = $(this).closest('.sortable-container');
Expand Down Expand Up @@ -258,11 +252,6 @@ export async function rebuild_calendar(action, rebuild_data) {

rerender_calendar(window.evaluated_static_data);

window.calendar_weather.epoch_data = window.evaluated_static_data.epoch_data;
window.calendar_weather.processed_weather = window.evaluated_static_data.processed_weather;
window.calendar_weather.start_epoch = window.evaluated_static_data.year_data.start_epoch;
window.calendar_weather.end_epoch = window.evaluated_static_data.year_data.end_epoch;

climate_charts.evaluate_day_length_chart();
climate_charts.evaluate_weather_charts();

Expand All @@ -288,12 +277,11 @@ export async function rebuild_climate() {
window.evaluated_static_data.year_data.end_epoch
);

let prev_seasons = window.calendar_weather.processed_seasons;
let prev_weather = window.calendar_weather.processed_weather;
let prev_seasons = window.evaluated_static_data.processed_seasons;
let prev_weather = window.evaluated_static_data.processed_weather;

climate_generator.generate().then((result) => {

window.calendar_weather.epoch_data = result;
window.evaluated_static_data.epoch_data = result;

climate_charts.evaluate_day_length_chart();
Expand Down
Loading

0 comments on commit f6d6887

Please sign in to comment.