build basic parallax game page template

SaitoTech · Apr 16, 2024 · a0c13ad · a0c13ad
1 parent a5f112b
commit a0c13ad
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 1 deletion.
diff --git a/lib/templates/gametemplate-src/index.js b/lib/templates/gametemplate-src/index.js
@@ -76,6 +76,7 @@ module.exports = (app, mod, build_number, og_card) => {
         height: 100vh;
         background: black;
         z-index: 16;
+        top: 0;
       }
 
       .game-loader-backdrop {
@@ -114,7 +115,7 @@ module.exports = (app, mod, build_number, og_card) => {
   </head>
   
   <body>
-    ${mod.returnDefaultHTML()}
+    ${mod.createSplashScreen()}
     <div id="game-loader-screen">
       <div class="game-loader-backdrop" style="background-image: url(/${mod.returnSlug()}/img/arcade/arcade.jpg);"></div>
       <div id="saito-loader-container" class="saito-loader-container"> 

diff --git a/lib/templates/gametemplate.js b/lib/templates/gametemplate.js
@@ -475,6 +475,8 @@ try {
 			await header.initialize(this.app);
 			header.header_location = "/";
 
+			document.querySelector("body").classList.add("scrollable-page");
+
 			if (document.getElementById("game-loader-screen")){
 				await header.render();
 				setTimeout(()=> {
@@ -1021,6 +1023,38 @@ try {
 	}
 
 
+	createSplashScreen() {
+		return `
+			<div class="saito-splash-image full" style="background-image: url(/${this.returnSlug()}/img/arcade/arcade.jpg);">
+				<div class="saito-splash-section-title">
+					<h1>${this.returnName()}</h1>
+					<h3>${this.categories.replace('Games ', '').split(' ').reverse().join(' ')}</h3>
+				</div>
+			</div>
+			<div class="saito-splash-info">
+				<h4>About ${this.returnName()}</h4>
+				<p>${this.description}</p>
+			</div>
+			<div class="saito-splash-image" style="background-image: url(/${this.returnSlug()}/img/arcade/arcade-banner-background.png);">
+				<div class="saito-splash-section-title">
+					<h3>Leaderboard</h3>
+				</div>
+			</div>
+			<div class="saito-splash-info">
+				<div class="leaderboard-container"></div>
+			</div>
+			<div class="saito-splash-image" style="background-image: url(/${this.returnSlug()}/img/arcade/arcade-banner-background.png);">
+				<div class="saito-splash-section-title">
+					<h3>How to Play</h3>
+				</div>
+			</div>
+			<div class="saito-splash-info">
+				${this.returnGameRulesHTML()}
+			</div>
+
+		`;
+	}
+
 	async injectGameHTML(template){
 		await this.timeout(500);
 

diff --git a/web/saito/css-imports/game-layout.css b/web/saito/css-imports/game-layout.css
@@ -22,6 +22,12 @@ body {
   max-width: -webkit-fill-available;
 }
 
+body.scrollable-page {
+  overflow: auto;
+  position: relative;
+  height: 100vh;
+}
+
 .main {
   margin-top: unset;
   padding: unset;
@@ -149,3 +155,55 @@ div.h3{
   left: 0;
   width: 20vw;
 }
+
+
+
+/***************************
+* Standardized Landing Pages
+****************************/
+.saito-splash-image {
+  background-position: center;
+  background-attachment: fixed;
+  background-size: cover;
+  position: relative;
+  min-height: min(400px, 50%);
+}
+
+.saito-splash-image.full{
+  height: 100%;
+}
+
+
+.saito-splash-section-title{
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  text-align: center;
+  transform: translateY(-50%);
+  color: var(--saito-white);
+  text-shadow: 2px 4px 2px black;
+}
+
+.saito-splash-info {
+  position: relative;
+  background-color: var(--saito-background-color);
+  color: var(--saito-font-color);
+  padding: min(5rem, 10vh) min(8rem, 10vw);
+}
+
+.saito-splash-info p {
+  font-size: 18px;
+  margin: 1rem 0;
+  line-height: 16px;
+}
+
+.saito-splash-info h4 {
+  margin-bottom: 3rem;
+}
+
+@media screen and (max-width: 600px) {
+  .saito-splash-image{
+    background-attachment: scroll;
+    min-height: min(200px, 25%);
+  }
+}