AlaMonocake.github.io/simulation.html at main · AlaMonocake/AlaMonocake.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Holy Grail War Simulator</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1 class="title">HOLY GRAIL WAR SIMULATOR</h1>
        <h2 id="day-counter">Day 1</h2>
    </header>

    <main>

        <div id="event-log" class="event-container">
            <!-- Events will be inserted here by JavaScript -->
        </div>

        <button class="button" id="next-day">Proceed</button>
    </main>
    <script type="module" src="events.js"></script>
     <!-- The script to collect participants follows -->
     <script>
        function loadParticipants() {
    const storedData = localStorage.getItem("participants");

    if (!storedData) {
        console.error("No participants found in localStorage.");
        document.getElementById("event-log").innerHTML = "<p>No participants found. Please start from the index page.</p>";
        return [];
    }

    try {
        const participants = JSON.parse(storedData);
        console.log("Loaded Participants:", participants);

        if (!Array.isArray(participants)) {
            console.error("Participants data is invalid.");
            return [];
        }

        return participants;
    } catch (error) {
        console.error("Error parsing participants from localStorage:", error);
        return [];
    }
}

        function generateDayOneEvents(participants) {
            const eventLog = document.getElementById("event-log");
            let events = `<h2>Day 1: The Summoning</h2>`;

            const masters = participants.filter(p => p.type === "master");

    masters.forEach(master => {
        const servant = participants.find(
    p => p.type === "servant" && p.masterId === master.id
);

if (servant && servant.name !== "Unknown") {
    events += `
        <p>
            <img src="${master.picture}" width="50">
            <strong>${master.name}</strong> summons
            <img src="${servant.image}">
            <strong>${servant.name}</strong>.
        </p>`; //TO DO: fix servant.image line to portray servant images
} else {
    events += `
        <p>
            <img src="${master.picture}" width="50">
            <strong>${master.name}</strong> summons an unknown servant.
        </p>`;
}

    });

    eventLog.innerHTML = events;
}

document.addEventListener("DOMContentLoaded", () => {
    console.log("Simulation page loaded");
    const participants = loadParticipants();

    if (Array.isArray(participants) && participants.length > 0) {
        generateDayOneEvents(participants);
    } else {
        console.warn("No valid participants loaded.");
    }
});

//WE'RE DONE WITH THE ABOVE CODE. Now the event simulation code follows


function runRandomEvent() {
    // Ensure there are alive participants before running events
    const aliveMasters = participants.filter(p => p.type === "master" && p.status === "alive");
    const aliveServants = participants.filter(p => p.type === "servant" && p.status === "alive");

    if (aliveMasters.length === 0) return;  // No more masters, game over
    if (aliveServants.length === 0) return;  // No more servants, game over

    // Randomly pick an event from the event pool
    const event = eventPool[Math.floor(Math.random() * eventPool.length)];

    // Select random participants for the event
    let selected = [];
    for (const targetType of event.targets) {
        const pool = participants.filter(p => p.type === targetType && p.status === "alive");
        if (pool.length === 0) return;  // Skip if no eligible targets
        const pick = pool[Math.floor(Math.random() * pool.length)];
        selected.push(pick);
    }

    // Apply the event's effect
    event.effect(participants, ...selected);

    // Log the event description
    const description = event.description
        .replace("{master}", selected[0]?.name || "Unknown")
        .replace("{servant1}", selected[0]?.name || "Unknown")
        .replace("{servant2}", selected[1]?.name || "Unknown");

    console.log("Event:", description);
    // Optionally log the event to a history
    logEvent(description);

    //THE EVENT HISTORY FOR DEBUGGING
    let eventHistory = [];
    function logEvent(description) {
    eventHistory.push({ description, timestamp: new Date() });
    console.log("Logged Event:", description);
}

}
//the code to run random events follows...?
let currentDay = 1;
let pastEvents = [];  // store event IDs
let participants = JSON.parse(localStorage.getItem("participants")) || [];

function displayDayEvents(dayNumber, events) {
    const logDiv = document.getElementById("event-log");
    const title = document.getElementById("day-title");

    // Clear previous events
    logDiv.innerHTML = "";

    // Update title
    title.textContent = `Day ${dayNumber}`;

    // Add each event as a paragraph
    events.forEach(text => {
        const p = document.createElement("p");
        p.textContent = text;
        logDiv.appendChild(p);
    });
}

function runDayEvents() {
    const participants = JSON.parse(localStorage.getItem("participants")) || [];
    const aliveMasters = participants.filter(p => p.type === "master" && p.status === "alive");
    const aliveServants = participants.filter(p => p.type === "servant" && p.status === "alive");

    console.log(`===== DAY ${currentDay} =====`);
    const dayEvents = [];

    aliveMasters.forEach(master => {
        const servant = aliveServants.find(s => s.id === master.servantId);

        const validEvents = events.filter(event => {
            const validPool = event.valid(participants);
            return validPool.includes(master);
        });

        if (validEvents.length === 0) {
            console.log(`No valid events for ${master.name}`);
            return;
        }

        const selectedEvent = validEvents[Math.floor(Math.random() * validEvents.length)];

        selectedEvent.effects(participants, master, servant);

        const eventText = processEventTemplate(selectedEvent.description, {
            master,
            servant
        });

        dayEvents.push(`Day ${currentDay}: ${eventText}`);
    });

    displayDayEvents(currentDay, dayEvents);
    currentDay++;
}


// Button for next days
document.getElementById("next-day").addEventListener("click", () => {
    runDayEvents();  // runs once for each alive master
});


// eventRunner follows

function processEventTemplate(template, context) {
    return template.replace(/\{([a-zA-Z0-9_.]+)\}/g, (_, key) => {
        const parts = key.split(".");
        let value = context;
        for (const part of parts) {
            if (value && part in value) {
                value = value[part];
            } else {
                return `{${key}}`; // leave if missing
            }
        }
        return value;
    });
}
const eventText = processEventTemplate(selectedEvent.description, {
    master: master,
    servant: servant
});
    </script>
</body>
</html>