twobob/tarot.html

## tarot.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BioTarot Reading</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #b8a8c2;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background-image: url(./art/scape3.jpeg);
            background-repeat: round;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 20px;
        }

        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #b1a3bb;
            padding: 0px;
            border-radius: 0px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding-top: 0px;
            border-left: 2px solid #578a8c70;
            border-right: 2px solid #578a8c70;
            border-radius: 0px;
        }

        label, select, input, button {
            margin: 10px 0;
            font-size: 20px;
            color: #313a74;
        }

        select, input, button {
            padding: 10px;
            border: 1px solid #e5d0f3;
            border-radius: 5px;
            min-width: 120px;
            min-height: 60px;
        }

        select
        {
            font-size: 16px;
             min-width:280px;
            background-color: #fdfafb;
        }

        #dob
        {
            font-size:20px;
            min-width:260px;
            background-color: #fdfafb;

        }

        button {
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        button:hover {
            background-color: #0056b3;
        }

        #reading-result {
            margin-top: 0px;
            padding: 3px;
            max-width: 314px;
            border-left: 2px solid #578a8c70;
            border-right: 2px solid #578a8c70;
            background-color: #b8a8c2;
        }

        /* Additional styles can be added here */

    </style>
</head>
<body>


    <form id="tarot-form">
         <img src="art/header.PNG" alt="BioTarot" style="max-width: 300px;">
         <br/>
        <label for="deck-choice" style="font-variant:  all-small-caps;">Choose a Tarot deck:</label>
        <select id="deck-choice">
            <option  value="major-arcana">Major Arcana only</option>
            <option selected value="complete-deck">Complete Deck (Full Arcana)</option>
        </select>

        <label for="spread-choice" style="font-variant: all-small-caps;">Choose a Tarot spread:</label>
        <select id="spread-choice">
            <option value="celtic-cross">Celtic Cross</option>
            <option value="tree-of-life">Tree of Life</option>
            <option value="rider-waite-smith">Rider-Waite-Smith</option>
            <option value="daily-draw" selected>Daily Draw</option>
        </select>

        <!-- <label for="include-details">Include detailed card meanings?</label>-->
        <input type="checkbox" style="display: none;" checked="checked" id="include-details">

        <label for="use-biorhythm" style="font-variant:  all-small-caps;">Use Biorhythm?</label>
        <input type="checkbox" checked="checked" id="use-biorhythm">

        <label for="dob" style="font-variant: all-small-caps;">Date of Birth (For Biorhythm)</label>
        <input type="date" id="dob" value="2004-11-11">

        <button type="button" id="predict-button">Predict</button>

        <div name="bio-canv" id="bio-canv">
        <!-- This is a template placeholder -->
        </div>

    </form>


    <div id="reading-result">
        <!-- The Tarot reading result will be displayed here -->
    </div>


    <script>
        // Define the JavaScript code for performing the Tarot reading
// Define the Major Arcana cards
const majorArcana = [
    'The Fool', 'The Magician', 'The High Priestess', 'The Empress', 'The Emperor',
    'The Hierophant', 'The Lovers', 'The Chariot', 'Strength', 'The Hermit',
    'Wheel of Fortune', 'Justice', 'The Hanged Man', 'Death', 'Temperance',
    'The Devil', 'The Tower', 'The Star', 'The Moon', 'The Sun',
    'Judgement', 'The World'
];

