Menu Experiment

/*
        >¡this is the test version!<
    Quick info!:
        >This game uses Idle Game Maker, a sort of game engine made by Orteil.<
        >This is my game and I, Simanalix, hold rights to it.<
        >Orteil holds proper rights to Idle Game Maker<
    >Have fun, and please play my game!<
Game code:
    gafqNrjL
Game link:
    http://orteil.dashnet.org/igm/?g=gafqNrjL
Pastebin link:
    https://pastebin.com/gafqNrjL
Test game code:
    i8EssVh7
Test game link:
    http://orteil.dashnet.org/igm/?g=i8EssVh7
Test pastebin link:
    https://pastebin.com/i8EssVh7

/*  Side note here on a good description style:
        <b>Fact:</b></>Effect description<q>Flavor text/Fun description</q>
*/
/*
    This is an easy to use template for you to make IGM games.
    Everything in comments, like this : / *comment* / or this : //comment is either tips, or something you can remove comments from and use in your game.
Please erase the comment block this statement is in when you make your game.
*/



Let's make a game!
name:Stuff Clicker
by:Simanlix
version:
desc:This is a game to show you some things that can actually be done in IGM, even though they seem impossible. This is a pretty generic game, but it has lots of things in it!
Settings
cost increase:115%
cost refund:1%



CSS

.box
{
    text-align:center;
    padding:0px;
    box-shadow:none;
}

.thing,.box-header,.box-footer,.box-bit
{
    background:#39f;
    box-shadow:0px 0px 4px rgba(0,0,0,0.2),1px 1px 2px rgba(0,0,0,0.5),0px 0px 4px rgba(255,255,255,0.5) inset;
}
.box-bit{border-radius:20px;}

.box-header
{
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    margin-bottom:4px;
}
.box-footer
{
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    margin-top:4px;
}


#box-main
{
    left:0px;
    top:0px;
    bottom:0px;
    overflow:hidden;
    width:60%;
    position:absolute;
}
#box-res
{
    width:100%;
    top:0%;
    botton:80%;
    z-index:100;
    position:absolute;
}
#box-buttons
{
    width:100%;
    top:20%;
    botton:20%;
    position:absolute;
}
#box-menubuttons
{
    width:100%;
    top:80%;
    botton:0%;
    z-index:100;
    position:absolute;
}
#box-buildings
{
    right:0px;
    top:0px;
    bottom:0px;
    width:40%;
    position:absolute;
    overflow-x:hidden;
    overflow-y:scroll;
}
#box-buildings
{
    background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
}
box-menubuttons{top:85%;left:0%;right:40%;bottom:0%;position:absolute;}

#bulkDisplay{margin:-11px 24px 4px 24px;}


.thing
{
    display:inline-block;
    padding:0px;
    margin:2px;
    cursor:pointer;
}
.thing:hover,.thing.lit
{
    background:#6cf;
}
.thinginmenu.lit{position:relative;top:22222%}
//.thinginmenu:not(.lit){}
.thing.cantAfford
{
    opacity:0.65;
}
.upgrade.cantAfford
{
    box-shadow:0px 0px 4px #39f;
    border-radius:8px;
}
.upgrade.cantAfford:hover
{
    box-shadow:0px 0px 4px #6cf;
}
.upgrade.owned,.achiev.owned
{
    background:#6cf;
}
.thing-text,.thing-costs{font-weight:bold;}

.building
{
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
    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.5);
    background:linear-gradient(to bottom,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0.5) 100%);*/
    background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0) 100%);
    box-shadow:none;
}
.fullWidth:before,.fullWidth:after
{
    content:'';
    height:1px;
    background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0) 100%);
    position:absolute;
    left:0px;
    right:0px;
    z-index:-1;
}
.fullWidth:before{top:-1px;}
.fullWidth:after{bottom:-1px;}

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

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

