/**** * Plugins ****/ var tween = LK.import("@upit/tween.v1"); /**** * Classes ****/ var CalendarEntry = Container.expand(function (data, color) { var self = Container.call(this); var entryGraphics = self.attachAsset('calendarEntry', { anchorX: 0, anchorY: 0 }); entryGraphics.tint = color; var entryText = new Text2(data.name || data.course || data.activity, { size: 18, fill: 0x000000 }); entryText.anchor.set(0.5, 0.5); entryText.x = entryGraphics.width / 2; entryText.y = entryGraphics.height / 2; self.addChild(entryText); self.data = data; return self; }); var CategoryButton = Container.expand(function (type, color) { var self = Container.call(this); var buttonGraphics = self.attachAsset(type + 'Button', { anchorX: 0.5, anchorY: 0.5 }); var buttonLabels = { "classes": "CLASES", "activities": "ACTIVIDADES", "tasks": "TAREAS", "others": "OTROS" }; var buttonText = new Text2(buttonLabels[type] || type.toUpperCase(), { size: 32, fill: 0xFFFFFF }); buttonText.anchor.set(0.5, 0.5); self.addChild(buttonText); self.type = type; self.isSelected = false; self.select = function () { self.isSelected = true; tween(buttonGraphics, { scaleX: 1.1, scaleY: 1.1 }, { duration: 200 }); currentCategory = self.type; updateInputPanel(); }; self.deselect = function () { self.isSelected = false; tween(buttonGraphics, { scaleX: 1.0, scaleY: 1.0 }, { duration: 200 }); }; self.down = function (x, y, obj) { // Deselect all other buttons for (var i = 0; i < categoryButtons.length; i++) { categoryButtons[i].deselect(); } self.select(); LK.getSound('click').play(); }; return self; }); var InputField = Container.expand(function (label, placeholder) { var self = Container.call(this); var fieldBackground = self.attachAsset('inputPanel', { anchorX: 0, anchorY: 0, scaleX: 0.3, scaleY: 0.15 }); fieldBackground.tint = 0xFFFFFF; var labelText = new Text2(label, { size: 24, fill: 0x333333 }); labelText.anchor.set(0, 0.5); labelText.x = 10; labelText.y = -30; self.addChild(labelText); var placeholderText = new Text2(placeholder, { size: 20, fill: 0x999999 }); placeholderText.anchor.set(0, 0.5); placeholderText.x = 10; placeholderText.y = fieldBackground.height / 2; self.addChild(placeholderText); self.value = ""; self.placeholder = placeholder; self.isActive = false; self.dropdownOpen = false; self.dropdownItems = []; self.setValue = function (value) { self.value = value; placeholderText.setText(value || placeholder); placeholderText.tint = value ? 0x000000 : 0x999999; }; self.createDropdown = function (options) { self.closeDropdown(); self.dropdownOpen = true; for (var i = 0; i < options.length; i++) { var dropdownItem = self.addChild(LK.getAsset('inputPanel', { anchorX: 0, anchorY: 0, scaleX: 0.3, scaleY: 0.1 })); dropdownItem.tint = 0xF0F0F0; dropdownItem.y = fieldBackground.height + i * 40; dropdownItem.optionValue = options[i]; var optionText = new Text2(options[i], { size: 18, fill: 0x333333 }); optionText.anchor.set(0, 0.5); optionText.x = 10; optionText.y = dropdownItem.height / 2; dropdownItem.addChild(optionText); dropdownItem.down = function (x, y, obj) { self.setValue(this.optionValue); self.closeDropdown(); if (label === "Fecha" || label === "Date") { if (self.dateState && self.dateState.step === 0) { // After selecting month, show days self.dateState.selectedMonth = this.optionValue; self.dateState.step = 1; self.showDaysForMonth(this.optionValue); } } }; self.dropdownItems.push(dropdownItem); } }; self.closeDropdown = function () { for (var i = 0; i < self.dropdownItems.length; i++) { self.dropdownItems[i].destroy(); } self.dropdownItems = []; self.dropdownOpen = false; }; self.showDaysForMonth = function (month) { var daysInMonth = { "Enero": 31, "Febrero": 28, "Marzo": 31, "Abril": 30, "Mayo": 31, "Junio": 30, "Julio": 31, "Agosto": 31, "Septiembre": 30, "Octubre": 31, "Noviembre": 30, "Diciembre": 31 }; var maxDays = daysInMonth[month] || 30; var days = []; for (var d = 1; d <= maxDays; d++) { days.push(d.toString()); } self.createDropdown(days); }; self.down = function (x, y, obj) { if (self.dropdownOpen) { self.closeDropdown(); return; } if (label === "Hora" || label === "Time") { var times = ["9:00 AM", "10:00 AM", "11:00 AM", "1:00 PM", "2:00 PM", "3:00 PM"]; self.createDropdown(times); } else if (label === "Duración" || label === "Duration") { var durations = ["1 hora", "2 horas", "3 horas"]; self.createDropdown(durations); } else if (label === "Fecha" || label === "Date") { // Initialize date selection state if not exists if (!self.dateState) { self.dateState = { step: 0, selectedMonth: "", selectedDay: "" }; } if (self.dateState.step === 0) { // Step 1: Select month var months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]; self.createDropdown(months); } else if (self.dateState.step === 1) { // Step 2: Select day based on selected month self.showDaysForMonth(self.dateState.selectedMonth); } else { // Step 3: Reset to start over self.dateState = { step: 0, selectedMonth: "", selectedDay: "" }; self.setValue("Seleccionar fecha"); var months = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]; self.createDropdown(months); } } else if (label === "Nombre del Curso" || label === "Course Name") { var courses = ["Matemáticas 101", "Historia 201", "Física 301", "Inglés 102", "Química 205", "Literatura 150"]; self.createDropdown(courses); } else if (label === "Ubicación" || label === "Location") { var locations = ["Biblioteca", "Aula 201", "Laboratorio A", "Sala de Conferencias"]; self.createDropdown(locations); } else if (label === "Nombre de Actividad" || label === "Activity Name") { var activities = ["Grupo de Estudio", "Trabajo de Proyecto", "Investigación", "Reunión"]; self.createDropdown(activities); } else if (label === "Seleccionar Clase") { var classNames = ["Matemáticas 101", "Historia 201", "Física 301", "Inglés 102"]; self.createDropdown(classNames); } else if (label === "Tiempo Estimado") { var times = ["15 min", "30 min", "45 min", "1 hora", "2 horas"]; self.createDropdown(times); } else if (label === "Acción") { var actions = ["Estudiar", "Revisar", "Practicar", "Investigar", "Escribir"]; self.createDropdown(actions); } }; return self; }); /**** * Initialize Game ****/ var game = new LK.Game({ backgroundColor: 0xF0F0F0 }); /**** * Game Code ****/ // Game state variables var currentCategory = "classes"; var calendarEntries = []; var categoryButtons = []; var inputFields = []; var classList = []; // Calendar state variables var currentMonth = new Date().getMonth(); var currentYear = new Date().getFullYear(); var monthNames = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]; // Create main calendar background var calendarBg = game.addChild(LK.getAsset('calendarBackground', { anchorX: 0.5, anchorY: 0.5, x: 1024, y: 1500 })); // Create month navigation var monthText = new Text2(monthNames[currentMonth] + " " + currentYear, { size: 36, fill: 0x333333 }); monthText.anchor.set(0.5, 0.5); monthText.x = 1024; monthText.y = 850; game.addChild(monthText); // Previous month button var prevButton = game.addChild(LK.getAsset('submitButton', { anchorX: 0.5, anchorY: 0.5, x: 800, y: 850, scaleX: 0.8, scaleY: 0.8 })); prevButton.tint = 0x3498db; var prevText = new Text2("← MES ANTERIOR", { size: 16, fill: 0xFFFFFF }); prevText.anchor.set(0.5, 0.5); prevButton.addChild(prevText); // Next month button var nextButton = game.addChild(LK.getAsset('submitButton', { anchorX: 0.5, anchorY: 0.5, x: 1248, y: 850, scaleX: 0.8, scaleY: 0.8 })); nextButton.tint = 0x3498db; var nextText = new Text2("MES SIGUIENTE →", { size: 16, fill: 0xFFFFFF }); nextText.anchor.set(0.5, 0.5); nextButton.addChild(nextText); // Create category buttons var buttonTypes = [{ type: "classes", color: 0xFF6B6B }, { type: "activities", color: 0x4ECDC4 }, { type: "tasks", color: 0xFFE66D }, { type: "others", color: 0xA8E6CF }]; for (var i = 0; i < buttonTypes.length; i++) { var button = game.addChild(new CategoryButton(buttonTypes[i].type, buttonTypes[i].color)); button.x = 300 + i * 420; button.y = 200; categoryButtons.push(button); } // Select first category by default categoryButtons[0].select(); // Create input panel var inputPanel = game.addChild(LK.getAsset('inputPanel', { anchorX: 0.5, anchorY: 0, x: 1024, y: 350 })); // Create day columns for calendar var days = ["LUN", "MAR", "MIE", "JUE", "VIE", "SAB", "DOM"]; var dayColumns = []; var currentDate = new Date(); var currentDayOfWeek = currentDate.getDay(); // 0 = Sunday, 1 = Monday, etc. // Convert Sunday (0) to be index 6, and shift Monday to be index 0 var currentDayIndex = currentDayOfWeek === 0 ? 6 : currentDayOfWeek - 1; // Calculate the start of current week (Monday) var startOfWeek = new Date(currentDate); var daysFromMonday = currentDate.getDay() === 0 ? 6 : currentDate.getDay() - 1; startOfWeek.setDate(currentDate.getDate() - daysFromMonday); for (var d = 0; d < days.length; d++) { var dayColumn = game.addChild(LK.getAsset('dayColumn', { anchorX: 0.5, anchorY: 0, x: 170 + d * 242, y: 800 })); // Add shadow effect if this is the current day if (d === currentDayIndex) { dayColumn.tint = 0xdddddd; // Darken the current day column } var dayLabel = new Text2(days[d], { size: 28, fill: 0x333333 }); dayLabel.anchor.set(0.5, 0.5); dayLabel.x = dayColumn.width / 2; dayLabel.y = 30; dayColumn.addChild(dayLabel); // Calculate and add day number var dayDate = new Date(startOfWeek); dayDate.setDate(startOfWeek.getDate() + d); var dayNumber = dayDate.getDate(); var dayNumberText = new Text2(dayNumber.toString(), { size: 24, fill: d === currentDayIndex ? 0x000000 : 0x666666 }); dayNumberText.anchor.set(0.5, 0.5); dayNumberText.x = dayColumn.width / 2; dayNumberText.y = 60; dayColumn.addChild(dayNumberText); dayColumns.push(dayColumn); } // Submit button var submitButton = game.addChild(LK.getAsset('submitButton', { anchorX: 0.5, anchorY: 0.5, x: 1024, y: 720 })); var submitText = new Text2("AGREGAR AL CALENDARIO", { size: 18, fill: 0xFFFFFF }); submitText.anchor.set(0.5, 0.5); submitButton.addChild(submitText); submitButton.down = function (x, y, obj) { addToCalendar(); }; function updateInputPanel() { // Clear existing input fields for (var i = 0; i < inputFields.length; i++) { inputFields[i].destroy(); } inputFields = []; var startY = 380; var fieldHeight = 80; if (currentCategory === "classes") { inputFields.push(game.addChild(new InputField("Nombre del Curso", "Ingrese nombre del curso"))); inputFields.push(game.addChild(new InputField("Hora", "Seleccione hora"))); inputFields.push(game.addChild(new InputField("Duración", "Seleccione duración"))); inputFields.push(game.addChild(new InputField("Fecha", "Seleccione fecha"))); } else if (currentCategory === "activities") { inputFields.push(game.addChild(new InputField("Seleccionar Clase", "Elija de las clases"))); inputFields.push(game.addChild(new InputField("Tiempo Estimado", "Ingrese tiempo necesario"))); inputFields.push(game.addChild(new InputField("Acción", "Describa la actividad"))); } else if (currentCategory === "tasks") { inputFields.push(game.addChild(new InputField("Ubicación", "Ingrese ubicación"))); inputFields.push(game.addChild(new InputField("Hora", "Seleccione hora"))); inputFields.push(game.addChild(new InputField("Fecha", "Seleccione fecha"))); } else if (currentCategory === "others") { inputFields.push(game.addChild(new InputField("Nombre de Actividad", "Ingrese nombre de actividad"))); inputFields.push(game.addChild(new InputField("Ubicación", "Ingrese ubicación"))); inputFields.push(game.addChild(new InputField("Hora", "Seleccione hora"))); inputFields.push(game.addChild(new InputField("Fecha", "Seleccione fecha"))); } // Position input fields for (var i = 0; i < inputFields.length; i++) { if (currentCategory === "classes" && inputFields.length === 4) { // Special layout for classes with 4 fields - 2x2 grid inputFields[i].x = 200 + i % 2 * 600; inputFields[i].y = startY + Math.floor(i / 2) * fieldHeight; } else { // Default layout for other categories inputFields[i].x = 200 + i % 2 * 600; inputFields[i].y = startY + Math.floor(i / 2) * fieldHeight; } } } function addToCalendar() { if (inputFields.length === 0) return; var entryData = {}; var color = 0xFF6B6B; // Get color for category for (var i = 0; i < buttonTypes.length; i++) { if (buttonTypes[i].type === currentCategory) { color = buttonTypes[i].color; break; } } // Collect input data if (currentCategory === "classes") { entryData.course = inputFields[0].value || "New Course"; entryData.time = inputFields[1].value || "9:00 AM"; entryData.duration = inputFields[2].value || "1 hour"; entryData.date = inputFields[3].value || "Lunes"; entryData.type = "class"; // Add to class list for activities classList.push(entryData); } else if (currentCategory === "activities") { entryData["class"] = inputFields[0].value || "Math 101"; entryData.estimatedTime = inputFields[1].value || "30 min"; entryData.action = inputFields[2].value || "Study"; entryData.type = "activity"; entryData.name = entryData.action + " - " + entryData["class"]; } else if (currentCategory === "tasks") { entryData.location = inputFields[0].value || "Library"; entryData.time = inputFields[1].value || "2:00 PM"; entryData.date = inputFields[2].value || "Monday"; entryData.type = "task"; entryData.name = "Task at " + entryData.location; } else if (currentCategory === "others") { entryData.activity = inputFields[0].value || "Custom Activity"; entryData.location = inputFields[1].value || "Room 101"; entryData.time = inputFields[2].value || "3:00 PM"; entryData.date = inputFields[3].value || "Tuesday"; entryData.type = "other"; entryData.name = entryData.activity; } // Add to calendar display var dayIndex = 0; if (entryData.date) { var dayMap = { "Lunes": 0, "Martes": 1, "Miércoles": 2, "Jueves": 3, "Viernes": 4, "Sábado": 5, "Domingo": 6, "Monday": 0, "Tuesday": 1, "Wednesday": 2, "Thursday": 3, "Friday": 4, "Saturday": 5, "Sunday": 6 }; dayIndex = dayMap[entryData.date] || 0; } var entry = new CalendarEntry(entryData, color); var targetColumn = dayColumns[dayIndex]; // Position entry in day column var entriesInDay = 0; for (var i = 0; i < calendarEntries.length; i++) { if (calendarEntries[i].dayIndex === dayIndex) { entriesInDay++; } } entry.x = targetColumn.x - targetColumn.width / 2 + 10; entry.y = targetColumn.y + 60 + entriesInDay * 90; entry.dayIndex = dayIndex; game.addChild(entry); calendarEntries.push(entry); // Clear input fields for (var i = 0; i < inputFields.length; i++) { inputFields[i].setValue(""); } // Visual feedback tween(entry, { scaleX: 1.2, scaleY: 1.2 }, { duration: 200, onFinish: function onFinish() { tween(entry, { scaleX: 1.0, scaleY: 1.0 }, { duration: 200 }); } }); LK.setScore(LK.getScore() + 1); } // Initialize input panel updateInputPanel(); // Add game-level click handler to close dropdowns game.down = function (x, y, obj) { // Close all open dropdowns when clicking outside for (var i = 0; i < inputFields.length; i++) { if (inputFields[i].dropdownOpen) { inputFields[i].closeDropdown(); } } }; // Function to update calendar for current month function updateCalendarMonth() { // Update month text monthText.setText(monthNames[currentMonth] + " " + currentYear); // Clear existing calendar entries for (var i = 0; i < calendarEntries.length; i++) { calendarEntries[i].destroy(); } calendarEntries = []; // Update day columns with new dates var firstDayOfMonth = new Date(currentYear, currentMonth, 1); var daysFromMonday = firstDayOfMonth.getDay() === 0 ? 6 : firstDayOfMonth.getDay() - 1; var startOfWeek = new Date(firstDayOfMonth); startOfWeek.setDate(firstDayOfMonth.getDate() - daysFromMonday); // Get current date for highlighting var today = new Date(); var isCurrentMonth = currentMonth === today.getMonth() && currentYear === today.getFullYear(); var currentDayIndex = isCurrentMonth ? today.getDay() === 0 ? 6 : today.getDay() - 1 : -1; for (var d = 0; d < dayColumns.length; d++) { // Reset column tint dayColumns[d].tint = d === currentDayIndex ? 0xdddddd : 0xe8e8e8; // Update day number var dayDate = new Date(startOfWeek); dayDate.setDate(startOfWeek.getDate() + d); var dayNumber = dayDate.getDate(); // Remove old day number text for (var c = dayColumns[d].children.length - 1; c >= 1; c--) { dayColumns[d].removeChild(dayColumns[d].children[c]); } var dayNumberText = new Text2(dayNumber.toString(), { size: 24, fill: d === currentDayIndex ? 0x000000 : 0x666666 }); dayNumberText.anchor.set(0.5, 0.5); dayNumberText.x = dayColumns[d].width / 2; dayNumberText.y = 60; dayColumns[d].addChild(dayNumberText); } } // Previous month button functionality prevButton.down = function (x, y, obj) { currentMonth--; if (currentMonth < 0) { currentMonth = 11; currentYear--; } updateCalendarMonth(); LK.getSound('click').play(); }; // Next month button functionality nextButton.down = function (x, y, obj) { currentMonth++; if (currentMonth > 11) { currentMonth = 0; currentYear++; } updateCalendarMonth(); LK.getSound('click').play(); }; game.update = function () { // Update game logic here if needed };