// Define the complete Tarot deck including the Major and Minor Arcana
const completeDeck = majorArcana.concat(
    ...["Wands", "Cups", "Swords", "Pentacles"].map(suit =>
        ["Ace", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Page", "Knight", "Queen", "King"]
            .map(rank => `${rank} of ${suit}`)
    )
);

// Create an array to hold preloaded images
const preloadedImages = [];

// Function to preload all Major Arcana images to prevent caching
function preloadMajorArcanaImages() {
    for (const card of majorArcana) {
        const img = new Image();
        img.src = `art/${card.replace(/[\s\W]/g, '_')}.jpeg`;
        preloadedImages.push(img);  // Keep the image in the array
    }
}

// Call the function to preload images
preloadMajorArcanaImages();

const pentaclesDict = {
    "Ace of Pentacles": "The Ace of Pentacles symbolizes the beginning of prosperity and the promise of growth in material aspects of life. It signifies the budding phase where you should lay down the groundwork for future prosperity. This is a powerful indicator that what you sow now, with effort and a sound plan, will be reaped in abundance later.",
    "Two of Pentacles": "The Two of Pentacles represents a phase where you find yourself juggling multiple responsibilities or financial priorities. The card emphasizes the need for balance and adaptability. The situation calls for an astute management of time and resources, reminding you that even though life comes with its set of challenges, how you handle them makes all the difference.",
    "Three of Pentacles": "The Three of Pentacles portrays the importance of teamwork, cooperation, and skill in bringing a project to fruition. You are either part of a group where each one contributes a particular skill, or you're in a phase of personal development where your skills are being acknowledged. This is a time of recognition for expertise and the quality of workmanship.",
    "Four of Pentacles": "The Four of Pentacles represents a stage where security and material possession are of significant concern. You have reached a point where guarding what you've built takes priority. While it is natural to want to protect your resources, this card encourages you to evaluate whether your grip is too tight and if you are missing out on opportunities because of this conservative attitude.",
    "Five of Pentacles": "The Five of Pentacles speaks to times of financial hardship and emotional loneliness. It could indicate a period where resources are scarce, and the outlook appears bleak. Though difficult, this phase is transient, and the card urges you to tap into your inner resilience and seek external support. Don't be too proud to ask for help.",
    "Six of Pentacles": "The Six of Pentacles represents the flow of resources. This could be in the form of giving or receiving—charitable actions, loans, or an influx of abundance. It indicates that generosity and gratitude play pivotal roles at this time. Your financial standing is secure enough to give to others, or you may find yourself the grateful recipient of someone else’s generosity.",
    "Seven of Pentacles": "The Seven of Pentacles symbolizes the gestation period of your efforts. It implies that you've been hard at work, putting in the time and energy toward your long-term goals. The card serves as a reminder that meaningful accomplishments require patience and persistent effort. You're encouraged to stay the course and continue to nurture your plans.",
    "Eight of Pentacles": "The Eight of Pentacles is about diligent focus and a dedicated approach towards skill improvement. Whether you're honing existing abilities or picking up new ones, this card signifies a period of intense learning or development. It suggests that you are fully engaged in a task or series of tasks that require your attention to detail.",
    "Nine of Pentacles": "The Nine of Pentacles reflects a period where independence, luxury, and financial stability are within your grasp. This is a phase marked by self-sufficiency and the luxuries that come from hard-earned success. You're now enjoying the fruits of your labor, and this card encourages you to relish this self-empowering moment.",
    "Ten of Pentacles": "The Ten of Pentacles embodies generational success, long-term stability, and the culmination of efforts possibly stretching beyond your lifespan. It indicates that you've built or are in the process of building a lasting foundation for generations to come. Financially, emotionally, and in other material terms, you've achieved a level of success that benefits not just you but your loved ones.",
    "Page of Pentacles": "The Page of Pentacles heralds opportunities for growth in the material and educational spheres. Whether it's a new venture, investment, or educational pursuit, this card indicates a period filled with inspiration and practicality. Your curiosity and eagerness to learn are your best assets during this time.",
    "Knight of Pentacles": "The Knight of Pentacles signifies a phase where dedication, responsibility, and hard work are the main themes. Unlike other knights who may be more adventurous, this knight is committed to seeing things through. Whether it's a project, job, or relationship, you are in it for the long haul, willing to build success one meticulous step at a time.",
    "Queen of Pentacles": "The Queen of Pentacles is the epitome of practicality, security, and maternal care. She represents a nurturing energy that looks after the well-being of her loved ones without neglecting her own needs. Financial stability and a comfortable home environment are crucial to her, and this card suggests you embody or embrace such qualities now.",
    "King of Pentacles": "The King of Pentacles signifies attainment of material success and the mastery over resources. This card represents someone who is business-savvy, a natural manager, and very reliable. Your ventures are likely to be fruitful due to diligent planning and a pragmatic approach. It also suggests that you can afford to be generous, sharing your wealth and wisdom with others."
}

const wandsDict = {
    "Ace of Wands": "The Ace of Wands heralds a period of great inspiration, marking the ignition of new projects or creative undertakings. This card vibrates with the energy of potential and encourages you to tap into your innate creativity to bring forth something truly unique. It's a beacon, suggesting that now is the opportune moment to act on those dormant dreams and ambitions.",
    "Two of Wands": "The Two of Wands symbolizes a moment of introspection, where you stand between the familiar and the unknown. It invites you to expand your horizons and take calculated risks. This is a time to envision not just immediate goals but to contemplate your long-term life trajectory. The card embodies the merging of present awareness with future planning, urging you to align your current actions with your larger life goals.",
    "Three of Wands": "The Three of Wands signifies an exciting phase where your initial plans start to take shape and gain momentum. This is the point where you transition from planning to execution. The card evokes a sense of anticipation, encouraging you to take bold steps to actualize your visions.",
    "Four of Wands": "The Four of Wands represents a milestone achieved after hard work, a pause to celebrate and reflect. It signifies that you've built a stable foundation and that you should take the time to enjoy these accomplishments with your community, friends, and family. It promotes a sense of unity and collective joy.",
    "Five of Wands": "The Five of Wands denotes a phase marked by competition, differing opinions, and potential conflict. Rather than viewing this as a negative, consider it an opportunity to grow. It's a call to rise above petty disagreements and to find ways to collaborate effectively.",
    "Six of Wands": "The Six of Wands represents the joy of victory, the euphoria that comes after triumphing over challenges. This is a moment to relish your achievements, but also a reminder that success is not an endpoint but a stage in your greater journey.",
    "Seven of Wands": "The Seven of Wands embodies a test of courage and resilience. You're called upon to defend your position and stand your ground. Although you may feel under attack, this card assures you that you have the higher moral ground and encourages you to maintain your integrity.",
    "Eight of Wands": "The Eight of Wands signifies a rush of energy and movement that propels you toward your goals at a quicker pace than you anticipated. Things that were stagnant now move rapidly, so be prepared to act quickly and make effective decisions.",
    "Nine of Wands": "The Nine of Wands serves as a message to keep your resolve. Despite challenges and setbacks, this is not the time to give up. You're in the last stretch of your endeavor, and perseverance will lead you to your desired outcome.",
    "Ten of Wands": "The Ten of Wands warns you of the dangers of taking on too much. Though responsibility is a part of life, overextending yourself leads to burnout. Assess your obligations and prioritize; it may be time to delegate or discard tasks that are not essential.",
    "Page of Wands": "The Page of Wands is a youthful spirit, full of curiosity and an insatiable appetite for learning. The card represents the excitement of embarking on a new journey or project. Your eagerness and energy are assets, but don't neglect the need for preparation.",
    "Knight of Wands": "The Knight of Wands is the embodiment of raw energy and adventurous spirit. He charges ahead with his plans and is fearless in the pursuit of his passions. While his enthusiasm is infectious, his impulsive nature can also lead to unnecessary risks.",
    "Queen of Wands": "The Queen of Wands is a symbol of self-assurance, independence, and unapologetic femininity. She has a nurturing yet assertive nature, and her leadership style is one of inspiration rather than domination. When this card appears, it's a signal to express yourself freely and to trust your instincts.",
    "King of Wands": "The King of Wands represents the epitome of leadership and vision. He's someone who not only dreams big but also has the will and the skill to bring those dreams into reality. This card signifies a phase where your mastery and expertise are recognized, and you have the influence to lead others."
}

const cupsDict = {
    "Ace of Cups": "The Ace of Cups is a card of new beginnings, love, and compassion. It represents the opening of your heart to receive and give love, and the start of a new and exciting chapter in your life. This card is a reminder that you are worthy of love and happiness, and that the universe is conspiring to bring you both.",
    "Two of Cups": "The Two of Cups is a card of partnership, harmony, and mutual attraction. It represents a deep and meaningful connection with another person, one that is built on love, trust, and respect. This card can also signify the beginning of a new relationship, or the strengthening of an existing one.",
    "Three of Cups": "The Three of Cups is a card of celebration, joy, and friendship. It represents a time of happiness and carefree abandon, when you are surrounded by the people you love most. This card is a reminder to cherish your friendships and to celebrate the good times in life.",
    "Four of Cups": "The Four of Cups is a card of boredom, apathy, and dissatisfaction. It represents a time when you are feeling restless and unfulfilled, and you may be searching for something new and exciting in your life. This card is a reminder to take some time for yourself and to reflect on what you really want out of life.",
    "Five of Cups": "The Five of Cups is a card of loss, disappointment, and grief. It represents a time when you are experiencing heartbreak or sadness. This card is a reminder that it is okay to feel your emotions, and that you will eventually heal from this experience.",
    "Six of Cups": "The Six of Cups is a card of nostalgia, innocence, and happy memories. It represents a time when you were carefree and happy, and you may be feeling a sense of longing for those days. This card is a reminder to cherish your memories and to find joy in the simple things in life.",
    "Seven of Cups": "The Seven of Cups is a card of illusion, temptation, and unrealistic expectations. It represents a time when you are presented with many choices, and you may be feeling overwhelmed or confused. This card is a reminder to trust your intuition and to choose the path that feels right for you.",
    "Eight of Cups": "The Eight of Cups is a card of disillusionment, abandonment, and the pursuit of new goals. It represents a time when you are leaving behind something that is no longer serving you, in order to pursue something new and better. This card is a reminder that it is okay to let go of things that are no longer working for you, and to embrace the unknown.",
    "Nine of Cups": "The Nine of Cups is a card of contentment, satisfaction, and emotional fulfillment. It represents a time when you are truly happy and content with your life. This card is a reminder to appreciate all of the good things in your life, and to savor this moment of happiness.",
    "Ten of Cups": "The Ten of Cups is a card of happiness, love, and family bliss. It represents the ultimate fulfillment of your heart's desires. This card is a reminder that you are capable of creating a truly happy and fulfilling life for yourself and your loved ones.",
    "Page of Cups": "The Page of Cups is a card of enthusiasm, idealism, and new romantic beginnings. It represents a time when you are open to love and new experiences. This card is a reminder to follow your heart and to embrace new possibilities.",
    "Knight of Cups": "The Knight of Cups is a card of chivalry, romance, and emotional sensitivity. It represents a kind and gentle person who is capable of great love and compassion. This card can also signify the beginning of a new relationship, or the deepening of an existing one.",
    "Queen of Cups": "The Queen of Cups is a card of compassion, empathy, and unconditional love. It represents a wise and compassionate person who is always willing to help others. This card can also signify a mother figure, or a close female friend.",
    "King of Cups": "The King of Cups is a card of emotional maturity, wisdom, and compassion. It represents a kind and gentle leader who is capable of great love and understanding. This card can also signify a father figure, or a mentor."
}

const swordsDict = {
    "Ace of Swords": "The Ace of Swords embodies the energy of a new intellectual endeavor, be it a quest for truth, clarity, or wisdom. This card indicates a breakthrough moment, a point where thought becomes action and decisions are clear. It's a time to use logic and reason to slice through confusion and discover a new path.",
    "Two of Swords": "The Two of Swords presents a moment of decision, a point where you are torn between two courses of action. Though you may be feeling paralyzed by the weight of choice, it's essential to look past emotion and distractions. This card advises a well-thought-out balance between two competing options, taking all variables into consideration.",
    "Three of Swords": "The Three of Swords signifies emotional pain, usually stemming from a situation involving betrayal or separation. While the card is often a hard one to encounter, it serves as a reality check and allows for the beginning of the healing process. Don't bottle your feelings up; face them, and let the healing begin.",
    "Four of Swords": "The Four of Swords suggests a time for rest, recovery, and introspection. It urges you to step away from the chaos and take a mental and emotional breather. Use this respite to recharge and heal, preparing yourself for future challenges and decisions.",
    "Five of Swords": "The Five of Swords warns against being too self-centered in a quest for victory. This card indicates conflict, tension, and the need for negotiation. Win-at-all-costs attitudes can lead to hollow victories and lost friendships. Consider the broader implications of your actions.",
    "Six of Swords": "The Six of Swords signals a difficult transition but one that is necessary for growth. The card implies that the worst is over, and you are now on your way to a better place, even if you have to navigate through a period of uncertainty and adjustment.",
    "Seven of Swords": "The Seven of Swords signifies tactics, strategy, and sometimes deception. Either you are planning something not entirely above board, or someone is doing that to you. Caution and planning are the keys when this card appears. Think ahead and double-check all details.",
    "Eight of Swords": "The Eight of Swords represents self-imposed restrictions and limitations. You may feel trapped by your circumstances, but often it is your mindset that needs changing, not your situation. By adopting a new perspective, you can find a way to liberate yourself.",
    "Nine of Swords": "The Nine of Swords symbolizes anxiety, worry, and despair. Often these feelings are based on imagined scenarios and potential outcomes, not the current reality. Take steps to control your stress, seek help if needed, and adopt strategies for managing your anxieties.",
    "Ten of Swords": "The Ten of Swords represents a low point, a situation where you feel betrayed or defeated. Despite the darkness of this card, it also signifies that this ordeal is almost over, and a new dawn is coming. This is a time to let go and prepare for new opportunities.",
    "Page of Swords": "The Page of Swords embodies curiosity, mental agility, and youthful energy. This card suggests a thirst for knowledge and a passion for debate. It is time to pursue new intellectual interests, examine all the details, and ask the questions that others may not be asking.",
    "Knight of Swords": "The Knight of Swords is all about action and pursuit. This card suggests that you are on a quest for truth and justice and that now is the time to get to the point. Think carefully about your actions, but don't get bogged down in excessive planning.",
    "Queen of Swords": "The Queen of Swords represents a mature intellect that cuts through nonsense to get to the heart of the matter. She values truth, clarity, and direct communication. She advises that you be just as discerning in your decisions and relationships, ensuring you are fair and logical in your actions.",
    "King of Swords": "The King of Swords is a symbol of intellectual power and authority. This card suggests that you have a strong ethical center and are in a good position to make just and fair decisions. Make use of your intellectual power, but remember to temper it with empathy and emotional considerations."
}

const majorArcanaDict = {
    "The Fool": "The Fool epitomizes the poetry of beginnings, embodying the exhilarating mixture of uncertainty and optimism that accompanies any new journey. It nudges you to leap into the unknown, with an untamed spirit as your guide. The Fool advises you to embrace the boundless potential of the present moment and to disregard fear's inhibiting counsel. Here, you can liberate yourself from the customary and the predictable, taking the path less traveled with an open heart and wide-eyed wonder.",
    "The Magician": "The Magician serves as an alchemical master of the four elements, invoking the mystical power inherent within you to manifest your desires. Here, reality bends to your will, if you wield your resources with precision and intention. This card doesn't just suggest that you have the raw ingredients for success; it assures you that the cosmic alignment is perfect for transmuting thought into reality. It’s an affirmation of your innate capability to channel your talents and tools towards transformative ends.",
    "The High Priestess": "The High Priestess is the ethereal gatekeeper of the subconscious realm, offering you a glimpse into your soul’s innermost sanctum. She doesn't deal in the mundane or the explicit but prefers the language of dreams, symbols, and intuition. When you encounter The High Priestess, you're invited to go deeper into your own inner wisdom, transcending mere fact and understanding the ineffable truths that only silence can express. She encourages a pilgrimage into the self, a journey that could redefine your understanding of reality.",
    "The Empress": "The Empress radiates the all-encompassing warmth of maternal love and the invigorating power of natural cycles. She is the living embodiment of earthly abundance and personal growth. When she graces your presence, it’s a sign that you are in a phase of prolific creativity and emotional richness. The Empress encourages you to embrace the natural, the sensual, and the uncomplicated joy that comes from nurturing others as well as yourself. Here, you can create your Eden, a place of organic opulence and emotional well-being.",
    "The Emperor": "The Emperor embodies the archetypal ruler, providing structure, law, and order to the chaos that may surround you. He symbolizes an opportunity to harness your personal sovereignty and take command of your domain. His presence suggests that it’s time to employ methodical planning and tactical execution in your endeavors, relying on experience and judgment. This is not a moment for compromise; it’s a moment to embody leadership, demonstrating authority with a balance of force and wisdom.",
    "The Hierophant": "The Hierophant stands as a spiritual conveyor of conventional wisdom and societal values. He holds the keys to the communal soul, offering you structured guidance in the form of traditions, rituals, and beliefs that have withstood the test of time. He asks you to explore your spiritual framework, to connect with your heritage, and to respect the foundational doctrines of your system of faith. It’s a call to participate in your community, becoming an agent of cultural perpetuation and, possibly, renewal.",
    "The Lovers": "The Lovers evoke the magnetic pull of affinity, capturing the transcendent experience of unity in diversity. This card doesn't merely symbolize romantic partnerships but all cooperative unions, including difficult choices that call for emotional integrity. You’re at a crossroads, standing between dualities, yearning to attain harmony. The Lovers urge you to make your choice with heartfelt deliberation, fully understanding the repercussions and rewards of your decision. In the sacred space of compromise, you’ll find the seeds for long-lasting commitment.",
    "The Chariot": "The Chariot is your personal war machine, ready to undertake a quest for victory at your command. Driven by sheer willpower and self-discipline, it symbolizes a trial of conquest over external challenges and internal conflicts. This card tells you that success is not only possible but assured, granted you steer your inner forces with a masterful hand. Harness your impulses, marshal your thoughts, and direct them toward your objectives. Your triumphal parade awaits, but you must be the one to lead it.",
    "Strength": "Strength represents an elemental force of inner fortitude and compassionate mastery. Unlike brute force, the strength depicted here is of character, of soul. It’s the courage to face your primal fears, the resilience to endure life’s adversities, and the grace to conquer your own weaknesses. When this card appears, it is affirmation of your inherent stamina and your potential to heal yourself and others. Your bravery isn't in your muscle but in your heart, and that is your indomitable strength.",
    "The Hermit": "The Hermit represents the solitude that precedes enlightenment, symbolizing a voluntary retreat from the cacophony of the external world to engage with the inner self. He beckons you into the wilderness of your soul, offering a lantern of wisdom to illuminate your way. He's an archetype of thoughtful solitude, prompting you to seek answers from within. Your solutions are not in the external chatter but in your inner silence. This is your sabbatical for the soul, and in it, you'll find profound insights.",
    "Wheel of Fortune": "The Wheel of Fortune represents the ever-changing cycles of life, the eternal spiral of successes and setbacks. This card doesn't discriminate or play favorites; it simply reflects the impartial nature of destiny. When you find yourself on this wheel, know that nothing is ever static, every condition is temporary, and change is the only constant. Your fortunes will wax and wane, but if you align yourself with the cyclical flow, you can achieve a deeper understanding of your life’s transitions.",
    "Justice": "Justice holds the scales in stoic equilibrium, reflecting the cosmic law of cause and effect that governs all living beings. This card is your ethical benchmark, suggesting that each choice you make reverberates in the larger scheme of things. It asks you to dispense your judgments with impartiality, to live in accordance with your core values, and to act with integrity. In the court of cosmic law, Justice advises you to weigh your decisions carefully, considering their immediate and long-term implications.",
    "The Hanged Man": "The Hanged Man serves as a cosmic timeout, a moment to pause, to reflect, to surrender. In his upside-down state, he urges you to release your preconceived notions and to see your world from a new angle. It's an uncomfortable position, no doubt, but it's the discomfort that spawns enlightenment. The card signifies an active surrender, a choice to let go and thus, paradoxically, take control. By yielding, you open yourself to new insights, sacrificing the immediate needs for long-term enlightenment.",
    "Death": "Death is not the end but a transformation, a clearing of the old to make way for the new. This card assures you that the leaves must fall for spring to arrive. It's a harbinger of necessary change, urging you to shed your outdated attitudes, relationships, or circumstances. It doesn't promise the ease of the transition, but it guarantees the necessity. Here, you are not the victim but the architect of a new beginning, a rebirth that allows you to emerge anew, with wisdom and strength derived from your experiences.",
    "Temperance": "Temperance is the alchemy of life, the harmonious blending of opposing forces. It urges you to reach a balanced integration of your multiple selves—body, mind, and soul. It's an invitation to refine your existence, mixing the elemental aspects of your life with artful precision to attain a state of inner and outer equilibrium. This is a life-long journey toward wholeness, where you carefully temper your actions and reactions to achieve your personal equilibrium, a dynamic balance that evolves as you do.",
    "The Devil": "The Devil is your shadow, the sum total of your fears and desires, manifesting as compulsive behaviors and dependencies. He points out the chains you've willingly clasped, holding you back from your fullest potential. Yet, it's important to note that the chains are loose; freedom is but a conscious choice away. This card serves as a mirror reflecting your darker aspects, not to shame you, but to enlighten you, to make you aware of your power to break free from your self-imposed bondage.",
    "The Tower": "The Tower is cataclysmic change, a disruption so intense it uproots the very foundation of your life. Yet, it's often the universe’s last resort, a divine intervention to correct a skewed path. Amidst the chaos and the rubble, you'll find liberation from false beliefs and outdated attitudes. Though the initial impact may seem destructive, the space it clears offers fertile ground for new seeds, for new structures that serve your true self. It's a demolition for renovation, an unsettling but ultimately liberating force.",
    "The Star": "The Star is the celestial beacon in your darkest nights, the promise of healing and renewal. This card indicates a moment where you can pause and breathe, where you're encouraged to restore your emotional and spiritual equilibrium. It marks a period of inspiration, where the universe whispers its secrets in your ears, offering clarity and inner peace. Your dreams and hopes become your guides, urging you to aim high and believe in the boundless possibilities of your existence.",
    "The Moon": "The Moon is a labyrinth of illusions, a maze of emotional and mental fog. It reflects the enigmatic and unpredictable realm of your subconscious, casting its glow on your deepest fears and unacknowledged desires. While it doesn’t offer the full illumination of the Sun, it provides just enough light for you to navigate through your inner corridors. Here, logic takes a backseat, making way for intuition and imagination. Though the path may be obscured, it's a necessary journey to confront the unknown aspects of yourself.",
    "The Sun": "The Sun is your cosmic 'yes,' a universe in harmonious alignment with your desires and ambitions. It embodies unadulterated joy, success, and warmth, all generously available to you. When you find yourself under its glorious rays, you're not merely surviving; you're thriving, radiant in your own life force. This card marks a time for celebrations, for sharing your light with others, and for basking in the simple yet profound pleasures of existence.",
    "Judgement": "Judgement is your cosmic wake-up call, the divine trumpet that announces the arrival of your personal Day of Reckoning. It signifies a moment of significant self-evaluation, a chance to assess your actions and their long-term consequences. The card heralds a profound rebirth, as you reconcile your past selves with who you aspire to become. It beckons you to heed your inner calling, to rise like a phoenix from your ashes, prepared for your next evolutionary stage.",
    "The World": "The World is your cosmic graduation day, the completion of one life chapter that paves the way for the next. This card signifies the joyous culmination of your journey, the harmonious integration of its disparate pieces into a coherent whole. It’s a reminder that every end is but a new beginning in disguise, every achievement sets the stage for new challenges. The World doesn’t just represent the destination but celebrates the entire journey, honoring your growth and every lesson learned."
};

const cardDetails = {};


// Define the Tarot reading spreads: The Celtic Cross and The Tree of Life
const celticCrossPositions = [
    "The Present", "The Challenge", "The Past", "The Future", "Above You (Best Outcome)",
    "Below You (Foundation)", "Advice", "External Influences", "Hopes and Fears", "Outcome"
];

const treeOfLifePositions = [
    "Keter (Crown)", "Chokhmah (Wisdom)", "Binah (Understanding)", "Chesed (Mercy)",
    "Gevurah (Severity)", "Tiferet (Beauty)", "Netzach (Eternity)", "Hod (Splendor)",
    "Yesod (Foundation)", "Malkuth (Kingdom)"
];

const riderWaiteSmithPositions = [
    "Past", "Present", "Future"
];

const dailyDrawPositions = ["Today"];


// Example usage with debugging output
dateOfBirth = new Date('2006-11-11');
const spreadChoice = document.getElementById("spread-choice").value;


    // Length of the Synodic month in milliseconds
const synodicMonth = 29.53058867 * 24 * 60 * 60 * 1000;

const currentDate = new Date();
const referenceNewMoon = new Date(Date.UTC(2004, 0, 21));  // January 21, 2004, is the known date

// Function to combine the contents of multiple card dictionaries into a single dictionary
function combineCardDicts(cardDicts) {
    const combinedDict = {};
    for (const cardDict of cardDicts) {
        Object.assign(combinedDict, cardDict);
    }
    return combinedDict;
}

// Combine card dictionaries (You'll need to define these card dictionaries)
const combinedCardDict = combineCardDicts([majorArcanaDict, cupsDict, swordsDict, pentaclesDict, wandsDict]);

// Update cardDetails dictionary with the combined card dictionary
Object.assign(cardDetails, combinedCardDict);

// Function to calculate a deterministic hash based on string input
function stringHash(str) {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
        const char = str.charCodeAt(i);
        hash = ((hash << 5) - hash) + char;
        hash = hash & hash;  // Convert to 32bit integer
    }
    return hash;
}