Layout
  *buildings
    contains:Buildings, tag:purchaseupgradeTAG
  *main
    contains:res, buttons, menubuttons
      *res
        contains:Resources
      *buttons
        contains:tag:moneyButtonTAG
      *menubuttons
        contains:tag:menubuttonTAG

Resources
  //hidden resources
  *TEMPLATE
    always hidden
    tag:moneybystat
  *moneybyFoodStand
  *moneybyStore
  *moneybyTheater
  *moneybyRepairShop
  *moneybyBank
  *moneybyStudio
  *TEMPLATE
    always hidden
    tag:moneyPSstay
  *FoodStandmoneyPS
start with:1
  *StoremoneyPS
start with:8
  *TheatermoneyPS
start with:64
  *RepairShopmoneyPS
start with:510
  *BankmoneyPS
start with:4000
  *StudiomoneyPS
start with:32000
  *moneyPC
start with:1
  *TEMPLATE
    always hidden
  *whichmenu
  *timestarted
  *buildingCount
  *upgradeCount
  *achievementcount
  *TEMPLATE
    shown
  *money
    name:$
    desc:<b>About:</b></>This is money, the main resource. You want to collect as much of this as possible
    icon:
  *specialRes



Buttons
  *moneytree
    name:Bobby
    desc:<b>Click Effect:</b></>Get money!<q>This is Bob, and you have clicked him <b>[moneytree:clicks]</b> times. Did you know that Bob has feelings?</q>
    icon:
    on click:
        yield moneyPC money
    end
    class:bigButton hasFlares
    tag:moneyButtonTAG

  *TEMPLATE
    no tooltip
    tag:menubuttonTAG
    class:menubuttonCLASS
  *menubutton1
    text:
    on click:
        anim glow
        light :tag:thinginmenu
        dim :Buildings
    end
  *menubutton2
    text:
    on click:
        anim glow
        light :tag:thinginmenu
        dim :tag:purchaseupgradeTAG
    end
Buildings
  *TEMPLATE
    on click:anim glow
    on earn:yield 1/this buildingCount
    tag:thinginmenu
  *FoodStand
    name:Stand
    desc:<b>Effect:</b></>...<q>These sell beverages like lemonade, and snacks, like cookies.</q>
    req:money:max>=60
    req:whichmenu is 0
    cost:60 money
    icon:
    on tick:
        yield FoodStandmoneyPS money
        yield FoodStandmoneyPS moneybyFoodStand
    end
  *Store
    name:Store
    desc:<b>Effect:</b></>...<q>Its a building where people buy things. They can be found in malls.</q>
    req:money:max>=720
    req:whichmenu is 0
    cost:720 money
    icon:
    on tick:
        yield StoremoneyPS money
        yield StoremoneyPS moneybyStore
    end
  *Theater
    name:Theater|Theaters
    desc:<b>Effect:</b></>...<q>A place where people watch movies, plays, and theatrics of sorts.</q>
    req:money:max>=7680
    req:whichmenu is 0
    cost:7680 money
    icon:
    on tick:
        yield TheatermoneyPS money
        yield TheatermoneyPS moneybyTheater
    end
  *RepairShop
    name:Repair Shop|Repair Shops
    desc:<b>Effect:</b></>...<q>Things break all the time, so people come here to get their stuff fixed.</q>
    req:money:max>=81600
    req:whichmenu is 0
    cost:81600 money
    icon:
    on tick:
        yield RepairShopmoneyPS money
        yield RepairShopmoneyPS moneybyRepairShop
    end
  *Bank
    name:Bank|Banks
    desc:<b>Effect:</b></>...<q>We store people's money and give them loans. Most of our money comes from unfair college loans and overdraft fees.</q>
    req:money:max>=760000
    req:whichmenu is 0
    cost:760000 money
    icon:
    on tick:
        yield BankmoneyPS money
        yield BankmoneyPS moneybyBank
    end
  *Studio
    name:Studio|Studios
    desc:<b>Effect:</b></>...<q>...</q>
    req:money:max>=7040000
    req:whichmenu is 0
    cost:7040000 money
    icon:
    on tick:
        yield StudiomoneyPS money
        yield StudiomoneyPS moneybyStudio
    end

