Fork 0

ACT Overlay framework

JavaScript 67.7%
HTML 28%
CSS 4.3%

Find a file

uppfinnarn 8d728ad452 maxhit suddenly has a thousand-delimiter...		2016-06-18 15:46:32 +02:00
icons	Job icons because why not	2015-12-06 13:58:44 +01:00
parsify	maxhit suddenly has a thousand-delimiter...	2016-06-18 15:46:32 +02:00
plugins/highlight-deaths	Deaths were sticking, oops	2015-12-09 15:29:55 +01:00
miniparse.html	ng-cloak, don't flash uncompiled templates at load	2015-12-09 14:49:13 +01:00
README.md	README update	2015-12-09 22:30:34 +01:00

README.md

Parsify

Parsify is a framework for customizable parser overlays, running on top of RainbowMage's ACT Overlay Plugin.
It replaces the monolithic miniparse.html file shipped with it, and provides:

Better, easier customization - it uses AngularJS to build parser UIs out of HTML and directives, rather than generating HTML from messy JS definitions and functions.
More accurate, more consistent - more precise percentages, arbitrary precision, max hits with names and damage separated... and no more inconsistencies (ParryPct vs crithit%).
Reusable components - Parts of overlays can be shared as plugins and applied to someone else's. No more need to replace whole miniparse.html files to try a different style. Keep your layout and style it how you like.

RainbowMage's Overlay Plugin is really cool, but seriously, the UI customization is rather painful.
This is an attempt to remedy this, by providing data bindings, normalization and encapsulation to the whole thing.

Sample miniparse.html

<!DOCTYPE html>
<!-- Parsify needs the ng-app directive to work! -->
<html ng-app="parsify">
<head>

	<!-- This does ALL the necessary setup for Parsify -->
    <script src="parsify/bootstrap.js"></script>
    
</head>
<!-- Let ParserController provide data -->
<body ng-controller="ParserController">
    
    <!-- Header -->
    <div>
        <!-- Use {{ brackets }} to print out a value -->
        {{ encounter.title }}
    </div>
    
    <!-- Table of combatants -->
    <table>
        
        <!-- Table header -->
        <thead>
            <!-- tr = Table Row, td = Table Data (a cell) -->
            <tr>
                <td width="45%">Name</td>
                <td width="5%">Job</td>
                <td width="20%" align="right">DPS</td>
                <td>Max Hit</td>
            </tr>
        </thead>
        
        <!-- Table body -->
        <tbody>
            <!-- Add a row for every combatant, accessing data as 'char' -->
            <tr ng-repeat="char in combatants">
                
                <!-- Use {{ brackets }} to print variables -->
                <td>{{ char.name }}</td>
                
                <!-- You can use filters to process output -->
                <td>{{ char.job|uppercase }}</td>
                
                <!-- The 'num' filter prints a number with a set precision (here: 2 decimals) -->
                <td>{{ char.dps|num:2 }}</td>
                
                <!-- You can use default values with {{ expression || "Default" }}-->
                <td>{{ char.maxhit.name || "---" }} ({{ char.maxhit.damage|num:0 }})</td>
                
                <!-- Or you can hide the text if this character hasn't attacked yet: -->
                <!-- <td><span ng-if="char.maxhit.name">{{ char.maxhit.name }} ...</span></td> -->
                
            </tr>
        </tbody>
        
    </table>
    
</body>
</html>