// Function to generate a pool of random tarot spreads
function generatePoolOfSpreads(numSpreads, numCards, deck) {
    const pool = Array.from({ length: numSpreads }, () =>
        Array.from({ length: numCards }, () =>
            deck[Math.floor(Math.random() * deck.length)]
        ).sort()
    );
    return pool;
}

// Generate a large pool of 10,000 random 10-card spreads
const largePool10k = generatePoolOfSpreads(10000, 10, majorArcana);
const largePool10kCompleteDeck = generatePoolOfSpreads(10000, 10, completeDeck);

// Function to shuffle an array using Fisher-Yates shuffle algorithm
function fisherYatesShuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

// Function to read card details from the dictionary
function readCardInfoFromDict(cardName) {
    return cardDetails[cardName] || "Details not available.";
}


// Function to generate a deterministic pool of tarot spreads for Card of the Day
function generateDeterministicPoolForCard(seed, numCards, deck) {
    let currentSeed = seed;
    function deterministicRandom() {
        var x = Math.sin(currentSeed++) * 10000;
        return x - Math.floor(x);
    }
    return Array.from({ length: numCards }, () => {
        return deck[Math.floor(deterministicRandom() * deck.length)];
    }).sort();
}

function CardOfTheDay(deckChoice) {
    const currentDate = new Date().toDateString();
    const moonPhase = getMoonPhase(new Date());

    const combinedString = `${currentDate}_${moonPhase}`;
    const deterministicHash = stringHash(combinedString);

    const selectedDeck = (deckChoice === "major-arcana") ? majorArcana : completeDeck;
    const deterministicPool = generateDeterministicPoolForCard(deterministicHash, 10, selectedDeck);

    const cardIndex = Math.abs(deterministicHash) % deterministicPool.length;
    const selectedCard = deterministicPool[cardIndex];

    // Initialize reading object
    const reading = {};

    // Add Card of the Day to the reading
    const cardDetails = readCardInfoFromDict(selectedCard);
    reading["Card of the Day"] = {
        card: selectedCard,
        details: cardDetails
    };

    return {
        reading: reading,
        hash: deterministicHash
    };
}

