neige d'aoust

knowledge, art, and other stuff

User Tools

Site Tools

Trace:
cardcal

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
cardcal [2025/11/11 13:08] – Yukicardcal [2025/11/11 23:24] (current) – Yuki
Line 1: Line 1:
 +====== Playing card calendar ======
 +
 +Based on a proposition by [[https://benjaminhollon.com/musings/card-calendar/|Benjamin Hollon]] but each quarter starts on the ISO week the corresponding solstice or equinox occurs in.
 +
 +Each suit represents a season, red is a solstice and black is an equinox:
 +
 +  * ♦️ Winter
 +  * ♠️ Spring
 +  * ♥️ Summer
 +  * ♣️ Fall
 +
 +Each day can thus be represented by a card and a day of week symbol.
 +
 +===== Calendar =====
 <html> <html>
 <style> <style>
Line 4: Line 18:
 { {
   display: inline-table;   display: inline-table;
 +}
 +#year, #gen
 +{
 +  font-size: 2em;
 +}
 +#year
 +{
 +  width: 4em;
 } }
 </style> </style>
 +<input id="year" size="4" type="number"/><button id="gen">Generate</button>
 <div id="cal"> <div id="cal">
 </div> </div>
Line 11: Line 34:
 import moment from 'https://esm.run/moment'; import moment from 'https://esm.run/moment';
 import * as seasons from 'https://esm.run/@postlight/seasons'; import * as seasons from 'https://esm.run/@postlight/seasons';
-var year = 2025;+var y = moment().year(); 
 +var $year = jQuery("#year"); 
 +$year.val(y); 
 +genCal(y); 
 +jQuery("#gen").click(e=>genCal($year.val())); 
 +function genCal(year) 
 +{
 var last = moment(seasons.getSeasonStart(11,year-1)); var last = moment(seasons.getSeasonStart(11,year-1));
 var weeks = [last.isoWeek()-last.isoWeeksInYear(),...seasons.getSeasons(year).map(t=>moment(t).isoWeek())] var weeks = [last.isoWeek()-last.isoWeeksInYear(),...seasons.getSeasons(year).map(t=>moment(t).isoWeek())]
 console.log(weeks) console.log(weeks)
 var $cal = jQuery("#cal"); var $cal = jQuery("#cal");
 +$cal.html("");
 var cards = ['A','2','3','4','5','6','7','8','9','10','J','Q','K','Joker']; var cards = ['A','2','3','4','5','6','7','8','9','10','J','Q','K','Joker'];
 var suits = [0x2666, 0x2660, 0x2665, 0x2663, 0x2666].map(a=>String.fromCodePoint(a, 0xfe0f)); var suits = [0x2666, 0x2660, 0x2665, 0x2663, 0x2666].map(a=>String.fromCodePoint(a, 0xfe0f));
 +var suits2 = [0x1f0c1, 0x1f0a1, 0x1f0b1, 0x1f0d1, 0x1f0c1];
 +var cards2 = [0,1,2,3,4,5,6,7,8,9,10,12,13,14];
 for(var month = 0; month < 12; month++) for(var month = 0; month < 12; month++)
 { {
-  var time = moment.utc(year+"-"+(month+1));+  var time = moment.utc(year+"-"+(month+1).toString().padStart(2,'0'));
   var name = time.format("MMMM");   var name = time.format("MMMM");
   var $table = jQuery(`<table class="inline">   var $table = jQuery(`<table class="inline">
  <thead>  <thead>
- <tr class="row0"><th class="col0 centeralign" colspan="8">${name}</th></tr> + <tr class="row0"><th class="col0 centeralign" colspan="9">${name}</th></tr> 
- <tr class="row1"><th class="col0"></th><th class="col1 centeralign">Mo</th><th class="col2 centeralign">Tu</th><th class="col3 centeralign">We</th><th class="col4 centeralign">Th</th><th class="col5 centeralign">Fr</th><th class="col6 centeralign">Sa</th><th class="col7 centeralign">Su</th></tr>+ <tr class="row1"><th class="col0"></th><th class="col1 centeralign">Mo</th><th class="col2 centeralign">Tu</th><th class="col3 centeralign">We</th><th class="col4 centeralign">Th</th><th class="col5 centeralign">Fr</th><th class="col6 centeralign">Sa</th><th class="col7 centeralign">Su</th><th class="col8"></th></tr>
  </thead>  </thead>
  <tbody></tbody></table>`)  <tbody></tbody></table>`)
Line 31: Line 63:
   var last = time.add(1,'months').subtract(1,'days').isoWeek()   var last = time.add(1,'months').subtract(1,'days').isoWeek()
   if(last < first)   if(last < first)
-    if(month == 0) first -= time.isoWeeksInYear(); +    if(month == 0) first -= moment.utc().isoWeekYear(year-1).isoWeeksInYear(); 
-    else if(month == 11) last += time.isoWeeksInYear();+    else if(month == 11) last += moment.utc().isoWeekYear(year).isoWeeksInYear();
   for(var week = first; week <= last; week++)   for(var week = first; week <= last; week++)
   {   {
-    var card = cards[week-weeks.findLast(a=>a<=week)]; +    var card = week-weeks.findLast(a=>a<=week); 
-    var suit = suits[weeks.findLastIndex(a=>a<=week)];+    var suit = weeks.findLastIndex(a=>a<=week);
     var days = Array(7).fill(0).map((a,i)=>{     var days = Array(7).fill(0).map((a,i)=>{
-      var m = moment.utc(year).isoWeek(week).day(i+2);+      var m = moment.utc().isoWeekYear(year).isoWeek(week).day(i+1);
       return m.month()==month?m.date():'';       return m.month()==month?m.date():'';
     })     })
-    var $week = jQuery(`<tr class="row2"><th class="col0 centeralign">${card+suit}</th><td class="col1 centeralign">${days[0]}</td><td class="col2 centeralign">${days[1]}</td><td class="col3 centeralign">${days[2]}</td><td class="col4 centeralign">${days[3]}</td><td class="col5 centeralign">${days[4]}</td><td class="col6 centeralign">${days[5]}</td><td class="col7 centeralign">${days[6]}</td></tr>`)+    var $week = jQuery(`<tr class="row2"><th class="col0 centeralign">${cards[card]+suits[suit]}</th><td class="col1 centeralign">${days[0]}</td><td class="col2 centeralign">${days[1]}</td><td class="col3 centeralign">${days[2]}</td><td class="col4 centeralign">${days[3]}</td><td class="col5 centeralign">${days[4]}</td><td class="col6 centeralign">${days[5]}</td><td class="col7 centeralign">${days[6]}</td><th class="col8 centeralign">${String.fromCodePoint(cards2[card]+suits2[suit])}</th></tr>`)
     jQuery("tbody", $table).append($week);     jQuery("tbody", $table).append($week);
   }   }
 +  var days = [0x263e, 0x2642, 0x263f, 0x2643, 0x2640, 0x2644, 0x2609].map(a=>String.fromCodePoint(a, 0xfe0e));
 +  var $week = jQuery(`<tr class="row2"><th class="col0 centeralign"></th><th class="col1 centeralign">${days[0]}</th><th class="col2 centeralign">${days[1]}</th><th class="col3 centeralign">${days[2]}</th><th class="col4 centeralign">${days[3]}</th><th class="col5 centeralign">${days[4]}</th><th class="col6 centeralign">${days[5]}</th><th class="col7 centeralign">${days[6]}</th><th class="col8 centeralign"></th></tr>`)
 +  jQuery("tbody", $table).append($week);
   $cal.append($table);   $cal.append($table);
 +}
 } }
 </script> </script>
 </html> </html>
cardcal.1762884509.txt.gz · Last modified: by Yuki

Page Tools