Lint repository, add Travis linting tests

Fixes #2
Nightfirecat · Apr 19, 2018 · 60785a8 · 60785a8
1 parent b5a2d8d
commit 60785a8
Show file tree

Hide file tree

Showing 13 changed files with 2,072 additions and 67 deletions.
diff --git a/.csslintrc b/.csslintrc
@@ -0,0 +1,12 @@
+{
+	"ignore": [
+		"adjoining-classes",
+		"box-model",
+		"box-sizing",
+		"unique-headings"
+	],
+	"warnings": [
+	],
+	"errors": [
+	]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,17 @@
+# EditorConfig: http://EditorConfig.org
+
+root = true
+
+# Unix-style newlines with a newline ending every file
+# Set default charset, indentation
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[{package.json,yarn.lock,*.yml}]
+indent_size = 2
+indent_style = space
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,34 @@
+{
+	"env": {
+		"browser": true,
+		"es6": true
+	},
+	"extends": "eslint:recommended",
+	"parserOptions": {
+		"sourceType": "module"
+	},
+	"rules": {
+		"indent": [
+			"error",
+			"tab",
+			{
+				"CallExpression": {
+					"arguments": "first"
+				},
+				"VariableDeclarator": 1
+			}
+		],
+		"linebreak-style": [
+			"error",
+			"unix"
+		],
+		"quotes": [
+			"error",
+			"single"
+		],
+		"semi": [
+			"error",
+			"always"
+		]
+	}
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/
+yarn-error.log
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,6 @@
+language: node_js
+cache: yarn
+node_js:
+  - 8
+  - node # test latest stable
+script: .travis/test.sh
diff --git a/.travis/test.sh b/.travis/test.sh
@@ -0,0 +1,11 @@
+#!/bin/bash
+set -e
+
+# collect args for editorconfig-cli
+mapfile -t editorconfigargs < <(find . -type 'f' ! -name '*.png' ! -name 'LICENSE' ! -name 'yarn-error.log' ! -path './node_modules/*' ! -path './.git/*')
+
+shellcheck .scripts/test.sh
+yarn run csslint --quiet ./*.css
+yarn run editorconfig-cli "${editorconfigargs[@]}"
+yarn run eslint ./*.js
+yarn run w3cjs ./*.html
diff --git a/LICENSE b/LICENSE
diff --git a/gear.html b/gear.html
@@ -1,5 +1,8 @@
-<html>
+<!DOCTYPE html>
+<html lang="en-US">
 <head>
+	<meta charset="UTF-8">
+	<title>Gear Guide | Zulrah Guide</title>
 	<link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -8,20 +11,22 @@
 			<a href="./">Rotation Guide</a>
 			<a href="#">Gear Guide</a>
 		</header>
-		<nav class="gear-menu">
-			<li data-opens="gear-head" >Head</li>
-			<li data-opens="gear-neck" >Neck</li>
-			<li data-opens="gear-body" >Body</li>
-			<li data-opens="gear-legs" >Legs</li>
-			<li data-opens="gear-boots" >Boots</li>
-			<li data-opens="gear-cape" >Cape</li>
-			<li data-opens="gear-weapon" >Weapon</li>
-			<li data-opens="gear-shield" >Shield</li>
-			<li data-opens="gear-hands" >Hands</li>
+		<nav>
+			<ul class="gear-menu">
+				<li data-opens="gear-head" >Head</li>
+				<li data-opens="gear-neck" >Neck</li>
+				<li data-opens="gear-body" >Body</li>
+				<li data-opens="gear-legs" >Legs</li>
+				<li data-opens="gear-boots" >Boots</li>
+				<li data-opens="gear-cape" >Cape</li>
+				<li data-opens="gear-weapon" >Weapon</li>
+				<li data-opens="gear-shield" >Shield</li>
+				<li data-opens="gear-hands" >Hands</li>
+			</ul>
 		</nav>
 		<div class="gear-content">
 			<div class="gear-content-background">
-				<div class="gear-head">
+				<section class="gear-head">
 					<h1>Head Slot Magic Gear</h1>
 					<figure>
 						<img src="img/gear/ancestral_hat.png" alt="Ancestral Hat">
@@ -51,8 +56,8 @@ <h1>Head Slot Range Gear</h1>
 						This is the best option by far, along with the rest of
 						the range void set.
 					</figure>
-				</div>
-				<div class="gear-neck">
+				</section>
+				<section class="gear-neck">
 					<h1>Neck Slot Magic Gear</h1>
 					<figure>
 						<img src="img/gear/occult_necklace.png" alt="Occult Necklace">
@@ -85,8 +90,8 @@ <h1>Neck Slot Range Gear</h1>
 						<div class="price cheap">Cheap</div>
 						A good cheap option with a range bonus of +10.
 					</figure>
-				</div>
-				<div class="gear-body">
+				</section>
+				<section class="gear-body">
 					<h1>Body Slot Magic Gear</h1>
 					<figure>
 						<img src="img/gear/ancestral_robe_top.png" alt="Ancestral Robe Top">
@@ -113,8 +118,8 @@ <h1>Body Slot Range Gear</h1>
 						This is the best option by far, along with the rest of
 						the range void set.
 					</figure>
-				</div>
-				<div class="gear-legs">
+				</section>
+				<section class="gear-legs">
 					<h1>Legs Slot Magic Gear</h1>
 					<figure>
 						<img src="img/gear/ancestral_robe_bottom.png" alt="Ancestral Robe Bottom">
@@ -142,8 +147,8 @@ <h1>Legs Slot Range Gear</h1>
 						This is the best option by far, along with the rest of
 						the range void set.
 					</figure>
-				</div>
-				<div class="gear-boots">
+				</section>
+				<section class="gear-boots">
 					<h1>Boots Slot Magic Gear</h1>
 					<figure>
 						<img src="img/gear/eternal_boots.png" alt="Eternal Boots">
@@ -186,8 +191,8 @@ <h1>Boots Slot Range Gear</h1>
 						Make everyone jealous with this sick swag. Range bonus
 						of +3.
 					</figure>
-				</div>
-				<div class="gear-cape">
+				</section>
+				<section class="gear-cape">
 					<h1>Cape Slot Magic Gear</h1>
 					<figure>
 						<img src="img/gear/imbued_saradomin_cape.png" alt="Imbued Saradomin Cape">
@@ -210,8 +215,8 @@ <h1>Cape Slot Range Gear</h1>
 						<figcaption>Ava's Accumulator</figcaption>
 						A standard accumulator, with a range bonus of +4.
 					</figure>
-				</div>
-				<div class="gear-weapon">
+				</section>
+				<section class="gear-weapon">
 					<h1>Weapon Slot Magic Gear</h1>
 					<figure>
 						<img src="img/gear/trident_of_the_swamp.png" alt="Trident of the Swamp">
@@ -252,8 +257,8 @@ <h1>Weapon Slot Range Gear</h1>
 						A good cheap option. Use the best bolts within your
 						price range. Range bonus of +90.
 					</figure>
-				</div>
-				<div class="gear-shield">
+				</section>
+				<section class="gear-shield">
 					<h1>Shield Slot Magic Gear</h1>
 					<figure>
 						<img src="img/gear/arcane_spirit_shield.png" alt="Arcane Spirit Shield">
@@ -288,8 +293,8 @@ <h1>Shield Slot Magic Gear</h1>
 						Still kind of expensive but a great option with a magic
 						bonus of +8.
 					</figure>
-				</div>
-				<div class="gear-hands">
+				</section>
+				<section class="gear-hands">
 					<h1>Shield Slot Magic Gear</h1>
 					<figure>
 						<img src="img/gear/tormented_bracelet.png" alt="Tormented Bracelet">
@@ -310,7 +315,7 @@ <h1>Shield Slot Range Gear</h1>
 						This is the best option by far, along with the rest of
 						the range void set.
 					</figure>
-				</div>
+				</section>
 			</div>
 		</div>
 		<footer>

diff --git a/index.html b/index.html
@@ -1,5 +1,8 @@
-<html>
+<!DOCTYPE html>
+<html lang="en-US">
 <head>
+	<meta charset="UTF-8">
+	<title>Rotation Guide | Zulrah Guide</title>
 	<link rel="stylesheet" href="style.css">
 </head>
 <body>
@@ -20,36 +23,36 @@ <h1>Zulrah Guide</h1>
 				</ul>
 			</div>
 		</div>
-		<div class="intro">
-			<h2>Welcome to ZulrahGuide</h2>
+		<aside class="intro">
+			<b>Welcome to ZulrahGuide</b>
 			This website is skinny for a reason. Decrease your browser's width
 			to have the guide and Runescape open on your screen. Click each
 			phase possibility as they come, and the guide will update to the
 			correct rotation. Click reset to start over.
 			<div data-closes="intro" class="hide-intro">I get it, hide intro</div>
-		</div>
+		</aside>
 		<div class="guide">
 			<div class="phase-1">
-				<h3>Phase 1</h3>
+				<p class="pattern-header">Phase 1</p>
 				<img src="img/zul-all-1.png" alt="">
 			</div>
 			<div class="phase-2 phase-options">
-				<h3>Phase 2 Possibilities (Click One)</h3>
+				<p class="pattern-header">Phase 2 Possibilities (Click One)</p>
 				<img data-opens="phase-3 phase-4" src="img/zul-oneandtwo-2.png" alt="">
 				<img data-opens="pattern-3" src="img/zul-three-2.png" alt="">
 				<img data-opens="pattern-4" src="img/zul-four-2.png" alt="">
 			</div>
 			<div class="phase-3">
-				<h3>Phase 3</h3>
+				<p class="pattern-header">Phase 3</p>
 				<img src="img/zul-oneandtwo-3.png" alt="">
 			</div>
 			<div class="phase-4 phase-options">
-				<h3>Phase 4 Possibilities (Click One)</h3>
+				<p class="pattern-header">Phase 4 Possibilities (Click One)</p>
 				<img data-opens="pattern-1" src="img/zul-one-4.png" alt="">
 				<img data-opens="pattern-2" src="img/zul-two-4.png" alt="">
 			</div>
 			<div class="pattern-1">
-				<h3>Pattern 1</h3>
+				<p class="pattern-header">Pattern 1</p>
 				<img class="completed" src="img/zul-all-1.png" alt="">
 				<img class="completed" src="img/zul-oneandtwo-2.png" alt="">
 				<img class="completed" src="img/zul-oneandtwo-3.png" alt="">
@@ -62,7 +65,7 @@ <h3>Pattern 1</h3>
 				<img src="img/zul-oneandtwo-2.png" alt="">
 			</div>
 			<div class="pattern-2">
-				<h3>Pattern 2</h3>
+				<p class="pattern-header">Pattern 2</p>
 				<img class="completed" src="img/zul-all-1.png" alt="">
 				<img class="completed" src="img/zul-oneandtwo-2.png" alt="">
 				<img class="completed" src="img/zul-oneandtwo-3.png" alt="">
@@ -75,7 +78,7 @@ <h3>Pattern 2</h3>
 				<img src="img/zul-oneandtwo-2.png" alt="">
 			</div>
 			<div class="pattern-3">
-				<h3>Pattern 3</h3>
+				<p class="pattern-header">Pattern 3</p>
 				<img class="completed" src="img/zul-all-1.png" alt="">
 				<img class="completed" src="img/zul-three-2.png" alt="">
 				<img src="img/zul-three-3.png" alt="">
@@ -89,7 +92,7 @@ <h3>Pattern 3</h3>
 				<img src="img/zul-oneandtwo-3.png" alt="">
 			</div>
 			<div class="pattern-4">
-				<h3>Pattern 4</h3>
+				<p class="pattern-header">Pattern 4</p>
 				<img class="completed" src="img/zul-all-1.png" alt="">
 				<img class="completed" src="img/zul-four-2.png" alt="">
 				<img src="img/zul-four-3.png" alt="">

diff --git a/package.json b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "zulrahguide",
+  "version": "0.0.0",
+  "description": "zulrahguide.com, re-created and open-sourced",
+  "bugs": "https://github.com/nightfirecat/zulrahguide/issues",
+  "license": "AGPL-3.0",
+  "author": "Jordan Atwood <[email protected]>",
+  "repository": "[email protected]:nightfirecat/zulrahguide.git",
+  "devDependencies": {
+    "@htmlacademy/editorconfig-cli": "^1.0.0",
+    "csslint": "^1.0.5",
+    "eslint": "^4.19.1",
+    "w3cjs": "^0.4.0"
+  }
+}
diff --git a/script.js b/script.js
@@ -1,7 +1,7 @@
 const CLICKABLE_IMAGES_SELECTOR = '.phase-options img',
 	GUIDE_ELEMENTS_SELECTOR = '.guide > div',
-	GEAR_MENU_ITEMS_SELECTOR = '.gear-menu > li',
-	GEAR_ELEMENTS_SELECTOR = '.gear-content-background > div',
+	GEAR_MENU_ITEMS_SELECTOR = '.gear-menu li',
+	GEAR_ELEMENTS_SELECTOR = '.gear-content-background section',
 	HIDDEN_ELEMENT_STYLE = 'display: none;',
 	VISIBLE_ELEMENT_STYLE = 'display: block;';