// Example usage
const deckChoice = document.getElementById("deck-choice").value;
const { reading: cardOfTheDay, hash: deterministicHash } = CardOfTheDay(deckChoice);
//console.log(`Card deterministicHash: ${deterministicHash}`);
//console.log(`Daily Draw: ${JSON.stringify(cardOfTheDay)}`);


// Function to draw cards from the 10kRandomSpread pool using random.sample
function drawCardsFrom10kRandomSpread(pool) {
    return pool[Math.floor(Math.random() * pool.length)];
}


// Function to draw cards from the 10kRandomSpread pool ensuring no duplicates
function drawCardsFrom10kRandomSpread(pool, numCards) {
    const randomSpread = pool[Math.floor(Math.random() * pool.length)];
    const uniqueCards = [...new Set(randomSpread)];
    fisherYatesShuffle(uniqueCards);
    return uniqueCards.slice(0, numCards);
}

function performTarotReadingWithDetails(spreadPositions, pool, deckChoice, includeDetails = false) {
    let reading;

    if (spreadPositions[0] === "Daily Draw") {
        const { reading: cardOfTheDay } = CardOfTheDay(deckChoice);
        reading = { "Card of the Day": cardOfTheDay["Card of the Day"] };
    } else {
        const numPositions = spreadPositions.length;
        const drawnCards = drawCardsFrom10kRandomSpread(pool, numPositions);
        reading = Object.fromEntries(spreadPositions.map((position, i) => [position, drawnCards[i]]));

        if (includeDetails) {
            for (const [position, card] of Object.entries(reading)) {
                const cardDetails = readCardInfoFromDict(card);
                reading[position] = {
                    card,
                    details: cardDetails
                };
            }
        }
    }

    return reading;
}


