Home Explore Help
Sign In
games
/
typingfreaks
mirror of https://github.com/thatsmydoing/typingfreaks.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Implement background transitioning

Thomas Dy 7 years ago
parent
69169fdfed
commit
a9dbff7673
4 changed files with 52 additions and 6 deletions
Split View Show Diff Stats
  1. 1 0
      dist/index.html
  2. 16 1
      dist/style.css
  3. 31 0
      src/background.ts
  4. 4 5
      src/game.ts

+ 1 - 0
dist/index.html
View File 

@@ -5,6 +5,7 @@
 
   </head>
 
   <body>
 
     <div id="container">
 
+      <div id="background"></div>
 
       <div id="loading">Loading...</div>
 
       <div id="select"></div>
 
       <div id="game"></div>

+ 16 - 1
dist/style.css
View File 

@@ -3,7 +3,6 @@
 
   --highlight-color: red;
 
 
   position: relative;
 
-  background-color: black;
 
   color: var(--base-color);
 
   height: 450px;
 
   width: 800px;
 
@@ -28,6 +27,22 @@
 
   opacity: 0;
 
 }
 
 
+#background {
 
+  background-color: black;
 
+}
 
+
 
+#background div {
 
+  position: absolute;
 
+  height: 100%;
 
+  width: 100%;
 
+  opacity: 0;
 
+  transition: opacity 0.5s linear;
 
+}
 
+
 
+#background div.show {
 
+  opacity: 1;
 
+}
 
+
 
 .kana {
 
   display: inline-block;
 
   position: relative;

+ 31 - 0
src/background.ts
View File 

@@ -0,0 +1,31 @@
 
+namespace background {
 
+  export class BackgroundManager {
 
+    element: HTMLElement;
 
+    last: HTMLElement | null;
 
+    next: HTMLElement;
 
+
 
+    constructor(element: HTMLElement) {
 
+      this.element = element;
 
+      this.last = null;
 
+      this.next = document.createElement('div');
 
+      this.element.appendChild(this.next);
 
+    }
 
+
 
+    setBackground(background: string) {
 
+      if (background.indexOf('.') >= 0) {
 
+        background = `url(${background}), black`;
 
+      }
 
+      this.next.style.background = background;
 
+      this.next.classList.add('show');
 
+      if (this.last != null) {
 
+        this.last.classList.remove('show');
 
+        this.last.addEventListener('transitionend', (event) => {
 
+          this.element.removeChild(event.target as Node);
 
+        });
 
+      }
 
+      this.last = this.next;
 
+      this.next = document.createElement('div');
 
+      this.element.appendChild(this.next);
 
+    }
 
+  }
 
+}

+ 4 - 5
src/game.ts
View File 

@@ -1,6 +1,7 @@
 
 /// <reference path="level.ts" />
 
 /// <reference path="audio.ts" />
 
 /// <reference path="display.ts" />
 
+/// <reference path="background.ts" />
 
 
 namespace game {
 
   enum GameState {
 
@@ -55,6 +56,7 @@ namespace game {
 
     }
 
 
     finishLoading(): void {
 
+      this.controller.bgManager.setBackground(this.controller.config.background);
 
       let loadingElement = this.controller.container.querySelector('#loading');
 
       loadingElement.addEventListener('transitionend', (event) => this.controller.onConfigLoad());
 
       loadingElement.classList.add('finished');
 
@@ -86,12 +88,14 @@ namespace game {
 
     configUrl: string;
 
     config: level.Config | null;
 
     audioManager: audio.AudioManager;
 
+    bgManager: background.BackgroundManager;
 
     assets: GameSounds | null;
 
 
     constructor(container: HTMLElement, configUrl: string) {
 
       this.container = container;
 
       this.configUrl = configUrl;
 
       this.audioManager = new audio.AudioManager();
 
+      this.bgManager = new background.BackgroundManager(container.querySelector('#background'));
 
     }
 
 
     start(): void {
 
@@ -101,11 +105,6 @@ namespace game {
 
 
     onConfigLoad(): void {
 
       let config = this.config;
 
-      let background = config.background;
 
-      if (background.indexOf('.') >= 0) {
 
-        background = `url(${background}), black`;
 
-      }
 
-      this.container.style.background = background;
 
       this.container.style.setProperty('--base-color', config.baseColor);
 
       this.container.style.setProperty('--highlight-color', config.highlightColor);