Skip to content

Commit 84ad51e

Browse files
jebarpgjebarpg
committed
initial landing page scaffolding code
1 parent 33737d4 commit 84ad51e

File tree

15 files changed

+3830
-187
lines changed

15 files changed

+3830
-187
lines changed

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎enemyGenerator/index.html‎

Lines changed: 180 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,185 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Compact Random Enemy Generator</title>
6+
<style>
7+
body {
8+
font-family: sans-serif;
9+
padding: 20px;
10+
background: #1e1e1e;
11+
color: #f0f0f0;
12+
}
13+
h1 { margin-bottom: 10px; }
14+
.buttons { display: flex; gap: 10px; margin-bottom: 20px; }
15+
button {
16+
padding: 8px 16px;
17+
font-size: 14px;
18+
cursor: pointer;
19+
border: none;
20+
border-radius: 6px;
21+
background: #444;
22+
color: #fff;
23+
transition: background 0.2s, transform 0.1s;
24+
}
25+
button:hover { background: #666; }
26+
button:active { transform: scale(0.97); }
27+
28+
#enemyList {
29+
display: grid;
30+
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
31+
gap: 12px;
32+
}
33+
34+
.enemy {
35+
position: relative;
36+
background: #2c2c2c;
37+
border-radius: 6px;
38+
border: 1px solid #333;
39+
padding: 8px;
40+
font-size: 13px;
41+
opacity: 0;
42+
animation: fadeIn 0.4s ease forwards;
43+
overflow: hidden;
44+
}
45+
.boss {
46+
border-color: gold;
47+
box-shadow: 0 0 8px gold;
48+
background: linear-gradient(145deg, #2c2c2c, #3a3000);
49+
}
50+
51+
@keyframes fadeIn { to { opacity: 1; } }
52+
@keyframes floatEnemy { 0% { transform: translateY(0); } 100% { transform: translateY(-3px); } }
53+
54+
.loot.common { color: #ccc; text-shadow: 0 0 1px #ccc; }
55+
.loot.rare { color: #1e90ff; text-shadow: 0 0 3px #1e90ff; }
56+
.loot.epic { color: #a020f0; text-shadow: 0 0 5px #a020f0; }
57+
.loot.legendary { color: #fbc02d; text-shadow: 0 0 6px #fbc02d,0 0 12px #fbc02d; animation: float 1.2s ease-in-out infinite alternate; }
58+
.loot.mythic { color: #ff1493; text-shadow: 0 0 7px #ff1493,0 0 14px #ff1493; animation: float 1.2s ease-in-out infinite alternate; }
59+
.loot.divine { color: #00ffff; text-shadow: 0 0 7px #00ffff,0 0 14px #00ffff; animation: float 1.2s ease-in-out infinite alternate; }
60+
61+
@keyframes float { 0% { transform: translateY(0px); } 100% { transform: translateY(-4px); } }
62+
63+
.sparkle { position: absolute; width: 3px; height: 3px; border-radius: 50%; pointer-events: none; opacity: 0; animation: drift 1.2s forwards; }
64+
@keyframes drift { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1.2); opacity: 0; } }
65+
66+
/* Elemental effects */
67+
.elementalEffect {
68+
position: absolute;
69+
top: 0; left: 0; right: 0; bottom: 0;
70+
pointer-events: none;
71+
border-radius: 6px;
72+
z-index: 0;
73+
}
74+
.fire { background: radial-gradient(rgba(255,69,0,0.2), transparent); animation: flicker 1s infinite alternate; }
75+
.water { background: radial-gradient(rgba(30,144,255,0.2), transparent); animation: ripple 2s infinite alternate; }
76+
.wind { background: radial-gradient(rgba(200,200,200,0.15), transparent); animation: swirl 3s infinite linear; }
77+
.earth { background: radial-gradient(rgba(34,139,34,0.15), transparent); animation: dust 3s infinite alternate; }
78+
.lightning { background: radial-gradient(rgba(249,255,0,0.2), transparent); animation: spark 0.5s infinite alternate; }
79+
.ice { background: radial-gradient(rgba(160,224,255,0.2), transparent); animation: snow 2s infinite linear; }
80+
.poison { background: radial-gradient(rgba(106,13,173,0.15), transparent); animation: mist 3s infinite alternate; }
81+
.shadow { background: radial-gradient(rgba(85,85,85,0.2), transparent); animation: smoke 3s infinite alternate; }
82+
.light { background: radial-gradient(rgba(255,215,0,0.15), transparent); animation: glowPulse 2s infinite alternate; }
83+
.arcane { background: radial-gradient(rgba(184,115,255,0.15), transparent); animation: twinkle 2s infinite alternate; }
84+
.nature { background: radial-gradient(rgba(50,205,50,0.15), transparent); animation: petalFall 3s infinite linear; }
85+
.spirit { background: radial-gradient(rgba(240,248,255,0.15), transparent); animation: wisp 3s infinite alternate; }
86+
87+
@keyframes flicker { 0% { opacity:0.3;} 50% { opacity:0.6;} 100% { opacity:0.4;} }
88+
@keyframes ripple { 0% { transform: scale(0.9);} 50% { transform: scale(1.1);} 100% { transform: scale(1);} }
89+
@keyframes swirl { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
90+
@keyframes dust { 0% { transform: translateY(0);} 100% { transform: translateY(-4px);} }
91+
@keyframes spark { 0% { opacity:0.3;} 50% { opacity:0.8;} 100% { opacity:0.3;} }
92+
@keyframes snow { 0% { background-position:0 0;} 100% { background-position:15px 15px;} }
93+
@keyframes mist { 0% { opacity:0.2;} 100% { opacity:0.5;} }
94+
@keyframes smoke { 0% { transform: translateY(0);} 100% { transform: translateY(-6px);} }
95+
@keyframes glowPulse { 0% { opacity:0.2;} 100% { opacity:0.5;} }
96+
@keyframes twinkle { 0% { opacity:0.3;} 100% { opacity:0.6;} }
97+
@keyframes petalFall { 0% { transform: translateY(0);} 100% { transform: translateY(6px);} }
98+
@keyframes wisp { 0% { transform: translateY(0);} 100% { transform: translateY(-4px);} }
99+
</style>
100+
</head>
3101
<body>
4102

5-
<h1>Hello World</h1>
6-
<p>My first paragraph.</p>
103+
<h1>🔥 Compact Random Enemy Generator ⚔️</h1>
104+
<div class="buttons">
105+
<button id="generate">Generate Enemy</button>
106+
<button id="clear">Clear Enemies</button>
107+
</div>
108+
<div id="enemyList"></div>
109+
110+
<script>
111+
// Helpers
112+
function randomChoice(arr){return arr[Math.floor(Math.random()*arr.length)];}
113+
114+
// Adjectives, Names, Types, Elements, Loot
115+
const adjectives=["Fierce","Ancient","Tiny","Shadowy","Savage","Corrupted","Enraged","Cunning","Mystic","Vicious","Silent","Wild","Infernal","Frozen","Electric","Venomous","Ghastly","Raging","Brutal","Cursed","Divine","Mighty","Swift","Stealthy","Burning","Spectral","Arcane","Stone","Thunderous","Twisted","Bloodthirsty","Dreadful","Ironclad","Phantom","Lurking","Shadowed","Vengeful","Golden","Ethereal","Plagued","Shimmering","Rotted","Frostbitten","Blazing","Haunted","Toxic","Stormy","Spiritbound","Emerald","Obsidian","Crystal","Radiant","Darkened","Luminous","Ancientborn"];
116+
const names=["Goblin","Specter","Slime","Wolf","Elemental","Ogre","Reaper","Imp","Wraith","Troll","Skeleton","Zombie","Dragonling","Ghoul","Harpy","Banshee","Golem","Phantom","Lich","Spider","Mimic","Serpent","Hydra","Wyvern","Vampire","Bat","Beast","Fiend","Shade","Kraken","Chimera","Minotaur","Demon","Pixie","Fairy","Kobold","Cyclops","Salamander","Wisp","Drake","Wolverine","Raptor","Cobra","Oni","Succubus","Incubus","Necromancer","Shadebeast","Frostling","Firebrand","Stormcaller","Earthshaker","Spiritwalker","Nightstalker","Venomfang"];
117+
const types=[{name:"Melee",emoji:"⚔️"},{name:"Ranged",emoji:"🏹"},{name:"Caster",emoji:"🔮"},{name:"Assassin",emoji:"🗡️"},{name:"Tank",emoji:"🛡️"},{name:"Summoner",emoji:"🐾"},{name:"Berserker",emoji:"🔥"},{name:"Sniper",emoji:"🎯"},{name:"Healer",emoji:"💖"},{name:"Mage",emoji:"✨"},{name:"Necromancer",emoji:"☠️"},{name:"Elementalist",emoji:"🌪️"},{name:"Rogue",emoji:"🌙"},{name:"Shaman",emoji:"🪶"},{name:"Warlock",emoji:"💀"}];
118+
const elements=[{name:"Fire",emoji:"🔥",color:"#ff4500"},{name:"Water",emoji:"💧",color:"#1e90ff"},{name:"Wind",emoji:"🌪️",color:"#ccc"},{name:"Earth",emoji:"🌱",color:"#228b22"},{name:"Lightning",emoji:"⚡",color:"#f9ff00"},{name:"Ice",emoji:"❄️",color:"#a0e0ff"},{name:"Poison",emoji:"☠️",color:"#6a0dad"},{name:"Shadow",emoji:"🌑",color:"#555"},{name:"Light",emoji:"🌞",color:"#ffd700"},{name:"Arcane",emoji:"💫",color:"#b873ff"},{name:"Nature",emoji:"🌸",color:"#32cd32"},{name:"Spirit",emoji:"🪶",color:"#f0f8ff"}];
119+
const lootRarities=[{name:"🪓 Common",class:"common"},{name:"🟦 Uncommon",class:"rare"},{name:"🟩 Rare",class:"rare"},{name:"🟪 Epic",class:"epic"},{name:"🟨 Legendary",class:"legendary"},{name:"💎 Mythic",class:"mythic"},{name:"🌟 Divine",class:"divine"}];
120+
const lootItems=["Sword","Bow","Staff","Dagger","Amulet","Ring","Armor","Wand","Helm","Shield","Gauntlets","Boots","Cape","Potion","Scroll","Orb","Talisman","Scepter","Lance","Crossbow","Grimoire","Crystal","Charm","Pendant","Totem","Bracer","Mask","Crown","Belt","Gemstone","Lantern"];
121+
122+
function generateEnemy(){
123+
const isBoss=Math.random()<0.05;
124+
const type=randomChoice(types);
125+
const element=randomChoice(elements);
126+
const name=`${isBoss?"💀 Boss ":''}${type.emoji} ${randomChoice(adjectives)} ${randomChoice(names)}`;
127+
const hp=isBoss?Math.floor(Math.random()*300)+500:Math.floor(Math.random()*50)+50;
128+
const mp=isBoss?Math.floor(Math.random()*200)+100:Math.floor(Math.random()*30)+20;
129+
const strength=isBoss?Math.floor(Math.random()*50)+50:Math.floor(Math.random()*15)+5;
130+
const dexterity=isBoss?Math.floor(Math.random()*40)+20:Math.floor(Math.random()*15)+5;
131+
const intelligence=isBoss?Math.floor(Math.random()*50)+40:Math.floor(Math.random()*20)+5;
132+
const defense=isBoss?Math.floor(Math.random()*40)+20:Math.floor(Math.random()*10)+5;
133+
const resistance=isBoss?Math.floor(Math.random()*50)+20:Math.floor(Math.random()*10)+5;
134+
const speed=isBoss?Math.floor(Math.random()*30)+20:Math.floor(Math.random()*15)+5;
135+
const luck=isBoss?Math.floor(Math.random()*20)+10:Math.floor(Math.random()*10)+1;
136+
let weakness;
137+
do{weakness=randomChoice(elements);}while(weakness.name===element.name);
138+
const loot={rarity:randomChoice(lootRarities),element:randomChoice(elements),item:randomChoice(lootItems)};
139+
return {name,type,hp,mp,strength,dexterity,intelligence,defense,resistance,speed,luck,strengthElement:element,weakness,loot,isBoss};
140+
}
141+
142+
function createDriftSparkles(container,color,count=12){
143+
for(let i=0;i<count;i++){
144+
const sparkle=document.createElement('div');
145+
sparkle.className='sparkle';
146+
sparkle.style.background=color;
147+
const dx=Math.random()*30-15;
148+
const dy=Math.random()*30-15;
149+
sparkle.style.setProperty('--x',`${dx}px`);
150+
sparkle.style.setProperty('--y',`${dy}px`);
151+
sparkle.style.left=`${Math.random()*container.offsetWidth}px`;
152+
sparkle.style.top=`${Math.random()*container.offsetHeight}px`;
153+
container.appendChild(sparkle);
154+
setTimeout(()=>sparkle.remove(),1400);
155+
}
156+
}
157+
158+
function displayEnemy(enemy){
159+
const container=document.createElement('div');
160+
container.style.animation=`fadeIn 0.4s ease forwards, floatEnemy 1.5s ease-in-out infinite alternate`;
161+
container.className=`enemy ${enemy.strengthElement.name.toLowerCase()}`+(enemy.isBoss?' boss':'');
162+
container.innerHTML=`
163+
<div class="elementalEffect ${enemy.strengthElement.name.toLowerCase()}"></div>
164+
<strong>${enemy.name}</strong> (${enemy.type.emoji} ${enemy.type.name})<br>
165+
❤️ ${enemy.hp} | 🔵 ${enemy.mp}<br>
166+
💪 ${enemy.strength} | 🏃 ${enemy.dexterity} | 🧠 ${enemy.intelligence}<br>
167+
🛡️ ${enemy.defense} | ✨ ${enemy.resistance} | ⚡ ${enemy.speed} | 🍀 ${enemy.luck}<br>
168+
⚡ <span class="${enemy.strengthElement.name.toLowerCase()}">${enemy.strengthElement.emoji} ${enemy.strengthElement.name}</span> |
169+
❌ <span class="${enemy.weakness.name.toLowerCase()}">${enemy.weakness.emoji} ${enemy.weakness.name}</span><br>
170+
🎁 <span class="loot ${enemy.loot.rarity.class}">${enemy.loot.rarity.name} ${enemy.loot.element.emoji} ${enemy.loot.element.name} ${enemy.loot.item}</span>
171+
`;
172+
document.getElementById('enemyList').prepend(container);
173+
createDriftSparkles(container,enemy.strengthElement.color,12);
174+
if(enemy.isBoss) createDriftSparkles(container,'#ffd700',12);
175+
if(['legendary','mythic','divine'].includes(enemy.loot.rarity.class)){
176+
const lootElem=container.querySelector('.loot');
177+
createDriftSparkles(lootElem,'#fbc02d',12);
178+
}
179+
}
7180

181+
document.getElementById('generate').addEventListener('click',()=>displayEnemy(generateEnemy()));
182+
document.getElementById('clear').addEventListener('click',()=>document.getElementById('enemyList').innerHTML='');
183+
</script>
8184
</body>
9-
</html>
185+
</html>

‎eslint.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
import { defineConfig, globalIgnores } from 'eslint/config'
7+
8+
export default defineConfig([
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs['recommended-latest'],
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
])

0 commit comments

Comments
 (0)