function daysToNextMoonPhase(currentDate, referenceNewMoon) {
    // Length of the Synodic month in days
    const synodicMonth = 29.53058867;
    const phases = [ "Waning Crescent", "New Moon", "Waxing Crescent", "First Quarter", "Waxing Gibbous", "Full Moon", "Waning Gibbous", "Last Quarter" ];

    // Convert the reference New Moon Gregorian date to Julian Date
    const knownNewMoonJD = referenceNewMoon.getTime() / (1000 * 60 * 60 * 24) + 2440587.5;

    // Convert the current Gregorian date to Julian Date
    const currentJD = currentDate.getTime() / (1000 * 60 * 60 * 24) + 2440587.5;

    // Calculate the number of synodic months since the known New Moon
    const elapsedMonths = (currentJD - knownNewMoonJD) / synodicMonth;

    // Days into the current cycle
    const daysIntoCycle = (elapsedMonths % 1) * synodicMonth;

    // Determine current phase
    const phaseIndex = Math.floor((daysIntoCycle / synodicMonth) * 8);

    // Days to next phase
    const daysToNextPhase = ((phaseIndex + 1) * synodicMonth / 8) - daysIntoCycle;

    // Name of the next phase
    const nextPhase = phases[(phaseIndex + 1) % 8];

    return { daysToNextPhase, nextPhase };
}


