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

Next revision		Previous revision
cardcal [2025/11/10 00:59] – created 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">
-</html> 
-^  January  ^^^^^^^^ 
-^ ^  S  ^  M  ^  T  ^  W   ^  T  ^  F  ^  S  ^ 
-^  1  | 
-<html> 
 </div> </div>
-<script> +<script type="module"> 
-Date.prototype.getWeek = function() { +import moment from 'https://esm.run/moment'; 
-  var date = new Date(this.getTime()); +import * as seasons from 'https://esm.run/@postlight/seasons'; 
-  date.setHours(0, 0, 0, 0); +var y = moment().year(); 
-  date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7); +var $year = jQuery("#year"); 
-  var week1 = new Date(date.getFullYear(), 0, 4); +$year.val(y); 
-  return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 +genCal(y); 
-                        - 3 + (week1.getDay() + 6) % 7) / 7);+jQuery("#gen").click(e=>genCal($year.val())); 
 +function genCal(year) 
 +{ 
 +var last = moment(seasons.getSeasonStart(11,year-1)); 
 +var weeks = [last.isoWeek()-last.isoWeeksInYear(),...seasons.getSeasons(year).map(t=>moment(t).isoWeek())] 
 +console.log(weeks) 
 +var $cal = jQuery("#cal"); 
 +$cal.html(""); 
 +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 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++) 
 +{ 
 +  var time = moment.utc(year+"-"+(month+1).toString().padStart(2,'0')); 
 +  var name = time.format("MMMM"); 
 +  var $table = jQuery(`<table class="inline"> 
 + <thead> 
 + <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><th class="col8"></th></tr> 
 + </thead> 
 + <tbody></tbody></table>`) 
 +  var first = time.isoWeek() 
 +  var last = time.add(1,'months').subtract(1,'days').isoWeek() 
 +  if(last < first) 
 +    if(month == 0) first -= moment.utc().isoWeekYear(year-1).isoWeeksInYear(); 
 +    else if(month == 11) last += moment.utc().isoWeekYear(year).isoWeeksInYear(); 
 +  for(var week = first; week <= last; week++) 
 +  { 
 +    var card = week-weeks.findLast(a=>a<=week); 
 +    var suit = weeks.findLastIndex(a=>a<=week); 
 +    var days = Array(7).fill(0).map((a,i)=>{ 
 +      var m = moment.utc().isoWeekYear(year).isoWeek(week).day(i+1); 
 +      return m.month()==month?m.date():''; 
 +    }) 
 +    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); 
 +  } 
 +  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); 
 +}
 } }
-var tables = document.querySelectorAll("#cal table"); 
 </script> </script>
 </html> </html>
cardcal.1762754385.txt.gz · Last modified: by Yuki

Page Tools