prepare for putting/building blocks

src/assets/field.css

@@ -37,12 +37,15 @@
 .block.treeTrunk { background-image: url(/Tiles/trunk_mid.png); }
 .block.treeRoot  { background-image: url(/Tiles/trunk_bottom.png); }
 
-.block.soil         { background-image: url(/Tiles/dirt.png); }
+.block.soil        { background-image: url(/Tiles/dirt.png); }
 .block.soilGravel  { background-image: url(/Tiles/gravel_dirt.png); }
 .block.stoneGravel { background-image: url(/Tiles/gravel_stone.png); }
-.block.stone        { background-image: url(/Tiles/stone.png); }
-.block.bedrock      { background-image: url(/Tiles/greystone.png); }
-.block.cave         { background-color: #000; }
+.block.stone       { background-image: url(/Tiles/stone.png); }
+.block.bedrock     { background-image: url(/Tiles/greystone.png); }
+.block.cave        { background-color: #000; }
+
+.block.brickWall   { background-image: url(/Tiles/brick_grey.png); }
+
 #field .block:hover { outline: 1px solid white; z-index: 10; }
 
 .morning0 .block, .morning0 #player {filter: saturate(50%); }

src/assets/items.css

@@ -2,4 +2,6 @@
 .item.weapon-sword-bronze { background-image: url("/Items/sword_bronze.png"); }
 .item.tool-pick-bronze { background-image: url("/Items/pick_bronze.png"); }
 
+.item.block-wood { background-image: url("/Tiles/wood.png"); }
 .item.block-dirt { background-image: url("/Tiles/dirt.png"); }
+.item.block-stone { background-image: url("/Tiles/stone.png"); }

src/level/def.ts

@@ -1,3 +1,5 @@
+import type { DropItem } from './items'
+
 export const BLOCK_SIZE = 64 // each block is 64̨̣̌̇x64 pixel in size and equals 1m
 export const RECIPROCAL = 1 / BLOCK_SIZE
 
@@ -14,7 +16,7 @@ export type Block = {
   climbable?: boolean,   // can I climb it?
   transparent?: boolean, // can I see through it?
   illuminated?: boolean, // is it glowing?
-  drops?: string,        // what do I get, when loot it?
+  drops?: DropItem,        // what do I get, when loot it?
 }
 
 export type BlockType =
@@ -22,22 +24,26 @@ export type BlockType =
   | 'treeCrown' | 'treeLeaves' | 'treeTrunk' | 'treeRoot'
   | 'soil' | 'soilGravel' | 'stone' | 'stoneGravel'
   | 'bedrock' | 'cave'
+  | 'brickWall'
 
 export const blockTypes: Record<BlockType, Block> = {
+  // Transparent Blocks
   air: { type: 'air', hp: Infinity, walkable: true, transparent: true },
-  grass: { type: 'grass', hp: 5, walkable: false, drops: 'dirt' },
-
+  cave: { type: 'cave', hp: Infinity, walkable: true, transparent: true },
+  // Tree Parts
   treeCrown: { type: 'treeCrown', hp: 1, walkable: true, transparent: true, drops: 'leaves' },
   treeLeaves: { type: 'treeLeaves', hp: 1, walkable: true, transparent: true, drops: 'leaves' },
   treeTrunk: { type: 'treeTrunk', hp: 10, walkable: true, climbable: true, transparent: true, drops: 'wood' },
   treeRoot: { type: 'treeRoot', hp: 10, walkable: true, climbable: true, drops: 'wood' },
-
+  // Opaque Natural Blocks
+  grass: { type: 'grass', hp: 5, walkable: false, drops: 'dirt' },
   soil: { type: 'soil', hp: 5, walkable: false, drops: 'dirt' },
   soilGravel: { type: 'soilGravel', hp: 5, walkable: false, drops: 'gravel' },
   stoneGravel: { type: 'stoneGravel', hp: 10, walkable: false, drops: 'gravel' },
   stone: { type: 'stone', hp: 10, walkable: false, drops: 'stone' },
   bedrock: { type: 'bedrock', hp: 25, walkable: false, drops: 'stone' },
-  cave: { type: 'cave', hp: Infinity, walkable: true, transparent: true },
+  // Built Blocks
+  brickWall: { type: 'brickWall', hp: 25, walkable: false, drops: 'stone' },
 }
 
 export const level = {

src/level/items.ts

@@ -4,11 +4,17 @@ import type { InventoryItem } from '../util/usePlayer'
 export type ItemQuality = 'wood' | 'iron' | 'silver' | 'gold' | 'diamond'
 export type ItemType = 'tool' | 'weapon' | 'block' | 'ore'
 
+export type DropItem =
+  | 'Shovel' | 'Pick Axe' | 'Sword'
+  | 'leaves' | 'dirt' | 'wood' | 'stone' | 'gravel'
+  | 'coal' | 'iron' | 'silver' | 'gold' | 'ruby' | 'diamond' | 'emerald'
+
 export interface Item {
-  name: string
+  name: DropItem
   type: ItemType
   icon: string
-  hasQuality: boolean
+  hasQuality?: boolean
+  builds?: BlockType
 }
 
 export const items: Item[] = [
@@ -16,19 +22,19 @@ export const items: Item[] = [
   { name: 'Pick Axe', type: 'tool', icon: 'pick', hasQuality: true },
   { name: 'Sword', type: 'weapon', icon: 'sword', hasQuality: true },
 
-  { name: 'leaves', type: 'block', icon: 'leaves', hasQuality: false },
-  { name: 'dirt', type: 'block', icon: 'dirt', hasQuality: false },
-  { name: 'wood', type: 'block', icon: 'wood', hasQuality: false },
-  { name: 'stone', type: 'block', icon: 'stone', hasQuality: false },
-  { name: 'gravel', type: 'block', icon: 'stone', hasQuality: false }, // TODO
-
-  { name: 'coal', type: 'ore', icon: 'ore_coal', hasQuality: false },
-  { name: 'iron', type: 'ore', icon: 'ore_iron', hasQuality: false },
-  { name: 'silver', type: 'ore', icon: 'ore_silver', hasQuality: false },
-  { name: 'gold', type: 'ore', icon: 'ore_gold', hasQuality: false },
-  { name: 'ruby', type: 'ore', icon: 'ore_ruby', hasQuality: false },
-  { name: 'diamond', type: 'ore', icon: 'ore_diamond', hasQuality: false },
-  { name: 'emerald', type: 'ore', icon: 'ore_emerald', hasQuality: false },
+  { name: 'leaves', type: 'block', icon: 'leaves', builds: 'treeLeaves' },
+  { name: 'dirt', type: 'block', icon: 'dirt', builds: 'soil' },
+  { name: 'wood', type: 'block', icon: 'wood', builds: 'treeTrunk' },
+  { name: 'stone', type: 'block', icon: 'stone', builds: 'brickWall' },
+  { name: 'gravel', type: 'block', icon: 'stone' }, // TODO
+
+  { name: 'coal', type: 'ore', icon: 'ore_coal' },
+  { name: 'iron', type: 'ore', icon: 'ore_iron' },
+  { name: 'silver', type: 'ore', icon: 'ore_silver' },
+  { name: 'gold', type: 'ore', icon: 'ore_gold' },
+  { name: 'ruby', type: 'ore', icon: 'ore_ruby' },
+  { name: 'diamond', type: 'ore', icon: 'ore_diamond' },
+  { name: 'emerald', type: 'ore', icon: 'ore_emerald' },
 ]
 
 export const damage: Record<ItemQuality, number> = {