Walking Demo

//Please ask before copying code
Let's make a game!
	name:Walking Demo
	desc:Click the North/East/South/West Buttons.
	by:AgentRylie
	created:22/3/2020
	updated:22/3/2020
	version:1

Settings
	building cost increase:100%
	building cost refund:100%
	no particles
	no bulk particles

Layout
    *main
        contains:log, menu, Commands
	header:Walking Demo (Build 33)
	*log
		contains:Log
    *menu
	contains:tag:refresh, tag:LocationADT, tag:LocationADTyh
	*Commands
		contains:tag:Prompts
    *store
        contains:shop, ownedstuff
	*shop
		contains:tag:Control, tag:LayoutThings
	*ownedstuff
		contains:tag:ACHTAG, tag:Locations, tag:Shop, tag:achieves, tag:Debug

CSS
#game
{
	background:#696969;
	font-size:12px;
	color:rgba(0,0,0,0.9);
	text-shadow:none;
}
#box-log
{
	height:64%;
	width:100%;
	border:1px solid black;
	color:black;
	padding:3px;
	margin:0px;
}
.thing
{
	border-radius:8px;
	background:rgba(192,192,192,0.5);
}

.box
{
	text-align:center;
	padding:0px;
	box-shadow:none;
}
.thing,.box-header,.box-footer,.box-bit
{
	background:rgba(255,255,255,0.5);
	border:1px solid rgba(0,0,0,0.9);
	margin:1px;
}
.thing:hover
{
	background:rgba(255,255,255,0.75);
}

.box-header
{
	margin-bottom:4px;
}
.box-footer
{
	margin-top:4px;
}

.title
{
	text-decoration:underline;
}

#box-main
{
	left:0px;
	top:0px;
	bottom:0px;
	overflow:hidden;
	width:60%;
	position:absolute;
}
#box-res
{
	width:100%;
	border:1px solid rgba(0,0,0,0.9);
	top:0%;
	height:10%;
	min-height:32px;
	overflow-x:hidden;
	overflow-y:scroll;
	z-index:100;
	position:absolute;
	background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
}
#box-buttons
{
	top:58px;
	right:0px;
	bottom:0px;
	left:0px;
	position:absolute;
}
#box-BUTTONS
{
	top:40px;
	right:0px;
	bottom:200px;
	left:0px;
	position:absolute;
}
#box-BUTTONS
{left:30%;}

#bulkDisplay
{
	margin:-20px 24px 6px 24px;
	border:none;
	background:transparent;
}


.thing
{
	display:inline-block;
	padding:0px;
	cursor:pointer;
}
.thing:active
{
	opacity:0.5;
}
.upgrade.owned,.achiev.owned
{
	box-shadow:0px 0px 0px 2px rgba(0,0,0,0.5) inset;
}
.thing.cantAfford
{
	opacity:0.65;
}
.upgrade.cantAfford
{
	border:none;
}