Upgrades
  *TEMPLATE
    always hidden
  *setdefaultstats
    owned
    on start:
        dim :Buildings
    end
    on load:log Game Loaded!<//>
//Purchase Upgrades
  *TEMPLATE
    on click:anim glow
    on earn:yield 1 upgradeCount
    tags:purchaseupgradeTAG,thinginmenu
/*
  *U
    name:
    desc:<b>Effect:</b></>...<q>...</q>
    req:
    cost:
    passive:
        effect
    end
    on earn:
        effect
    end
    icon:
  *U
    name:
    desc:<b>Effect:</b></>Double profit of n!<q>...</q>
    req:10
    cost:1000 money
    on earn:
        yield moneyPS moneyPS
    end
    icon:
*/
  *U1
    name:Hot Dog Stands
    desc:<b>Effect:</b></>Double profit of Stands!<q>Hot dogs are popular, effective, and feel more like a meal.</q>
    req:10 FoodStand
    cost:200 money
    on earn:
        yield FoodStandmoneyPS FoodStandmoneyPS
    end
    icon:
  *U2
    name:Pet Stores
    desc:<b>Effect:</b></>Double profit of n!<q>Pets are pretty valuable and quite attractive.</q>
    req:10 Store
    cost:3000 money
    on earn:
        yield StoremoneyPS StoremoneyPS
    end
    icon:
  *U3
    name:Movie Theaters
    desc:<b>Effect:</b></>Double profit of n!<q>Time to specialize some theaters to movies. People will pay quite a bit to eat popcorn and watch a movie in these theaters.</q>
    req:10 Theater
    cost:30000 money
    on earn:
        yield TheatermoneyPS TheatermoneyPS
    end
    icon:
  *U4
    name:Car Repair
    desc:<b>Effect:</b></>Double profit of n!<q>Time to advertise our expert car mechanics and fast repairs.</q>
    req:10 RepairShop
    cost:300000 money
    on earn:
        yield RepairShopmoneyPS RepairShopmoneyPS
    end
    icon:
  *U5
    name:Credit Systems
    desc:<b>Effect:</b></>Double profit of n!<q>Keeps things in balance, and helps our accountants.</q>
    req:10 Bank
    cost:3000000 money
    on earn:
        yield BankmoneyPS BankmoneyPS
    end
    icon:
  *U6
    name:Art Studios
    desc:<b>Effect:</b></>Double profit of n!<q>Art sells for heaps of cash, especially when you makret it well.</q>
    req:10 Studio
    cost:30000000 money
    on earn:
        yield StudiomoneyPS StudiomoneyPS
    end
    icon:
//Info Upgrades
  *TEMPLATE
    tags:infoupgradeTAG,thinginmenu
    no buy
    no tooltip
  *info1
    text:This is an info statement in the info section.
//Stats Upgrades
  *TEMPLATE
    tags:statsupgradeTAG,thinginmenu
    no buy
    no tooltip
  *stats1
    text:This is a stat in the stats section:</>You have clicked the money tree [moneytree:clicks] times.
//Backgrounds
  *TEMPLATE
/*    no buy
    no text
    no tooltip*/
    shown
    owned
    tag:backgroundTAG
  *backgroundU5
    class:background5CLASS
  *backgroundU1
    class:background1CLASS
  *backgroundU2
    class:background2CLASS
  *backgroundU3
    class:background3CLASS
  *backgroundU4
    class:background4CLASS
Achievements
  *TEMPLATE
    on earn:yield 1 achievementcount
  *A1
     name:You got it
     desc:<b>Requirement:</b></>Click the money tree to get a dollar.<q>I guess money <b>does</b> grow on trees.</q>
     req:moneytree:clicks>0
/*Shinies
  *shiney
    icon:
    on click:
       //effect
       //log Some Shiny message
    end
    frequency:
    frequency variation:
    movement:*/

Items