gauvain/idle_clicker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Simplification of UI and icons creation

Browse Source
This commit is contained in:
gauvainboiche
2026-10-08 16:52:21 +02:00
parent a88b8f5f14
commit 2f7c307f0e
22 changed files with 1099 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+9 -184
View File
@@ -32,7 +32,8 @@ public/
engine/ game rules, pure JS, no DOM (also used by the tests): engine (production, market,
time) + one module per system (investments, gamble, research, legacy, contracts, achievements)
services/ cookies · storage · save import/export · i18n · formatting · data loading
ui/ DOM helpers · main view · one view per section · tabs/menu · settings · toasts
ui/ DOM helpers · main view · one view per section · tabs/menu · settings · toasts ·
fx (the quick purchase animations)
main.js wires everything together
tests/ node:test suites (engine, systems, save import/export, server, content completeness)
```
@@ -92,189 +93,13 @@ Everything numeric is in `public/data/`: `rules.json` (market, raw material, mar
## Icons to produce
Every icon the game shows is a grey square until a theme provides an image. Each theme needs the **same set of icons, drawn in its own style**: the list below is generated from the game data, so it is always complete.
Every icon the game shows is a grey square until a theme provides an image. The exhaustive work list is in **[ICONS.txt](ICONS.txt)**: a checklist per theme, with the file name, the key and what to draw for each icon. It is generated from the game data, so it is always complete. All 23 achievements share a single `trophy` icon.
**Format.** One square image per icon: SVG preferred (or PNG at 128×128 px or more), transparent background, readable at 28 px (top bar) and 48 px (lists). Put the files in `public/themes/<theme>/img/`.
- **Format:** one square image per icon, SVG preferred (or PNG at 128×128 px or more), transparent background, readable at 28 px (top bar) and 48 px (lists). Files go in `public/themes/<theme>/img/`.
- **Plugging them in:** list each file in the theme's `theme.json`; anything not listed keeps the grey square, so images can be added a few at a time:
**Plugging them in.** List each file in the theme's `theme.json`; anything not listed keeps the grey square, so images can be added a few at a time:
```json
{ "order": 1, "assets": { "res.units": "img/res-units.svg", "gen.gen1": "img/gen-gen1.svg" } }
```
```json
{ "order": 1, "assets": { "res.units": "img/res-units.svg", "gen.gen1": "img/gen-gen1.svg" } }
```
`npm run icons -- --manifest` prints a complete `assets` skeleton (every key mapped to `img/<key>.svg`) to start from. `npm run icons` prints the list below, and `npm run icons -- --write` refreshes it in this file; `npm test` fails if it is out of date or if the interface uses an icon key that is not listed.
The tables give what each icon represents in each theme (the name used in the game, in English).
<!-- icons:start (generated by `npm run icons -- --write`, do not edit by hand) -->
**115 icons per theme, 575 in total** (5 themes: `paperclip`, `witch`, `alien`, `insects`, `computers`).
| Group | Icons per theme | Shown in |
|---|---:|---|
| Resources | 6 | top bar (units, funds, material), Gamble, Research and Legacy screens |
| Automation tiers | 6 | Production screen, Automation list |
| Upgrades | 36 | Production screen, Upgrades list |
| Investment societies | 9 | Investments screen |
| Endless upgrades | 14 | Production screen, Endless upgrades panel |
| Research | 15 | Research screen |
| Legacy perks | 6 | Legacy screen |
| Achievements | 23 | Achievements screen |
| **Total** | **115** | |
#### Resources (6)
| Key | `paperclip` | `witch` | `alien` | `insects` | `computers` |
|---|---|---|---|---|---|
| `res.units` | Paperclips | Potions | Xenocrystals | Leaves | CPU Power |
| `res.funds` | Funds | Gold | Credits | Honeydew | GalliumCoin |
| `res.material` | Wire | Herbs | Raw ore | Silk | Energy (W) |
| `res.chips` | Quantum Chips | Fate Tokens | Chance Crystals | Pollen Grains | Qubits |
| `res.research` | R&D Points | Arcane Insight | Xeno-Data | Instinct | Algorithms |
| `res.legacy` | Patents | Grimoire Pages | Blueprints | Colony Memories | Legacy Code |
#### Automation tiers (6)
| Key | `paperclip` | `witch` | `alien` | `insects` | `computers` |
|---|---|---|---|---|---|
| `gen.gen1` | Autoclipper | Apprentice | Mining Drone | Worker Ant | Old Laptop |
| `gen.gen2` | MegaClipper | Bubbling Cauldron | Plasma Drill | Leafcutter Squad | Gaming PC |
| `gen.gen3` | Clip Factory | Alchemy Lab | Orbital Extractor | Beetle Hauler | GPU Mining Rig |
| `gen.gen4` | Hypno Drones | Broomstick Fleet | Asteroid Harvester | Termite Mound | Server Rack |
| `gen.gen5` | Probe Swarm | Moonlit Coven | Hive Swarm | Locust Swarm | Data Center |
| `gen.gen6` | Matter Converter | Philosopher's Engine | Planet Cracker | Hive Queen | Quantum Mainframe |
#### Upgrades (36)
| Key | `paperclip` | `witch` | `alien` | `insects` | `computers` |
|---|---|---|---|---|---|
| `upg.click_1` | Ergonomic Bender | Steady Stirring | Gravity Gloves | Sharper Mandibles | Mechanical Keyboard |
| `upg.click_2` | Pneumatic Grip | Enchanted Ladle | Exo-Suit | Pheromone Trail | Keyboard Macros |
| `upg.click_3` | Robotic Arm | Familiar's Help | Neural Link | Double-Grip Legs | Neural Interface |
| `upg.g1_a` | Sharper Autoclippers | Apprentice Lessons | Drone Firmware | Ant Drill Sergeant | Thermal Paste |
| `upg.g1_b` | Overclocked Autoclippers | Apprentice Mastery | Drone Swarm Logic | Marching Songs | Fresh OS Install |
| `upg.g2_a` | MegaClipper Servos | Copper Cauldrons | Diamond Bits | Wider Leaf Slices | Liquid Cooling |
| `upg.g2_b` | MegaClipper Turbines | Eternal Flame | Plasma Focusing | Leafcutter Guild | Overclocking |
| `upg.g3_a` | Assembly Line | Crystal Alembics | Tether Cables | Reinforced Shells | Custom BIOS |
| `upg.g3_b` | Just-in-Time Logistics | Rune-Etched Tables | Zero-G Smelting | Dung Beetle Logistics | Memory Timing Tuning |
| `upg.g4_a` | Hypno Harmonics | Waxed Brooms | Mass Drivers | Air-Conditioned Chambers | Hot-Swap Drives |
| `upg.g4_b` | Persuasion Algorithms | Hex-Powered Flight | Autonomous Prospecting | Deep Tunnel Network | Load Balancer |
| `upg.g5_a` | Probe Self-Replication | Full Moon Rites | Hive Mind Sync | Riding the Wind | Redundant Power Lines |
| `upg.g5_b` | Von Neumann Protocols | Blood Moon Pact | Queen Directive | Migration Instinct | Free Cooling (Arctic Site) |
| `upg.g6_a` | Atomic Reassembly | Transmutation Circles | Tectonic Resonance | Royal Jelly | Cryogenic Coolant |
| `upg.g6_b` | Universal Reformatting | The Fifth Element | Core Shattering | Queen's Decree | Entangled Qubits |
| `upg.global_1` | Quality Control | Spellbook Index | Quantum Diagnostics | Dewdrop Hydration | Firmware Update |
| `upg.global_2` | Lean Manufacturing | Grandmother's Grimoire | Alien Alloys | Seasonal Rhythm | Parallel Computing |
| `upg.global_3` | Industrial AI | Ley Line Tap | Dyson Tap | Hive Mind | Learning Scheduler |
| `upg.global_4` | Quantum Scheduling | Time Dilation Charm | Spacetime Folding | Perfect Spring | Distributed Grid |
| `upg.demand_1` | Newspaper Ad | Village Notice Board | Trade Beacon | Scent Markers | Forum Hype |
| `upg.demand_2` | Radio Campaign | Market Stall | Interstellar Broker | Cricket Courier | Tech Influencers |
| `upg.demand_3` | Viral Video | Royal Commission | Galactic Exchange | Forest Market | Exchange Listing |
| `upg.demand_4` | Global Brand | Legend of the Witch | Cosmic Monopoly | Famous Pile | Global Hype Cycle |
| `upg.value_1` | Gold-Plated Paperclips | Glittering Labels | Purity Certificate | Dewy Gloss | Shiny Whitepaper |
| `upg.value_2` | Premium Packaging | Apothecary Seal | Rare Spectrum Cut | Autumn Colours | Celebrity Endorsement |
| `upg.value_3` | Luxury Branding | Royal Warrant | Imperial Grade | Golden Leaf Grade | To The Moon |
| `upg.mat_eff_1` | Thinner Wire | Careful Pruning | Ore Analyzer | Tighter Weaving | Efficient PSU |
| `upg.mat_eff_2` | Wire Recycling | Distilled Essence | Molecular Sieve | Silk Recycling | Low-Power Chips |
| `upg.mat_disc_1` | Bulk Wire Contract | Forager's Pact | Asteroid Contract | Spider Contract | Off-Peak Contract |
| `upg.mat_disc_2` | Direct From the Mill | Enchanted Garden | Own the Mine | Silkworm Farm | Own Solar Farm |
| `upg.stack_1` | Bigger Spools | Larger Baskets | Bigger Cargo Pods | Bigger Silk Bundles | Bigger Batteries |
| `upg.stack_2` | Pallet Orders | Herb Sacks | Container Drones | Cocoon Sacks | Capacitor Banks |
| `upg.stack_3` | Container Loads | Cartloads | Freighter Holds | Web Warehouses | Grid Substation |
| `upg.stack_4` | Freight Trains | Greenhouse Harvest | Convoy Fleets | Spider Caravans | Dedicated Power Line |
| `upg.stack_5` | Wire Mills | Whole-Forest Rights | Orbital Stockpile | Great Silk Hoard | Private Power Plant |
| `upg.auto_buy` | WireBuyer | Self-Gathering Basket | Autonomous Freighter | Spider Delivery Service | Smart Power Meter |
#### Investment societies (9)
| Key | `paperclip` | `witch` | `alien` | `insects` | `computers` |
|---|---|---|---|---|---|
| `inv.inv_low_1` | Steady Staples Inc. | Old Hollow Apothecary | Zeta Mining Cooperative | Anthill Savings Bank | Stable Silicon Bank |
| `inv.inv_low_2` | Office Supply Trust | Greywood Herb Co-op | Orion Ore Trust | Honeycomb Trust | ByteSafe Trust |
| `inv.inv_low_3` | Copper Wire Bond | Village Cauldron Guild | Lunar Refinery Bond | Leafy Greens Co-op | Mainframe Heritage Fund |
| `inv.inv_mid_1` | Binder Dynamics | Moonpetal Brewers | XenoCorp Industries | Dung Beetle Logistics Ltd | NeoChip Holdings |
| `inv.inv_mid_2` | Clip Logistics | Nightshade & Sons | Nebula Extraction Ltd | Termite Tower Builders | CloudNine Hosting |
| `inv.inv_mid_3` | Stationery Futures | Crooked Broom Trading | Void Cargo Syndicate | Cricket Courier Corp | Packet Dynamics |
| `inv.inv_high_1` | NanoWire Labs | Dragonscale Elixirs | Hyperion Rift Labs | Locust Swarm Capital | MoonShot Mining DAO |
| `inv.inv_high_2` | Paperless Dreams Ltd | Wyrmwood Potions Ltd | Singularity Salvage | Wasp Venture Fund | HypeCoin Labs |
| `inv.inv_high_3` | Hyper-Clip Ventures | Forbidden Brew Cartel | Black Hole Ventures | Mantis Ambush Futures | Quantum Leap Capital |
#### Endless upgrades (14)
| Key | `paperclip` | `witch` | `alien` | `insects` | `computers` |
|---|---|---|---|---|---|
| `endless.e_click` | Manual mastery | Manual mastery | Manual mastery | Manual mastery | Manual mastery |
| `endless.e_gen1` | Autoclipper overhaul | Apprentice overhaul | Mining Drone overhaul | Worker Ant overhaul | Old Laptop overhaul |
| `endless.e_gen2` | MegaClipper overhaul | Bubbling Cauldron overhaul | Plasma Drill overhaul | Leafcutter Squad overhaul | Gaming PC overhaul |
| `endless.e_gen3` | Clip Factory overhaul | Alchemy Lab overhaul | Orbital Extractor overhaul | Beetle Hauler overhaul | GPU Mining Rig overhaul |
| `endless.e_gen4` | Hypno Drones overhaul | Broomstick Fleet overhaul | Asteroid Harvester overhaul | Termite Mound overhaul | Server Rack overhaul |
| `endless.e_gen5` | Probe Swarm overhaul | Moonlit Coven overhaul | Hive Swarm overhaul | Locust Swarm overhaul | Data Center overhaul |
| `endless.e_gen6` | Matter Converter overhaul | Philosopher's Engine overhaul | Planet Cracker overhaul | Hive Queen overhaul | Quantum Mainframe overhaul |
| `endless.e_global` | Total optimisation | Total optimisation | Total optimisation | Total optimisation | Total optimisation |
| `endless.e_demand` | Mass appeal | Mass appeal | Mass appeal | Mass appeal | Mass appeal |
| `endless.e_value` | Premium margin | Premium margin | Premium margin | Premium margin | Premium margin |
| `endless.e_efficiency` | Wire thrift | Herbs thrift | Raw ore thrift | Silk thrift | Energy (W) thrift |
| `endless.e_discount` | Hard bargaining | Hard bargaining | Hard bargaining | Hard bargaining | Hard bargaining |
| `endless.e_stack` | Wire stockpiling | Herbs stockpiling | Raw ore stockpiling | Silk stockpiling | Energy (W) stockpiling |
| `endless.e_cost` | Economies of scale | Economies of scale | Economies of scale | Economies of scale | Economies of scale |
#### Research (15)
| Key | Subject (the same in every theme, drawn in each theme's style) |
|---|---|
| `research.r_prod_1` | Optimised Workflows |
| `research.r_prod_2` | Automation Suite |
| `research.r_prod_3` | Total Integration |
| `research.r_mkt_1` | Market Analysis |
| `research.r_mkt_2` | Brand Strategy |
| `research.r_mkt_3` | Premium Positioning |
| `research.r_log_1` | Resource Efficiency |
| `research.r_log_2` | Bulk Procurement |
| `research.r_log_3` | Lean Manufacturing |
| `research.r_fin_1` | Portfolio Management |
| `research.r_fin_2` | Risk Modelling |
| `research.r_fin_3` | Negotiation Training |
| `research.r_ins_1` | Research Methods |
| `research.r_ins_2` | Remote Operations |
| `research.r_ins_3` | Price Oracle |
#### Legacy perks (6)
| Key | Subject (the same in every theme, drawn in each theme's style) |
|---|---|
| `legacy.lg_prod` | Industrial Memory |
| `legacy.lg_demand` | Brand Heritage |
| `legacy.lg_cost` | Lean Blueprints |
| `legacy.lg_start` | Head Start |
| `legacy.lg_offline` | Night Shift |
| `legacy.lg_rp` | Research Archive |
#### Achievements (23)
| Key | Subject (the same in every theme, drawn in each theme's style) |
|---|---|
| `ach.a_prod_1` | First Steps |
| `ach.a_prod_2` | Getting Serious |
| `ach.a_prod_3` | Industrial Scale |
| `ach.a_prod_4` | Beyond Imagination |
| `ach.a_prod_5` | Cosmic Output |
| `ach.a_gen_1` | Small Team |
| `ach.a_gen_2` | Big Operation |
| `ach.a_gen_3` | Endless Workforce |
| `ach.a_upg_1` | Tinkerer |
| `ach.a_upg_2` | Perfectionist |
| `ach.a_inv_1` | Pocket Money |
| `ach.a_inv_2` | Smart Money |
| `ach.a_inv_3` | Tycoon |
| `ach.a_gam_1` | Beginner's Luck |
| `ach.a_gam_2` | High Roller |
| `ach.a_gam_3` | Chip Collector |
| `ach.a_con_1` | Deal Maker |
| `ach.a_con_2` | Reliable Partner |
| `ach.a_res_1` | Curious Mind |
| `ach.a_res_2` | Master Scientist |
| `ach.a_leg_1` | Fresh Start |
| `ach.a_leg_2` | Eternal Return |
| `ach.a_evt_1` | Quick Hands |
<!-- icons:end -->
- `npm run icons -- --write` regenerates `ICONS.txt`, `npm run icons -- --manifest` prints a complete `assets` skeleton to start from. `npm test` fails if `ICONS.txt` is out of date or if the interface uses an icon key that is not listed.