Fixed some oGCD/GCD displaying and cleaned up code.

README.md

@@ -5,5 +5,8 @@ A simple no-frills ACTWebSocket overlay for showing skills, designed as a Proof-
 Make sure the 'Using BeforeLogLineRead' box is checked in ACTWebSocket then click the 'Add URL' button to add this URL:
 `https://rawrington.github.io/SkillDisplay/`
 
+## Troubleshooting
+I have only tested and confirmed this working on the QT5.8.0 variant of OverlayProc with ACTWebSocket 1.3.3.9 so if you are having trouble please use these versions.
+
 ## Preview
 ![preview.png](./images/preview.png)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skilldisplay",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "dependencies": {
     "react": "^16.8.6",
@@ -16,7 +16,7 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "homepage": "https://rawrington.github.io/skilldisplay/",
+  "homepage": "https://rawrington.github.io/SkillDisplay/",
   "browserslist": {
     "production": [
       ">0.2%",

src/Action.js

@@ -1,6 +1,31 @@
 import React from 'react'
 import './css/Action.css'
 
+const gcdExceptions = [
+	15997, //standard step
+	15998, //technical step
+	15999, 
+	16000,
+	16001,
+	16002, //step actions
+	16003, //standard finish
+	16004, //technical finish
+	16191, //single standard finish
+	16192, //double standard finish (WHY IS IT LIKE THIS)
+	16193, //single technical finish
+	16194, //double technical finish
+	16195, //triple technical finish
+	16196, //quadruple technical finish
+	7418, //flamethrower
+	16483 //tsubame-gaeshi
+]
+
+const ogcdExceptions = [
+	3559, //bard WM
+	116, //bard AP
+	114 //bard MB
+]
+
 class Action extends React.Component {
 	state = {
 		xivapi_data: []
@@ -16,14 +41,10 @@ class Action extends React.Component {
 			.then(data => {this.setState({xivapi_data: data})})
 	}
 	
-	shouldComponentUpdate() {
-		if (Object.getOwnPropertyNames(this.state.xivapi_data).length === 0) {
-			return false
-		}
-		return true
-	}
-	
 	isGCD() {
+		if(ogcdExceptions.indexOf(this.props.action_id) !== -1) return false
+		if(gcdExceptions.indexOf(this.props.action_id) !== -1) return true
+		
 		return (this.state.xivapi_data.ActionCategory.ID !== 4)
 	}
 	

src/App.js

@@ -7,7 +7,8 @@ class App extends React.Component {
 	state = {
 		me: 0,
 		actionlist: [],
-		actionindex: 1
+		actionindex: 1,
+		lastAddedTimestamp: ''
 	}
 	
 	constructor(props) {
@@ -16,14 +17,6 @@ class App extends React.Component {
 		listenActWebSocket(this.handleLogEvent.bind(this))
 	}
 	
-	addActionToOverlay(action_id) {
-		this.setState((state) => {
-			const actionlist = state.actionlist.concat(action_id);
-		
-			return {actionlist}
-		})
-	}
-	
 	handleLogEvent(data) {
 		if(data.charID) {
 			this.setState({me: data.charID})
@@ -40,16 +33,18 @@ class App extends React.Component {
 		
 		const action = parseInt(log[4],16)
 		
-		if(action <= 8) return //things we don't care about
+		if(action <= 8) return //things we don't care about i.e. sprint auto-attacks
+		
+		if(this.state.lastAddedTimestamp === log[1]) return //no double aoe stuff
 		
 		const index = this.state.actionindex
 		
-		this.addActionToOverlay({index,action})
-		
 		this.setState((state) => {
 			const actionindex = (state.actionindex >= 32)?1:state.actionindex+1
+			const lastAddedTimestamp = log[1]
+			const actionlist = state.actionlist.concat({index,action});
 			
-			return {actionindex}
+			return {actionindex,lastAddedTimestamp,actionlist}
 		})
 		
 		setTimeout(this.purgeAction.bind(this), 10000)
@@ -66,10 +61,7 @@ class App extends React.Component {
 	render() {
 		let actions = []
 		
-		console.log(this.state.actionlist)
-		
-		for (const id in this.state.actionlist) {
-			const action = this.state.actionlist[id]
+		for (const action of this.state.actionlist) {
 			actions.push(<Action key={action.index} action_id={action.action} />)
 		}
 		

src/css/App.css

@@ -1,9 +1,15 @@
 .actions {
 	margin-top: 1em;
 	background: linear-gradient(180deg, 
+		rgba(0,0,0,0) calc(25% - 1px), 
+        rgba(255,255,255,0.5) calc(25%), 
+        rgba(0,0,0,0) calc(25% + 1px),
         rgba(0,0,0,0) calc(50% - 1px), 
-        rgba(255,255,255,1) calc(50%), 
-        rgba(0,0,0,0) calc(50% + 1px)
+        rgba(255,255,255,0.5) calc(50%), 
+        rgba(0,0,0,0) calc(50% + 1px),
+		rgba(0,0,0,0) calc(75% - 1px), 
+        rgba(255,255,255,0.5) calc(75%), 
+        rgba(0,0,0,0) calc(75% + 1px)
     );
 	height: 3em;