Add Notifications

website/game/background.js

@@ -0,0 +1,24 @@
+// TODO: this is unfinished
+// Move over code from world.js to here
+
+// Background System
+
+// Background Sprite
+// An separate image that belongs to the background
+// Can be animated and/or interactable
+
+class BackgroundSprite {
+	constructor(sprite, anim, x, y, worldy) {
+		if (!BACKGROUNDIMG[this.area][img]) {
+			BACKGROUNDIMG[this.area][img] = new RenderImage(`assets/areas/${img}`)
+		}
+		let sprite = new Sprite(BACKGROUNDIMG[this.area][img], s.framesx, s.framesy, s.qw, s.qh, s.ox, s.oy, s.sepx, s.sepy)
+		BACKGROUNDSPRITE[this.area][name] = new DrawableSprite(sprite, null, s.x, s.y, s.worldy)
+		// If defined, play animation
+		if (s.anim) {
+			BACKGROUNDANIM[this.area][name] = new Animation(sprite, 0, 0)
+			BACKGROUNDANIM[this.area][name].playAnimation(s.anim.frames, s.anim.delay, null)
+			BACKGROUNDSPRITE[this.area][name].anim = BACKGROUNDANIM[this.area][name]
+		}
+	}
+}

website/game/main.js

@@ -26,6 +26,7 @@ function gameUpdate(dt) {
 
 	stateUpdate(dt)
 
+	Notify.update(dt)
 	Transition.update(dt)
 
 	// Set cursor at last
@@ -48,6 +49,7 @@ function gameDraw() {
 
 	stateDraw()
 
+	Notify.draw()
 	Transition.draw()
 
 	// Display FPS

website/game/menu/chat.js

@@ -97,6 +97,9 @@ MENUS["chatMenu"] = new class extends Menu {
 				case "/debug": // Debug physics
 					DEBUGPHYSICS = !DEBUGPHYSICS
 					break
+				case "/notify": // Create notification
+					Notify.new(arg)
+					break
 			}
 		} else if (this.value.length > 0) {
 			// Send chat message

website/game/menu/notification.js

@@ -0,0 +1,48 @@
+// Notification
+// A little popup that appears at the top of the screen
+
+const Notify = (function() {
+	let notifications = [];
+
+	const notifyFunctions = {
+		// Create new notification
+		new: function(text, duration=3, color=[0,0,0]) {
+			notifications.push({
+				text: text,
+				timer: duration, // Duration in seconds
+				duration: duration,
+				color: color
+			})
+		},
+
+		// Check if notification should expire
+		update: function(dt) {
+			for (let i = 0; i < notifications.length; i++) {
+				const notification = notifications[i];
+				notification.timer -= dt
+				if (notification.timer <= 0) {
+					notifications.splice(i, 1)
+				}
+			}
+		},
+
+		// Render all notifications
+		draw: function() {
+			if (notifications.length == 0) {
+				return
+			}
+			// Border
+			DRAW.setColor(255,255,255,0.8)
+			DRAW.rectangle(700, 15, 300, 32*notifications.length, "fill")
+			DRAW.setColor(0,0,0)
+			DRAW.rectangle(700, 15, 300, 32*notifications.length, "line")
+			DRAW.setFont(FONT.description)
+			// Text
+			for (let i = 0; i < notifications.length; i++) {
+				const notification = notifications[i];
+				DRAW.setColor(...notification.color)
+				DRAW.text(notification.text, 700 +3, 15+i*32 + 26, "left")
+			}
+		}
+	}
+	return notifyFunctions; })()

website/game/quests.js

@@ -12,12 +12,12 @@ const QuestSystem = (function() {
 			activeQuests = {}; // Clear any quests from old saveData
 
 			for (let questName in SAVEDATA.quests.active) {
-				this.start(questName)
+				this.start(questName, "initial")
 			}
 		},
 
 		// Start quest if it isn't active and hasn't been completed yet.
-		start(questName) {
+		start(questName, initial) {
 			let quest = this.getQuest(questName)
 			if (!quest && !SAVEDATA.quests.completed[questName]) {
 				// Load quest properties from json file in the assets folder
@@ -40,6 +40,10 @@ const QuestSystem = (function() {
 						// TODO: There should be a SaveData function for this, saving progress will be more complicated when the database is implemented
 						SAVEDATA.quests.active[questName] = activeQuests[questName].progress
 					}
+
+
+					Notify.new("You started the quest: " + data.name)
+					Notify.new(data.description)
 				})
 			}
 		},

website/game/world.js

@@ -21,7 +21,7 @@ class World {
 
 		// Load Quests
 		QuestSystem.initialize()
-		QuestSystem.start("tutorial")
+		QuestSystem.start("tutorial") // Temporary.. needs a better home
 
 		// Physics objects
 		OBJECTS = {}

website/index.html

@@ -67,6 +67,7 @@
 	<script src="game/minigames/runner/runner.js"></script>
 
 	<script src="game/transition.js"></script>
+	<script src="game/menu/notification.js"></script>
 	<script src="game/state.js"></script>
 	<script src="game/physics.js"></script>
 	<script src="game/world.js"></script>