3 değiştirilmiş dosya ile 45 ekleme ve 5 silme
Birleşik Görünüm
Diff Seçenekleri
-
+14 -0macrovision.css
-
+6 -5macrovision.html
-
+25 -0macrovision.js
+ 14
- 0
macrovision.css
Dosyayı Görüntüle
| @@ -2,6 +2,7 @@ html { | |||||
| height: 100%; | height: 100%; | ||||
| overflow-x: hidden; | overflow-x: hidden; | ||||
| overflow-y: hidden; | overflow-y: hidden; | ||||
| color: #eee; | |||||
| } | } | ||||
| body { | body { | ||||
| @@ -25,17 +26,30 @@ body { | |||||
| text-align: center; | text-align: center; | ||||
| } | } | ||||
| .entity.selected { | |||||
| box-shadow: 10px 10px 5px grey; | |||||
| } | |||||
| #world { | #world { | ||||
| min-width: 90vw; | min-width: 90vw; | ||||
| min-height: 80vh; | min-height: 80vh; | ||||
| } | } | ||||
| #menubar { | #menubar { | ||||
| display: flex; | |||||
| flex-direction: row; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| min-height: 10vh; | min-height: 10vh; | ||||
| min-width: 100vw; | min-width: 100vw; | ||||
| background: #222; | background: #222; | ||||
| } | } | ||||
| .menu-item { | |||||
| font-size: 24px; | |||||
| color: #ccc; | |||||
| } | |||||
| #display { | #display { | ||||
| width: 100%; | width: 100%; | ||||
| height: 100%; | height: 100%; | ||||
+ 6
- 5
macrovision.html
Dosyayı Görüntüle
| @@ -6,6 +6,7 @@ | |||||
| <title>Macrovision</title> | <title>Macrovision</title> | ||||
| <link rel="stylesheet" href="reset.css"> | <link rel="stylesheet" href="reset.css"> | ||||
| <link rel="stylesheet" href="macrovision.css"> | <link rel="stylesheet" href="macrovision.css"> | ||||
| <script src="macrovision.js"></script> | |||||
| <meta name="theme-color" content="#000000" /> | <meta name="theme-color" content="#000000" /> | ||||
| <meta name="description" content="How big are they anyway?" /> | <meta name="description" content="How big are they anyway?" /> | ||||
| <meta property="og:title" content="Macrovision" /> | <meta property="og:title" content="Macrovision" /> | ||||
| @@ -16,14 +17,14 @@ | |||||
| <body> | <body> | ||||
| <div id="menubar"> | <div id="menubar"> | ||||
| this is a menu | |||||
| <div class="menu-item">This will be a menu at some point</div> | |||||
| </div> | </div> | ||||
| <div id="world"> | <div id="world"> | ||||
| <div class="entity"> | |||||
| I'm a box | |||||
| <div id="entities"> | |||||
| </div> | </div> | ||||
| <canvas id="display"> | |||||
| </canvas> | |||||
| <canvas id="display"> | |||||
| </canvas> | |||||
| </div> | </div> | ||||
| </body> | </body> | ||||
| </html> | </html> | ||||
+ 25
- 0
macrovision.js
Dosyayı Görüntüle
| @@ -0,0 +1,25 @@ | |||||
| let selected = null; | |||||
| function select(entity) { | |||||
| if (selected) { | |||||
| selected.classList.remove("selected"); | |||||
| } | |||||
| selected = entity; | |||||
| selected.classList.add("selected"); | |||||
| } | |||||
| function createEntity() { | |||||
| const entity = document.createElement("div"); | |||||
| entity.classList.add("entity"); | |||||
| entity.addEventListener("click", e => select(e.target)); | |||||
| const world = document.querySelector("#entities"); | |||||
| world.appendChild(entity); | |||||
| } | |||||
| document.addEventListener("DOMContentLoaded", () => { | |||||
| createEntity(); | |||||
| }); | |||||