Documentation

README.md

@@ -1,13 +1,51 @@
 # Doom Nukem CSS
 
-3D shooter written with HTML/CSS/Typescript that renders via CSS transforms, no canvas 😅
+3D shooter written with HTML/CSS/Typescript that renders scene using HTML and CSS, no canvas 😅
 
-## Control
+![main](documentation_assets/main.gif)
 
+[Live demo](https://yurkagon.github.io/Doom-Nukem-CSS/)
 
-`WASD (or arrows)` - to move
+Its not playable like a normal game, the whole level is empty but anyway I guess it should be an interesting thing :)
 
-`QE (or mouse)` - to rotate the camera
+## Features
 
-`Mouse left button` - to shoot
+- Doom-like menu 😎
+- Camera
+- Player movement
+- Levels
+- Collision (for player or enemies)
+- Sprites
+- Enemies
+- Weapons (only 2 ones: pistol and shotgun)
+- Shooting
+- Health
+- Night level
 
+## Technologies used
+
+The Doom like menu is built by React
+
+To manipulate with the 3D level I use only JQuery
+
+### Rendering
+
+Everything you see is built by HTML5 \<div>
+
+![div-structure](documentation_assets/div-structure.png)
+
+![wall-example](documentation_assets/wall-example.png)
+
+### Night level
+
+![night-level](documentation_assets/night-level.gif)
+
+## Also
+
+- [Check my Raycasting engine written in HTML using React](https://github.com/yurkagon/ReactCasting)
+
+## Contributors
+
+<a href="https://github.com/yurkagon/Doom-Nukem-CSS/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=yurkagon/Doom-Nukem-CSS" />
+</a>

src/classes/Settings/Settings.ts

@@ -2,9 +2,13 @@ import { observable } from "mobx";
 import { LevelName } from "classes/Level";
 
 class Settings {
-  public productionMode = false;
+  public productionMode = true;
+
+  /*
+    disabled because of low speed
+  */
+  @observable public wall_shadow = false;
 
-  @observable public wall_shadow = true;
   @observable public backgroundMusic = true;
 
   @observable public noclip: boolean = true;
@@ -13,7 +17,7 @@ class Settings {
   @observable public enemy_ai: boolean = true;
 
   public skipMenuOnLoad: boolean = true;
-  public developmentAutoLoadLevel: LevelName = "level_2";
+  public developmentAutoLoadLevel: LevelName = "level_1";
   public positionDebugger: boolean = false;
   public savePosition: boolean = true;
 

src/classes/Sprite/style.scss

@@ -1,4 +1,6 @@
 .sprites {
+  transform-style: preserve-3d;
+
   .sprite-cont {
     transform-style: preserve-3d;
 

src/classes/Wall/style.scss

@@ -1,3 +1,7 @@
+@mixin pseudo-shadow {
+  filter: brightness(0.5);
+}
+
 .wall {
   transform-style: preserve-3d;
 }
@@ -9,14 +13,15 @@
 
   backface-visibility: hidden;
 
-  image-rendering: initial;
+  image-rendering: pixelated;
 }
 
 .wall__face--front {
   transform: rotateY(0deg) translateZ(50px);
 }
 .wall__face--right {
   transform: rotateY(90deg) translateZ(50px);
+  @include pseudo-shadow;
 }
 .wall__face--back {
   transform: rotateY(180deg) translateZ(50px);
@@ -25,6 +30,8 @@
 .wall__face--left {
   transform: rotateY(-90deg) translateZ(50px);
   background-position-x: 51px;
+
+  @include pseudo-shadow;
 }
 
 // textures