function getMoonPhase(date) {
    // Reference new moon date close to the start of 2022
    const phases = ["First Quarter", "Waxing Gibbous", "Full Moon", "Waning Gibbous", "Last Quarter", "Waning Crescent", "New Moon", "Waxing Crescent" ];

    // Calculate the time difference between the reference new moon and the given date
    const timeDifference = date.getTime() - referenceNewMoon.getTime();

    // Calculate the number of synodic months that have passed
    const synodicMonths = timeDifference / synodicMonth;

    // Calculate the current phase of the moon
    const currentPhase = synodicMonths % 1;

    // Phase definitions


    // Determine which phase the current moon is in
    const phaseIndex = Math.floor(currentPhase * 8);

    return phases[phaseIndex];
}

// Function to normalize the value to [0, 1] and make it converge around 0.5
function normalize(value) {
    return (value + 1) / 2;
}


// Biorhythm function
function calculateBiorhythm(dateOfBirth, currentDate) {
    timeDifference = (currentDate - dateOfBirth) / (1000 * 60 * 60 * 24); // Difference in days
    physicalOscillation = Math.sin(timeDifference * Math.PI * 2 / 23);
    emotionalOscillation = Math.sin(timeDifference * Math.PI * 2 / 28);
    intellectualOscillation = Math.sin(timeDifference * Math.PI * 2 / 33);
    return physicalOscillation + emotionalOscillation + intellectualOscillation;
}


