Search the Community
Showing results for tags 'javscript'.
-
I have an event emitter that gets events like "{type: 1, value=127}." I want a way to dynamically handle each "type" separately. Currently I just add a new listener with an `if (msg.type == 1) {}` but that seems clunky and unnecessary? Any suggestions?
-
Hello, I am currently working on a presentation tool that I'm going to be using for one of my classes, and while I have the majority of the program done, I've run into an odd issue where after adding more than 4 slides to the presentation object, viewing any slides after the fourth one results in null values coming from the titles list. I'm not entirely sure what's going on but I've been looking for bugs regarding adding new slides to the presentation, as far as I can tell the code is correct. Here is the primary script that contains my presentation class: /** * Script: presentation.js * Written by: SilicateWielder * Updated: 5/10/2017 **/ // Standard cursor object, laggy at even 120 fps and only needed for development purposes. cursor = function () { this.image = new Surface (20, 20, Color(0, 0, 0, 0)); this.image.filledRectangle(0, 0, 20, 20, Color(125,125,125)); this.image = this.image.grabImage(0, 0, 20, 20); }; cursor.prototype = {}; // Draws said standard cursor object. cursor.prototype.render = function () { Screen.blit(this.image, Input.mouse.x, Input.mouse.y); }; presentation = function (title, author) { // Store title of presentation and its author's name. this.title = []; this.title['text'] = title; this.title['xP'] = 0; this.title['yP'] = 0; this.author = author this.slide = 0; this.slides = []; this.pressed = false; // Generate default color palette. this.colors = []; this.colors['marginA'] = new Color(30, 30, 30, 255); this.colors['marginB'] = new Color(20, 20, 20, 255); this.colors['titleA'] = new Color (25, 25, 25, 255); this.colors['titleB'] = new Color(10, 10, 10, 255); this.colors['bottomA'] = new Color (30, 30, 30, 255); this.colors['bottomB'] = new Color (35, 35, 35, 255); this.colors['tickerA'] = new Color (12, 12, 12, 255); this.colors['tickerB'] = new Color(7, 7, 7, 255); this.colors['tickerC'] = new Color(16, 16, 16, 255); this.colors['divider'] = new Color(200, 200, 200, 255); this.colors['background'] = new Color(0, 0, 0, 255); // Generate font palette. this.fonts = []; this.fonts['titleFont'] = new Font("titleFont.rfn"); this.fonts['authorFont'] = new Font("authFont.rfn"); this.fonts['subtitleFont'] = new Font("subFont.rfn"); this.fonts['infoFont'] = new Font("infoFont.rfn"); this.fonts['bodyFont'] = new Font("bodyFont.rfn"); this.fonts['tickerFont'] = new Font("tickFont.rfn"); // Generate data for dimensions this.size = []; this.size['tickerBarHeight'] = 28; this.size['tickerBarDepth'] = 2; this.size['infoPaneWidth'] = 200; this.size['infoPaneHeight'] = system.screenHeight - (this.size['tickerBarHeight'] + this.size['tickerBarDepth']); this.size['infoPaneDepth'] = 2; this.size['titlePaneHeight'] = 90; this.size['titlePaneDepth'] = 2; this.size['subtitleHeight'] = 40; this.size['bodyFrameWidth'] = 500; this.size['bodyFrameHeight'] = 500; this.size['buttonWidth'] = 190; this.size['buttonHeight'] = 50; // Generate Button data. this.buttonData = []; this.buttonData['nextXa'] = system.screenWidth - this.size['buttonWidth'] - ((this.size['infoPaneWidth'] - this.size['buttonWidth']) / 2); this.buttonData['nextYa'] = system.screenHeight - this.size['buttonHeight'] - (this.size['tickerBarHeight'] + this.size['tickerBarDepth']) - 10; this.buttonData['backXa'] = (this.size['infoPaneWidth'] - this.size['buttonWidth']) / 2; this.buttonData['backYa'] = system.screenHeight - this.size['buttonHeight'] - (this.size['tickerBarHeight'] + this.size['tickerBarDepth']) - 10; this.buttonData['imageXa'] = (system.screenWidth / 2) - (this.size['buttonWidth'] / 2); this.buttonData['imageYa'] = system.screenHeight - this.size['buttonHeight'] - (this.size['tickerBarHeight'] + this.size['tickerBarDepth']) - 10; // Generate arrays for slide data. this.slideTitle = []; this.slideTitleX = []; this.slideTitleY = []; this.slideBody = []; this.slideInfoL = []; this.slideInfoR = []; this.slideTicker = []; this.slideImage = []; // Generate blank canvas. this.background = new Surface(system.screenWidth, system.screenHeight, Color(0, 0, 0)); Screen.blit(this.background, 0, 0); this.background = Screen.grabImage(0, 0, Screen.width, Screen.height) // Generate buttons. this.nextButton = new Surface(this.size['buttonWidth'], this.size['buttonHeight'], Color(255,255,255)); Screen.blit(this.nextButton, 0, 0); this.nextButton = Screen.grabImage(0, 0, this.nextButton.width, this.nextButton.height); this.backButton = new Surface(this.size['buttonWidth'], this.size['buttonHeight'], Color(255,255,255)); Screen.blit(this.backButton, 0, 0); this.backButton = Screen.grabImage(0, 0, this.backButton.width, this.backButton.height); this.imageButton = new Surface(this.size['buttonWidth'], this.size['buttonHeight'], Color(255,255,255)); Screen.blit(this.imageButton, 0, 0); this.imageButton = Screen.grabImage(0, 0, this.imageButton.width, this.imageButton.height); }; presentation.prototype = {}; // Aligns elements, useful to make sure custom fonts don't impede centering. presentation.prototype.align = function (heading, x, y, slide) { if (heading == "Title") { this.title['xP'] = x; this.title['yP'] = y; } else if (heading == "Subtitle") { this.slideTitleX[slide] = (system.screenWidth / 2) + x; this.slideTitleY[slide] = (system.screenHeight / 2) + y; }; }; // Adds a new slide to the presentation. presentation.prototype.addSlide = function (title, x, y) { this.slideTitle.push(title); this.slideTitleX.push(x); this.slideTitleY.push(y); this.slideBody.push(null); this.slideInfoL.push(null); this.slideInfoR.push(null); this.slideTicker.push(null); this.slideImage.push(null); }; // Adds text to the body of a slide. presentation.prototype.addBodyText = function (slide, string, newline) { if (slide <= this.slideTitle.length) { if (this.slideBody[slide] == null) { this.slideBody[slide] = " "; }; if (newline == false) { this.slideBody[slide] = this.slideBody[slide] + string + " "; } else { this.slideBody[slide] = this.slideBody[slide] + string + "\n"; }; }; }; // Adds text to one of the info panes of a slide. presentation.prototype.addInfo = function (slide, pane, string, newline) { if (slide <= this.slideTitle.length) { if (pane == "L") { if (this.slideInfoL[slide] == null) { this.slideInfoL[slide] = ""; }; if (newline == false) { this.slideInfoL[slide] = this.slideInfoL[slide] + string + " "; } else { this.slideInfoL[slide] = this.slideInfoL[slide] + string + "\n"; }; } else if (pane == "R") { if (this.slideInfoR[slide] == null) { this.slideInfoR[slide] = ""; }; if (newline == false) { this.slideInfoR[slide] = this.slideInfoR[slide] + string + " "; } else { this.slideInfoR[slide] = this.slideInfoR[slide] + string + "\n"; }; }; }; }; // Forcibly renders the slide to this.background in order to bypass a bug in Sphere v2. presentation.prototype.regenSlide = function(slide) { // Draw Canvas this.background = new Surface (system.screenWidth, system.screenHeight, Color(0, 0, 0)); Screen.blit(this.background, 0, 0); // Draw Left Information panel. this.slideInfoLImage = new Surface(this.size['infoPaneWidth'] + this.size['infoPaneDepth'], this.size['infoPaneHeight'], this.colors['marginA']); this.slideInfoLImage.filledRectangle(this.size['infoPaneWidth'], 0, this.size['infoPaneDepth'], this.size['infoPaneHeight'], this.colors['marginB']); if (this.slideInfoL[slide] == null) { this.slideInfoLImage.textBox(this.fonts['infoFont'], 5, 0, this.size['infoPaneWidth'], this.size['infoPaneHeight'], 0, "[DATA ERROR]: Slide data missing or corrupt."); } else { this.slideInfoLImage.textBox(this.fonts['infoFont'], 5, 0, this.size['infoPaneWidth'], this.size['infoPaneHeight'], 0, this.slideInfoL[slide]); }; // Draw Right Information Panel. this.slideInfoRImage = new Surface(this.size['infoPaneWidth'] + this.size['infoPaneDepth'], this.size['infoPaneHeight'], this.colors['marginA']); this.slideInfoRImage.filledRectangle(0, 0, this.size['infoPaneDepth'], this.size['infoPaneHeight'], this.colors['marginB']); if (this.slideInfoR[slide] == null) { this.slideInfoRImage.textBox(this.fonts['infoFont'], 5, 0, this.size['infoPaneWidth'], this.size['infoPaneHeight'], 0, "[DATA ERROR]: Slide data missing or corrupt."); } else { this.slideInfoRImage.textBox(this.fonts['infoFont'], 5, 0, this.size['infoPaneWidth'], this.size['infoPaneHeight'], 0, this.slideInfoR[slide]); }; // Draw Title Pane. this.slideTitleImage = new Surface (system.screenWidth - ((this.size['infoPaneWidth'] + this.size['infoPaneDepth']) * 2), this.size['titlePaneHeight'] + this.size['titlePaneDepth'], this.colors['titleA']); this.slideTitleImage.filledRectangle(0, this.size['titlePaneHeight'], system.screenWidth - ((this.size['infoPaneWidth'] + this.size['infoPaneDepth']) * 2), this.size['titlePaneDepth'], this.colors['titleB']); if (this.title['text'] == null) { this.slideTitleImage.text(this.fonts['titleFont'], (this.slideTitleImage.width / 2) - this.title['xP'], this.title['yP'], "[DATA ERROR]: Slide data missing or corrupt."); } else { this.slideTitleImage.text(this.fonts['titleFont'], (this.slideTitleImage.width / 2) - this.title['xP'], this.title['yP'], this.title['text']); }; if (this.author == null) { this.slideTitleImage.text(this.fonts['authorFont'], (this.slideTitleImage.width / 2) - this.title['xP'], this.title['yP'], "[DATA ERROR]: Slide data missing or corrupt."); } else { this.slideTitleImage.text(this.fonts['authorFont'], (this.slideTitleImage.width / 2) - this.title['xP'] + 310, this.title['yP'] + 38, "by " + this.author); }; // Draw Body Frame. this.slideBodyImage = new Surface (system.screenWidth - ((this.size['infoPaneWidth'] + this.size['infoPaneDepth']) * 2), system.screenHeight - (this.size['titlePaneHeight'] + this.size['titlePaneDepth'] + this.size['tickerBarHeight'] + this.size['tickerBarDepth']), this.colors['background']); if (this.slideTitle[slide] == null) { this.slideBodyImage.text(this.fonts['subtitleFont'], (this.slideBodyImage.width / 2) - 380, 0, "[DATA ERROR]: Slide data missing or corrupt."); } else { this.slideBodyImage.text(this.fonts['subtitleFont'], (this.slideBodyImage.width / 2) - this.slideTitleX[slide], 0, this.slideTitle[slide]); }; if (this.slideBody[slide] == null) { this.slideBodyImage.textBox(this.fonts['bodyFont'], 5, this.size['subtitleHeight'] + 10, this.size['bodyFrameWidth'], this.size['bodyFrameHeight'], 0, "[DATA ERROR]: Slide data missing or corrupt."); } else { this.slideBodyImage.textBox(this.fonts['bodyFont'], 5, this.size['subtitleHeight'] + 10, this.size['bodyFrameWidth'], this.size['bodyFrameHeight'], 0, this.slideBody[slide]); }; this.slideBodyImage.line(50, this.size['subtitleHeight'], this.slideBodyImage.width - 50, this.size['subtitleHeight'], this.colors['divider']); // Draw Divider between titlespace and body. this.background.line((this.size['infoPaneWidth'] + this.size['infoPaneDepth']) + this.size['subtitleHeight'], this.size['titlePaneHeight'] + this.size['subtitleHeight'], system.screenWidth - (this.size['infoPaneWidth'] + this.size['infoPaneDepth'] + 50),this.size['titlePaneHeight'] + this.size['subtitleHeight'], this.colors['divider']); // Blit all surfaces to the screen before continuing. Screen.blit(this.slideInfoLImage, 0, 0); Screen.blit(this.slideInfoRImage, system.screenWidth - (this.size['infoPaneWidth'] + this.size['infoPaneDepth']), 0); Screen.blit(this.slideTitleImage, (this.size['infoPaneWidth'] + this.size['infoPaneDepth']), 0); Screen.blit(this.slideBodyImage, (this.size['infoPaneWidth'] + this.size['infoPaneDepth']), (this.size['titlePaneHeight'] + this.size['titlePaneDepth'])); // Draw bottom margin. Screen.filledRectangle(0, this.size['infoPaneHeight'], system.screenWidth, this.size['tickerBarDepth'], this.colors['bottomB']); Screen.filledRectangle(0, (this.size['infoPaneHeight'] + this.size['tickerBarDepth']), system.screenWidth, this.size['tickerBarHeight'], this.colors['bottomA']); // Draw ticker bar. Screen.filledRectangle((this.size['infoPaneWidth'] + this.size['infoPaneDepth'] + 3), system.screenHeight - this.size['tickerBarHeight'] + 4, system.screenWidth - ( 2 * (this.size['infoPaneWidth'] + this.size['infoPaneDepth'] + 3)), 2, this.colors['tickerB']); Screen.filledRectangle((this.size['infoPaneWidth'] + this.size['infoPaneDepth'] + 3), system.screenHeight - this.size['tickerBarHeight'] + 6, system.screenWidth - ( 2 * (this.size['infoPaneWidth'] + this.size['infoPaneDepth'] + 3)), this.size['tickerBarHeight'] - 10, this.colors['tickerA']); Screen.filledRectangle((this.size['infoPaneWidth'] + this.size['infoPaneDepth'] + 3), system.screenHeight - 6, system.screenWidth - ( 2 * (this.size['infoPaneWidth'] + this.size['infoPaneDepth'] + 3)), 3, this.colors['tickerC']); // Capture the drawn slide this.background = Screen.grabImage(0, 0, system.screenWidth, system.screenHeight); this.slides.push(this.background); }; // Returns true if cursor is within the specified area. presentation.prototype.detectMouse = function (xA, yA, width, height) { if (Input.mouse.x > xA) { if (Input.mouse.x < xA + width) { if (Input.mouse.y > yA) { if (Input.mouse.y < yA + height) { return true; } else { return false; }; } else { return false; }; } else { return false; }; } else { return false; }; }; mouse = new cursor presentation.prototype.render = function () { // Run only while we have slides to show while (this.slide < this.slideTicker.length) { while (presentation.prototype.detectMouse(this.buttonData['nextXa'], this.buttonData['nextYa'], this.size['buttonWidth'], this.size['buttonHeight']) == true) { if (this.slideTitle[this.slide + 1] != null) { this.slide = this.slide + 1; } else { Sphere.exit(); }; // Just to make sure that we don't skip slides when pressing next or back. while (presentation.prototype.detectMouse(this.buttonData['nextXa'], this.buttonData['nextYa'], this.size['buttonWidth'], this.size['buttonHeight']) == true) { }; }; while (presentation.prototype.detectMouse(this.buttonData['backXa'], this.buttonData['backYa'], this.size['buttonWidth'], this.size['buttonHeight']) == true) { // Just to make sure that we don't skip slides when pressing next or back. while (presentation.prototype.detectMouse(this.buttonData['backXa'], this.buttonData['backYa'], this.size['buttonWidth'], this.size['buttonHeight']) == true) { }; }; // blit the appropriate slide image Screen.blit(this.slides[this.slide], 0, 0); // Render the next and back buttons. Screen.blit(this.nextButton, this.buttonData['nextXa'], this.buttonData['nextYa']); Screen.blit(this.backButton, this.buttonData['backXa'], this.buttonData['backYa']); // Check if the back button is active, no mouse click needed as this will be used on a smartboard. if (presentation.prototype.detectMouse(this.buttonData['backXa'], this.buttonData['backYa'], this.size['buttonWidth'], this.size['buttonHeight']) == true) { this.slide = this.slide - 1; if (this.slide < 0) { this.slide = this.slide + 1; }; }; // Draw the cursor to the screen and push the ne frame. mouse.render(); Screen.flip(); }; Sphere.exit(); }; And here is the main script: /** * Script: main.js * Written by: SilicateWielder * Updated: 5/10/2017 **/ function game() { // System info, used by presentation.js system = []; system["version"] = "0.0.9"; system.screenWidth = Screen.width system.screenHeight = Screen.height // Import libraries RequireScript("lib/lib.js"); // Create new presentation. vietnam = new presentation("The Vietnam War", "Michael Warner"); vietnam.align('Title', 235, 20); // Slide data located here. RequireScript("slides.js"); // Run the presentation. vietnam.render(); }; game(); For those who are more daring, I have bundled the program with the Sphere RPG engine, thrown it into 7zip, and uploaded it here. School Project.7z