@@ -948,8 +948,7 @@ function scrollToRandomUser() {
948948 playSound ( "levelUp" ) ;
949949 randomCard . classList . add ( "selected-fancy" ) ;
950950
951- // Inject the Tracing SVG
952- const svgNamespace = "http://www.w3.org/2000/svg" ;
951+ const svgNamespace = "https://www.w3.org/2000/svg" ;
953952 const svg = document . createElementNS ( svgNamespace , "svg" ) ;
954953 const rect = document . createElementNS ( svgNamespace , "rect" ) ;
955954
@@ -961,7 +960,6 @@ function scrollToRandomUser() {
961960 svg . appendChild ( rect ) ;
962961 randomCard . appendChild ( svg ) ;
963962
964- // Remove trace and fancy class after the 7.5s animation ends
965963 setTimeout ( ( ) => {
966964 randomCard . classList . remove ( "selected-fancy" ) ;
967965 svg . remove ( ) ;
@@ -978,13 +976,11 @@ window.toggleScreenshotMode = () => {
978976 const footer = document . querySelector ( "footer" ) ;
979977 const gameStats = document . getElementById ( "game-stats" ) ;
980978
981- // Hide everything
982979 [ devPanel , header , footer , gameStats ] . forEach ( ( el ) => {
983980 if ( el ) el . style . opacity = "0" ;
984981 if ( el ) el . style . pointerEvents = "none" ;
985982 } ) ;
986983
987- // Show a tiny notification that it's active
988984 const toast = document . createElement ( "div" ) ;
989985 toast . style . cssText =
990986 "position:fixed; bottom:20px; left:50%; transform:translateX(-50%); color:var(--text-muted); font-family:monospace; font-size:10px; z-index:9999;" ;
@@ -1007,26 +1003,17 @@ function renderXP(value) {
10071003 const pb = document . getElementById ( "level-progress" ) ;
10081004 if ( ! pb ) return ;
10091005
1010- // 1. Ensure 'value' is a clean number
10111006 const currentXPNum = Number ( value ) || 0 ;
10121007
1013- // 2. Calculate percentage (current / 45 * 100)
10141008 const percentage = Math . min ( ( currentXPNum / 45 ) * 100 , 100 ) ;
10151009
1016- // 3. Apply to style
10171010 pb . style . width = `${ percentage } %` ;
1018-
1019- // Debugging: uncomment this to see the math in your console
1020- // console.log(`XP: ${currentXPNum}, Percent: ${percentage}%`);
10211011}
10221012
10231013function showLevelUpToast ( rank ) {
1024- // 1. Create the container
10251014 const toast = document . createElement ( "div" ) ;
10261015 toast . className = "level-up-toast" ;
10271016
1028- // 2. Build the inner content
1029- // We use the rank color for the name and emoji to make it feel custom
10301017 toast . innerHTML = `
10311018 <div class="toast-content">
10321019 <span class="toast-emoji">${ rank . emoji } </span>
@@ -1039,7 +1026,6 @@ function showLevelUpToast(rank) {
10391026
10401027 document . body . appendChild ( toast ) ;
10411028
1042- // 3. Auto-remove after animation
10431029 setTimeout ( ( ) => {
10441030 toast . classList . add ( "fade-out" ) ;
10451031 setTimeout ( ( ) => toast . remove ( ) , 500 ) ;
@@ -1049,7 +1035,6 @@ function showLevelUpToast(rank) {
10491035function matrixConsoleLog ( level ) {
10501036 const rank = getRank ( level ) ;
10511037
1052- // This looks awesome in the F12 Dev Console
10531038 console . log (
10541039 `%c [SYSTEM] %c LEVEL UP: %c ${ rank . name . toUpperCase ( ) } %c [LVL ${ level } ] ` ,
10551040 "color: #10b981; font-weight: bold; background: #064e3b; padding: 2px;" ,
@@ -1058,20 +1043,17 @@ function matrixConsoleLog(level) {
10581043 "color: #94a3b8; background: #1e293b; padding: 2px;" ,
10591044 ) ;
10601045
1061- // 3. If you have an on-screen Matrix Console element, push there too:
10621046 const matrixConsole = document . getElementById ( "matrix-console-output" ) ;
10631047 if ( matrixConsole ) {
10641048 const line = document . createElement ( "p" ) ;
10651049 line . className = "matrix-line text-xs font-mono mb-1" ;
10661050 line . innerHTML = `<span class="text-green-500">>></span> Rank Updated: <span style="color: ${ rank . color } ">${ rank . name } </span>` ;
10671051 matrixConsole . appendChild ( line ) ;
1068- // Auto-scroll to bottom
10691052 matrixConsole . scrollTop = matrixConsole . scrollHeight ;
10701053 }
10711054}
10721055
10731056document . addEventListener ( "keydown" , ( e ) => {
1074- // Check if user pressed 'L' (for Log) and isn't typing in an input field
10751057 if (
10761058 e . key . toLowerCase ( ) === "l" &&
10771059 e . target . tagName !== "INPUT" &&
@@ -1087,53 +1069,38 @@ document.addEventListener("keydown", (e) => {
10871069} ) ;
10881070
10891071async function addExperience ( amount ) {
1090- // 1. Force strict numeric types to prevent "1" + "1" = "11"
10911072 const xpToAdd = Number ( amount ) || 0 ;
10921073 currentXP = Number ( currentXP ) || 0 ;
10931074 currentLevel = Number ( currentLevel ) || 0 ;
10941075 const XP_THRESHOLD = 45 ;
10951076
1096- // 2. Add the new XP
10971077 currentXP += xpToAdd ;
10981078
1099- // 3. Process Level Ups one by one
1100- // Using a while loop ensures that if you gain 100 XP,
1101- // it processes Level 1, then Level 2, with the remainder left over.
11021079 while ( currentXP >= XP_THRESHOLD && currentLevel < NUM_LEVELS ) {
11031080 currentXP -= XP_THRESHOLD ;
11041081 currentLevel ++ ;
1105- // 1. Trigger the Visual Toast (Top of screen)
11061082 if ( typeof showLevelUpToast === "function" ) {
11071083 showLevelUpToast ( getRank ( currentLevel ) ) ;
11081084 }
11091085
1110- // 2. Trigger the "Matrix" Console Log
11111086 matrixConsoleLog ( currentLevel ) ;
11121087
1113- // --- THE POPUP TRIGGER ---
11141088 const badge = document . getElementById ( "level-badge" ) ;
11151089 if ( badge ) {
1116- // Remove the class if it exists (to reset animation)
11171090 badge . classList . remove ( "animate-badge-pop" ) ;
1118- // Trigger a "reflow" (magic trick to allow re-animation)
11191091 void badge . offsetWidth ;
1120- // Re-add the class
11211092 badge . classList . add ( "animate-badge-pop" ) ;
11221093 }
1123- // --------------------------
11241094
11251095 console . log ( `Leveled Up to ${ currentLevel } !` ) ;
11261096 }
1127- // 4. Persistence: Save clean numbers
11281097 localStorage . setItem ( "userLevel" , currentLevel . toString ( ) ) ;
11291098 localStorage . setItem ( "userXP" , currentXP . toString ( ) ) ;
11301099
1131- // 5. Update UI
11321100 updateGameUI ( ) ;
11331101}
11341102
11351103function updateInventoryCounts ( lvl ) {
1136- // Initialize counts
11371104 const counts = {
11381105 common : 0 ,
11391106 uncommon : 0 ,
@@ -1144,8 +1111,6 @@ function updateInventoryCounts(lvl) {
11441111 absolute : 0 ,
11451112 } ;
11461113
1147- // Loop through LEVELS array up to current unlocked level
1148- // We use i <= lvl because currentLevel is the index reached
11491114 for ( let i = 0 ; i <= lvl ; i ++ ) {
11501115 const levelEntry = LEVELS [ i ] ;
11511116 if ( levelEntry ?. rarity ) {
@@ -1156,7 +1121,6 @@ function updateInventoryCounts(lvl) {
11561121 }
11571122 }
11581123
1159- // Inject counts into the Tooltip DOM
11601124 const elements = {
11611125 "count-common" : counts . common ,
11621126 "count-uncommon" : counts . uncommon ,
@@ -1174,17 +1138,13 @@ function updateInventoryCounts(lvl) {
11741138}
11751139
11761140function updateLevelUI ( levelData ) {
1177- // ... your existing code to update level-name and level-number ...
1178-
11791141 const tooltipDesc = document . getElementById ( "tooltip-desc" ) ;
11801142 const tooltipRarity = document . getElementById ( "tooltip-rarity" ) ;
11811143 const tooltipCard = document . getElementById ( "level-tooltip" ) ;
11821144
1183- // Update Text
11841145 tooltipDesc . innerText = levelData . description ;
11851146 tooltipRarity . innerText = levelData . rarity ;
11861147
1187- // Optional: Dynamic Color based on rarity
11881148 const rarityColors = {
11891149 common : "var(--rarity-common)" ,
11901150 uncommon : "var(--rarity-uncommon)" ,
@@ -1205,25 +1165,20 @@ function updateGameUI() {
12051165 const lvl = Number ( currentLevel ) || 0 ;
12061166 const rank = getRank ( lvl ) ;
12071167
1208- // 1. Update the Description Tooltip
12091168 updateLevelUI ( rank ) ;
12101169
1211- // 2. Calculate and Update the Inventory Tooltip
12121170 updateInventoryCounts ( lvl ) ;
12131171
1214- // Update the Name and its Color
12151172 const nameLabel = document . getElementById ( "level-name" ) ;
12161173 if ( nameLabel ) {
12171174 nameLabel . innerText = rank . name ;
12181175 nameLabel . style . color = rank . color ;
12191176 }
12201177
1221- // Update the Badge
12221178 const badge = document . getElementById ( "level-badge" ) ;
12231179 if ( badge ) {
12241180 badge . innerText = rank . emoji ;
12251181 badge . style . backgroundColor = rank . color ;
1226- // Set contrast text color for the emoji/background
12271182 badge . style . color = getContrastYIQ ( rank . color ) ;
12281183 }
12291184
0 commit comments