// Function to calculate biorhythm values
function calculateBiorhythmExtended(dateOfBirth, currentDate) {
    timeDifference = (currentDate - dateOfBirth) / (1000 * 60 * 60 * 24); // Difference in days
    physicalOscillation = Math.sin(timeDifference * Math.PI * 2 / 23);
    emotionalOscillation = Math.sin(timeDifference * Math.PI * 2 / 28);
    intellectualOscillation = Math.sin(timeDifference * Math.PI * 2 / 33);
    return {
        physical: physicalOscillation,
        emotional: emotionalOscillation,
        intellectual: intellectualOscillation
    };
}

function map(value, start1, stop1, start2, stop2) {
        return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
    }

function generateBiorhythmGraph(dateOfBirth) {
    //console.log(`dateOfBirth: ${dateOfBirth}`);
    canvas = document.createElement('canvas');
    canvas.id = "bio-canv";
    const ctx = canvas.getContext('2d');
    const width = 320;
    const height = 320;
    canvas.width = width;
    canvas.height = height;

    const axisMargin = 0.1 * width;
    const yAxisMid = 0.5 * height;  // 200 / 400

    // Draw axis
    ctx.beginPath();
    ctx.moveTo(axisMargin, yAxisMid);
    ctx.lineTo(width - axisMargin, yAxisMid);
    ctx.moveTo(axisMargin, axisMargin);
    ctx.lineTo(axisMargin, height - axisMargin);
    ctx.stroke();

    let previousPoints = {};

        ctx.fillStyle = 'black';
        ctx.fillText("Large DOT is today", axisMargin * 1.2, yAxisMid - 130);

    for (let i = -3; i <= 3; i++) {
        dateoffset = new Date();
        dateoffset.setDate(dateoffset.getDate() + i);
        biorhythm = calculateBiorhythmExtended(dateOfBirth, dateoffset);

        x = map(i, -3, 3, axisMargin, width - axisMargin);

        const types = ['physical', 'emotional', 'intellectual'];
        const colors = {'physical': '#972edd', 'emotional': '#02f2f2', 'intellectual': '#7b404a'};

        types.forEach(type => {
            y = map(biorhythm[type], -1, 1, height - axisMargin, axisMargin);
            if (previousPoints[type]) {
                ctx.beginPath();
                ctx.moveTo(previousPoints[type].x, previousPoints[type].y);
                ctx.lineTo(x, y);
                ctx.strokeStyle = colors[type];
                ctx.stroke();
            }
            //console.log(`x: ${x}, y: ${y}`);

            dotsize = (i ==0 ) ? 9 : 7 - Math.abs(i * 2);

            if (i ==0){

                    // Labels for the legend
        ctx.font = "16px Arial"; // Set the font size to 16px
        if (type == 'physical'){
        ctx.fillStyle = '#972edd';

        ctx.fillText(`Physical: ${y}`, axisMargin * 1.2, yAxisMid - 40);
        }
        if (type == 'emotional'){
        ctx.fillStyle = '#02f2f2';
        ctx.fillText(`Emotional: ${y}`, axisMargin * 1.2, yAxisMid - 70);
        }
         if (type == 'intellectual'){
        ctx.fillStyle = '#7b404a';
        ctx.fillText(`Intellectual: ${y}`, axisMargin * 1.2, yAxisMid - 100);
         }


        }


            drawPoint(ctx, x, y, colors[type], dotsize);

            previousPoints[type] = {x, y};
        });
    }


    function drawPoint(ctx, x, y, color, size) {
        ctx.beginPath();
        ctx.arc(x, y, size, 0, Math.PI * 2);
        ctx.fillStyle = color;
        ctx.fill();
    }

    const base64Image = canvas.toDataURL("image/png");
    const img = document.createElement('img');
    img.src = base64Image;

    const bioCanvas = document.getElementById("bio-canv");
    if (bioCanvas) {
        // Replace any existing content within the "bio-canv" element
        bioCanvas.innerHTML = '';
        bioCanvas.appendChild(img);
        //console.log(`bioCanvas: ${bioCanvas}, x: ${x}`);
    } else {
        // If "bio-canv" element doesn't exist, append the canvas to the body
        document.body.appendChild(img);
    }
}


// Define functions to get deck and spread based on user's choices
function getDeck(deckChoice) {
    if (deckChoice === "major-arcana") {
        return largePool10k;
    } else if (deckChoice === "complete-deck") {
        return largePool10kCompleteDeck;
    }
}

function getSpreadPositions(spreadChoice) {
    if (spreadChoice === "celtic-cross") {
        return celticCrossPositions;
    } else if (spreadChoice === "tree-of-life") {
        return treeOfLifePositions;
    } else if (spreadChoice === "rider-waite-smith") {
        return riderWaiteSmithPositions;
    } else if (spreadChoice === "daily-draw") {
        return dailyDrawPositions;
    }
}


// Debugging the generateDeterministicPoolForCard function
function generateDeterministicPoolForCard(seed, numCards, deck) {
    let currentSeed = seed;
    function deterministicRandom() {
        var x = Math.sin(currentSeed++) * 10000;
        return x - Math.floor(x);
    }

    //console.log(`Seed: ${seed}, NumCards: ${numCards}, Deck: ${JSON.stringify(deck, null, 4)}`);

    const deterministicPool = Array.from({ length: numCards }, () => {
        const index = Math.floor(deterministicRandom() * deck.length);
        //console.log(`Generated index: ${index}`);
        return deck[index];
    }).sort();

    //console.log(`Deterministic Pool: ${JSON.stringify(deterministicPool, null, 4)}`);
    return deterministicPool;
}

