Implemented tagline easter eggs

public/index.html

@@ -7,7 +7,7 @@
 		<link rel="stylesheet" href="/styles/shared.css"/>
 
 		<title>Kingdom Battles!</title>
-		<meta name="description" content="{1}" />
+		<meta name="description" content="Build Your Kingdom!" />
 		<meta name="author" content="Kayne Ruse" />
 		<meta name="keywords" content="gaming, browser game, persistent browser based game, free game" />
 <!--
@@ -19,7 +19,7 @@
 		<meta property="og:image" content="https://kingdombattles.net/img/flag_scaled.png" />
 
 		<meta property="og:title" content="Kingdom Battles!" />
-		<meta property="og:description" content="{1}" />
+		<meta property="og:description" content="Build Your Kingdom!" />
 
 		<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 		<script>

public/styles/shared.css

@@ -361,3 +361,30 @@ pre {
 		color-stop(1.00, violet)
 	);
 }
+
+.marquee {
+	-moz-animation: marquee 10s linear infinite;
+	-webkit-animation: marquee 10s linear infinite;
+	animation: marquee 10s linear infinite;
+	}
+	@-moz-keyframes marquee {
+		0% { transform: translateX(100%); }
+		100% { transform: translateX(-100%); }
+	}
+	@-webkit-keyframes marquee {
+		0% { transform: translateX(100%); }
+		100% { transform: translateX(-100%); }
+	}
+	@keyframes marquee {
+		0% {
+			-moz-transform: translateX(100%);
+			-webkit-transform: translateX(100%);
+			transform: translateX(100%) }
+		100% {
+			-moz-transform: translateX(-100%);
+			-webkit-transform: translateX(-100%);
+			transform: translateX(-100%); }
+		}
+	}
+}
+

server/index.js

@@ -6,7 +6,6 @@ let express = require('express');
 let app = express();
 let http = require('http').Server(app);
 let bodyParser = require('body-parser');
-let fs = require('fs');
 let path = require('path');
 
 //utilities
@@ -77,6 +76,16 @@ app.post('/badgesownedrequest', badges.ownedRequest(connection));
 app.post('/badgeselectactiverequest', badges.selectActiveBadge(connection));
 badges.runBadgeTicks(connection);
 
+//a bit of fun
+const taglineEngine = replacement(require('./taglines.json'));
+app.get('/taglinerequest', (req, res) => {
+	res.send(taglineEngine('tagline'));
+});
+
+app.get('/easteregg', (req, res) => {
+	res.send(taglineEngine('easteregg'));
+});
+
 //static directories
 app.use('/content', express.static(path.resolve(__dirname + '/../public/content')) );
 app.use('/img', express.static(path.resolve(__dirname + '/../public/img')) );
@@ -92,12 +101,9 @@ app.get('/app.bundle.js.map', (req, res) => {
 	res.sendFile(path.resolve(__dirname + `/../public/${req.originalUrl}`));
 });
 
-//fallback to index.html template (with randomization)
+//fallback to index.html
-const indexTemplate = fs.readFileSync(path.resolve(__dirname + '/../public/index.html.t'), 'utf8');
-const replacementEngine = replacement(require('./website_descriptions.json'));
-
 app.get('*', (req, res) => {
-	res.send(stringReplacement(indexTemplate, replacementEngine('description') ));
+	res.sendFile(path.resolve(__dirname + '/../public/index.html'));
 });
 
 //startup

server/taglines.json

