Resource icons as RoomVisuals


  • TMB

    Still not sure exactly what I'm gonna use this for, but I wanted to make this possible anyway, so here it is.
    Enjoy the code.
    0_1543069210069_a6b1758a-cb3d-45a3-b756-9f0f78b41fb0-image.png

    var Color = {
        white:  ["#ffffff", "#4c4c4c"],
        grey:   ["#b4b4b4", "#4c4c4c"],
        red:    ["#ff7b7b", "#592121"],
        yellow: ["#fdd388", "#5d4c2e"],
        green:  ["#00f4a2", "#236144"],
        blue:   ["#50d7f9", "#006181"],
        purple: ["#a071ff", "#371383"],
    };
    var MineralColor = {
        [RESOURCE_ENERGY]:    Color.yellow,
        [RESOURCE_POWER]:     Color.red,
        
        [RESOURCE_HYDROGEN]:  Color.grey,
        [RESOURCE_OXYGEN]:    Color.grey,
        [RESOURCE_UTRIUM]:    Color.blue,
        [RESOURCE_LEMERGIUM]: Color.green,
        [RESOURCE_KEANIUM]:   Color.purple,
        [RESOURCE_ZYNTHIUM]:  Color.yellow,
        [RESOURCE_CATALYST]:  Color.red,
        [RESOURCE_GHODIUM]:   Color.white,
    
        [RESOURCE_HYDROXIDE]:         Color.grey,
        [RESOURCE_ZYNTHIUM_KEANITE]:  Color.grey,
        [RESOURCE_UTRIUM_LEMERGITE]:  Color.grey,
    
        [RESOURCE_UTRIUM_HYDRIDE]:    Color.blue,
        [RESOURCE_UTRIUM_OXIDE]:      Color.blue,
        [RESOURCE_KEANIUM_HYDRIDE]:   Color.purple,
        [RESOURCE_KEANIUM_OXIDE]:     Color.purple,
        [RESOURCE_LEMERGIUM_HYDRIDE]: Color.green,
        [RESOURCE_LEMERGIUM_OXIDE]:   Color.green,
        [RESOURCE_ZYNTHIUM_HYDRIDE]:  Color.yellow,
        [RESOURCE_ZYNTHIUM_OXIDE]:    Color.yellow,
        [RESOURCE_GHODIUM_HYDRIDE]:   Color.white,
        [RESOURCE_GHODIUM_OXIDE]:     Color.white,
    
        [RESOURCE_UTRIUM_ACID]:       Color.blue,
        [RESOURCE_UTRIUM_ALKALIDE]:   Color.blue,
        [RESOURCE_KEANIUM_ACID]:      Color.purple,
        [RESOURCE_KEANIUM_ALKALIDE]:  Color.purple,
        [RESOURCE_LEMERGIUM_ACID]:    Color.green,
        [RESOURCE_LEMERGIUM_ALKALIDE]:Color.green,
        [RESOURCE_ZYNTHIUM_ACID]:     Color.yellow,
        [RESOURCE_ZYNTHIUM_ALKALIDE]: Color.yellow,
        [RESOURCE_GHODIUM_ACID]:      Color.white,
        [RESOURCE_GHODIUM_ALKALIDE]:  Color.white,
    
        [RESOURCE_CATALYZED_UTRIUM_ACID]:         Color.blue,
        [RESOURCE_CATALYZED_UTRIUM_ALKALIDE]:     Color.blue,
        [RESOURCE_CATALYZED_KEANIUM_ACID]:        Color.purple,
        [RESOURCE_CATALYZED_KEANIUM_ALKALIDE]:    Color.purple,
        [RESOURCE_CATALYZED_LEMERGIUM_ACID]:      Color.green,
        [RESOURCE_CATALYZED_LEMERGIUM_ALKALIDE]:  Color.green,
        [RESOURCE_CATALYZED_ZYNTHIUM_ACID]:       Color.yellow,
        [RESOURCE_CATALYZED_ZYNTHIUM_ALKALIDE]:   Color.yellow,
        [RESOURCE_CATALYZED_GHODIUM_ACID]:        Color.white,
        [RESOURCE_CATALYZED_GHODIUM_ALKALIDE]:    Color.white,
    };
    
    
    RoomVisual.prototype.resource = function(type, x, y, size = 0.25){
        if (type == RESOURCE_ENERGY || type == RESOURCE_POWER)
            this.fluid(type, x, y, size);
        else if ([RESOURCE_CATALYST, RESOURCE_HYDROGEN, RESOURCE_OXYGEN, RESOURCE_LEMERGIUM, RESOURCE_UTRIUM, RESOURCE_ZYNTHIUM, RESOURCE_KEANIUM]
            .includes(type))
            this.mineral(type, x, y, size);
        else if (MineralColor[type] != undefined)
            this.compound(type, x, y, size);
        else
            return ERR_INVALID_ARGS
        return OK;
    };
    RoomVisual.prototype.fluid = function (type, x, y, size = 0.25) {
        this.circle(x, y, {
            radius: size,
            fill: MineralColor[type][0],
            opacity: 1,
        })
        this.text(type[0], x, y-(size*0.1), {
            font: (size*1.5),
            color: MineralColor[type][1],
            backgroundColor: MineralColor[type][0],
            backgroundPadding: 0,
        })
    };
    RoomVisual.prototype.mineral = function (type, x, y, size = 0.25) {
        this.circle(x, y, {
            radius: size,
            fill: MineralColor[type][0],
            opacity: 1,
        })
        this.circle(x, y, {
            radius: size * 0.8,
            fill: MineralColor[type][1],
            opacity: 1,
        })
        this.text(type, x, y+(size*0.03), {
            font: "bold "+(size*1.25)+" arial",
            color: MineralColor[type][0],
            backgroundColor: MineralColor[type][1],
            backgroundPadding: 0,
        })
    };
    RoomVisual.prototype.compound = function (type, x, y, size = 0.25) {
        let label = type.replace("2", '₂');
        
        this.text(label, x, y, {
            font: "bold "+(size*1)+" arial",
            color: MineralColor[type][1],
            backgroundColor: MineralColor[type][0],
            backgroundPadding: 0.3*size,
        })
    };
    

    And here's a snippet to past into the simulation room so you can try it all quickly :

        Game.rooms.sim.visual.resource("ZK", 20, 26);
        Game.rooms.sim.visual.resource("UL", 21, 26);
        Game.rooms.sim.visual.resource("OH", 22, 26);
        Game.rooms.sim.visual.resource("G", 23, 26);
        
        Game.rooms.sim.visual.resource("H", 20, 24, 0.5);
        Game.rooms.sim.visual.resource("O", 21, 24, 0.5);
        Game.rooms.sim.visual.resource("L", 22, 24, 0.5);
        Game.rooms.sim.visual.resource("U", 23, 24, 0.5);
        Game.rooms.sim.visual.resource("K", 24, 24, 0.5);
        Game.rooms.sim.visual.resource("Z", 25, 24, 0.5);
        Game.rooms.sim.visual.resource("X", 26, 24, 0.5);
        Game.rooms.sim.visual.resource("energy", 27, 24, 0.5);
        Game.rooms.sim.visual.resource("power", 28, 24, 0.5);
        
        Game.rooms.sim.visual.resource("H", 20, 27);
        Game.rooms.sim.visual.resource("O", 21, 27);
        Game.rooms.sim.visual.resource("L", 22, 27);
        Game.rooms.sim.visual.resource("U", 23, 27);
        Game.rooms.sim.visual.resource("K", 24, 27);
        Game.rooms.sim.visual.resource("Z", 25, 27);
        Game.rooms.sim.visual.resource("X", 26, 27);
        Game.rooms.sim.visual.resource("energy", 27, 27);
        Game.rooms.sim.visual.resource("power", 28, 27);
        
        Game.rooms.sim.visual.resource("LH", 22, 28);
        Game.rooms.sim.visual.resource("UH", 23, 28);
        Game.rooms.sim.visual.resource("KH", 24, 28);
        Game.rooms.sim.visual.resource("ZH", 25, 28);
        Game.rooms.sim.visual.resource("GH", 26, 28);
        
        Game.rooms.sim.visual.resource("LO", 22, 29);
        Game.rooms.sim.visual.resource("UO", 23, 29);
        Game.rooms.sim.visual.resource("KO", 24, 29);
        Game.rooms.sim.visual.resource("ZO", 25, 29);
        Game.rooms.sim.visual.resource("GO", 26, 29);
        
        Game.rooms.sim.visual.resource("LH2O", 22, 30);
        Game.rooms.sim.visual.resource("UH2O", 23, 30);
        Game.rooms.sim.visual.resource("KH2O", 24, 30);
        Game.rooms.sim.visual.resource("ZH2O", 25, 30);
        Game.rooms.sim.visual.resource("GH2O", 26, 30);
        
        Game.rooms.sim.visual.resource("LHO2", 22, 31);
        Game.rooms.sim.visual.resource("UHO2", 23, 31);
        Game.rooms.sim.visual.resource("KHO2", 24, 31);
        Game.rooms.sim.visual.resource("ZHO2", 25, 31);
        Game.rooms.sim.visual.resource("GHO2", 26, 31);
        
        Game.rooms.sim.visual.resource("LH2O", 22, 32);
        Game.rooms.sim.visual.resource("UH2O", 23, 32);
        Game.rooms.sim.visual.resource("KH2O", 24, 32);
        Game.rooms.sim.visual.resource("ZH2O", 25, 32);
        Game.rooms.sim.visual.resource("GH2O", 26, 32);
        
        Game.rooms.sim.visual.resource("XLHO2", 22, 33);
        Game.rooms.sim.visual.resource("XUHO2", 23, 33);
        Game.rooms.sim.visual.resource("XKHO2", 24, 33);
        Game.rooms.sim.visual.resource("XZHO2", 25, 33);
        Game.rooms.sim.visual.resource("XGHO2", 26, 33);
    
    👍


  • @estecka you might want to add this as a PR to https://github.com/screepers/RoomVisual. it looks great.



  • Thank you! I was looking for a nice way to visualize what my labs are doing, this will be a great boon to it!



  • If only we had some kind of MapVisuals so we could use this in a map overlay!