// Include this debugging function in your existing code and then call dailyDrawByBiorhythm again
// This should provide insights into what is going wrong with the deterministic pool generation

// Function to perform a daily draw based on biorhythm and spread choice
function dailyDrawByBiorhythm(dateOfBirth, deckChoice, spreadChoice) {
    const currentDate = new Date();
    currentDate.setHours(0, 0, 0, 0);  // Reset time to ensure hash consistency within the same day

    const biorhythmValue = calculateBiorhythm(dateOfBirth, currentDate);
    const combinedString = `${currentDate.toDateString()}_${biorhythmValue}`;
    const deterministicHash = stringHash(combinedString);

    const selectedDeck = (deckChoice === "major-arcana") ? majorArcana : completeDeck;
    let spreadPositions =  getSpreadPositions(spreadChoice);

    const spreadLength = spreadPositions.length;
    const deterministicPool = generateDeterministicPoolForCard(deterministicHash, spreadLength, selectedDeck);

    const reading = {};
    for (let i = 0; i < spreadLength; i++) {
        const cardName = deterministicPool[i];
        const positionName = spreadPositions[i]; // Get the position name from the spreadPositions array
        const cardDetails = readCardInfoFromDict(cardName);
        reading[positionName] = {
            card: cardName,
            details: cardDetails
        };
    }

    return {
        reading: reading,
        hash: deterministicHash
    };
}


const dailyDrawResult = dailyDrawByBiorhythm(dateOfBirth, deckChoice, spreadChoice);

//console.log("Debugging Output:");
//console.log(`Date of Birth: ${dateOfBirth}`);
//console.log(`Deck Choice: ${deckChoice}`);
//console.log(`Spread Choice: ${spreadChoice}`);
//console.log(`Reading Hash: ${dailyDrawResult.hash}`);
//console.log("Reading: ", JSON.stringify(dailyDrawResult.reading, null, 4));

// Add event listener to the "Predict" button

dob = new Date(document.getElementById("dob").value);


const predictButton = document.getElementById("predict-button");
predictButton.addEventListener("click", () => {


    const includeDetails = document.getElementById("include-details").checked;
    const useBiorhythm = document.getElementById("use-biorhythm").checked;
    const spreadChoice = document.getElementById("spread-choice").value;
    const deckChoice = document.getElementById("deck-choice").value;
    generateBiorhythmGraph(dob);


    let spreadPositions = getSpreadPositions(spreadChoice);


    let result;
    if (useBiorhythm) {
        result = dailyDrawByBiorhythm(dob, deckChoice, spreadChoice);
    } else {


         result = (deckChoice === "major-arcana") ? performTarotReadingWithDetails(spreadPositions, largePool10k, deckChoice, true) : performTarotReadingWithDetails(spreadPositions, largePool10kCompleteDeck, deckChoice, true);
    }
    //const result = performTarotReadingWithDetails(spreadPositions, largePool10kCompleteDeck, deckChoice, true);
    //console.log(`Reading: ${JSON.stringify(result)}`);


    const readingResult = document.getElementById("reading-result");
    readingResult.innerHTML = "<h2>Your Tarot Reading:</h2>";

    const { daysToNextPhase, nextPhase } = daysToNextMoonPhase(currentDate, referenceNewMoon);
    readingResult.innerHTML += `<p>Days until next phase (${nextPhase}): ${daysToNextPhase.toFixed(2)}</p>`;


                // Test the function
                const date = new Date(Date.UTC(2022, 8, 21)); // September 21, 2022
                const moonPhase = getMoonPhase(date);
                //console.log(`The moon's phase on ${date.toUTCString()} is: ${moonPhase}`);
                readingResult.innerHTML += `<h4>Moon Phase: ${moonPhase}</h4>`;


    const cardsData = result.reading ? result.reading : result; // Check if result contains a 'reading' key


    var printFirstResults = true;

    for (const [position, data] of Object.entries(cardsData)) {
        if (data && data.card) {


            const imgElement = document.createElement("img");
            imgElement.src = `art/${data.card.replace(/[\s\W]/g, '_')}.jpeg`;
            imgElement.alt = data.card;
            imgElement.style.maxWidth = "30%";
            imgElement.style.float = "left";
            imgElement.style.paddingRight = "5px";
            imgElement.style.paddingLeft = "5px";
            imgElement.style.paddingRight = "5px";
            imgElement.style.maxHeight = "200px";
            readingResult.appendChild(imgElement);

            if (includeDetails) {
                readingResult.innerHTML += `<p><strong>${position}:</strong></p>`;
                readingResult.innerHTML += `<h3>Card: ${data.card}</h3>`;
                readingResult.innerHTML += `<p>Details: ${data.details}</p>`;
            } else {
                readingResult.innerHTML += `<p><strong>${position}:</strong> ${data.card}</p>`;
            }

            if (printFirstResults){
                printFirstResults = false;
                readingResult.innerHTML += `<a name="bio-anchor"></a>`;
            }

        }
    }


setTimeout(scrollStory, 30);


});

function scrollStory(){

                // Get the anchor element
    const anchorElement = document.getElementsByName("bio-anchor")[0]; // Assuming there's only one element with this name

    if (anchorElement) {
        // Scroll to the anchor element smoothly
        anchorElement.scrollIntoView({
            behavior: "smooth",
            block: "end" // You can use "end" or "center" for different scrolling positions
        });
    }


}


        const dobInput = document.getElementById("dob");
        dobInput.addEventListener("change", function () {
            // Update the "dob" variable with the new value

            dob = new Date(dobInput.value);
            generateBiorhythmGraph(dob);
            //console.log("Date of Birth changed to:", dob);
        });

// Shuffle the large pools of spreads
fisherYatesShuffle(largePool10k);
fisherYatesShuffle(largePool10kCompleteDeck);
//dateOfBirth = dobInput.value;
generateBiorhythmGraph(dob);
    </script>
</body>
</html>