chemicalcrux
/
macrovision
1
0
派生 0
代码 工单 5 合并请求 0 版本发布 10 百科 动态
浏览代码

Add logic for scaling things. Add peppers.

tags/v0.0.1
Fen Dweller 5 年前
父节点
82d92210e6
当前提交
0be0927ad1
共有 5 个文件被更改，包括 109 次插入 和 16 次删除
合并视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +2
    -3
      macrovision.css
  2. +5
    -2
      macrovision.html
  3. +59
    -11
      macrovision.js
  4. +43
    -0
      math.min.js
  5. 二进制
      pepper.png

+ 2
- 3
macrovision.css 查看文件

@@ -18,14 +18,12 @@ body {
.entity { .entity {
position: absolute; position: absolute;
--height: 100px; --height: 100px;
width: 50px;
background-color: red;
height: var(--height); height: var(--height);
text-align: center; text-align: center;
} }


.entity.selected { .entity.selected {
box-shadow: 10px 10px 5px grey;
filter: drop-shadow(0px 0px 10px gold);
} }


#world { #world {
@@ -46,6 +44,7 @@ body {
.menu-item { .menu-item {
font-size: 24px; font-size: 24px;
color: #ccc; color: #ccc;
margin: 20px;
} }


#display { #display {


+ 5
- 2
macrovision.html 查看文件

@@ -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="math.min.js"></script>
<script src="macrovision.js"></script> <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?" />
@@ -17,11 +18,13 @@


<body> <body>
<div id="menubar"> <div id="menubar">
<div class="menu-item">This will be a menu at some point</div>
<div class="menu-item" id="entity-name"></div>
<div class="menu-item" id="entity-author"></div>
<div class="menu-item" id="entity-height"></div>
</div> </div>
<div id="world"> <div id="world">
<div id="entities"> <div id="entities">
</div> </div>
<canvas id="display"> <canvas id="display">
</canvas> </canvas>


+ 59
- 11
macrovision.js 查看文件

@@ -1,9 +1,28 @@
let selected = null; let selected = null;
let selectedEntity = null;


let entityIndex = 0;


const config = {
height: math.unit(10, "meters")
}

const entities = {

}

function updateSizes() {
drawScale();
Object.entries(entities).forEach(([key, entity]) => {
const element = document.querySelector("#entity-" + key);
const canvasHeight = document.querySelector("#display").clientHeight;
const pixels = math.divide(entity.height, config.height).value * canvasHeight;
element.style.setProperty("--height", pixels + "px");
});
}
function drawScale() { function drawScale() {
function drawTicks(/** @type {CanvasRenderingContext2D} */ ctx) {
for (let y = ctx.canvas.clientHeight - 50; y >= 50; y -= 50) {
function drawTicks(/** @type {CanvasRenderingContext2D} */ ctx, pixelsPer) {
for (let y = ctx.canvas.clientHeight - 50; y >= 50; y -= pixelsPer) {
drawTick(ctx, 50, y); drawTick(ctx, 50, y);
} }
} }
@@ -38,6 +57,10 @@ function drawScale() {
/** @type {CanvasRenderingContext2D} */ /** @type {CanvasRenderingContext2D} */


const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");

const pixelsPer = (ctx.canvas.clientHeight - 100) / config.height.value;

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.scale(1,1); ctx.scale(1,1);
console.log(canvas.clientWidth); console.log(canvas.clientWidth);
ctx.canvas.width = canvas.clientWidth; ctx.canvas.width = canvas.clientWidth;
@@ -53,7 +76,7 @@ function drawScale() {
ctx.lineTo(ctx.canvas.clientWidth - 50, ctx.canvas.clientHeight - 50); ctx.lineTo(ctx.canvas.clientWidth - 50, ctx.canvas.clientHeight - 50);
ctx.stroke(); ctx.stroke();


drawTicks(ctx);
drawTicks(ctx, pixelsPer);
} }


function makeEntity() { function makeEntity() {
@@ -63,7 +86,8 @@ function makeEntity() {
location: { location: {
x: 0, x: 0,
y: 0 y: 0
}
},
height: math.unit(Math.random() * 2 + 1, "meters")
} }
return entityTemplate; return entityTemplate;
@@ -75,32 +99,56 @@ function select(target) {
} }


selected = target; selected = target;
selectedEntity = entities[target.dataset.key];

console.log(selectedEntity)
selected.classList.add("selected"); selected.classList.add("selected");

entityInfo(selectedEntity);
}

function entityInfo(entity) {
document.querySelector("#entity-name").innerText = "Name: " + entity.name;
document.querySelector("#entity-author").innerText = "Author: " + entity.author;
document.querySelector("#entity-height").innerText = "Height: " + entity.height.format({precision: 3});
} }


function displayEntity(entity) { function displayEntity(entity) {
const location = entity.location; const location = entity.location;


const div = document.createElement("div");
div.classList.add("entity");
const img = document.createElement("img");
img.src = "./pepper.png"
img.classList.add("entity");


div.style.left = location.x + "px";
div.style.top = location.y + "px";
img.style.left = location.x + "px";
img.style.top = location.y + "px";


div.addEventListener("click", e => select(e.target));
img.addEventListener("click", e => select(e.target));


img.id = "entity-" + entityIndex;
img.dataset.key = entityIndex;

entities[entityIndex] = entity;

entityIndex += 1;


const world = document.querySelector("#entities"); const world = document.querySelector("#entities");
world.appendChild(div);
world.appendChild(img);
} }


document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
for (let x = 0; x < 5; x++) { for (let x = 0; x < 5; x++) {
const entity = makeEntity(); const entity = makeEntity();
entity.name = "Green is my pepper";
entity.author = "Fen"
entity.location.x = 300 + Math.random() * 600; entity.location.x = 300 + Math.random() * 600;
entity.location.y = 300 + Math.random() * 400; entity.location.y = 300 + Math.random() * 400;
displayEntity(entity); displayEntity(entity);
} }


drawScale();
updateSizes();
}); });

window.addEventListener("resize", () => {
updateSizes();
})

+ 43
- 0
math.min.js
文件差异内容过多而无法显示
查看文件


二进制
pepper.png 查看文件

之前 之后
宽度: 178  |  高度: 218  |  大小: 30 KiB

撰写 预览
正在加载...
取消
保存