Refactor splash and win screens + add collection page

oskarrough · Aug 27, 2022 · 05dad3b · 05dad3b
1 parent 6a2f3a0
commit 05dad3b
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 68 deletions.
diff --git a/public/cards.html → public/collection.html b/public/cards.html → public/collection.html
@@ -25,7 +25,8 @@
 
 		const Cardss = (props) => html`
 			<article class="Splash">
-				<h2>${cards.length} Cards</h2>
+				<h2>${cards.length} Card Collection</h2>
+				<p><button><a href="/">Back</a></button></p>
 				<div class="Cards Cards--grid">
 					${cards.map(card => Card(card))}
 				</div>

diff --git a/public/content/dungeon-encounters.js b/public/content/dungeon-encounters.js
@@ -4,12 +4,12 @@ import {MonsterRoom, Monster} from '../game/dungeon-rooms.js'
 import {random} from '../game/utils.js'
 
 // Hello. With the imported functions above you can create a dungeon with different rooms and monsters.
-// This file contains the example dungeon used in Slay the Web.
 
+// This is the dungeon currently used.
 export const dungeonWithMap = () => {
 	return Dungeon({
 		width: 6,
-		height: 7,
+		height: 10,
 		minRooms: 3,
 		maxRooms: 4,
 		customPaths: '0235',

diff --git a/public/game/dungeon.js b/public/game/dungeon.js
@@ -14,6 +14,8 @@ const defaultOptions = {
 	// The type of node is randomly selected from `roomTypes`.
 	// M Monster, C Campfire, E Elite
 	roomTypes: 'MMMCE',
+	// The "customPaths" argument should be a string of indexes from where to draw the paths,
+	// For example "530" would draw three paths. First at index 5, then 3 and finally 0.
 	// customPaths: '123'
 }
 
@@ -124,8 +126,6 @@ export function generateGraph(props) {
 export function generatePaths(graph, customPaths) {
 	const paths = []
 
-	// The "customPaths" argument should be a string of indexes from where to draw the paths,
-	// For example "530" would draw three paths. First at index 5, then 3 and finally 0.
 	if (customPaths) {
 		Array.from(customPaths).forEach((value) => {
 			const path = findPath(graph, Number(value))

diff --git a/public/ui/index.js b/public/ui/index.js
@@ -1,6 +1,8 @@
 import {html, render, Component} from '../web_modules/htm/preact/standalone.module.js'
 import gsap from '../web_modules/gsap.js'
 import App from './app.js'
+import SplashScreen from './splash-screen.js'
+import WinScreen from './win-screen.js'
 
 // This component decides what to render:
 // A splash screen, a "win" screen or the game/app itself.
@@ -43,68 +45,6 @@ class Main extends Component {
 	}
 }
 
-class SplashScreen extends Component {
-	componentDidMount() {
-		gsap.from('.Splash--fadein', {duration: 0.5, autoAlpha: 0, scale: 0.95})
-		gsap.from('.Splash--fadein .Options', {
-			delay: 0.2,
-			duration: 1,
-			y: -20,
-			scale: 0.1,
-			ease: 'bounce',
-		})
-		gsap.to('.Splash-spoder', {delay: 5, x: 420, y: 60, duration: 3})
-	}
-	render(props, state) {
-		return html`
-			<article class="Splash Splash--fadein">
-				<h1 style="margin-top:20vh">Slay the Web</h1>
-				<h2>A card crawl adventure for you and your browser</h2>
-				<img class="Splash-spoder" src="ui/images/spoder.png" />
-				<ul class="Options">
-					${location.hash
-						? html`
-							<li><button autofocus onClick=${props.onContinue}>Continue Game</button></li>
-							<li><button autofocus onClick=${props.onNewGame}>New Game</a></li>
-				`
-						: html`<li><button autofocus onClick=${props.onNewGame}>Play</a></li>`}
-				</ul>
-				${!state.hideTutorial &&
-				html`
-					<div class="Splash-details Article">
-						<p><strong>What's going on?</strong></p>
-						<p>
-							Slay the Web is a single player card game where you fight monsters to reach the end of
-							the web. It's a game of planning and knowing when to play which card.
-						</p>
-						<p>
-							Every turn you draw 5 cards from your draw pile. Cards cost energy to play, and you
-							get 3 energy every turn.
-						</p>
-						<p>
-							Cards can deal damage to monsters, block enemy attacks or make them weak or vulnerable.
-							They can heal you and other things. You'll figure it out.
-						</p>
-						<p>Beware, whenever you end your turn, the monsters take turn.</p>
-						<p>
-							Should you manage to kill the monsters in a room before they end you, you'll proceed
-							to the next room. Maybe there will be rewards. Can you reach the end?
-						</p>
-						<p>The game is <a href="https://github.com/oskarrough/slaytheweb" rel="noreferrer" target="_blank">open source</a>.</p>
-					</div>
-				`}
-			</article>
-		`
-	}
-}
-
-const WinScreen = (props) => html`
-	<article class="Splash">
-		<h1>Well done. You won.</h1>
-		<p><button autofocus onClick=${props.onNewGame}>Play again</a></p>
-	</article>
-`
-
 render(html` <${Main} /> `, document.querySelector('#SlayTheWeb'))
 
 // enum GameMode {

diff --git a/public/ui/splash-screen.js b/public/ui/splash-screen.js
@@ -0,0 +1,67 @@
+import {html, render, Component} from '../web_modules/htm/preact/standalone.module.js'
+
+export default class SplashScreen extends Component {
+	componentDidMount() {
+		gsap.from('.Splash--fadein', {duration: 0.5, autoAlpha: 0, scale: 0.95})
+		gsap.from('.Splash--fadein .Options', {
+			delay: 0.2,
+			duration: 1,
+			y: -20,
+			scale: 0.1,
+			ease: 'bounce',
+		})
+		gsap.to('.Splash-spoder', {delay: 5, x: 420, y: 60, duration: 3})
+	}
+	render(props, state) {
+		return html`
+			<article class="Splash Splash--fadein">
+				<h1 style="margin-top:8vh">Slay the Web</h1>
+				<h2>A card crawl adventure for you and your browser</h2>
+				<img class="Splash-spoder" src="ui/images/spoder.png" />
+				<ul class="Options">
+					${
+						location.hash
+							? html`
+							<li><button autofocus onClick=${props.onContinue}>Continue Game</button></li>
+							<li><button autofocus onClick=${props.onNewGame}>New Game</a></li>
+				`
+							: html`<li><button autofocus onClick=${props.onNewGame}>Play</a></li>`
+					}
+					<li><button><a href="/collection.html">Collection</a></button></li>
+					<li><button onClick=${() => this.setState({showTutorial: !state.showTutorial})}>Manual</a></li>
+				</ul>
+				${
+					state.showTutorial &&
+					html`
+						<div class="Splash-details Article">
+							<p><strong>What's going on?</strong></p>
+							<p>
+								Slay the Web is a single player card game where you fight monsters to reach the end
+								of the web. It's a game of planning and knowing when to play which card.
+							</p>
+							<p>
+								Every turn you draw 5 cards from your draw pile. Cards cost energy to play, and you
+								get 3 energy every turn.
+							</p>
+							<p>
+								Cards can deal damage to monsters, block enemy attacks or make them weak or
+								vulnerable. They can heal you and other things. You'll figure it out.
+							</p>
+							<p>Beware, whenever you end your turn, the monsters take turn.</p>
+							<p>
+								Should you manage to kill the monsters in a room before they end you, you'll proceed
+								to the next room. Maybe there will be rewards. Can you reach the end?
+							</p>
+							<p>
+								The game is
+								<a href="https://github.com/oskarrough/slaytheweb" rel="noreferrer" target="_blank"
+									>open source</a
+								>.
+							</p>
+						</div>
+					`
+				}
+			</article>
+		`
+	}
+}
diff --git a/public/ui/styles/app.css b/public/ui/styles/app.css
@@ -326,7 +326,7 @@ h2 {
 	z-index: 2;
 }
 .Article {
-	margin-top: 24vh;
+	/* margin-top: 24vh; */
 	background: whitesmoke;
 	color: #222;
 	padding: 1em 2em;

diff --git a/public/ui/win-screen.js b/public/ui/win-screen.js
@@ -0,0 +1,10 @@
+import {html} from '../web_modules/htm/preact/standalone.module.js'
+
+const WinScreen = (props) => html`
+	<article class="Splash">
+		<h1>Well done. You won.</h1>
+		<p><button autofocus onClick=${props.onNewGame}>Play again</a></p>
+	</article>
+`
+
+export default WinScreen