sottolio 0.1

data/README.md

@@ -0,0 +1,26 @@
+Sottolio - È sopraffino
+========================
+Porting of [Sottaceto](https://github.com/RoxasShadow/Sottaceto) in JavaScript written in Ruby thanks to Opal.
+
+Just like Sottaceto, sottolio is a game engine to create visual novels with ease. These games run everywhere, you only need a~~~n internet browser which supports JavaScript and HTML5~~~ decent internet browser.
+
+The scripts (check `compiler/scripts`) are pretty self-explanatory (even more than Sottaceto's ones, actually).
+
+Backgrounds, musics, and other stuff are kept inside `game/resources/`.
+
+Setup
+=====
+`$ gem install sottolio`
+
+`$ npm install -g uglify-js`
+
+Run the demo
+============
+`$ sottolio example/scripts example/game/sottolio`
+
+
+sottolio will generate `sottolio.js` and `sottolio.min.js` inside `example/game` that are nothing but the compiled version of the scripts inside `example/scripts`.
+
+You're now ready to open `example/game/index.html` in your browser!
+
+The [demo](http://www.giovannicapuano.net/sottolio/) is also available in the web, as well the [video gameplay](http://www.youtube.com/watch?v=djV_Z5OeBmg&feature=youtu.be) (it's a bit old tho).

data/Rakefile

@@ -0,0 +1,12 @@
+#!/usr/bin/env ruby
+require 'rake'
+
+task default: [ :build, :install ]
+
+task :build do
+  sh 'gem build sottolio.gemspec'
+end
+
+task :install do
+  sh 'gem install *.gem'
+end

data/bin/sottolio

@@ -0,0 +1,29 @@
+#!/usr/bin/env ruby
+#--
+# Copyright(C) 2013-2015 Giovanni Capuano <webmaster@giovannicapuano.net>
+#
+# This file is part of sottolio.
+#
+# sottolio is free software: you can redistribute it and/or modify
+# it under the terms of the GNU General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# sottolio is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with sottolio.  If not, see <http://www.gnu.org/licenses/>.
+#++
+require 'sottolio'
+
+abort 'Usage: sottolio <scripts> <output>' if ARGV.length != 2
+
+Opal.append_path ARGV[0]
+
+build = Opal::Builder.build('sottolio').to_s
+
+File.write "#{ARGV[1]}.js", build
+File.write "#{ARGV[1]}.min.js", Opal::Util.uglify(build)

data/example/game/include/CanvasText-0.4.js

@@ -0,0 +1,500 @@
+/**
+ * Copyright (c) 2011 Pere Monfort Pàmies (http://www.pmphp.net)
+ * Official site: http://www.canvastext.com
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a
+ * copy of this software and associated documentation files (the
+ * "Software"), to deal in the Software without restriction, including
+ * without limitation the rights to use, copy, modify, merge, publish,
+ * distribute, sublicense, and/or sell copies of the Software, and to permit
+ * persons to whom the Software is furnished to do so, subject to the
+ * following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included
+ * in all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
+ * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+ * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
+ * NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+ * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+ * OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
+ * USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+function CanvasText() {
+    // The property that will contain the ID attribute value.
+    this.canvasId = null;
+    // The property that will contain the Canvas element.
+    this.canvas = null;
+    // The property that will contain the canvas context.
+    this.context = null;
+    // The property that will contain the buffer/cache canvas.
+    this.bufferCanvas = null;
+    // The property that will contain the cacheCanvas context.
+    this.bufferContext = null;
+    // The property that will contain all cached canvas.
+    this.cacheCanvas = [];
+    // The property that will contain all cached contexts.
+    this.cacheContext = [];
+    // The property that will contain the created style class.
+    this.savedClasses = [];
+
+    /*
+     * Default values.
+     */
+    this.fontFamily = "Verdana";
+    this.fontWeight = "normal";
+    this.fontSize = "12px";
+    this.fontColor = "#000";
+    this.fontStyle = "normal";
+    this.textAlign = "start";
+    this.textBaseline = "alphabetic";
+    this.lineHeight = "16";
+    this.textShadow = null;
+
+    /**
+     * Benckmark variables.
+     */
+    this.initTime = null;
+    this.endTime = null;
+
+    /**
+     * Set the main values.
+     * @param object config Text properties.
+     */
+    this.config = function (config) {
+        var property;
+        /*
+         * A simple check. If config is not an object popup an alert.
+         */
+        if (typeof (config) !== "object") {
+            alert("¡Invalid configuration!");
+            return false;
+        }
+        /*
+         * Loop the config properties.
+         */
+        for (property in config) {
+            // If it's a valid property, save it.
+            if (this[property] !== undefined) {
+                this[property] = config[property];
+            }
+        }
+    };
+
+    /**
+     * @param object textInfo Contains the Text string, axis X value and axis Y value.
+     */
+    this.drawText = function (textInfo) {
+        this.initTime  = new Date().getTime();
+        /*
+         * If this.canvas doesn't exist we will try to set it.
+         * This will be done the first execution time.
+         */
+        if (this.canvas == null) {
+            if (!this.getCanvas()) {
+                alert("Incorrect canvas ID!");
+                return false;
+            }
+        }
+        /**
+         *
+         */
+        if (this.bufferCanvas == null) {
+            this.getBufferCanvas();
+        }
+        /**
+         * Get or set the cache if a cacheId exist.
+         */
+        if (textInfo.cacheId !== undefined) {
+            // We add a prefix to avoid name conflicts.
+            textInfo.cacheId = "ct" + textInfo.cacheId;
+            // If cache exists: draw text and stop script execution.
+            if (this.getCache(textInfo.cacheId)) {
+                if (!textInfo.returnImage) {
+                    this.context.drawImage(this.cacheCanvas[textInfo.cacheId], 0, 0);
+                } else if (textInfo.returnImage) {
+                    return this.cacheCanvas[textInfo.cacheId];
+                }
+
+                this.endTime = new Date().getTime();
+                //console.log("cache",(this.endTime-this.initTime)/1000);
+                return false;
+            }
+        }
+        // A simple check.
+        if (typeof (textInfo) != "object") {
+            alert("Invalid text format!");
+            return false;
+        }
+        // Another simple check
+        if (!this.isNumber(textInfo.x) || !this.isNumber(textInfo.y)) {
+            alert("You should specify a correct \"x\" & \"y\" axis value.");
+            return false;
+        }
+        // Reset our cacheCanvas.
+        this.bufferCanvas.width = this.bufferCanvas.width;
+        // Set the color.
+        this.bufferContext.fillStyle = this.fontColor;
+        // Set the size & font family.
+        this.bufferContext.font = this.fontWeight + ' ' + this.fontSize + ' ' + this.fontFamily;
+        // Parse and draw the styled text.
+        this.drawStyledText(textInfo);
+        // Cache the result.
+        if (textInfo.cacheId != undefined) {
+            this.setCache(textInfo.cacheId);
+        }
+        
+        this.endTime  = new Date().getTime();
+        //console.log((this.endTime-this.initTime)/1000);
+        // Draw or return the final image.
+        if (!textInfo.returnImage) {
+            this.context.drawImage(this.bufferCanvas, 0, 0);
+        } else if (textInfo.returnImage) {
+            return this.bufferCanvas;
+        }
+    };
+
+    /**
+     * The "painter". This will draw the styled text.
+     */
+    this.drawStyledText = function (textInfo) {
+        // Save the textInfo into separated vars to work more comfortably.
+        var text = textInfo.text, x = textInfo.x, y = textInfo.y;
+        // Needed vars for automatic line break;
+        var splittedText, xAux, textLines = [], boxWidth = textInfo.boxWidth;
+        // Declaration of needed vars.
+        var proFont = [], properties, property, propertyName, propertyValue, atribute;
+        var classDefinition, proColor, proText, proShadow;
+        // Loop vars
+        var i, j, k, n;
+
+        // The main regex. Looks for <style>, <class> or <br /> tags.
+        var match = text.match(/<\s*br\s*\/>|<\s*class=["|']([^"|']+)["|']\s*\>([^>]+)<\s*\/class\s*\>|<\s*style=["|']([^"|']+)["|']\s*\>([^>]+)<\s*\/style\s*\>|[^<]+/g);
+        var innerMatch = null;
+
+        // Let's draw something for each match found.
+        for (i = 0; i < match.length; i++) {
+            // Save the current context.
+            this.bufferContext.save();
+            // Default color
+            proColor = this.fontColor;
+            // Default font
+            proFont.style = this.fontStyle;
+            proFont.weight = this.fontWeight;
+            proFont.size = this.fontSize;
+            proFont.family = this.fontFamily;
+
+            // Default shadow
+            proShadow = this.textShadow;
+
+            // Check if current fragment is an style tag.
+            if (/<\s*style=/i.test(match[i])) {
+                // Looks the attributes and text inside the style tag.
+                innerMatch = match[i].match(/<\s*style=["|']([^"|']+)["|']\s*\>([^>]+)<\s*\/style\s*\>/);
+                    
+                // innerMatch[1] contains the properties of the attribute.
+                properties = innerMatch[1].split(";");
+
+                // Apply styles for each property.
+                for (j = 0; j < properties.length; j++) {
+                    // Each property have a value. We split them.
+                    property = properties[j].split(":");
+                    // A simple check.
+                    if (this.isEmpty(property[0]) || this.isEmpty(property[1])) {
+                        // Wrong property name or value. We jump to the
+                        // next loop.
+                        continue;
+                    }
+                    // Again, save it into friendly-named variables to work comfortably.
+                    propertyName = property[0];
+                    propertyValue = property[1];
+
+                    switch (propertyName) {
+                    case "font":
+                        proFont = propertyValue;
+                        break;
+                    case "font-family":
+                        proFont.family = propertyValue;
+                        break;
+                    case "font-weight":
+                        proFont.weight = propertyValue;
+                        break;
+                    case "font-size":
+                        proFont.size = propertyValue;
+                        break;
+                    case "font-style":
+                        proFont.style = propertyValue;
+                        break;
+                    case "text-shadow":
+                        proShadow = this.trim(propertyValue);
+                        proShadow = proShadow.split(" ");
+                        if (proShadow.length != 4) {
+                            proShadow = null;
+                        }
+                        break;
+                    case "color":
+                        if (this.isHex(propertyValue)) {
+                            proColor = propertyValue;
+                        }
+                        break;
+                    }
+                }
+                proText = innerMatch[2];
+            
+            } else if (/<\s*class=/i.test(match[i])) { // Check if current fragment is a class tag.
+                // Looks the attributes and text inside the class tag.
+                innerMatch = match[i].match(/<\s*class=["|']([^"|']+)["|']\s*\>([^>]+)<\s*\/class\s*\>/);
+               
+                classDefinition = this.getClass(innerMatch[1]);
+                /*
+                 * Loop the class properties.
+                 */
+                for (atribute in classDefinition) {
+                    switch (atribute) {
+                    case "font":
+                        proFont = classDefinition[atribute];
+                        break;
+                    case "fontFamily":
+                        proFont.family = classDefinition[atribute];
+                        break;
+                    case "fontWeight":
+                        proFont.weight = classDefinition[atribute];
+                        break;
+                    case "fontSize":
+                        proFont.size = classDefinition[atribute];
+                        break;
+                    case "fontStyle":
+                        proFont.style = classDefinition[atribute];
+                        break;
+                    case "fontColor":
+                        if (this.isHex(classDefinition[atribute])) {
+                            proColor = classDefinition[atribute];
+                        }
+                        break;
+                    case "textShadow":
+                        proShadow = this.trim(classDefinition[atribute]);
+                        proShadow = proShadow.split(" ");
+                        if (proShadow.length != 4) {
+                            proShadow = null;
+                        }
+                        break;
+                    }
+                }
+                proText = innerMatch[2];
+            } else if (/<\s*br\s*\/>/i.test(match[i])) {
+                // Check if current fragment is a line break.
+                y += parseInt(this.lineHeight, 10) * 1.5;
+                x = textInfo.x;
+                continue;
+            } else {
+                // Text without special style.
+                proText = match[i];
+            }
+
+            // Set the text Baseline
+            this.bufferContext.textBaseline = this.textBaseline;
+            // Set the text align
+            this.bufferContext.textAlign = this.textAlign;
+            // Font styles.
+            if (proFont instanceof Array) {
+                this.bufferContext.font = proFont.style + " " + proFont.weight + " " + proFont.size + " " + proFont.family;
+            } else {
+                this.bufferContext.font = proFont;
+            }
+            this.bufferContext.font = proFont;
+            // Set the color.
+            this.bufferContext.fillStyle = proColor;
+            // Set the Shadow.
+            if (proShadow != null) {
+                this.bufferContext.shadowOffsetX = proShadow[0].replace("px", "");
+                this.bufferContext.shadowOffsetY = proShadow[1].replace("px", "");
+                this.bufferContext.shadowBlur = proShadow[2].replace("px", "");
+                this.bufferContext.shadowColor = proShadow[3].replace("px", "");
+            }
+            
+            // Reset textLines;
+            textLines = [];
+            // Clear javascript code line breaks.
+            proText = proText.replace(/\s*\n\s*/g, " ");
+
+            // Automatic Line break
+            if (boxWidth !== undefined) {
+                // If returns true, it means we need a line break.
+                if (this.checkLineBreak(proText, boxWidth, x)) {
+                    // Split text by words.
+                    splittedText = this.trim(proText).split(" ");
+
+                    // If there's only one word we don't need to make more checks.
+                    if (splittedText.length == 1) {
+                        textLines.push({text: this.trim(proText) + " ", linebreak: true});
+                    } else {
+                        // Reset vars.
+                        xAux = x;
+                        var line = 0;
+                        textLines[line] = {text: undefined, linebreak: false};
+
+                        // Loop words.
+                        for (k = 0; k < splittedText.length; k++) {
+                            splittedText[k] += " ";
+                            // Check if the current text fits into the current line.
+                            if (!this.checkLineBreak(splittedText[k], boxWidth, xAux)) {
+                                // Current text fit into the current line. So we save it
+                                // to the current textLine.
+                                if (textLines[line].text == undefined) {
+                                    textLines[line].text = splittedText[k];
+                                } else {
+                                    textLines[line].text += splittedText[k];
+                                }
+                                
+                                xAux += this.bufferContext.measureText(splittedText[k]).width;
+                            } else {
+                                // Current text doesn't fit into the current line.
+                                // We are doing a line break, so we reset xAux
+                                // to initial x value.
+                                xAux = textInfo.x;
+                                if (textLines[line].text !== undefined) {
+                                    line++;
+                                }
+
+                                textLines[line] = {text: splittedText[k], linebreak: true};
+                                xAux += this.bufferContext.measureText(splittedText[k]).width;
+                            }
+                        }
+                    }
+                }
+            }
+
+            // if textLines.length == 0 it means we doesn't need a linebreak.
+            if (textLines.length == 0) {
+                textLines.push({text: this.trim(proText) + " ", linebreak: false});
+            }
+
+            // Let's draw the text
+            for (n = 0; n < textLines.length; n++) {
+                // Start a new line.
+                if (textLines[n].linebreak) {
+                    y += parseInt(this.lineHeight, 10);
+                    x = textInfo.x;
+                }
+                this.bufferContext.fillText(textLines[n].text, x, y);
+                // Increment X position based on current text measure.
+                x += this.bufferContext.measureText(textLines[n].text).width;
+            }
+
+            this.bufferContext.restore();
+        }
+    };
+
+    /**
+     * Save a new class definition.
+     */
+    this.defineClass = function (id, definition) {
+        // A simple check.
+        if (typeof (definition) != "object") {
+            alert("¡Invalid class!");
+            return false;
+        }
+        // Another simple check.
+        if (this.isEmpty(id)) {
+            alert("You must specify a Class Name.");
+            return false;
+        }
+
+        // Save it.
+        this.savedClasses[id] = definition;
+        return true;
+    };
+
+    /**
+     * Returns a saved class.
+     */
+    this.getClass = function (id) {
+        if (this.savedClasses[id] !== undefined) {
+            return this.savedClasses[id];
+        }
+    };
+    
+    this.getCanvas = function () {
+        // We need a valid ID
+        if (this.canvasId == null) {
+            alert("You must specify the canvas ID!");
+            return false;
+        }
+        // Let's save the Canvas into our class property...
+        this.canvas  = document.getElementById(this.canvasId);
+        // ... and save its context too.
+        this.context = this.canvas.getContext('2d');
+        this.getBufferCanvas();
+
+        return true;
+    };
+
+    this.getBufferCanvas = function () {
+        // We will draw the text into the cache canvas
+        this.bufferCanvas = document.createElement('canvas');
+        this.bufferCanvas.width = this.canvas.width;
+        this.bufferCanvas.height = this.canvas.height;
+        this.bufferContext = this.bufferCanvas.getContext('2d');
+    };
+    /**
+     * Check if the cache canvas exist.
+     */
+    this.getCache = function (id) {
+        if (this.cacheCanvas[id] === undefined) {
+            return false;
+        } else {
+            return true;
+        }
+    };
+    /**
+     * We create a new canvas element for each cache element.
+     */
+    this.setCache = function (id) {
+        this.cacheCanvas[id] = document.createElement("canvas");
+        this.cacheCanvas[id].width = this.bufferCanvas.width;
+        this.cacheCanvas[id].height = this.bufferCanvas.height;
+        this.cacheContext[id] = this.cacheCanvas[id].getContext('2d');
+        this.cacheContext[id].drawImage(this.bufferCanvas, 0, 0);
+    };
+    /**
+     * Check if a line break is needed.
+     */
+    this.checkLineBreak = function (text, boxWidth, x) {
+        return (this.bufferContext.measureText(text).width + x > boxWidth);
+    };
+
+    /**
+     * A simple function to validate a Hex code.
+     */
+    this.isHex = function (hex) {
+        return (/^(#[a-fA-F0-9]{3,6})$/i.test(hex));
+    };
+    /**
+     * A simple function to check if the given value is a number.
+     */
+    this.isNumber = function (n) {
+        return !isNaN(parseFloat(n)) && isFinite(n);
+    };
+    /**
+     * A simple function to check if the given value is empty.
+     */
+    this.isEmpty = function (str) {
+        // Remove white spaces.
+        str = str.replace(/^\s+|\s+$/, '');
+        return str.length == 0;
+    };
+    /**
+     * A simple function clear whitespaces.
+     */
+    this.trim = function (str) {
+        var ws, i;
+        str = str.replace(/^\s\s*/, '');
+        ws = /\s/;
+        i = str.length;
+        while (ws.test(str.charAt(--i))) {
+            continue;
+        }
+        return str.slice(0, i + 1);
+    };
+}