.thing-costs{font-weight:bold;text-shadow:1px 1px 0px rgba(0,0,0,0.5);}
.cost.hasEnough{color:#0f0;}
.cost.notEnough{color:#f00;}


.button>.thing-text
{
	text-decoration:underline;
}

.building
{
	display:block;
	margin-right:0px;
	font-size:14px;
}

.fullWidth
{
	display:block;
	margin-left:0px;
	margin-right:0px;
	z-index:10;
}
#game .fullWidth
{
	height:auto;
	min-height:auto;
}
.fullWidth,.fullWidth:hover
{
	background:rgba(0,0,0,0.75);
	box-shadow:none;
	color:#fff;
}
.fullWidth:before,.fullWidth:after
{
	content:'';
	height:1px;
	background:rgba(255,255,255,0.75);
	position:absolute;
	left:0px;
	right:0px;
	z-index:-1;
}
.fullWidth:before{top:-1px;}
.fullWidth:after{bottom:-1px;}

.fullWidth .thing-icon
{
	margin-top:-10px;
	margin-bottom:-10px;
}
.fullWidth .thing-text
{
	margin-top:-4px;
	margin-bottom:-4px;
}

.listing
{
	font-weight:normal;
}

#game.filtersOn .thing-icon{filter:drop-shadow(3px 3px 1px rgba(0,0,0,0.5));}

#box-store
{
	right:0px;
	top:0px;
	bottom:0px;
	width:40%;
	position:absolute;
    background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
}
#box-shop
{
	top:0px;
	bottom:0px;
	width:100%;
	height:15%;
	right:0%;
	overflow-x:hidden;
	overflow-y:scroll;
	position:absolute;
 	background:rgba(0,125,0,0.4);
	border:1px solid rgba(0,0,0,0.9);
    background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
}
#box-ownedstuff
{
	top:15%;
	bottom:0px;
	width:100%;
	height:90%;
	right:0%;
	overflow-x:hidden;
	overflow-y:scroll;
	padding-bottom:48px;
	position:absolute;
 	background:rgba(0,125,0,0.4);
	border:1px solid rgba(0,0,0,0.9);
    background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
}

#box-shop>.box-header
{
	padding-bottom:16px;
}
#box-menu
{
    width:80%;
	left:20%;
    top:70%;
    height:50%;
	border:2px solid rgba(0,0,0,0.9);
    background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
	position:absolute;
}
#box-res.thing-icon
{
    width:32px;
    height:32px;
}
#box-Commands
{
    width:20%;
    top:70%;
    height:50%;
	border:2px solid rgba(0,0,0,0.9);
    background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
	position:absolute;
}

Resources
//Achievements
	*ACHPoints
		always hidden
	*ACH
		text:<b>[ACHPoints]/0 (~[((ACHPoints/0)*100)]%) earned</>
		tag:ACHTAG
		no tooltip
//Map
	*X
		can be negative
		on earn:
			if (X>=1) lose tag:LocationADT
			else if (X=0 and y=0) yield tag:LocationADT
end
		on lose:
			if (X=0 and y=0) yield tag:LocationADT
			else if (-1>=X) lose tag:LocationADT
end
	*y
		can be negative
		on earn:if (y>=1) lose tag:LocationADT
		on earn:if (y=0 and X=0) yield tag:LocationADT
		on lose:if (y=0 and X=0) yield tag:LocationADT
		on lose:if (-1>=y) lose tag:LocationADT
	*AreaID
//Tick
	*Tick
		on tick:yield 1 Tick
	*Scene
		on earn:lose (Tick) Tick
		on tick:if (Tick=0 and Scene=0) show tag:Prompts
		on tick:if (Tick=0 and Scene=0) show tag:LocateArea
		on tick:if (Tick=3 and Scene=0) lose 1 Tick
	*GameLoadTick
		on tick:if (0>=GameLoadTick) yield 1 GameLoadTick
		on load:lose 1 GameLoadTick
		on tick:if (GameLoadTick=0) log Game has been loaded.
Buildings
Upgrades
//Control
	*Coordinates
		text:[X],[y]
		tag:Control
		no tooltip
//Layout
	*TEMPLATE
		tag:LayoutThings
		no buy
		no tooltip
		on click:hide tag:ACHTAG
		on click:hide tag:Locations
		on click:hide tag:Shop
		on click:hide tag:Debug
		on click:hide tag:achieves
	*ShopL
		name:Shop
		on click:show tag:Shop
	*LocationsL
		name:Navigation
		on click:show tag:Locations
	*AchL
		name:Achievements
		on click:show tag:ACHTAG
		on click:show tag:achieves
	*DebugL
		name:Settings
		on click:show tag:Debug
//e
 //refresh
	*TEMPLATE
	*Refresh
		name:Inspect
		desc:Click to inspect your surroundings.
		on click:if (X=0 and y=0) yield 1 ADTyh
		tag:refresh
//Battle
 //Outside
  //ADT
	*TEMPLATE
		tag:LocationADT
		no buy
		hidden when 0
		start with
	*ADTyh
		name:Your House
		desc:Nice Cozy Place
		on click:yield 1 AreaID
		on click:lose tag:LocationADT
		on click:yield tag:LocationADTyh
	*TEMPLATE
		tag:LocationADTyh
		hidden when 0
		no buy
	*yHadt
		name:Leave
		desc:Leave Your House to go outside
		on click:lose 1 AreaID
		on click:lose tag:LocationADTyh
		on click:yield tag:LocationADT
//Navigation
 //Menu
	*TEMPLATE
		tag:Prompts
		no tooltip
		no buy
		start with
		hidden
	*North
		name:--North--
		on click:if (AreaID=0) yield 1 y
	*West
		name:--West--
		on click:if (AreaID=0) lose 1 X
	*East
		name:--East--
		on click:if (AreaID=0) yield 1 X
	*South
		name:--South--
		on click:if (AreaID=0) lose 1 y
 //Location Marker
	*TEMPLATE
		hidden
		tag:Locations
	*LocatedAt
		text:<b>Currently At</b>:[?X=0 and y=0 and AreaID=1|Your House|][?AreaID=0|Outside|]</><b>In</b>:[?X=0 and y=0|Town|Null]
		name:Current Location
		tag:Locations
		desc:[?X=0 and y=0 and AreaID=0|A nice little town in the middle of nowhere.|Null]