@@ -0,0 +1,100 @@
+{
+	"tagline": [
+		"Build Your Kingdom!",
+		"This tagline is randomized!",
+		"A game in ~~early~~ development!",
+		"...or is it Battle Kingdoms?",
+		"Fun for the whole family!",
+		"Attention to detail!",
+		"Not a Minecraft clone!",
+		"Totally original concept!",
+		"As seen on Twitch.tv!",
+		"Pretty fun on average!",
+		"Coming Soon: An Endgame!",
+		"Written in Javascript!",
+		"Powered by Nodejs!",
+		"A major cause for concern!",
+		"Politically neutral!",
+		"Spies ARE useful!",
+		"Made by Kayne Ruse!",
+		"Hi Mum!",
+		"Easter Eggs!",
+		"High in carbs!",
+		"Low in fat!",
+		"Markdown files!",
+		"Callback Hell!",
+		"Solo and hungry!",
+		"Also try [Candy Raid: The Factory!](https://candyraid.com/)",
+		"Mobile friendly!",
+		"Dolphin Free!",
+		"May the force be with you!",
+		"Get in the robot Shinji!",
+		"Closed source!",
+		"!dezimodnar si enilgat sihT",
+		"Bigger than the Beatles!",
+		"Over 300 players!",
+		"CFC Free!",
+		"You activated my trap card!",
+		"No known biohazards!",
+		"Send cat pics!",
+		"The lion, the witch and the wardrobe!",
+		"Inspired by Kings of Chaos!",
+		"Persistent Browser Based Game!",
+		"Check out [/r/PBBG](https://www.reddit.com/r/pbbg)!",
+		"A great timewaster!",
+		"Check out the official [KR Game Studios Discord!](https://discord.gg/FQmz8TN)",
+		"I haven't eaten potato chips in years!",
+		"I spell favourite with a 'u'!",
+		"May contain nuts!",
+		"Shout out to Evan!",
+		"Shout out to [Shy Monster!](https://www.shymonstermusic.com/)",
+		"Faster than a speeding bullet!",
+		"We're going to need a bigger boat!",
+		"@KRGameStudios",
+		"Gotta catch 'em all!",
+		"Digimon! Digital Monsters!",
+		"Gloomhaven was alright, but not for me.",
+		"Not to be confused with Mario + Rabbids: Kingdom Battle!",
+		"Is this the real life? Is this just fantasy?",
+		"I miss Sanctum.",
+		"I wrote a [discord bot!](https://github.com/ratstail91/discordbot)",
+		"Toilet paper in front or behind?",
+		"Also try Hollow Knight!",
+		"My favourite game is To The Moon!",
+		"Officially unofficial!",
+		"I have a [printed book!](https://www.drivethrurpg.com/product/263098/Cant-Anyone-Save-The-World-2nd-Edition) The reviews are terrible!",
+		"Graphic design is my passion!",
+		"Will smith will smith? Smith will smith will!",
+		"Cheezy pickup lines!",
+		"No waiting in line!",
+		"We have a [404 page!](/404)",
+		"More suspensful than Death Note!",
+		"I Am Error!",
+		"Here lies Link",
+		"No animals were harmed in the making of this game.",
+		"fetch('/taglinerequest').then(res => res.text()).then(text => this.setState({ tagline: text }).catch(console.error);",
+		"*hacker voice*: I'm in.",
+		"I am Iron Man!",
+		"OMG! BREATH OF THE WILD SEQUEL!",
+		"For the love of god, [don't click this!](https://youtu.be/dQw4w9WgXcQ)",
+		"[I'm looking for a job!](https://krgamestudios.com/content/Gamedev.pdf)",
+		"Who is Meady?",
+		"I am Meady.",
+		"[Click here for an example of recursion.](/)",
+		"All I wanna do, is see you turn into, a giant woman!",
+		"Frying pan? Drying pan!",
+		"Machine learning!",
+		"Blockchain! Blockchain! Blockchain! Ok, now give me money.",
+		"My favourite book series as a kid was Deltora Quest!",
+		"function ack(m, n) { if (m == 0) return n+1; if (n == 0) return ack(m - 1, 1); return ack(m - 1, ack(m, n - 1)); }",
+		"Accept no substitutes!",
+		"Powered by hamsters!",
+		"Give a little whistle!",
+		"A spoonful of sugar makes the medicine go down!",
+		"Kingdom Battles, where kingdoms battle in kingdom battles!",
+		"marquee",
+		"rainbow",
+		"curl https://kingdombattles.net/easteregg"
+	],
+	"easteregg": "You found it!"
+}

server/website_descriptions.json

@@ -1,6 +0,0 @@
-{
-	"description": [
-		"Build Your Kingdom!",
-		"These Descriptions Are Random!"
-	]
-}

src/components/pages/home.jsx

@@ -11,8 +11,15 @@ class Home extends React.Component {
 		super(props);
 		this.state = {
 			warning: '', //TODO: unified warning?
-			fetch: null
+			fetch: null,
+			tagline: ''
 		};
+
+		fetch('/taglinerequest')
+			.then(res => res.text())
+			.then(text => this.setState({ tagline: text }))
+			.catch(console.error)
+		;
 	}
 
 	componentDidUpdate(prevProps, prevState, snapshot) {
@@ -24,6 +31,17 @@ class Home extends React.Component {
 			display: this.state.warning.length > 0 ? 'flex' : 'none'
 		};
 
+		//A bit of fun
+		let Tagline = () => {
+			if (this.state.tagline === 'marquee') {
+				return (<p className='marquee'><em>I hope this CSS marquee effect works in all browsers!</em></p>);
+			}
+			if (this.state.tagline === 'rainbow') {
+				return (<p className='centered rainbowText'><em>I hope this CSS rainbow effect works in all browsers!</em></p>);
+			}
+			return (<p className='centered'><em><Markdown source={this.state.tagline} escapeHtml={true} /></em></p>);
+		}
+
 		return (
 			<div className='page'>
 				<div className='sidePanelPage'>
@@ -37,7 +55,7 @@ class Home extends React.Component {
 						</div>
 
 						<h1 className='centered'>About</h1>
-						<p className='centered'><em>A game in <strike>early</strike> development.</em></p>
+						<Tagline />
 						<br />
 						<Markdown url='/content/blurb.md' />
 						<h1 className='centered'>News</h1>