sticker_helper.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Calendar Sticker Helper</title>
<style>
  body {
    font-family: Arial, sans-serif;
    max-width: 480px;
    margin: 2rem auto;
    padding: 1rem;
    background: #f7f7f7;
    border-radius: 8px;
  }
  input, button {
    padding: 0.5rem;
    font-size: 1rem;
    margin: 0.4rem 0;
    width: 100%;
    box-sizing: border-box;
  }
  label {
    font-weight: bold;
  }
  #result {
    margin-top: 1rem;
    background: #fff;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 6px;
    min-height: 50px;
  }
</style>
</head>
<body>

<h2>Calendar Sticker Helper</h2>

<label for="totalDays">Total Days in Calendar (default 31):</label>
<input type="number" id="totalDays" value="31" min="5" max="100" />

<label for="totalStickers">Total Stickers (default 5):</label>
<input type="number" id="totalStickers" value="5" min="2" max="20" />

<label for="prePlaced">Pre-placed Stickers (comma separated):</label>
<input type="text" id="prePlaced" placeholder="e.g. 9,27" />

<button id="calculateBtn">Calculate Pattern</button>

<div id="result"></div>

<script>
function findPattern(totalDays, totalStickers, prePlaced) {
  prePlaced.sort((a,b) => a-b);
  let maxSpacing = Math.floor((totalDays - 1) / (totalStickers -1));
  
  // We try all possible spacings from max to 1
  for(let s = maxSpacing; s >=1; s--) {
    // For each spacing, try starting days from 1 up to day that fits full sequence
    for(let start=1; start + s*(totalStickers-1) <= totalDays; start++) {
      let seq = [];
      for(let i=0; i<totalStickers; i++) {
        seq.push(start + i*s);
      }
      // Check if all prePlaced are in seq
      let allPrePlacedFound = prePlaced.every(p => seq.includes(p));
      if(allPrePlacedFound) {
        return {
          spacing: s,
          sequence: seq
        };
      }
    }
  }
  return null; // no pattern found
}

document.getElementById("calculateBtn").addEventListener("click", () => {
  let totalDays = parseInt(document.getElementById("totalDays").value);
  let totalStickers = parseInt(document.getElementById("totalStickers").value);
  let prePlacedRaw = document.getElementById("prePlaced").value.trim();
  let resultDiv = document.getElementById("result");
  resultDiv.innerHTML = "";

  if(!totalDays || !totalStickers || totalStickers > totalDays) {
    resultDiv.innerHTML = "<b>Error:</b> Please enter valid total days and stickers.";
    return;
  }

  let prePlaced = [];
  if(prePlacedRaw.length > 0) {
    prePlaced = prePlacedRaw.split(",").map(x => parseInt(x.trim())).filter(x => !isNaN(x) && x>=1 && x<=totalDays);
    if(prePlaced.length === 0) {
      resultDiv.innerHTML = "<b>Error:</b> Please enter valid pre-placed days.";
      return;
    }
  }

  if(prePlaced.length > totalStickers) {
    resultDiv.innerHTML = "<b>Error:</b> Pre-placed stickers cannot exceed total stickers.";
    return;
  }

  let pattern = findPattern(totalDays, totalStickers, prePlaced);

  if(pattern === null) {
    resultDiv.innerHTML = "<b>No valid pattern found.</b> Try changing inputs.";
    return;
  }

  let remaining = pattern.sequence.filter(day => !prePlaced.includes(day));

  resultDiv.innerHTML = `
    <b>Pattern found!</b><br>
    Spacing: ${pattern.spacing} days<br>
    Full sequence: ${pattern.sequence.join(", ")}<br>
    <br>
    Place remaining stickers on: <b>${remaining.join(", ")}</b>
  `;
});
</script>

</body>
</html>
Editor is loading...