- Catholic Garden Network

<!DOCTYPE html>

<head>

<title>Garden Trail</title>

<style>

:root {

–bg: #f4f1e8;

–panel: #fdfbf6;

–border: #3f4a2f;

–text: #233018;

–accent: #58743a;

–accent-dark: #42592a;

–muted: #6a7559;

–shadow: rgba(0,0,0,0.08);

}

* { box-sizing: border-box; }

body {

margin: 0;

font-family: Georgia, “Times New Roman”, serif;

background: var(–bg);

color: var(–text);

line-height: 1.5;

}

.wrap {

max-width: 900px;

margin: 0 auto;

padding: 20px;

}

.game-shell {

background: var(–panel);

border: 4px solid var(–border);

box-shadow: 0 10px 30px var(–shadow);

padding: 18px;

}

.header {

text-align: center;

border-bottom: 2px dashed var(–border);

padding-bottom: 12px;

margin-bottom: 16px;

}

.title {

font-size: clamp(1.8rem, 4vw, 2.8rem);

margin: 0;

letter-spacing: 0.04em;

text-transform: uppercase;

}

.subtitle {

margin: 8px 0 0;

color: var(–muted);

font-size: 1rem;

}

.status-grid {

display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 10px;

margin: 16px 0;

}

.stat {

border: 2px solid var(–border);

background: #fff;

padding: 10px;

text-align: center;

}

.stat-label {

font-size: 0.9rem;

color: var(–muted);

display: block;

}

.stat-value {

font-size: 1.5rem;

font-weight: bold;

}

.screen {

border: 3px solid var(–border);

background: #fff;

padding: 16px;

min-height: 260px;

margin-bottom: 16px;

white-space: pre-line;

}

.screen h2,

.screen h3,

.screen p { margin-top: 0; }

.choices {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 10px;

}

button {

width: 100%;

border: 2px solid var(–accent-dark);

background: var(–accent);

color: #fff;

padding: 12px 14px;

font: inherit;

font-size: 1rem;

cursor: pointer;

transition: transform 0.05s ease, background 0.2s ease;

}

button:hover,

button:focus {

background: var(–accent-dark);

outline: none;

}

button:active {

transform: translateY(1px);

}

.footer-note {

margin-top: 14px;

font-size: 0.95rem;

color: var(–muted);

text-align: center;

}

.small-actions {

display: flex;

gap: 10px;

margin-top: 12px;

flex-wrap: wrap;

}

.small-actions button {

flex: 1 1 180px;

}

