Moon Phases

[papermarlo]

I may attempt to make it on my own, but I would like to see a plugin that could display the phases of the moon based on the date OR maybe phases on a cycle up to the user. Example for the latter: have the eight basic phases and have the choice to cycle through those day by day (aka eight day cycle), or any other day cycle.

It would probably need to be an object like the random weather generator, I can't think of anywhere else it could be placed.

We want to use it for werewolves and other werekin in a rp forum.

[papermarlo]

I'm considering using the weather generator to cycle through phases randomly. While not what I want, that may just have to do for now

[Ben Goodman]

Hello papermarlo

It was requested here: support.proboards.com/thread/619471/plug-moon-phase?page=1&scrollTo=6965375

May 11, 2017 8:39:41 GMT -8 Ben Goodman said:

Hi pagan65 !

No plugin required. 
This is what you are looking for: link.
Just tested it on my board, and it seems to work. Grab the main script, and one of the rest from below. You can always customize them.

This is the required code:

<div id="ex1"></div>

<div id="ex2"></div>

<div id="ex3"></div>





<script type="text/javascript">



function load_moon_phases(obj){

var gets=[]

for (var i in obj){

gets.push(i+"="+encodeURIComponent(obj[i]))

}

var xmlhttp = new XMLHttpRequest()

var url = "http://www.icalendar37.net/lunar/api/?"+gets.join("&")

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

var moon  = JSON.parse(xmlhttp.responseText)

example_1(moon)

example_2(moon)

example_3(moon)

}

}

xmlhttp.open("GET", url, true)

xmlhttp.send()

}

document.addEventListener("DOMContentLoaded", function() {

var configMoon = {

lang   :'en', // 'ca' 'de' 'en' 'es' 'fr' 'it' 'pt' 'ru' 'zh' (*)

month :new Date().getMonth() + 1, // 1  - 12

year   :new Date().getFullYear(),

size :50, //pixels

lightColor :"#FFFF88", //CSS color

shadeColor :"#111111", //CSS color

sizeQuarter :20, //pixels

texturize :false //true - false

}

configMoon.LDZ=new Date(configMoon.year,configMoon.month-1,1)/1000

load_moon_phases(configMoon)

})



</script>


 And this is the one I tested with:

<script type="text/javascript">

function example_1(moon){

var day = new Date().getDate()

var dayWeek=moon.phase[day].dayWeek

var html="<div class='moon'>"

html+="<div>"+moon.nameDay[dayWeek]+"</div>"

html+="<div>"+ day + " " + moon.monthName + " "+moon.year+"</div>"

html+=moon.phase[day].svg

html+="<div>"+moon.phase[day].phaseName + " "+ Math.round(moon.phase[day].lighting)+"%</div>"

html+="</div>"

document.getElementById("ex1").innerHTML=html

}

</script>
As the page says, you can apply some CSS aswell:

.moon{

background-color:#666666;

display:inline-block;

padding:10px 20px;

color:#FFFFFF;

margin:1px;

}


Here is a moon calendar so you can check if the data is accurate: link

Hope it helps.

[papermarlo]

This is perfect! Thank you!