@media (max-width: 700px) {

.status-grid,

.choices {

grid-template-columns: 1fr;

}

.game-shell {

padding: 14px;

}

.screen {

min-height: 220px;

}

</style>

</head>

<body>

<h1 class=”title”>Garden Trail</h1>

<p class=”subtitle”>A simple retro-style garden journey through the growing season</p>

</div>

<div class=”stat”><span class=”stat-label”>Harvest</span><span class=”stat-value” id=”harvestStat”>0 lbs</span></div>

<div class=”stat”><span class=”stat-label”>Goodwill</span><span class=”stat-value” id=”goodwillStat”>0</span></div>

<div class=”stat”><span class=”stat-label”>Water</span><span class=”stat-value” id=”waterStat”>5</span></div>

<div class=”stat”><span class=”stat-label”>Energy</span><span class=”stat-value” id=”energyStat”>5</span></div>

<div class=”stat”><span class=”stat-label”>Pollinator Health</span><span class=”stat-value” id=”pollinatorStat”>0</span></div>

</div>

<button id=”restartBtn” style=”display:none;”>Start Over</button>

</div>

<p class=”footer-note”>Designed as a simple, webpage-friendly game for Catholic Garden Network.</p>

</div>

const state = {

phase: ‘start’,

week: 1,

harvest: 0,

goodwill: 0,

water: 5,

energy: 5,

pollinator: 0,

gardenType: ”,

introDone: false

};

const screen = document.getElementById(‘screen’);

const choices = document.getElementById(‘choices’);

const restartBtn = document.getElementById(‘restartBtn’);

function rand(arr) {

return arr[Math.floor(Math.random() * arr.length)];

}

function clampResources() {

state.water = Math.max(0, Math.min(state.water, 10));

state.energy = Math.max(0, Math.min(state.energy, 10));

state.goodwill = Math.max(0, state.goodwill);

state.pollinator = Math.max(0, state.pollinator);

state.harvest = Math.max(0, state.harvest);

}

function updateStats() {

document.getElementById(‘weekStat’).textContent = state.week;

document.getElementById(‘harvestStat’).textContent = state.harvest + ‘ lbs’;

document.getElementById(‘goodwillStat’).textContent = state.goodwill;

document.getElementById(‘waterStat’).textContent = state.water;

document.getElementById(‘energyStat’).textContent = state.energy;

document.getElementById(‘pollinatorStat’).textContent = state.pollinator;

}

function render(text, buttons) {

screen.innerHTML = text;

choices.innerHTML = ”;

buttons.forEach(btn => {

const el = document.createElement(‘button’);

el.textContent = btn.label;

el.addEventListener(‘click’, btn.onClick);

choices.appendChild(el);

});

updateStats();

}

function startScreen() {

restartBtn.style.display = ‘none’;

render(`WELCOME TO GARDEN TRAIL\n\nYou have been given a small plot of land.\n\nYour goal is to grow a flourishing garden, support pollinators, and share with your community before the season ends.\n\nChoose your starter garden:`, [

{ label: ‘Vegetable Garden’, onClick: () => chooseGarden(‘Vegetable Garden’) },

{ label: ‘Pollinator-Friendly Garden’, onClick: () => chooseGarden(‘Pollinator-Friendly Garden’) },

{ label: ‘Mixed Garden’, onClick: () => chooseGarden(‘Mixed Garden’) }

]);

}

function chooseGarden(type) {

state.gardenType = type;

if (type === ‘Vegetable Garden’) {

state.harvest += 2;

} else if (type === ‘Pollinator-Friendly Garden’) {

state.pollinator += 2;

} else {

state.harvest += 1;

state.pollinator += 1;

}

clampResources();

weekScreen(`${type} selected.\n\nYour growing season begins.`);

}

function weatherForWeek() {

return rand([‘sunny’, ‘light rain’, ‘warm and breezy’, ‘hot and dry’, ‘cool and cloudy’]);

}

function randomEvent() {

return rand([

{ text: ‘A neighbor admires the garden and offers encouragement. +1 goodwill’, effect: () => state.goodwill += 1 },

{ text: ‘A gentle rain helps your plants thrive. +2 harvest’, effect: () => state.harvest += 2 },

{ text: ‘A few pests appear, but you catch them early. -1 energy’, effect: () => state.energy -= 1 },

{ text: ‘Bees are visiting the flowers. +1 pollinator health’, effect: () => state.pollinator += 1 },

{ text: ‘You find an extra hour to work in the garden. +1 energy’, effect: () => state.energy += 1 },

{ text: ‘Dry weather means your garden needs extra care. -1 water’, effect: () => state.water -= 1 }

]);

}

function weekScreen(message = ”) {

if (state.week > 8) {

endGame();

return;

}

const weather = weatherForWeek();

const intro = message ? message + ‘\n\n’ : ”;

render(`${intro}Week ${state.week}\n\nWeather: ${weather}\nGarden Type: ${state.gardenType}\n\nChoose your action for this week:`, [

{ label: ‘Plant and Tend’, onClick: () => doAction(‘plant’) },

{ label: ‘Water the Garden’, onClick: () => doAction(‘water’) },

{ label: ‘Support Pollinators’, onClick: () => doAction(‘pollinator’) },

{ label: ‘Share with Neighbors’, onClick: () => doAction(‘share’) }

]);

}

function doAction(action) {

let result = ”;

if (action === ‘plant’) {

state.harvest += 3;

state.energy -= 1;

result = ‘You planted and tended the garden carefully. +3 harvest, -1 energy’;

}

if (action === ‘water’) {

state.water += 2;

state.harvest += 1;

result = ‘You watered faithfully this week. +2 water, +1 harvest’;

}

if (action === ‘pollinator’) {

state.pollinator += 2;

state.goodwill += 1;

result = ‘You added pollinator-friendly care to the garden. +2 pollinator health, +1 goodwill’;

}

if (action === ‘share’) {

if (state.harvest >= 2) {

state.harvest -= 2;

state.goodwill += 3;

result = ‘You shared fresh produce with others. -2 harvest, +3 goodwill’;

} else {

result = ‘You wanted to share produce, but there was not enough ready to gather this week.’;

}

const event = randomEvent();

event.effect();

clampResources();

const weekSummary = `${result}\n\nEvent: ${event.text}`;

state.week += 1;

render(weekSummary, [

{ label: ‘Continue to Next Week’, onClick: () => weekScreen() }

]);

}

function endGame() {

restartBtn.style.display = ‘inline-block’;

let ending = ‘A peaceful growing season comes to an end.\n\n’;

ending += `Final Harvest: ${state.harvest} lbs\n`;

ending += `Community Goodwill: ${state.goodwill}\n`;

ending += `Pollinator Health: ${state.pollinator}\n\n`;

if (state.harvest >= 10 && state.goodwill >= 8) {

ending += ‘Your garden became a place of nourishment, welcome, and hope.’;

} else if (state.pollinator >= 8) {

ending += ‘Your garden blossomed into a haven for pollinators and beauty.’;

} else {

ending += ‘Your garden season was modest, but every small act of care mattered.’;

}

ending += ‘\n\nThank you for playing Garden Trail.’;

render(ending, []);

}

function restartGame() {

state.phase = ‘start’;

state.week = 1;

state.harvest = 0;

state.goodwill = 0;

state.water = 5;

state.energy = 5;

state.pollinator = 0;

state.gardenType = ”;

startScreen();

}

restartBtn.addEventListener(‘click’, restartGame);

startScreen();

</script>

</body>

</html>