Главная Обзор Помощь
Вход
u23-27burdyko
/
Slakbaym1
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Ветка: master
Ветки Метки
Slakbaym1
/
Sklakbaym2.html

Sklakbaym2.html 94 KB
Постоянная ссылка История Исходник

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="ru">
    3. 

  3. <head>
    4. 

  4. <meta charset="UTF-8">
    5. 

  5. <title>КПП-3 · СКУД · Пост охраны</title>
    6. 

  6. <style>
    7. 

  7.   * { box-sizing: border-box; margin: 0; padding: 0; }
    8. 

  8.   html, body { height: 100%; overflow: hidden; background: #050810;
    9. 

  9.     color: #a8b8c8; font-family: "Courier New", monospace; font-size: 13px; }
    10. 

  10.   .app { height: 100vh; display: flex; flex-direction: column; }
    11. 

  11.   header { display: flex; align-items: center; gap: 20px; padding: 8px 20px;
    12. 

  12.     background: linear-gradient(180deg, #202830, #10161e);
    13. 

  13.     border-bottom: 1px solid #000; flex-shrink: 0; }
    14. 

  14.   .brand { color: #ffd060; font-weight: bold; letter-spacing: 2px;
    15. 

  15.     font-size: 14px; text-shadow: 0 0 10px rgba(255,208,96,.5); }
    16. 

  16.   .brand small { color: #506080; font-weight: normal; letter-spacing: 1px;
    17. 

  17.     font-size: 10px; margin-left: 8px; }
    18. 

  18.   .model-badge { color: #80e0ff; font-size: 11px; letter-spacing: 1px;
    19. 

  19.     border: 1px solid #2a4a6a; padding: 3px 8px; border-radius: 2px;
    20. 

  20.     background: rgba(64,160,224,.08); }
    21. 

  21.   .header-status { display: flex; align-items: center; gap: 10px; margin-left: auto; }
    22. 

  22.   .clock { color: #6090c0; letter-spacing: 2px; font-size: 13px; }
    23. 

  23.   .sys-status { display: flex; align-items: center; gap: 8px;
    24. 

  24.     color: #40d080; font-weight: bold; font-size: 12px; letter-spacing: 1px; }
    25. 

  25.   .sys-status .led { width: 10px; height: 10px; border-radius: 50%;
    26. 

  26.     background: #40d080; box-shadow: 0 0 10px #40d080; }
    27. 

  27.   .sys-status.alarm { color: #ff4040; }
    28. 

  28.   .sys-status.alarm .led { background: #ff4040;
    29. 

  29.     box-shadow: 0 0 15px #ff4040; animation: blink .4s infinite; }
    30. 

  30.   .sys-status.wait { color: #ffb040; }
    31. 

  31.   .sys-status.wait .led { background: #ffb040; box-shadow: 0 0 10px #ffb040; }
    32. 

  32.   .sys-status.pause { color: #60a0e0; }
    33. 

  33.   .sys-status.pause .led { background: #60a0e0; box-shadow: 0 0 10px #60a0e0; }
    34. 

  34.   .sys-status.senior { color: #a0c8ff; }
    35. 

  35.   .sys-status.senior .led { background: #a0c8ff; box-shadow: 0 0 10px #a0c8ff; }
    36. 

  36.   @keyframes blink { 50% { opacity: .2; } }
    37. 

  37. 

  38.   .log-toggle {
    39. 

  39.     background: linear-gradient(180deg, #1a2028, #101418);
    40. 

  40.     color: #a0c0e0; border: 1px solid #304050;
    41. 

  41.     border-radius: 3px; padding: 5px 12px;
    42. 

  42.     font-family: inherit; font-size: 11px; letter-spacing: 1.2px;
    43. 

  43.     cursor: pointer; transition: all .15s; margin-left: 8px;
    44. 

  44.   }
    45. 

  45.   .log-toggle:hover { border-color: #4080c0; color: #c0e0ff;
    46. 

  46.     box-shadow: 0 0 10px rgba(96,160,224,.3); }
    47. 

  47.   .log-toggle.has-alarm { border-color: #702020; color: #ffb0b0;
    48. 

  48.     animation: blink 1s infinite; }
    49. 

  49. 

  50.   main { flex: 1; display: grid; grid-template-columns: 1fr 400px; min-height: 0; }
    51. 

  51.   .stage { position: relative; background: #02040a; overflow: hidden; }
    52. 

  52.   .stage canvas { display: block; width: 100%; height: 100%; }
    53. 

  53.   aside { background: #0a0e14; border-left: 1px solid #1a2028;
    54. 

  54.     display: flex; flex-direction: column; overflow-y: auto; }
    55. 

  55.   aside .section { border-bottom: 1px solid #1a2028; flex-shrink: 0; }
    56. 

  56.   aside .section h3 { padding: 8px 14px; background: #080c12; color: #6070a0;
    57. 

  57.     font-size: 10.5px; letter-spacing: 2px; font-weight: normal;
    58. 

  58.     border-bottom: 1px solid #1a2028; }
    59. 

  59.   aside .content { padding: 10px 12px; }
    60. 

  60. 

  61.   .model-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    62. 

  62.     padding: 10px 12px; }
    63. 

  63.   .model-btn {
    64. 

  64.     background: linear-gradient(180deg, #10161e, #0a0e14);
    65. 

  65.     border: 1px solid #2a3442; border-radius: 3px;
    66. 

  66.     padding: 8px 8px; cursor: pointer; transition: all .15s;
    67. 

  67.     font-family: inherit; color: #8090a8; text-align: left;
    68. 

  68.     font-size: 10.5px; line-height: 1.35;
    69. 

  69.   }
    70. 

  70.   .model-btn:hover { border-color: #4080c0; background: #0f1822; color: #c0d0e0; }
    71. 

  71.   .model-btn.active {
    72. 

  72.     border-color: #40d080; color: #c0f0d0;
    73. 

  73.     background: linear-gradient(180deg, #10201a, #0a1a14);
    74. 

  74.     box-shadow: 0 0 12px rgba(64,208,128,.25), inset 0 0 8px rgba(64,208,128,.08);
    75. 

  75.   }
    76. 

  76.   .model-btn .mb-code { display: block; color: #ffd060; font-weight: bold;
    77. 

  77.     font-size: 12px; letter-spacing: 1.5px; margin-bottom: 2px; }
    78. 

  78.   .model-btn .mb-name { display: block; color: #80e0ff; font-size: 10px;
    79. 

  79.     margin-bottom: 3px; }
    80. 

  80.   .model-btn .mb-spec { display: block; color: #506080; font-size: 9.5px; }
    81. 

  81.   .model-btn.active .mb-spec { color: #80a0c0; }
    82. 

  82. 

  83.   .skud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px;
    84. 

  84.     font-size: 11px; }
    85. 

  85.   .skud-row { display: flex; align-items: center; gap: 6px; padding: 3px 0;
    86. 

  86.     color: #8090a0; }
    87. 

  87.   .skud-led { width: 9px; height: 9px; border-radius: 50%;
    88. 

  88.     background: #1a2028; border: 1px solid #2a3442; flex-shrink: 0;
    89. 

  89.     transition: all .1s; }
    90. 

  90.   .skud-led.on { background: #40d080; box-shadow: 0 0 8px #40d080; border-color: #40d080; }
    91. 

  91.   .skud-led.red { background: #ff4040; box-shadow: 0 0 8px #ff4040; border-color: #ff4040; }
    92. 

  92.   .skud-led.yel { background: #ffb040; box-shadow: 0 0 8px #ffb040; border-color: #ffb040; }
    93. 

  93.   .skud-led.blu { background: #60a0e0; box-shadow: 0 0 8px #60a0e0; border-color: #60a0e0; }
    94. 

  94.   .skud-led.blink { animation: blink .5s infinite; }
    95. 

  95. 

  96.   .passes-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    97. 

  97.   .pass-card { background: #060a10; border: 1px solid #202836;
    98. 

  98.     border-radius: 3px; padding: 8px 10px; font-size: 11.5px; }
    99. 

  99.   .pass-card .head { color: #506080; font-size: 9.5px; letter-spacing: 1.5px;
    100. 

  100.     margin-bottom: 6px; text-transform: uppercase; }
    101. 

  101.   .pass-card .num { color: #ffd060; font-weight: bold; font-size: 15px;
    102. 

  102.     letter-spacing: 1px; margin-bottom: 4px; }
    103. 

  103.   .pass-card .name { color: #c0d0e0; margin-bottom: 4px; font-size: 11px; line-height: 1.3; }
    104. 

  104.   .pass-card .dept { color: #607890; font-size: 10px; margin-bottom: 6px; }
    105. 

  105.   .pass-card .status { padding: 3px 6px; border-radius: 2px; font-size: 10px;
    106. 

  106.     letter-spacing: 1px; text-align: center; display: inline-block; }
    107. 

  107.   .pass-card .status.ok { background: rgba(64,208,128,.15); color: #40d080;
    108. 

  108.     border: 1px solid rgba(64,208,128,.4); }
    109. 

  109.   .pass-card .status.bad { background: rgba(255,64,64,.15); color: #ff6060;
    110. 

  110.     border: 1px solid rgba(255,64,64,.4); }
    111. 

  111.   .pass-card .status.empty { background: rgba(80,90,110,.1); color: #506080;
    112. 

  112.     border: 1px dashed #303848; }
    113. 

  113.   .decision-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    114. 

  114.     padding: 10px 12px; border-bottom: 1px solid #1a2028; }
    115. 

  115.   button.big { background: linear-gradient(180deg, #1a2028, #101418);
    116. 

  116.     color: #c0d0e0; border: 1px solid #304050;
    117. 

  117.     border-radius: 3px; padding: 12px 10px;
    118. 

  118.     font-family: inherit; font-size: 12.5px; letter-spacing: 1.5px;
    119. 

  119.     cursor: pointer; transition: all .15s; font-weight: bold; }
    120. 

  120.   button.big.allow { border-color: #206030; color: #80e0a0; }
    121. 

  121.   button.big.allow:hover:not(:disabled) {
    122. 

  122.     background: linear-gradient(180deg, #204830, #103020); border-color: #40d080; }
    123. 

  123.   button.big.deny { border-color: #702020; color: #ffb0b0; }
    124. 

  124.   button.big.deny:hover:not(:disabled) {
    125. 

  125.     background: linear-gradient(180deg, #401818, #200808); border-color: #ff4040; }
    126. 

  126.   button.big:disabled { opacity: .3; cursor: not-allowed; }
    127. 

  127.   .action-buttons { padding: 10px 12px; display: flex; flex-direction: column;
    128. 

  128.     gap: 6px; border-bottom: 1px solid #1a2028; }
    129. 

  129.   button.ctrl { background: linear-gradient(180deg, #1a2028, #101418);
    130. 

  130.     color: #c0d0e0; border: 1px solid #304050;
    131. 

  131.     border-radius: 2px; padding: 8px 12px;
    132. 

  132.     font-family: inherit; font-size: 11.5px; letter-spacing: .5px;
    133. 

  133.     cursor: pointer; transition: all .15s; }
    134. 

  134.   button.ctrl:hover:not(:disabled) { background: linear-gradient(180deg, #243040, #182028);
    135. 

  135.     border-color: #4080c0; }
    136. 

  136.   button.ctrl:disabled { opacity: .35; cursor: not-allowed; }
    137. 

  137.   button.ctrl.primary { border-color: #4060a0; color: #a0d0ff; }
    138. 

  138.   button.ctrl.danger { border-color: #702020; color: #ffb0b0; }
    139. 

  139.   button.ctrl.green { border-color: #206030; color: #80e0a0; }
    140. 

  140.   button.ctrl.yel { border-color: #706020; color: #ffd060; }
    141. 

  141.   button.ctrl.red { border-color: #702020; color: #ffb0b0; }
    142. 

  142.   button.ctrl.active { background: linear-gradient(180deg, #2a3a4a, #1a2028);
    143. 

  143.     border-color: #60a0e0; color: #c0e0ff; box-shadow: 0 0 8px rgba(96,160,224,.4); }
    144. 

  144. 

  145.   .ctrl-panel-grid { display: grid; grid-template-columns: 1fr 1fr 1fr;
    146. 

  146.     gap: 6px; padding: 10px 12px; }
    147. 

  147.   .ctrl-panel-grid button { padding: 10px 4px; font-size: 11px;
    148. 

  148.     letter-spacing: 1px; font-weight: bold; }
    149. 

  149.   .mode-row { display: flex; gap: 6px; padding: 0 12px 10px; }
    150. 

  150.   .mode-row button { flex: 1; padding: 7px 4px; font-size: 10.5px; }
    151. 

  151. 

  152.   .cond-row { display: flex; align-items: center; gap: 8px;
    153. 

  153.     padding: 6px 0; font-size: 11.5px; color: #8090a0; }
    154. 

  154.   .cond-row label { min-width: 60px; color: #607890; }
    155. 

  155.   .cond-row select {
    156. 

  156.     flex: 1; background: #060a10; color: #c0d0e0;
    157. 

  157.     border: 1px solid #304050; border-radius: 2px;
    158. 

  158.     padding: 5px 8px; font-family: inherit; font-size: 11.5px;
    159. 

  159.     cursor: pointer; }
    160. 

  160. 

  161.   .log { overflow-y: auto; padding: 8px 12px;
    162. 

  162.     font-size: 10.5px; line-height: 1.7; }
    163. 

  163.   .log .entry { color: #8090a8; }
    164. 

  164.   .log .entry.warn { color: #ffb040; }
    165. 

  165.   .log .entry.alarm { color: #ff4040; font-weight: bold; }
    166. 

  166.   .log .entry.ok { color: #40d080; }
    167. 

  167.   .log .entry.info { color: #60a0e0; }
    168. 

  168.   .log .entry.senior { color: #a0c8ff; font-weight: bold; }
    169. 

  169.   .log .entry.skud { color: #80e0ff; }
    170. 

  170.   .log .entry .time { color: #405060; margin-right: 6px; }
    171. 

  171. 

  172.   .log-full { max-height: 60vh; min-height: 300px;
    173. 

  173.     background: #060a10; border: 1px solid #1a2028; border-radius: 3px;
    174. 

  174.     padding: 12px 14px; font-size: 11.5px; line-height: 1.8; }
    175. 

  175. 

  176.   .hint { padding: 8px 12px; background: rgba(96,160,224,.08);
    177. 

  177.     border-left: 2px solid #4080c0; color: #a0c0e0;
    178. 

  178.     font-size: 11px; line-height: 1.5; }
    179. 

  179.   .hint b { color: #ffd060; }
    180. 

  180.   .modal { position: fixed; inset: 0; background: rgba(0,0,0,.85);
    181. 

  181.     display: none; align-items: center; justify-content: center;
    182. 

  182.     z-index: 100; padding: 20px; }
    183. 

  183.   .modal.on { display: flex; }
    184. 

  184.   .modal-content {
    185. 

  185.     background: linear-gradient(180deg, #1a2230, #0d141c);
    186. 

  186.     border: 2px solid #3a4858;
    187. 

  187.     border-radius: 4px;
    188. 

  188.     box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0,0,0,.9);
    189. 

  189.     padding: 24px 28px; width: min(640px, 100%);
    190. 

  190.     max-height: 90vh; overflow-y: auto;
    191. 

  191.     color: #c0d0e0; font-family: "Courier New", monospace; }
    192. 

  192.   .modal-content h2 {
    193. 

  193.     color: #ffd060; font-size: 16px; letter-spacing: 2px;
    194. 

  194.     margin-bottom: 20px; text-align: center;
    195. 

  195.     text-shadow: 0 0 10px rgba(255,208,96,.4); }
    196. 

  196.   .modal-content .row {
    197. 

  197.     display: flex; justify-content: space-between;
    198. 

  198.     padding: 8px 0; border-bottom: 1px solid #1a2028;
    199. 

  199.     font-size: 12.5px; }
    200. 

  200.   .modal-content .row:last-of-type { border-bottom: none; }
    201. 

  201.   .modal-content .row .k { color: #8090a0; }
    202. 

  202.   .modal-content .row .v { color: #a0d0ff; font-weight: bold; }
    203. 

  203.   .modal-content .row .v.good { color: #40d080; }
    204. 

  204.   .modal-content .row .v.bad { color: #ff6060; }
    205. 

  205.   .modal-content button {
    206. 

  206.     display: block; margin: 20px auto 0;
    207. 

  207.     padding: 10px 30px; font-family: inherit;
    208. 

  208.     font-size: 13px; letter-spacing: 1.5px;
    209. 

  209.     background: linear-gradient(180deg, #1a2028, #101418);
    210. 

  210.     color: #c0d0e0; border: 1px solid #4060a0;
    211. 

  211.     border-radius: 3px; cursor: pointer; }
    212. 

  212.   .modal-content button:hover { background: linear-gradient(180deg, #243040, #182028); }
    213. 

  213.   .refuse-menu {
    214. 

  214.     display: none; padding: 10px 12px;
    215. 

  215.     background: rgba(200,80,80,.08);
    216. 

  216.     border-top: 1px solid rgba(255,64,64,.3);
    217. 

  217.     border-bottom: 1px solid #1a2028; }
    218. 

  218.   .refuse-menu.on { display: block; }
    219. 

  219.   .refuse-menu .title {
    220. 

  220.     font-size: 10.5px; color: #ffb040; letter-spacing: 1.5px;
    221. 

  221.     margin-bottom: 8px; }
    222. 

  222.   .refuse-menu button.ctrl {
    223. 

  223.     width: 100%; margin-bottom: 5px;
    224. 

  224.     text-align: left; font-size: 11.5px; padding: 7px 10px; }
    225. 

  225.   .refuse-menu button.ctrl:last-child { margin-bottom: 0; }
    226. 

  226. </style>
    227. 

  227. </head>
    228. 

  228. <body>
    229. 

  229. 

  230. <div class="app">
    231. 

  231.   <header>
    232. 

  232.     <div class="brand">◤ КПП-3<small>СКУД · ПОСТ ОХРАНЫ</small></div>
    233. 

  233.     <div class="model-badge" id="modelBadge">МОДЕЛЬ: —</div>
    234. 

  234.     <div class="header-status">
    235. 

  235.       <div class="clock" id="clock">--:--:--</div>
    236. 

  236.       <div class="sys-status" id="sysStatus"><span class="led"></span><span id="sysStatusText">ПОСТ СВОБОДЕН</span></div>
    237. 

  237.       <button class="log-toggle" id="btnLogToggle" title="Журнал событий (F2)">☰ ЖУРНАЛ</button>
    238. 

  238.     </div>
    239. 

  239.   </header>
    240. 

  240. 

  241.   <main>
    242. 

  242.     <div class="stage"><canvas id="cv"></canvas></div>
    243. 

  243.     <aside>
    244. 

  244.       <div class="section">
    245. 

  245.         <h3>МОДЕЛЬ ШЛАГБАУМА · ПЕРЕКЛЮЧАТЕЛЬ</h3>
    246. 

  246.         <div class="model-switcher" id="modelSwitcher"></div>
    247. 

  247.       </div>
    248. 

  248. 

  249.       <div class="section">
    250. 

  250.         <h3>СТАНЦИЯ СКУД · ИНДИКАЦИЯ</h3>
    251. 

  251.         <div class="content">
    252. 

  252.           <div class="skud-grid">
    253. 

  253.             <div class="skud-row"><span class="skud-led" id="ledPower"></span>ПИТАНИЕ</div>
    254. 

  254.             <div class="skud-row"><span class="skud-led" id="ledArmState"></span>СТРЕЛА</div>
    255. 

  255.             <div class="skud-row"><span class="skud-led" id="ledKW1"></span>КВ-1 (низ)</div>
    256. 

  256.             <div class="skud-row"><span class="skud-led" id="ledKW2"></span>КВ-2 (верх)</div>
    257. 

  257.             <div class="skud-row"><span class="skud-led" id="ledLoop1"></span>ПЕТЛЯ 1</div>
    258. 

  258.             <div class="skud-row"><span class="skud-led" id="ledLoop2"></span>ПЕТЛЯ 2</div>
    259. 

  259.             <div class="skud-row"><span class="skud-led" id="ledPhoto"></span>ФОТОЭЛЕМЕНТ</div>
    260. 

  260.             <div class="skud-row"><span class="skud-led" id="ledImpact"></span>ДАТЧИК УДАРА</div>
    261. 

  261.             <div class="skud-row"><span class="skud-led" id="ledRelayOpen"></span>РЕЛЕ «ОТКР»</div>
    262. 

  262.             <div class="skud-row"><span class="skud-led" id="ledRelayClose"></span>РЕЛЕ «ЗАКР»</div>
    263. 

  263.             <div class="skud-row"><span class="skud-led" id="ledRelayStop"></span>РЕЛЕ «СТОП»</div>
    264. 

  264.             <div class="skud-row"><span class="skud-led" id="ledPass"></span>ПРОПУСК</div>
    265. 

  265.           </div>
    266. 

  266.         </div>
    267. 

  267.       </div>
    268. 

  268. 

  269.       <div class="section">
    270. 

  270.         <h3>ПУЛЬТ ОПЕРАТОРА</h3>
    271. 

  271.         <div class="ctrl-panel-grid">
    272. 

  272.           <button class="ctrl green" id="btnOpen">▲ ОТКР</button>
    273. 

  273.           <button class="ctrl red"   id="btnClose">▼ ЗАКР</button>
    274. 

  274.           <button class="ctrl yel"   id="btnStop">■ СТОП</button>
    275. 

  275.         </div>
    276. 

  276.         <div class="mode-row">
    277. 

  277.           <button class="ctrl" id="btnHold">УДЕРЖАНИЕ</button>
    278. 

  278.           <button class="ctrl" id="btnMode">РЕЖИМ: АВТО</button>
    279. 

  279.           <button class="ctrl" id="btnResetAlarm">СБРОС АВАРИИ</button>
    280. 

  280.         </div>
    281. 

  281.       </div>
    282. 

  282. 

  283.       <div class="section">
    284. 

  284.         <h3>СРАВНЕНИЕ ПРОПУСКОВ</h3>
    285. 

  285.         <div class="content"><div class="passes-compare" id="passesCompare"></div></div>
    286. 

  286.       </div>
    287. 

  287.       <div class="hint" id="hint">Нажмите «Следующая машина».</div>
    288. 

  288.       <div class="decision-buttons">
    289. 

  289.         <button class="big allow" id="btnAllow" disabled>✓ РАЗРЕШИТЬ</button>
    290. 

  290.         <button class="big deny" id="btnDeny" disabled>✕ ЗАПРЕТИТЬ</button>
    291. 

  291.       </div>
    292. 

  292.       <div class="refuse-menu" id="refuseMenu">
    293. 

  293.         <div class="title">МАШИНА ЖДЁТ РЕШЕНИЯ</div>
    294. 

  294.         <button class="ctrl" data-refuse="explain">📢 Объяснить причину отказа</button>
    295. 

  295.         <button class="ctrl" data-refuse="senior">📞 Вызвать старшего смены</button>
    296. 

  296.       </div>
    297. 

  297.       <div class="action-buttons">
    298. 

  298.         <button class="ctrl primary" id="btnNext">▸ Следующая машина</button>
    299. 

  299.         <button class="ctrl danger" id="btnBreach">⚠ Силовой проезд</button>
    300. 

  300.         <button class="ctrl" id="btnNote">✎ Отметить в журнале</button>
    301. 

  301.         <button class="ctrl" id="btnEndShift">⏹ Закончить смену</button>
    302. 

  302.         <button class="ctrl" id="btnReset">↻ Сброс</button>
    303. 

  303.       </div>
    304. 

  304.       <div class="section">
    305. 

  305.         <h3>ВНЕШНИЕ УСЛОВИЯ</h3>
    306. 

  306.         <div class="content">
    307. 

  307.           <div class="cond-row">
    308. 

  308.             <label>Время</label>
    309. 

  309.             <select id="selTimeOfDay">
    310. 

  310.               <option value="day">☀ День</option>
    311. 

  311.               <option value="night" selected>🌙 Ночь</option>
    312. 

  312.             </select>
    313. 

  313.           </div>
    314. 

  314.           <div class="cond-row">
    315. 

  315.             <label>Погода</label>
    316. 

  316.             <select id="selWeather">
    317. 

  317.               <option value="clear" selected>☀ Ясно</option>
    318. 

  318.               <option value="rain">🌧 Дождь</option>
    319. 

  319.               <option value="snow">❄ Снег</option>
    320. 

  320.               <option value="fog">🌫 Туман</option>
    321. 

  321.             </select>
    322. 

  322.           </div>
    323. 

  323.         </div>
    324. 

  324.       </div>
    325. 

  325.     </aside>
    326. 

  326.   </main>
    327. 

  327. </div>
    328. 

  328. 

  329. <div class="modal" id="logModal">
    330. 

  330.   <div class="modal-content" style="width: min(900px, 100%);">
    331. 

  331.     <h2>ЖУРНАЛ СОБЫТИЙ · СКУД</h2>
    332. 

  332.     <div class="log log-full" id="logContentFull"></div>
    333. 

  333.     <div style="display:flex; gap:8px; justify-content:center; margin-top:16px;">
    334. 

  334.       <button id="btnLogClear" style="margin:0;">ОЧИСТИТЬ</button>
    335. 

  335.       <button id="btnLogClose" style="margin:0;">ЗАКРЫТЬ</button>
    336. 

  336.     </div>
    337. 

  337.   </div>
    338. 

  338. </div>
    339. 

  339. 

  340. <div class="modal" id="shiftModal">
    341. 

  341.   <div class="modal-content">
    342. 

  342.     <h2>СМЕНА ЗАВЕРШЕНА</h2>
    343. 

  343.     <div class="row"><span class="k">Впущено автомобилей:</span><span class="v good" id="statIn">0</span></div>
    344. 

  344.     <div class="row"><span class="k">Отказано в проезде:</span><span class="v" id="statOut">0</span></div>
    345. 

  345.     <div class="row"><span class="k">Верных решений:</span><span class="v good" id="statCorrect">0</span></div>
    346. 

  346.     <div class="row"><span class="k">Ошибок оператора:</span><span class="v bad" id="statWrong">0</span></div>
    347. 

  347.     <div class="row"><span class="k">Сработало тревог:</span><span class="v bad" id="statAlarms">0</span></div>
    348. 

  348.     <div class="row"><span class="k">Срабатываний датчиков:</span><span class="v" id="statSensors">0</span></div>
    349. 

  349.     <div class="row"><span class="k">Силовых проездов:</span><span class="v bad" id="statBreaches">0</span></div>
    350. 

  350.     <div class="row"><span class="k">Вызовов старшего:</span><span class="v" id="statSenior">0</span></div>
    351. 

  351.     <div class="row"><span class="k">Оценка смены:</span><span class="v" id="statGrade">—</span></div>
    352. 

  352.     <button id="btnCloseShift">ЗАКРЫТЬ И СБРОСИТЬ</button>
    353. 

  353.   </div>
    354. 

  354. </div>
    355. 

  355. 

  356. <script>
    357. 

  357. const cv = document.getElementById('cv');
    358. 

  358. const ctx = cv.getContext('2d');
    359. 

  359. let W = 0, H = 0;
    360. 

  360. 

  361. function resizeCanvas() {
    362. 

  362.   const stage = cv.parentElement;
    363. 

  363.   const dpr = window.devicePixelRatio || 1;
    364. 

  364.   W = stage.clientWidth; H = stage.clientHeight;
    365. 

  365.   cv.width = Math.floor(W * dpr); cv.height = Math.floor(H * dpr);
    366. 

  366.   ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    367. 

  367. }
    368. 

  368. window.addEventListener('resize', resizeCanvas);
    369. 

  369. 

  370. function L() {
    371. 

  371.   return {
    372. 

  372.     horizonY: H * 0.32,
    373. 

  373.     topLaneY: H * 0.58, topLaneTop: H * 0.52, topLaneBot: H * 0.66,
    374. 

  374.     botLaneY: H * 0.78, botLaneTop: H * 0.72, botLaneBot: H * 0.84,
    375. 

  375.     boothX: W * 0.40, boothW: 150, boothH: 165, boothBaseY: H * 0.55,
    376. 

  376.     pillarX: W * 0.72, pillarW: 30, pillarH: 260,
    377. 

  377.     pivotX: W * 0.72, pivotY: H * 0.58 - 80,
    378. 

  378.     armLen: 240, armH: 16
    379. 

  379.   };
    380. 

  380. }
    381. 

  381. 

  382. /* ===== МОДЕЛИ ===== */
    383. 

  383. const BARRIER_MODELS = {
    384. 

  384.   A: { code:'A', name:'СКОРОСТНОЙ', short:'«Быстрый»',
    385. 

  385.        desc:'Для офисных КПП. Полный цикл ~1 с.',
    386. 

  386.        openTime:0.9, closeTime:1.2, autoClose:3, armLen:180,
    387. 

  387.        hasHold:true, hasPhoto:false, hasLoop:false, hasImpact:false, hasKW2:true },
    388. 

  388.   B: { code:'B', name:'МАГИСТРАЛЬНЫЙ', short:'«Стандарт»',
    389. 

  389.        desc:'Для въезда на территорию. Петля + фотоэлемент.',
    390. 

  390.        openTime:3.5, closeTime:3.5, autoClose:8, armLen:240,
    391. 

  391.        hasHold:false, hasPhoto:true, hasLoop:true, hasImpact:false, hasKW2:true },
    392. 

  392.   C: { code:'C', name:'ПРОМЫШЛЕННЫЙ', short:'«Терминал»',
    393. 

  393.        desc:'Грузовой транспорт. 2 петли + фотоэлемент + датчик удара.',
    394. 

  394.        openTime:6, closeTime:6, autoClose:15, armLen:280,
    395. 

  395.        hasHold:false, hasPhoto:true, hasLoop:true, hasImpact:true, hasKW2:true },
    396. 

  396.   D: { code:'D', name:'БЮДЖЕТНЫЙ', short:'«Мини»',
    397. 

  397.        desc:'Для внутренних КПП. Без автоматики.',
    398. 

  398.        openTime:4, closeTime:4, autoClose:0, armLen:200,
    399. 

  399.        hasHold:true, hasPhoto:false, hasLoop:false, hasImpact:false, hasKW2:false }
    400. 

  400. };
    401. 

  401. let selectedModelCode = 'B';
    402. 

  402. 

  403. const state = {
    404. 

  404.   time: 0,
    405. 

  405.   model: null,
    406. 

  406.   barrier: { level: 0, target: 0, moving: false },
    407. 

  407.   holdMode: false,
    408. 

  408.   manualMode: false,
    409. 

  409.   autoCloseTimer: 0,
    410. 

  410.   car: null,
    411. 

  411.   correctPass: null, presentedPass: null,
    412. 

  412.   phase: 'idle',
    413. 

  413.   userDecision: null, correctDecision: null,
    414. 

  414.   alarm: false, alarmEnd: 0, sparks: [],
    415. 

  415.   police: null, tow: null, towDriver: null, towCable: false, leaving: false,
    416. 

  416.   timeOfDay: 'night',
    417. 

  417.   weather: 'clear',
    418. 

  418.   weatherParticles: [],
    419. 

  419.   senior: null,
    420. 

  420.   skud: {
    421. 

  421.     power: true, kw1: true, kw2: false,
    422. 

  422.     loop1: false, loop2: false,
    423. 

  423.     photo: false, impact: false,
    424. 

  424.     relayOpen: false, relayClose: false, relayStop: false,
    425. 

  425.     passValid: false, alarm: false
    426. 

  426.   },
    427. 

  427.   stats: { in:0, out:0, correct:0, wrong:0, alarms:0, breaches:0, senior:0, sensors:0 }
    428. 

  428. };
    429. 

  429. 

  430. /* ===== ЖУРНАЛ ===== */
    431. 

  431. const logEntries = [];
    432. 

  432. function logEvent(text, cls) {
    433. 

  433.   const now = new Date();
    434. 

  434.   const t = String(now.getHours()).padStart(2,'0')+':'+String(now.getMinutes()).padStart(2,'0')+':'+String(now.getSeconds()).padStart(2,'0');
    435. 

  435.   logEntries.push({ t, text, cls: cls||'info' });
    436. 

  436.   if (logEntries.length > 200) logEntries.shift();
    437. 

  437.   renderLog();
    438. 

  438. }
    439. 

  439. function logSkud(text, cls) { logEvent('[СКУД] ' + text, cls || 'skud'); }
    440. 

  440. function renderLog() {
    441. 

  441.   const html = logEntries.map(e =>
    442. 

  442.     `<div class="entry ${e.cls}"><span class="time">${e.t}</span>${e.text}</div>`
    443. 

  443.   ).join('');
    444. 

  444.   const el = document.getElementById('logContentFull');
    445. 

  445.   if (el) {
    446. 

  446.     const wasBottom = (el.scrollHeight - el.scrollTop - el.clientHeight) < 30;
    447. 

  447.     el.innerHTML = html;
    448. 

  448.     if (wasBottom) el.scrollTop = el.scrollHeight;
    449. 

  449.   }
    450. 

  450.   updateLogBadge();
    451. 

  451. }
    452. 

  452. function updateLogBadge() {
    453. 

  453.   const btn = document.getElementById('btnLogToggle');
    454. 

  454.   if (!btn) return;
    455. 

  455.   const modal = document.getElementById('logModal');
    456. 

  456.   const modalOpen = modal && modal.classList.contains('on');
    457. 

  457.   const hasAlarm = logEntries.slice(-5).some(e => e.cls === 'alarm');
    458. 

  458.   btn.classList.toggle('has-alarm', hasAlarm && !modalOpen);
    459. 

  459. }
    460. 

  460. function setStatus(text, cls) {
    461. 

  461.   document.getElementById('sysStatusText').textContent = text;
    462. 

  462.   document.getElementById('sysStatus').className = 'sys-status' + (cls ? ' ' + cls : '');
    463. 

  463. }
    464. 

  464. function setHint(text) { document.getElementById('hint').innerHTML = text; }
    465. 

  465. 

  466. /* ===== ОСВЕЩЕНИЕ ===== */
    467. 

  467. function lighting() {
    468. 

  468.   const isDay = state.timeOfDay === 'day';
    469. 

  469.   const w = state.weather;
    470. 

  470.   if (w === 'fog') return isDay ? { mode: 'dawn' } : { mode: 'dusk' };
    471. 

  471.   if (w === 'rain') return isDay ? { mode: 'overcast' } : { mode: 'wetnight' };
    472. 

  472.   if (w === 'snow') return isDay ? { mode: 'overcast' } : { mode: 'snownight' };
    473. 

  473.   return isDay ? { mode: 'day' } : { mode: 'night' };
    474. 

  474. }
    475. 

  475. function skyColors() {
    476. 

  476.   const m = lighting().mode;
    477. 

  477.   switch (m) {
    478. 

  478.     case 'day':       return ['#3d5d80', '#98c4dc', '#d8e8f2'];
    479. 

  479.     case 'dawn':      return ['#2a3a5c', '#7a94b4', '#c4b8b0'];
    480. 

  480.     case 'dusk':      return ['#1a1428', '#382a48', '#605060'];
    481. 

  481.     case 'overcast':  return ['#48505c', '#6a7280', '#8a94a4'];
    482. 

  482.     case 'night':     return ['#02040a', '#0a1220', '#182230'];
    483. 

  483.     case 'wetnight':  return ['#060a14', '#0e1626', '#1a2032'];
    484. 

  484.     case 'snownight': return ['#0a0e1a', '#1a2234', '#2a3044'];
    485. 

  485.   }
    486. 

  486.   return ['#02040a', '#0a1220', '#182230'];
    487. 

  487. }
    488. 

  488. function isSunVisible() {
    489. 

  489.   const m = lighting().mode;
    490. 

  490.   return m === 'day' || m === 'dawn';
    491. 

  491. }
    492. 

  492. function isStarVisible() {
    493. 

  493.   const m = lighting().mode;
    494. 

  494.   return m === 'night' || m === 'wetnight' || m === 'snownight' || m === 'dusk';
    495. 

  495. }
    496. 

  496. function isWet() {
    497. 

  497.   return state.weather === 'rain';
    498. 

  498. }
    499. 

  499. function weatherLabel() {
    500. 

  500.   const w = { clear:'ясно', rain:'дождь', snow:'снег', fog:'туман' }[state.weather];
    501. 

  501.   const t = state.timeOfDay === 'night' ? 'ночь' : 'день';
    502. 

  502.   return t + ', ' + w;
    503. 

  503. }
    504. 

  504. 

  505. /* ===== ПРОПУСКА ===== */
    506. 

  506. const firstNames = ['Иванов','Петров','Сидоров','Кузнецов','Морозов','Волков','Соколов','Лебедев'];
    507. 

  507. const initials = ['И.И.','П.П.','С.С.','А.В.','Д.А.','М.Н.'];
    508. 

  508. const departments = ['Администрация','Служба охраны','Бухгалтерия','Отдел кадров','ИТ-отдел','Логистика'];
    509. 

  509. const series = ['А','Б','В','Г'];
    510. 

  510. function randomPass() {
    511. 

  511.   return {
    512. 

  512.     num: series[Math.floor(Math.random()*series.length)]+'-'+String(Math.floor(Math.random()*900)+100),
    513. 

  513.     name: firstNames[Math.floor(Math.random()*firstNames.length)]+' '+initials[Math.floor(Math.random()*initials.length)],
    514. 

  514.     dept: departments[Math.floor(Math.random()*departments.length)],
    515. 

  515.     valid: Math.random() > 0.25
    516. 

  516.   };
    517. 

  517. }
    518. 

  518. function generateScenario(mode) {
    519. 

  519.   const correct = randomPass(); correct.valid = true;
    520. 

  520.   if (mode === 'breach') return { correct, presented: null, shouldAllow: false };
    521. 

  521.   const r = Math.random();
    522. 

  522.   let presented, shouldAllow;
    523. 

  523.   if (r < 0.4) { presented = { ...correct }; shouldAllow = true; }
    524. 

  524.   else if (r < 0.65) { presented = randomPass(); while (presented.num === correct.num) presented = randomPass(); shouldAllow = false; }
    525. 

  525.   else { presented = { ...correct, valid: false }; shouldAllow = false; }
    526. 

  526.   return { correct, presented, shouldAllow };
    527. 

  527. }
    528. 

  528. function renderPasses() {
    529. 

  529.   const el = document.getElementById('passesCompare');
    530. 

  530.   const c = state.correctPass, p = state.presentedPass;
    531. 

  531.   const card = (head, pass) => {
    532. 

  532.     if (!pass) return `<div class="pass-card"><div class="head">${head}</div><div class="num">—</div><div class="name">не предъявлен</div><div class="dept">—</div><div class="status empty">НЕТ ДАННЫХ</div></div>`;
    533. 

  533.     return `<div class="pass-card"><div class="head">${head}</div><div class="num">${pass.num}</div><div class="name">${pass.name}</div><div class="dept">${pass.dept}</div><div class="status ${pass.valid?'ok':'bad'}">${pass.valid?'АКТИВЕН':'ОТОЗВАН'}</div></div>`;
    534. 

  534.   };
    535. 

  535.   el.innerHTML = card('В БАЗЕ', c) + card('ПРЕДЪЯВЛЕН', p);
    536. 

  536.   const active = state.phase === 'waiting' && state.userDecision === null;
    537. 

  537.   document.getElementById('btnAllow').disabled = !active;
    538. 

  538.   document.getElementById('btnDeny').disabled = !active;
    539. 

  539.   state.skud.passValid = !!(c && c.valid);
    540. 

  540. }
    541. 

  541. function showRefuseMenu() { document.getElementById('refuseMenu').classList.add('on'); }
    542. 

  542. function hideRefuseMenu() { document.getElementById('refuseMenu').classList.remove('on'); }
    543. 

  543. 

  544. function speedMult() {
    545. 

  545.   if (state.weather === 'rain') return 0.75;
    546. 

  546.   if (state.weather === 'snow') return 0.6;
    547. 

  547.   if (state.weather === 'fog')  return 0.85;
    548. 

  548.   return 1;
    549. 

  549. }
    550. 

  550. 

  551. /* ===== ПЕРЕКЛЮЧАТЕЛЬ МОДЕЛИ ===== */
    552. 

  552. function renderModelSwitcher() {
    553. 

  553.   const el = document.getElementById('modelSwitcher');
    554. 

  554.   el.innerHTML = Object.values(BARRIER_MODELS).map(m => `
    555. 

  555.     <button class="model-btn ${m.code===selectedModelCode?'active':''}" data-model="${m.code}">
    556. 

  556.       <span class="mb-code">МОДЕЛЬ ${m.code}</span>
    557. 

  557.       <span class="mb-name">${m.name}</span>
    558. 

  558.       <span class="mb-spec">▸ ${m.openTime}с/${m.closeTime}с · стрела ${m.armLen}</span>
    559. 

  559.     </button>`).join('');
    560. 

  560.   el.querySelectorAll('.model-btn').forEach(b => {
    561. 

  561.     b.onclick = () => switchModel(b.dataset.model);
    562. 

  562.   });
    563. 

  563. }
    564. 

  564. function switchModel(code) {
    565. 

  565.   if (!BARRIER_MODELS[code]) return;
    566. 

  566.   selectedModelCode = code;
    567. 

  567.   state.model = BARRIER_MODELS[code];
    568. 

  568.   document.getElementById('modelBadge').textContent = 'МОДЕЛЬ: ' + state.model.code + ' · ' + state.model.name;
    569. 

  569.   document.getElementById('btnHold').style.display = state.model.hasHold ? '' : 'none';
    570. 

  570.   document.getElementById('btnHold').classList.remove('active');
    571. 

  571.   state.holdMode = false;
    572. 

  572.   state.skud.kw1 = state.barrier.level < 0.05;
    573. 

  573.   state.skud.kw2 = state.barrier.level > 0.95;
    574. 

  574.   if (!state.model.hasLoop) state.skud.loop1 = false;
    575. 

  575.   if (!state.model.hasPhoto) state.skud.photo = false;
    576. 

  576.   if (!state.model.hasImpact) state.skud.impact = false;
    577. 

  577.   renderModelSwitcher();
    578. 

  578.   logSkud('▸ ПЕРЕКЛЮЧЕНИЕ МОДЕЛИ: ' + state.model.code + ' · ' + state.model.name, 'warn');
    579. 

  579.   logSkud('Открытие/закрытие: ' + state.model.openTime + 'с / ' + state.model.closeTime + 'с');
    580. 

  580.   logSkud('Автозакрытие: ' + (state.model.autoClose ? state.model.autoClose + ' с' : 'отключено'));
    581. 

  581.   setHint('Модель <b>' + state.model.code + '</b> активна. Нажмите «Следующая машина».');
    582. 

  582. }
    583. 

  583. 

  584. /* ===== СЦЕНАРИИ ===== */
    585. 

  585. function nextCar() {
    586. 

  586.   if (state.phase !== 'idle') return;
    587. 

  587.   const scen = generateScenario('normal');
    588. 

  588.   state.correctPass = scen.correct;
    589. 

  589.   state.presentedPass = scen.presented;
    590. 

  590.   state.correctDecision = scen.shouldAllow ? 'allow' : 'deny';
    591. 

  591.   state.userDecision = null;
    592. 

  592.   state.senior = null;
    593. 

  593.   state.phase = 'approaching';
    594. 

  594.   hideRefuseMenu();
    595. 

  595.   const colors = ['#3a5a8a','#8a3a3a','#2a2a30','#3a6a4a','#7a6a2a','#5a3a6a'];
    596. 

  596.   state.car = {
    597. 

  597.     x: -250, speed: 160 * speedMult(),
    598. 

  598.     color: colors[Math.floor(Math.random()*colors.length)],
    599. 

  599.     wheelAngle: 0, isPriora: false
    600. 

  600.   };
    601. 

  601.   state.skud.loop1 = false; state.skud.loop2 = false;
    602. 

  602.   setStatus('ПРИБЛИЖАЕТСЯ АВТО', 'wait');
    603. 

  603.   logEvent('Приближается автомобиль' + (state.weather !== 'clear' || state.timeOfDay === 'night' ? ` (${weatherLabel()})` : ''), 'info');
    604. 

  604.   renderPasses();
    605. 

  605.   setHint('Автомобиль подъезжает.');
    606. 

  606. }
    607. 

  607. function breachCar() {
    608. 

  608.   if (state.phase !== 'idle') return;
    609. 

  609.   const scen = generateScenario('breach');
    610. 

  610.   state.correctPass = scen.correct;
    611. 

  611.   state.presentedPass = null;
    612. 

  612.   state.correctDecision = 'deny';
    613. 

  613.   state.userDecision = null;
    614. 

  614.   state.senior = null;
    615. 

  615.   state.phase = 'approaching';
    616. 

  616.   hideRefuseMenu();
    617. 

  617.   state.car = { x: -250, speed: 340 * speedMult(), color: '#0a0a0a', wheelAngle: 0, isPriora: true };
    618. 

  618.   setStatus('НАРУШИТЕЛЬ !', 'alarm');
    619. 

  619.   logEvent('Тёмный автомобиль не сбрасывает скорость!', 'alarm');
    620. 

  620.   renderPasses();
    621. 

  621.   setHint('Нарушитель не останавливается.');
    622. 

  622. }
    623. 

  623. 

  624. function decide(decision) {
    625. 

  625.   if (state.phase !== 'waiting' || state.userDecision !== null) return;
    626. 

  626.   state.userDecision = decision;
    627. 

  627.   const correct = (decision === state.correctDecision);
    628. 

  628.   if (correct) state.stats.correct++; else state.stats.wrong++;
    629. 

  629.   logEvent(`Решение «${decision==='allow'?'РАЗРЕШИТЬ':'ЗАПРЕТИТЬ'}» — ${correct?'верно':'ОШИБКА'}`,
    630. 

  630.            correct?'ok':'warn');
    631. 

  631.   if (decision === 'allow') {
    632. 

  632.     state.car.action = 'pass';
    633. 

  633.     openBarrier();
    634. 

  634.     state.phase = 'resolved';
    635. 

  635.     setStatus('ПРОЕЗД РАЗРЕШЁН');
    636. 

  636.     setHint('Шлагбаум открывается, автомобиль проезжает.');
    637. 

  637.     hideRefuseMenu();
    638. 

  638.   } else {
    639. 

  639.     state.car.action = 'wait';
    640. 

  640.     state.phase = 'refuse_wait';
    641. 

  641.     setStatus('МАШИНА ЖДЁТ', 'pause');
    642. 

  642.     setHint('Объясните причину отказа или вызовите старшего смены.');
    643. 

  643.     showRefuseMenu();
    644. 

  644.   }
    645. 

  645.   renderPasses();
    646. 

  646. }
    647. 

  647. 

  648. /* ===== ПУЛЬТ ОПЕРАТОРА ===== */
    649. 

  649. function openBarrier() {
    650. 

  650.   if (state.skud.alarm && !state.manualMode) { logSkud('Отказ: авария не сброшена', 'warn'); return; }
    651. 

  651.   state.barrier.target = 1;
    652. 

  652.   state.barrier.moving = true;
    653. 

  653.   state.skud.relayOpen = true;
    654. 

  654.   state.skud.relayClose = false;
    655. 

  655.   state.skud.relayStop = false;
    656. 

  656.   logSkud('РЕЛЕ «ОТКРЫТЬ»: вкл');
    657. 

  657.   state.autoCloseTimer = 0;
    658. 

  658. }
    659. 

  659. function closeBarrier() {
    660. 

  660.   if (state.skud.alarm && !state.manualMode) { logSkud('Отказ: авария не сброшена', 'warn'); return; }
    661. 

  661.   if (state.skud.photo) {
    662. 

  662.     logSkud('Отказ закрытия: фотоэлемент разорван', 'warn');
    663. 

  663.     setHint('Фотоэлемент разорван — стрела не опускается.');
    664. 

  664.     return;
    665. 

  665.   }
    666. 

  666.   if (state.holdMode) { logSkud('Отказ: включено удержание', 'warn'); return; }
    667. 

  667.   state.barrier.target = 0;
    668. 

  668.   state.barrier.moving = true;
    669. 

  669.   state.skud.relayClose = true;
    670. 

  670.   state.skud.relayOpen = false;
    671. 

  671.   state.skud.relayStop = false;
    672. 

  672.   logSkud('РЕЛЕ «ЗАКРЫТЬ»: вкл');
    673. 

  673. }
    674. 

  674. function stopBarrier() {
    675. 

  675.   state.barrier.target = state.barrier.level;
    676. 

  676.   state.barrier.moving = false;
    677. 

  677.   state.skud.relayStop = true;
    678. 

  678.   state.skud.relayOpen = false;
    679. 

  679.   state.skud.relayClose = false;
    680. 

  680.   logSkud('РЕЛЕ «СТОП»: вкл — привод остановлен', 'warn');
    681. 

  681.   setHint('Шлагбаум остановлен оператором.');
    682. 

  682. }
    683. 

  683. function resetAlarm() {
    684. 

  684.   state.skud.alarm = false;
    685. 

  685.   state.alarm = false;
    686. 

  686.   state.skud.impact = false;
    687. 

  687.   logSkud('СБРОС АВАРИИ выполнен', 'ok');
    688. 

  688. }
    689. 

  689. document.getElementById('btnOpen').onclick = openBarrier;
    690. 

  690. document.getElementById('btnClose').onclick = closeBarrier;
    691. 

  691. document.getElementById('btnStop').onclick = stopBarrier;
    692. 

  692. document.getElementById('btnResetAlarm').onclick = resetAlarm;
    693. 

  693. document.getElementById('btnHold').onclick = () => {
    694. 

  694.   if (!state.model.hasHold) return;
    695. 

  695.   state.holdMode = !state.holdMode;
    696. 

  696.   document.getElementById('btnHold').classList.toggle('active', state.holdMode);
    697. 

  697.   logSkud('УДЕРЖАНИЕ: ' + (state.holdMode ? 'включено' : 'выключено'), state.holdMode ? 'warn' : 'info');
    698. 

  698. };
    699. 

  699. document.getElementById('btnMode').onclick = () => {
    700. 

  700.   state.manualMode = !state.manualMode;
    701. 

  701.   document.getElementById('btnMode').textContent = 'РЕЖИМ: ' + (state.manualMode ? 'РУЧНОЙ' : 'АВТО');
    702. 

  702.   document.getElementById('btnMode').classList.toggle('active', state.manualMode);
    703. 

  703.   logSkud('Режим: ' + (state.manualMode ? 'РУЧНОЙ' : 'АВТО'));
    704. 

  704. };
    705. 

  705. 

  706. document.querySelectorAll('[data-refuse]').forEach(b => {
    707. 

  707.   b.onclick = () => {
    708. 

  708.     const action = b.dataset.refuse;
    709. 

  709.     if (action === 'explain') {
    710. 

  710.       logEvent('Оператор объяснил причину отказа водителю', 'info');
    711. 

  711.       state.stats.out++;
    712. 

  712.       state.car.action = 'turn';
    713. 

  713.       state.phase = 'resolved';
    714. 

  714.       setStatus('ОТКАЗ', 'wait');
    715. 

  715.       setHint('Машина уезжает в обратном направлении.');
    716. 

  716.       hideRefuseMenu();
    717. 

  717.       renderPasses();
    718. 

  718.     }
    719. 

  719.     if (action === 'senior') {
    720. 

  720.       state.stats.senior++;
    721. 

  721.       logEvent('Оператор вызвал старшего смены', 'senior');
    722. 

  722.       state.phase = 'senior_walk';
    723. 

  723.       const carX = state.car ? state.car.x : 0;
    724. 

  724.       state.senior = { x: W + 40, y: L().botLaneY, targetX: carX + 130, targetY: L().topLaneY,
    725. 

  725.         state: 'walk_to_lane', walking: true, alpha: 0, decideTimer: 0 };
    726. 

  726.       hideRefuseMenu();
    727. 

  727.       setStatus('СТАРШИЙ ВЫЗВАН', 'senior');
    728. 

  728.       setHint('Старший смены направляется к машине.');
    729. 

  729.     }
    730. 

  730.   };
    731. 

  731. });
    732. 

  732. 

  733. function resetAll() {
    734. 

  734.   state.car = null; state.correctPass = null; state.presentedPass = null;
    735. 

  735.   state.userDecision = null; state.correctDecision = null;
    736. 

  736.   state.phase = 'idle'; state.barrier.target = 0; state.barrier.level = 0;
    737. 

  737.   state.alarm = false; state.sparks = []; state.police = null;
    738. 

  738.   state.tow = null; state.towDriver = null; state.towCable = false; state.leaving = false;
    739. 

  739.   state.senior = null; state.holdMode = false; state.autoCloseTimer = 0;
    740. 

  740.   state.skud = { power:true, kw1:true, kw2:false, loop1:false, loop2:false,
    741. 

  741.     photo:false, impact:false, relayOpen:false, relayClose:false, relayStop:false,
    742. 

  742.     passValid:false, alarm:false };
    743. 

  743.   document.getElementById('btnHold').classList.remove('active');
    744. 

  744.   hideRefuseMenu();
    745. 

  745.   logEntries.length = 0; renderLog(); renderPasses();
    746. 

  746.   setStatus('ПОСТ СВОБОДЕН'); setHint('Нажмите <b>«Следующая машина»</b>.');
    747. 

  747.   logEvent('Система сброшена', 'ok');
    748. 

  748. }
    749. 

  749. document.getElementById('btnNext').onclick = nextCar;
    750. 

  750. document.getElementById('btnBreach').onclick = breachCar;
    751. 

  751. document.getElementById('btnReset').onclick = resetAll;
    752. 

  752. document.getElementById('btnAllow').onclick = () => decide('allow');
    753. 

  753. document.getElementById('btnDeny').onclick = () => decide('deny');
    754. 

  754. document.getElementById('btnNote').onclick = () => {
    755. 

  755.   const txt = prompt('Введите отметку для журнала:', '');
    756. 

  756.   if (txt && txt.trim()) logEvent('[ОПЕРАТОР] ' + txt.trim(), 'info');
    757. 

  757. };
    758. 

  758. document.getElementById('btnEndShift').onclick = () => {
    759. 

  759.   const s = state.stats;
    760. 

  760.   document.getElementById('statIn').textContent = s.in;
    761. 

  761.   document.getElementById('statOut').textContent = s.out;
    762. 

  762.   document.getElementById('statCorrect').textContent = s.correct;
    763. 

  763.   document.getElementById('statWrong').textContent = s.wrong;
    764. 

  764.   document.getElementById('statAlarms').textContent = s.alarms;
    765. 

  765.   document.getElementById('statSensors').textContent = s.sensors;
    766. 

  766.   document.getElementById('statBreaches').textContent = s.breaches;
    767. 

  767.   document.getElementById('statSenior').textContent = s.senior;
    768. 

  768.   const total = s.correct + s.wrong;
    769. 

  769.   let grade = '—';
    770. 

  770.   if (total > 0) {
    771. 

  771.     const pct = s.correct / total;
    772. 

  772.     if (pct >= 0.95) grade = 'ОТЛИЧНО';
    773. 

  773.     else if (pct >= 0.8) grade = 'ХОРОШО';
    774. 

  774.     else if (pct >= 0.6) grade = 'УДОВЛЕТВОРИТЕЛЬНО';
    775. 

  775.     else grade = 'ТРЕБУЕТСЯ ПОДГОТОВКА';
    776. 

  776.   }
    777. 

  777.   document.getElementById('statGrade').textContent = grade;
    778. 

  778.   document.getElementById('shiftModal').classList.add('on');
    779. 

  779.   logEvent('Смена завершена. Открыт отчёт.', 'info');
    780. 

  780. };
    781. 

  781. document.getElementById('btnCloseShift').onclick = () => {
    782. 

  782.   document.getElementById('shiftModal').classList.remove('on');
    783. 

  783.   state.stats = { in:0, out:0, correct:0, wrong:0, alarms:0, breaches:0, senior:0, sensors:0 };
    784. 

  784.   logEntries.length = 0; renderLog();
    785. 

  785.   logEvent('Начата новая смена', 'ok');
    786. 

  786. };
    787. 

  787. 

  788. /* ===== ЖУРНАЛ: кнопки ===== */
    789. 

  789. document.getElementById('btnLogToggle').onclick = () => {
    790. 

  790.   document.getElementById('logModal').classList.add('on');
    791. 

  791.   const el = document.getElementById('logContentFull');
    792. 

  792.   el.scrollTop = el.scrollHeight;
    793. 

  793.   updateLogBadge();
    794. 

  794. };
    795. 

  795. document.getElementById('btnLogClose').onclick = () => {
    796. 

  796.   document.getElementById('logModal').classList.remove('on');
    797. 

  797.   updateLogBadge();
    798. 

  798. };
    799. 

  799. document.getElementById('btnLogClear').onclick = () => {
    800. 

  800.   logEntries.length = 0;
    801. 

  801.   renderLog();
    802. 

  802.   logEvent('Журнал очищен оператором', 'info');
    803. 

  803. };
    804. 

  804. document.addEventListener('keydown', (e) => {
    805. 

  805.   if (e.key === 'F2') {
    806. 

  806.     e.preventDefault();
    807. 

  807.     document.getElementById('btnLogToggle').click();
    808. 

  808.   }
    809. 

  809.   if (e.key === 'Escape') {
    810. 

  810.     document.getElementById('logModal').classList.remove('on');
    811. 

  811.     updateLogBadge();
    812. 

  812.   }
    813. 

  813. });
    814. 

  814. 

  815. document.getElementById('selTimeOfDay').onchange = (e) => {
    816. 

  816.   state.timeOfDay = e.target.value;
    817. 

  817.   logEvent('Время суток: ' + (state.timeOfDay === 'day' ? 'день' : 'ночь'), 'info');
    818. 

  818.   if (state.timeOfDay === 'night') logEvent('Камеры переведены в ИК-режим', 'info');
    819. 

  819. };
    820. 

  820. document.getElementById('selWeather').onchange = (e) => {
    821. 

  821.   state.weather = e.target.value;
    822. 

  822.   const names = { clear:'ясно', rain:'дождь', snow:'снег', fog:'туман' };
    823. 

  823.   logEvent('Погода: ' + names[state.weather], 'info');
    824. 

  824.   if (state.weather === 'fog') logEvent('Туман — сумеречный режим', 'warn');
    825. 

  825.   if (state.weather === 'rain') logEvent('Мокрое покрытие — снижение скорости ТС', 'warn');
    826. 

  826.   if (state.weather === 'snow') logEvent('Снегопад — ограничение скорости ТС', 'warn');
    827. 

  827.   state.weatherParticles = [];
    828. 

  828. };
    829. 

  829. 

  830. /* ===== LED ===== */
    831. 

  831. function setLed(id, on, cls) {
    832. 

  832.   const el = document.getElementById(id);
    833. 

  833.   if (!el) return;
    834. 

  834.   el.className = 'skud-led' + (on ? ' ' + (cls || 'on') : '');
    835. 

  835. }
    836. 

  836. function updateSkudLeds() {
    837. 

  837.   const s = state.skud;
    838. 

  838.   setLed('ledPower', s.power);
    839. 

  839.   setLed('ledArmState', true,
    840. 

  840.     state.barrier.moving ? 'yel blink' :
    841. 

  841.     (state.barrier.level > 0.9 ? 'on' : 'red'));
    842. 

  842.   setLed('ledKW1', s.kw1);
    843. 

  843.   setLed('ledKW2', s.kw2);
    844. 

  844.   setLed('ledLoop1', s.loop1, 'blu');
    845. 

  845.   setLed('ledLoop2', s.loop2, 'blu');
    846. 

  846.   setLed('ledPhoto', s.photo, 'yel');
    847. 

  847.   setLed('ledImpact', s.impact, 'red blink');
    848. 

  848.   setLed('ledRelayOpen', s.relayOpen);
    849. 

  849.   setLed('ledRelayClose', s.relayClose);
    850. 

  850.   setLed('ledRelayStop', s.relayStop, 'yel');
    851. 

  851.   setLed('ledPass', s.passValid);
    852. 

  852. }
    853. 

  853. 

  854. /* ===== ФОН ===== */
    855. 

  855. function drawSky() {
    856. 

  856.   const l = L();
    857. 

  857.   const [c1, c2, c3] = skyColors();
    858. 

  858.   const grad = ctx.createLinearGradient(0, 0, 0, l.horizonY);
    859. 

  859.   grad.addColorStop(0, c1); grad.addColorStop(0.6, c2); grad.addColorStop(1, c3);
    860. 

  860.   ctx.fillStyle = grad; ctx.fillRect(0, 0, W, l.horizonY);
    861. 

  861. 

  862.   if (isStarVisible()) {
    863. 

  863.     for (let i = 0; i < 90; i++) {
    864. 

  864.       const x = (i * 173.5) % W, y = (i * 97.3) % (l.horizonY - 15);
    865. 

  865.       const a = (0.15 + 0.4 * Math.abs(Math.sin(state.time * 0.5 + i))) *
    866. 

  866.                 (state.weather === 'clear' ? 1 : 0.35);
    867. 

  867.       ctx.fillStyle = `rgba(200,220,255,${a})`;
    868. 

  868.       ctx.fillRect(x, y, 1.5, 1.5);
    869. 

  869.     }
    870. 

  870.     const mx = W * 0.78, my = l.horizonY * 0.30;
    871. 

  871.     const moonG = ctx.createRadialGradient(mx, my, 3, mx, my, 55);
    872. 

  872.     moonG.addColorStop(0, 'rgba(220,230,255,.55)');
    873. 

  873.     moonG.addColorStop(0.4, 'rgba(180,200,230,.10)');
    874. 

  874.     moonG.addColorStop(1, 'rgba(180,200,230,0)');
    875. 

  875.     ctx.fillStyle = moonG; ctx.fillRect(mx - 60, my - 60, 120, 120);
    876. 

  876.     ctx.beginPath(); ctx.arc(mx, my, 12, 0, Math.PI * 2);
    877. 

  877.     ctx.fillStyle = 'rgba(240,240,220,.85)'; ctx.fill();
    878. 

  878.     ctx.beginPath(); ctx.arc(mx - 4, my - 3, 10, 0, Math.PI * 2);
    879. 

  879.     ctx.fillStyle = 'rgba(230,235,220,.75)'; ctx.fill();
    880. 

  880.   }
    881. 

  881. 

  882.   if (isSunVisible()) {
    883. 

  883.     const isDawn = lighting().mode === 'dawn';
    884. 

  884.     const sy = l.horizonY * (isDawn ? 0.55 : 0.32);
    885. 

  885.     const sx = W * 0.22;
    886. 

  886.     const sg = ctx.createRadialGradient(sx, sy, 6, sx, sy, 130);
    887. 

  887.     sg.addColorStop(0, isDawn ? 'rgba(255,220,180,.9)' : 'rgba(255,250,210,.95)');
    888. 

  888.     sg.addColorStop(0.3, isDawn ? 'rgba(255,200,140,.25)' : 'rgba(255,240,180,.25)');
    889. 

  889.     sg.addColorStop(1, 'rgba(255,240,180,0)');
    890. 

  890.     ctx.fillStyle = sg; ctx.fillRect(sx - 140, sy - 140, 280, 280);
    891. 

  891.     ctx.beginPath(); ctx.arc(sx, sy, 22, 0, Math.PI * 2);
    892. 

  892.     ctx.fillStyle = isDawn ? 'rgba(255,220,180,.95)' : 'rgba(255,252,220,.98)'; ctx.fill();
    893. 

  893.     ctx.save();
    894. 

  894.     ctx.globalCompositeOperation = 'lighter';
    895. 

  895.     for (let i = 0; i < 8; i++) {
    896. 

  896.       const a = -0.4 + i * 0.1 + Math.sin(state.time * 0.3 + i) * 0.02;
    897. 

  897.       const len = 180 + (i % 3) * 40;
    898. 

  898.       ctx.beginPath();
    899. 

  899.       ctx.moveTo(sx, sy);
    900. 

  900.       ctx.lineTo(sx + Math.cos(a) * len, sy + Math.sin(a) * len);
    901. 

  901.       ctx.lineTo(sx + Math.cos(a + 0.04) * len, sy + Math.sin(a + 0.04) * len);
    902. 

  902.       ctx.closePath();
    903. 

  903.       ctx.fillStyle = isDawn ? 'rgba(255,220,180,.06)' : 'rgba(255,250,220,.05)';
    904. 

  904.       ctx.fill();
    905. 

  905.     }
    906. 

  906.     ctx.restore();
    907. 

  907.   }
    908. 

  908. 

  909.   const m = lighting().mode;
    910. 

  910.   let bcol = '#0a1220';
    911. 

  911.   if (m === 'day') bcol = '#3a4a5a';
    912. 

  912.   else if (m === 'overcast') bcol = '#454e58';
    913. 

  913.   else if (m === 'dawn') bcol = '#3a4050';
    914. 

  914.   else if (m === 'dusk') bcol = '#1c1a28';
    915. 

  915.   ctx.fillStyle = bcol; ctx.globalAlpha = 0.55;
    916. 

  916.   for (let i = 0; i < 30; i++) {
    917. 

  917.     const bx = i * (W / 30), bw = 20 + (i % 5) * 14, bh = 20 + (i % 7) * 12;
    918. 

  918.     ctx.fillRect(bx, l.horizonY - bh, bw, bh);
    919. 

  919.   }
    920. 

  920.   ctx.globalAlpha = 1;
    921. 

  921.   for (let i = 0; i < 24; i++) {
    922. 

  922.     const bx = i * (W / 24), bw = 18 + (i % 4) * 12, bh = 30 + (i % 5) * 12;
    923. 

  923.     ctx.fillRect(bx, l.horizonY - bh, bw, bh);
    924. 

  924.     if (isStarVisible() && (i * 13) % 5 === 0) {
    925. 

  925.       ctx.fillStyle = 'rgba(255,200,120,.35)';
    926. 

  926.       ctx.fillRect(bx + 4, l.horizonY - bh + 8, 3, 3);
    927. 

  927.       ctx.fillRect(bx + 12, l.horizonY - bh + 20, 3, 3);
    928. 

  928.       ctx.fillStyle = bcol;
    929. 

  929.     }
    930. 

  930.   }
    931. 

  931. }
    932. 

  932. 

  933. function drawGround() {
    934. 

  934.   const l = L();
    935. 

  935.   const m = lighting().mode;
    936. 

  936.   let g;
    937. 

  937.   if (m === 'day' || m === 'overcast') {
    938. 

  938.     g = ctx.createLinearGradient(0, l.horizonY, 0, H);
    939. 

  939.     g.addColorStop(0, '#2a3a28'); g.addColorStop(1, '#101810');
    940. 

  940.   } else if (m === 'dawn' || m === 'dusk') {
    941. 

  941.     g = ctx.createLinearGradient(0, l.horizonY, 0, H);
    942. 

  942.     g.addColorStop(0, '#1a2018'); g.addColorStop(1, '#0a0e08');
    943. 

  943.   } else {
    944. 

  944.     g = ctx.createLinearGradient(0, l.horizonY, 0, H);
    945. 

  945.     g.addColorStop(0, '#0a1410'); g.addColorStop(1, '#03060a');
    946. 

  946.   }
    947. 

  947.   ctx.fillStyle = g; ctx.fillRect(0, l.horizonY, W, H - l.horizonY);
    948. 

  948. 

  949.   const haze = ctx.createLinearGradient(0, l.horizonY - 4, 0, l.horizonY + 30);
    950. 

  950.   haze.addColorStop(0, 'rgba(80,110,140,.35)');
    951. 

  951.   haze.addColorStop(1, 'rgba(80,110,140,0)');
    952. 

  952.   ctx.fillStyle = haze;
    953. 

  953.   ctx.fillRect(0, l.horizonY - 4, W, 34);
    954. 

  954. }
    955. 

  955. 

  956. function drawRoads() {
    957. 

  957.   const l = L();
    958. 

  958.   const m = lighting().mode;
    959. 

  959.   let c1, c2, edge, dash;
    960. 

  960.   if (m === 'day') {
    961. 

  961.     c1 = ['#3a3e44', '#25282c']; c2 = ['#3a3e44', '#25282c'];
    962. 

  962.     edge = 'rgba(180,180,180,.7)'; dash = 'rgba(220,200,140,.6)';
    963. 

  963.   } else if (m === 'overcast' || m === 'dawn') {
    964. 

  964.     c1 = ['#2a2e34', '#1a1d22']; c2 = ['#2a2e34', '#1a1d22'];
    965. 

  965.     edge = 'rgba(140,150,160,.6)'; dash = 'rgba(200,180,140,.5)';
    966. 

  966.   } else if (m === 'dusk') {
    967. 

  967.     c1 = ['#1a1d24', '#0d1014']; c2 = ['#1a1d24', '#0d1014'];
    968. 

  968.     edge = 'rgba(120,130,140,.5)'; dash = 'rgba(200,180,140,.4)';
    969. 

  969.   } else {
    970. 

  970.     c1 = ['#1a1e24', '#0d1014']; c2 = ['#1a1e24', '#0d1014'];
    971. 

  971.     edge = 'rgba(120,130,140,.5)'; dash = 'rgba(220,200,140,.4)';
    972. 

  972.   }
    973. 

  973.   const g1 = ctx.createLinearGradient(0, l.topLaneTop, 0, l.topLaneBot);
    974. 

  974.   g1.addColorStop(0, c1[0]); g1.addColorStop(1, c1[1]);
    975. 

  975.   ctx.fillStyle = g1; ctx.fillRect(0, l.topLaneTop, W, l.topLaneBot - l.topLaneTop);
    976. 

  976.   const g2 = ctx.createLinearGradient(0, l.botLaneTop, 0, l.botLaneBot);
    977. 

  977.   g2.addColorStop(0, c2[0]); g2.addColorStop(1, c2[1]);
    978. 

  978.   ctx.fillStyle = g2; ctx.fillRect(0, l.botLaneTop, W, l.botLaneBot - l.botLaneTop);
    979. 

  979.   ctx.strokeStyle = edge; ctx.lineWidth = 2;
    980. 

  980.   ctx.beginPath(); ctx.moveTo(0, (l.topLaneBot + l.botLaneTop) / 2);
    981. 

  981.   ctx.lineTo(W, (l.topLaneBot + l.botLaneTop) / 2); ctx.stroke();
    982. 

  982.   ctx.strokeStyle = dash; ctx.lineWidth = 3;
    983. 

  983.   ctx.setLineDash([30, 25]);
    984. 

  984.   ctx.beginPath(); ctx.moveTo(0, (l.topLaneBot + l.botLaneTop) / 2 + 6);
    985. 

  985.   ctx.lineTo(W, (l.topLaneBot + l.botLaneTop) / 2 + 6); ctx.stroke();
    986. 

  986.   ctx.setLineDash([]);
    987. 

  987. 

  988.   if (isWet()) {
    989. 

  989.     ctx.fillStyle = 'rgba(120,150,200,.06)';
    990. 

  990.     ctx.fillRect(0, l.topLaneTop, W, l.topLaneBot - l.topLaneTop);
    991. 

  991.     ctx.fillRect(0, l.botLaneTop, W, l.botLaneBot - l.botLaneTop);
    992. 

  992.     if (state.car) {
    993. 

  993.       const cx = state.car.x;
    994. 

  994.       const refl = ctx.createLinearGradient(cx, 0, cx, l.topLaneBot);
    995. 

  995.       refl.addColorStop(0, 'rgba(255,240,180,.22)');
    996. 

  996.       refl.addColorStop(1, 'rgba(255,240,180,0)');
    997. 

  997.       ctx.fillStyle = refl;
    998. 

  998.       ctx.fillRect(cx - 90, l.topLaneTop, 180, l.topLaneBot - l.topLaneTop);
    999. 

  999.     }
    1000. 

  1000.   }
    1001. 

  1001. }
    1002. 

  1002. 

  1003. function drawBooth() {
    1004. 

  1004.   const l = L();
    1005. 

  1005.   const bx = l.boothX, by = l.boothBaseY, bw = l.boothW, bh = l.boothH;
    1006. 

  1006.   const m = lighting().mode;
    1007. 

  1007.   const bright = (m === 'day' || m === 'overcast' || m === 'dawn');
    1008. 

  1008. 

  1009.   ctx.fillStyle = 'rgba(0,0,0,.55)';
    1010. 

  1010.   ctx.beginPath(); ctx.ellipse(bx + bw/2, by + 6, bw/2 + 14, 9, 0, 0, Math.PI * 2); ctx.fill();
    1011. 

  1011.   ctx.fillStyle = '#0a0f14'; ctx.fillRect(bx - 8, by, bw + 16, 12);
    1012. 

  1012. 

  1013.   const wg = ctx.createLinearGradient(bx, 0, bx + bw, 0);
    1014. 

  1014.   if (bright) { wg.addColorStop(0, '#6a7482'); wg.addColorStop(0.5, '#8a94a4'); wg.addColorStop(1, '#4a5462'); }
    1015. 

  1015.   else { wg.addColorStop(0, '#2a3442'); wg.addColorStop(0.5, '#4a5a6a'); wg.addColorStop(1, '#182028'); }
    1016. 

  1016.   ctx.fillStyle = wg; ctx.fillRect(bx, by - bh, bw, bh);
    1017. 

  1017.   ctx.strokeStyle = '#4a5a70'; ctx.lineWidth = 2; ctx.strokeRect(bx, by - bh, bw, bh);
    1018. 

  1018. 

  1019.   ctx.fillStyle = '#0a0f14'; ctx.fillRect(bx - 12, by - bh - 14, bw + 24, 14);
    1020. 

  1020.   ctx.strokeStyle = '#3a4452'; ctx.strokeRect(bx - 12, by - bh - 14, bw + 24, 14);
    1021. 

  1021.   ctx.fillStyle = 'rgba(255,255,255,.08)';
    1022. 

  1022.   ctx.fillRect(bx - 12, by - bh - 14, bw + 24, 4);
    1023. 

  1023. 

  1024.   const glow = bright ? 0.4 : 0.8 + 0.15 * Math.sin(state.time * 1.5);
    1025. 

  1025.   ctx.fillStyle = `rgba(255,220,140,${glow})`;
    1026. 

  1026.   ctx.fillRect(bx + 15, by - bh + 25, 60, 60);
    1027. 

  1027.   const wgl = ctx.createLinearGradient(bx + 15, by - bh + 25, bx + 75, by - bh + 85);
    1028. 

  1028.   wgl.addColorStop(0, 'rgba(255,255,255,.28)');
    1029. 

  1029.   wgl.addColorStop(0.5, 'rgba(255,255,255,0)');
    1030. 

  1030.   wgl.addColorStop(1, 'rgba(255,255,255,.10)');
    1031. 

  1031.   ctx.fillStyle = wgl; ctx.fillRect(bx + 15, by - bh + 25, 60, 60);
    1032. 

  1032.   ctx.strokeStyle = '#4a5a70'; ctx.strokeRect(bx + 15, by - bh + 25, 60, 60);
    1033. 

  1033.   ctx.beginPath(); ctx.moveTo(bx + 45, by - bh + 25); ctx.lineTo(bx + 45, by - bh + 85); ctx.stroke();
    1034. 

  1034.   ctx.beginPath(); ctx.moveTo(bx + 15, by - bh + 55); ctx.lineTo(bx + 75, by - bh + 55); ctx.stroke();
    1035. 

  1035.   const oGlow = ctx.createRadialGradient(bx + 45, by - bh + 55, 8, bx + 45, by - bh + 55, 60);
    1036. 

  1036.   oGlow.addColorStop(0, `rgba(255,220,140,${0.18 * glow + 0.08})`);
    1037. 

  1037.   oGlow.addColorStop(1, 'rgba(255,220,140,0)');
    1038. 

  1038.   ctx.fillStyle = oGlow; ctx.fillRect(bx + 15 - 60, by - bh + 25 - 60, 180, 180);
    1039. 

  1039. 

  1040.   ctx.fillStyle = '#1a2028'; ctx.fillRect(bx + bw - 45, by - bh + 25, 35, bh - 25);
    1041. 

  1041.   ctx.strokeStyle = '#4a5a70'; ctx.strokeRect(bx + bw - 45, by - bh + 25, 35, bh - 25);
    1042. 

  1042.   ctx.fillStyle = '#e8c070';
    1043. 

  1043.   ctx.beginPath(); ctx.arc(bx + bw - 40, by - bh/2 - 5, 2.6, 0, Math.PI * 2); ctx.fill();
    1044. 

  1044.   ctx.fillStyle = 'rgba(255,255,255,.5)';
    1045. 

  1045.   ctx.beginPath(); ctx.arc(bx + bw - 41, by - bh/2 - 6, 1.1, 0, Math.PI * 2); ctx.fill();
    1046. 

  1046. 

  1047.   ctx.fillStyle = '#80a0c0'; ctx.font = 'bold 11px "Courier New"';
    1048. 

  1048.   ctx.textAlign = 'center';
    1049. 

  1049.   ctx.fillText('ОХРАНА', bx + bw/2, by - bh - 22);
    1050. 

  1050.   ctx.textAlign = 'left';
    1051. 

  1051. }
    1052. 

  1052. 

  1053. function drawGuard(x, y) {
    1054. 

  1054.   ctx.fillStyle = 'rgba(0,0,0,.55)';
    1055. 

  1055.   ctx.beginPath(); ctx.ellipse(x, y + 2, 14, 4, 0, 0, Math.PI * 2); ctx.fill();
    1056. 

  1056.   ctx.fillStyle = '#1a2230';
    1057. 

  1057.   ctx.fillRect(x - 8, y - 35, 7, 35); ctx.fillRect(x + 1, y - 35, 7, 35);
    1058. 

  1058.   ctx.fillStyle = '#0a0a0a';
    1059. 

  1059.   ctx.fillRect(x - 10, y - 3, 10, 5); ctx.fillRect(x, y - 3, 10, 5);
    1060. 

  1060.   const bg = ctx.createLinearGradient(x - 11, 0, x + 11, 0);
    1061. 

  1061.   bg.addColorStop(0, '#1a3a5e'); bg.addColorStop(0.4, '#3a6a9a'); bg.addColorStop(1, '#1a3050');
    1062. 

  1062.   ctx.fillStyle = bg; ctx.fillRect(x - 11, y - 68, 22, 36);
    1063. 

  1063.   ctx.strokeStyle = '#0a1a30'; ctx.lineWidth = 1; ctx.strokeRect(x - 11, y - 68, 22, 36);
    1064. 

  1064.   ctx.fillStyle = '#e8e8f0';
    1065. 

  1065.   ctx.fillRect(x - 11, y - 68, 5, 3); ctx.fillRect(x + 6, y - 68, 5, 3);
    1066. 

  1066.   ctx.fillStyle = '#0a0a0a'; ctx.fillRect(x - 11, y - 38, 22, 4);
    1067. 

  1067.   ctx.fillStyle = '#1a3a5e';
    1068. 

  1068.   ctx.fillRect(x - 16, y - 66, 6, 30); ctx.fillRect(x + 10, y - 66, 6, 30);
    1069. 

  1069.   ctx.fillStyle = '#d0a880';
    1070. 

  1070.   ctx.fillRect(x - 16, y - 38, 6, 7); ctx.fillRect(x + 10, y - 38, 6, 7);
    1071. 

  1071.   ctx.fillStyle = '#d0a880'; ctx.fillRect(x - 3, y - 72, 6, 4);
    1072. 

  1072.   ctx.beginPath(); ctx.arc(x, y - 81, 9, 0, Math.PI * 2);
    1073. 

  1073.   const fg = ctx.createRadialGradient(x - 3, y - 83, 2, x, y - 81, 9);
    1074. 

  1074.   fg.addColorStop(0, '#e8b890'); fg.addColorStop(1, '#b08868');
    1075. 

  1075.   ctx.fillStyle = fg; ctx.fill();
    1076. 

  1076.   ctx.fillStyle = '#1a1a1a';
    1077. 

  1077.   ctx.beginPath(); ctx.arc(x - 3, y - 82, 1, 0, Math.PI * 2); ctx.fill();
    1078. 

  1078.   ctx.beginPath(); ctx.arc(x + 3, y - 82, 1, 0, Math.PI * 2); ctx.fill();
    1079. 

  1079.   ctx.fillStyle = '#0f2340';
    1080. 

  1080.   ctx.beginPath(); ctx.arc(x, y - 88, 10, Math.PI, Math.PI * 2); ctx.fill();
    1081. 

  1081.   ctx.fillRect(x - 11, y - 88, 22, 3);
    1082. 

  1082.   ctx.fillStyle = '#050a15'; ctx.fillRect(x - 12, y - 85, 24, 3);
    1083. 

  1083.   ctx.fillStyle = '#c0a040'; ctx.beginPath(); ctx.arc(x, y - 90, 2, 0, Math.PI * 2); ctx.fill();
    1084. 

  1084.   ctx.fillStyle = 'rgba(255,220,140,.6)'; ctx.beginPath(); ctx.arc(x - 0.5, y - 90.5, 0.8, 0, Math.PI * 2); ctx.fill();
    1085. 

  1085. }
    1086. 

  1086. 

  1087. function drawBarrier() {
    1088. 

  1088.   const l = L();
    1089. 

  1089.   const pillarX = l.pillarX, pillarW = l.pillarW, pillarH = l.pillarH;
    1090. 

  1090.   const groundBase = l.topLaneY;
    1091. 

  1091.   const pillarTopY = groundBase - pillarH;
    1092. 

  1092.   const pivotX = pillarX, pivotY = groundBase - 80;
    1093. 

  1093.   const armLen = (state.model ? state.model.armLen : 240);
    1094. 

  1094.   const armH = l.armH;
    1095. 

  1095.   const level = state.barrier.level;
    1096. 

  1096.   const m = lighting().mode;
    1097. 

  1097.   const bright = (m === 'day' || m === 'overcast' || m === 'dawn');
    1098. 

  1098. 

  1099.   ctx.fillStyle = 'rgba(0,0,0,.55)';
    1100. 

  1100.   ctx.beginPath(); ctx.ellipse(pillarX + pillarW/2, groundBase + 4, 26, 8, 0, 0, Math.PI * 2); ctx.fill();
    1101. 

  1101.   ctx.fillStyle = '#1a1e24'; ctx.fillRect(pillarX - 10, groundBase - 10, pillarW + 20, 16);
    1102. 

  1102.   ctx.strokeStyle = '#3a4858'; ctx.lineWidth = 1.5; ctx.strokeRect(pillarX - 10, groundBase - 10, pillarW + 20, 16);
    1103. 

  1103.   ctx.fillStyle = 'rgba(255,255,255,.06)';
    1104. 

  1104.   ctx.fillRect(pillarX - 10, groundBase - 10, pillarW + 20, 3);
    1105. 

  1105. 

  1106.   const g = ctx.createLinearGradient(pillarX, 0, pillarX + pillarW, 0);
    1107. 

  1107.   if (bright) { g.addColorStop(0, '#3a4858'); g.addColorStop(0.35, '#7a8898'); g.addColorStop(0.6, '#5a6878'); g.addColorStop(1, '#2a3442'); }
    1108. 

  1108.   else { g.addColorStop(0, '#1a2028'); g.addColorStop(0.35, '#4a5a6a'); g.addColorStop(0.6, '#2a3442'); g.addColorStop(1, '#0a1018'); }
    1109. 

  1109.   ctx.fillStyle = g; ctx.fillRect(pillarX, pillarTopY, pillarW, pillarH);
    1110. 

  1110.   ctx.strokeStyle = '#000'; ctx.lineWidth = 1.5; ctx.strokeRect(pillarX, pillarTopY, pillarW, pillarH);
    1111. 

  1111. 

  1112.   const shine = ctx.createLinearGradient(pillarX + 4, 0, pillarX + 12, 0);
    1113. 

  1113.   shine.addColorStop(0, 'rgba(255,255,255,.18)');
    1114. 

  1114.   shine.addColorStop(1, 'rgba(255,255,255,0)');
    1115. 

  1115.   ctx.fillStyle = shine; ctx.fillRect(pillarX + 4, pillarTopY + 4, 8, pillarH - 8);
    1116. 

  1116. 

  1117.   for (let i = 0; i < 4; i++) {
    1118. 

  1118.     ctx.fillStyle = i % 2 === 0 ? '#a08030' : '#1a1a1a';
    1119. 

  1119.     ctx.fillRect(pillarX, pillarTopY + pillarH - 90 + i * 20, pillarW, 20);
    1120. 

  1120.   }
    1121. 

  1121.   ctx.fillStyle = 'rgba(255,220,140,.12)';
    1122. 

  1122.   ctx.fillRect(pillarX, pillarTopY + pillarH - 90, pillarW, 80);
    1123. 

  1123. 

  1124.   ctx.fillStyle = '#505860';
    1125. 

  1125.   ctx.beginPath();
    1126. 

  1126.   ctx.moveTo(pillarX - 5, pillarTopY); ctx.lineTo(pillarX + pillarW + 5, pillarTopY);
    1127. 

  1127.   ctx.lineTo(pillarX + pillarW, pillarTopY - 12); ctx.lineTo(pillarX, pillarTopY - 12);
    1128. 

  1128.   ctx.closePath(); ctx.fill();
    1129. 

  1129.   ctx.strokeStyle = '#000'; ctx.stroke();
    1130. 

  1130.   ctx.fillStyle = 'rgba(255,255,255,.12)';
    1131. 

  1131.   ctx.fillRect(pillarX, pillarTopY - 12, pillarW, 3);
    1132. 

  1132. 

  1133.   const blink = Math.sin(state.time * 4) > 0;
    1134. 

  1134.   const lampColor = level > 0.9 ? '#40d080' : (level > 0.1 ? '#ffb040' : '#ff2020');
    1135. 

  1135.   const lampX = pillarX + pillarW/2, lampY = pillarTopY - 26;
    1136. 

  1136.   if (blink) {
    1137. 

  1137.     const lampGlow = ctx.createRadialGradient(lampX, lampY, 3, lampX, lampY, 40);
    1138. 

  1138.     lampGlow.addColorStop(0, lampColor + 'cc');
    1139. 

  1139.     lampGlow.addColorStop(0.4, lampColor + '44');
    1140. 

  1140.     lampGlow.addColorStop(1, lampColor + '00');
    1141. 

  1141.     ctx.fillStyle = lampGlow;
    1142. 

  1142.     ctx.fillRect(lampX - 44, lampY - 44, 88, 88);
    1143. 

  1143.   }
    1144. 

  1144.   ctx.beginPath(); ctx.arc(lampX, lampY, 9, 0, Math.PI * 2);
    1145. 

  1145.   const lampGrad = ctx.createRadialGradient(lampX - 3, lampY - 3, 2, lampX, lampY, 9);
    1146. 

  1146.   if (blink) {
    1147. 

  1147.     lampGrad.addColorStop(0, '#ffffff');
    1148. 

  1148.     lampGrad.addColorStop(0.4, lampColor);
    1149. 

  1149.     lampGrad.addColorStop(1, lampColor);
    1150. 

  1150.   } else {
    1151. 

  1151.     lampGrad.addColorStop(0, '#3a3a3a');
    1152. 

  1152.     lampGrad.addColorStop(1, '#1a1a1a');
    1153. 

  1153.   }
    1154. 

  1154.   ctx.fillStyle = lampGrad; ctx.fill();
    1155. 

  1155.   ctx.strokeStyle = '#000'; ctx.lineWidth = 1; ctx.stroke();
    1156. 

  1156.   ctx.beginPath(); ctx.arc(lampX - 3, lampY - 3, 2.5, 0, Math.PI * 2);
    1157. 

  1157.   ctx.fillStyle = 'rgba(255,255,255,.6)'; ctx.fill();
    1158. 

  1158. 

  1159.   ctx.beginPath(); ctx.arc(pivotX, pivotY, 15, 0, Math.PI * 2);
    1160. 

  1160.   ctx.fillStyle = '#2a3442'; ctx.fill();
    1161. 

  1161.   ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.stroke();
    1162. 

  1162.   ctx.beginPath(); ctx.arc(pivotX, pivotY, 6, 0, Math.PI * 2);
    1163. 

  1163.   const hg = ctx.createRadialGradient(pivotX - 2, pivotY - 2, 1, pivotX, pivotY, 6);
    1164. 

  1164.   hg.addColorStop(0, '#c8d4e0'); hg.addColorStop(1, '#506070');
    1165. 

  1165.   ctx.fillStyle = hg; ctx.fill();
    1166. 

  1166.   ctx.beginPath(); ctx.arc(pivotX - 3, pivotY - 3, 2, 0, Math.PI * 2);
    1167. 

  1167.   ctx.fillStyle = 'rgba(255,255,255,.5)'; ctx.fill();
    1168. 

  1168. 

  1169.   const angle = Math.PI + level * Math.PI / 2;
    1170. 

  1170.   ctx.save();
    1171. 

  1171.   ctx.translate(pivotX, pivotY); ctx.rotate(angle);
    1172. 

  1172.   const seg = 14;
    1173. 

  1173.   for (let i = 0; i < seg; i++) {
    1174. 

  1174.     ctx.fillStyle = i % 2 === 0 ? '#e04040' : '#e8e8e8';
    1175. 

  1175.     ctx.fillRect(i * (armLen / seg), -armH/2, armLen / seg, armH);
    1176. 

  1176.   }
    1177. 

  1177.   ctx.fillStyle = 'rgba(0,0,0,.35)';
    1178. 

  1178.   ctx.fillRect(0, armH/2 - 2, armLen, 2);
    1179. 

  1179.   ctx.fillStyle = 'rgba(255,255,255,.4)';
    1180. 

  1180.   ctx.fillRect(0, -armH/2, armLen, 2);
    1181. 

  1181.   ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.strokeRect(0, -armH/2, armLen, armH);
    1182. 

  1182.   ctx.beginPath(); ctx.arc(armLen, 0, 12, 0, Math.PI * 2);
    1183. 

  1183.   const ng = ctx.createRadialGradient(armLen - 3, -3, 2, armLen, 0, 12);
    1184. 

  1184.   ng.addColorStop(0, '#ffffff'); ng.addColorStop(1, '#a8b0b8');
    1185. 

  1185.   ctx.fillStyle = ng; ctx.fill();
    1186. 

  1186.   ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.stroke();
    1187. 

  1187.   ctx.beginPath(); ctx.arc(armLen, 0, 5, 0, Math.PI * 2);
    1188. 

  1188.   ctx.fillStyle = '#8090a0'; ctx.fill();
    1189. 

  1189.   ctx.restore();
    1190. 

  1190. 

  1191.   if (level < 0.9) {
    1192. 

  1192.     const endX = pivotX + Math.cos(angle) * armLen;
    1193. 

  1193.     const endY = pivotY + Math.sin(angle) * armLen;
    1194. 

  1194.     const blinkE = Math.sin(state.time * 6) > 0;
    1195. 

  1195.     if (blinkE) {
    1196. 

  1196.       const eGlow = ctx.createRadialGradient(endX, endY, 2, endX, endY, 26);
    1197. 

  1197.       eGlow.addColorStop(0, 'rgba(255,64,64,.55)');
    1198. 

  1198.       eGlow.addColorStop(1, 'rgba(255,64,64,0)');
    1199. 

  1199.       ctx.fillStyle = eGlow;
    1200. 

  1200.       ctx.fillRect(endX - 28, endY - 28, 56, 56);
    1201. 

  1201.     }
    1202. 

  1202.     ctx.beginPath(); ctx.arc(endX, endY, 6, 0, Math.PI * 2);
    1203. 

  1203.     ctx.fillStyle = blinkE ? '#ff4040' : '#601010'; ctx.fill();
    1204. 

  1204.     ctx.strokeStyle = '#000'; ctx.lineWidth = 1; ctx.stroke();
    1205. 

  1205.   }
    1206. 

  1206. 

  1207.   if (state.model && state.model.hasLoop) {
    1208. 

  1208.     const loopX = l.pivotX - 280;
    1209. 

  1209.     const loopY = l.topLaneY + 10;
    1210. 

  1210.     const loopW = 200, loopH = 18;
    1211. 

  1211.     ctx.strokeStyle = state.skud.loop1 ? 'rgba(96,180,255,.85)' : 'rgba(96,160,224,.35)';
    1212. 

  1212.     ctx.lineWidth = 2;
    1213. 

  1213.     ctx.strokeRect(loopX, loopY, loopW, loopH);
    1214. 

  1214.     if (state.skud.loop1) {
    1215. 

  1215.       ctx.fillStyle = 'rgba(96,180,255,.18)';
    1216. 

  1216.       ctx.fillRect(loopX, loopY, loopW, loopH);
    1217. 

  1217.       const lg = ctx.createRadialGradient(loopX + loopW/2, loopY + loopH/2, 5, loopX + loopW/2, loopY + loopH/2, loopW/2);
    1218. 

  1218.       lg.addColorStop(0, 'rgba(120,200,255,.18)');
    1219. 

  1219.       lg.addColorStop(1, 'rgba(120,200,255,0)');
    1220. 

  1220.       ctx.fillStyle = lg;
    1221. 

  1221.       ctx.fillRect(loopX - 30, loopY - 30, loopW + 60, loopH + 60);
    1222. 

  1222.     }
    1223. 

  1223.   }
    1224. 

  1224.   if (state.model && state.model.hasPhoto) {
    1225. 

  1225.     const px1 = l.pivotX - state.model.armLen - 5;
    1226. 

  1226.     const px2 = l.pivotX + 55;
    1227. 

  1227.     const py = l.topLaneY - 4;
    1228. 

  1228.     ctx.fillStyle = '#304050';
    1229. 

  1229.     ctx.fillRect(px1 - 3, py - 44, 6, 44);
    1230. 

  1230.     ctx.fillRect(px2 - 3, py - 44, 6, 44);
    1231. 

  1231.     ctx.strokeStyle = '#506070'; ctx.lineWidth = 1;
    1232. 

  1232.     ctx.strokeRect(px1 - 3, py - 44, 6, 44);
    1233. 

  1233.     ctx.strokeRect(px2 - 3, py - 44, 6, 44);
    1234. 

  1234.     const on = !state.skud.photo;
    1235. 

  1235.     const dCol = on ? '#40d080' : '#ff4040';
    1236. 

  1236.     if (on) {
    1237. 

  1237.       const dg = ctx.createRadialGradient(px1, py - 36, 2, px1, py - 36, 16);
    1238. 

  1238.       dg.addColorStop(0, dCol + 'aa'); dg.addColorStop(1, dCol + '00');
    1239. 

  1239.       ctx.fillStyle = dg;
    1240. 

  1240.       ctx.fillRect(px1 - 18, py - 54, 36, 36);
    1241. 

  1241.       ctx.fillRect(px2 - 18, py - 54, 36, 36);
    1242. 

  1242.     }
    1243. 

  1243.     ctx.fillStyle = dCol;
    1244. 

  1244.     ctx.beginPath(); ctx.arc(px1, py - 36, 3.5, 0, Math.PI * 2); ctx.fill();
    1245. 

  1245.     ctx.beginPath(); ctx.arc(px2, py - 36, 3.5, 0, Math.PI * 2); ctx.fill();
    1246. 

  1246.     ctx.strokeStyle = '#000'; ctx.lineWidth = 1;
    1247. 

  1247.     ctx.beginPath(); ctx.arc(px1, py - 36, 3.5, 0, Math.PI * 2); ctx.stroke();
    1248. 

  1248.     ctx.beginPath(); ctx.arc(px2, py - 36, 3.5, 0, Math.PI * 2); ctx.stroke();
    1249. 

  1249.     if (on) {
    1250. 

  1250.       ctx.strokeStyle = 'rgba(64,208,128,.6)';
    1251. 

  1251.       ctx.setLineDash([4,4]); ctx.lineWidth = 1.2;
    1252. 

  1252.       ctx.beginPath(); ctx.moveTo(px1, py - 36); ctx.lineTo(px2, py - 36); ctx.stroke();
    1253. 

  1253.       ctx.setLineDash([]);
    1254. 

  1254.     } else {
    1255. 

  1255.       ctx.strokeStyle = 'rgba(255,64,64,.5)';
    1256. 

  1256.       ctx.setLineDash([2,6]);
    1257. 

  1257.       ctx.beginPath(); ctx.moveTo(px1, py - 36); ctx.lineTo(px2, py - 36); ctx.stroke();
    1258. 

  1258.       ctx.setLineDash([]);
    1259. 

  1259.     }
    1260. 

  1260.   }
    1261. 

  1261. }
    1262. 

  1262. 

  1263. /* ===== МАШИНЫ ===== */
    1264. 

  1264. function drawWheels(x, y, dxRear, dxFront, radius, rim, angle) {
    1265. 

  1265.   [x - dxRear, x + dxFront].forEach(wx => {
    1266. 

  1266.     ctx.beginPath(); ctx.arc(wx, y, radius, 0, Math.PI * 2);
    1267. 

  1267.     const tg = ctx.createRadialGradient(wx - radius*0.3, y - radius*0.3, 1, wx, y, radius);
    1268. 

  1268.     tg.addColorStop(0, '#2a2a2a'); tg.addColorStop(1, '#000');
    1269. 

  1269.     ctx.fillStyle = tg; ctx.fill();
    1270. 

  1270.     ctx.beginPath(); ctx.arc(wx, y, radius * 0.62, 0, Math.PI * 2);
    1271. 

  1271.     ctx.fillStyle = '#1a2028'; ctx.fill();
    1272. 

  1272.     ctx.strokeStyle = rim; ctx.lineWidth = 1.5; ctx.stroke();
    1273. 

  1273.     ctx.save(); ctx.translate(wx, y); ctx.rotate(angle);
    1274. 

  1274.     ctx.strokeStyle = rim; ctx.lineWidth = 1.4; ctx.lineCap = 'round';
    1275. 

  1275.     for (let i = 0; i < 5; i++) {
    1276. 

  1276.       const a = (i / 5) * Math.PI * 2;
    1277. 

  1277.       ctx.beginPath(); ctx.moveTo(0, 0);
    1278. 

  1278.       ctx.lineTo(Math.cos(a) * radius * 0.5, Math.sin(a) * radius * 0.5); ctx.stroke();
    1279. 

  1279.     }
    1280. 

  1280.     ctx.beginPath(); ctx.arc(0, 0, radius * 0.16, 0, Math.PI * 2);
    1281. 

  1281.     ctx.fillStyle = rim; ctx.fill();
    1282. 

  1282.     ctx.strokeStyle = '#303840'; ctx.lineWidth = 1; ctx.stroke();
    1283. 

  1283.     ctx.restore();
    1284. 

  1284.     ctx.beginPath(); ctx.arc(wx - radius*0.35, y - radius*0.35, radius*0.18, 0, Math.PI * 2);
    1285. 

  1285.     ctx.fillStyle = 'rgba(255,255,255,.10)'; ctx.fill();
    1286. 

  1286.   });
    1287. 

  1287. }
    1288. 

  1288. 

  1289. function drawSedan(x, y, color, wheelAngle) {
    1290. 

  1290.   ctx.fillStyle = 'rgba(0,0,0,.55)';
    1291. 

  1291.   ctx.beginPath(); ctx.ellipse(x, y + 4, 92, 7, 0, 0, Math.PI * 2); ctx.fill();
    1292. 

  1292. 

  1293.   const bg = ctx.createLinearGradient(0, y - 55, 0, y);
    1294. 

  1294.   bg.addColorStop(0, color); bg.addColorStop(0.55, color); bg.addColorStop(1, '#050505');
    1295. 

  1295.   ctx.fillStyle = bg; ctx.strokeStyle = '#000'; ctx.lineWidth = 2;
    1296. 

  1296.   ctx.beginPath();
    1297. 

  1297.   ctx.moveTo(x + 85, y - 8); ctx.lineTo(x + 78, y - 26); ctx.lineTo(x + 40, y - 30);
    1298. 

  1298.   ctx.lineTo(x + 15, y - 52); ctx.lineTo(x - 25, y - 54); ctx.lineTo(x - 55, y - 42);
    1299. 

  1299.   ctx.lineTo(x - 78, y - 24); ctx.lineTo(x - 85, y - 8); ctx.lineTo(x - 85, y);
    1300. 

  1300.   ctx.lineTo(x + 85, y); ctx.closePath(); ctx.fill(); ctx.stroke();
    1301. 

  1301. 

  1302.   ctx.fillStyle = 'rgba(255,255,255,.18)';
    1303. 

  1303.   ctx.beginPath();
    1304. 

  1304.   ctx.moveTo(x - 70, y - 22); ctx.lineTo(x + 70, y - 22);
    1305. 

  1305.   ctx.lineTo(x + 65, y - 26); ctx.lineTo(x - 65, y - 26);
    1306. 

  1306.   ctx.closePath(); ctx.fill();
    1307. 

  1307. 

  1308.   const gk = ctx.createLinearGradient(0, y - 54, 0, y - 30);
    1309. 

  1309.   gk.addColorStop(0, 'rgba(90,140,180,.85)');
    1310. 

  1310.   gk.addColorStop(1, 'rgba(30,60,90,.75)');
    1311. 

  1311.   ctx.fillStyle = gk;
    1312. 

  1312.   ctx.beginPath();
    1313. 

  1313.   ctx.moveTo(x + 12, y - 50); ctx.lineTo(x - 22, y - 52); ctx.lineTo(x - 48, y - 40);
    1314. 

  1314.   ctx.lineTo(x - 48, y - 30); ctx.lineTo(x + 12, y - 30); ctx.closePath(); ctx.fill();
    1315. 

  1315.   ctx.fillStyle = 'rgba(255,255,255,.20)';
    1316. 

  1316.   ctx.beginPath();
    1317. 

  1317.   ctx.moveTo(x + 8, y - 48); ctx.lineTo(x - 18, y - 50);
    1318. 

  1318.   ctx.lineTo(x - 30, y - 44); ctx.lineTo(x - 20, y - 44);
    1319. 

  1319.   ctx.closePath(); ctx.fill();
    1320. 

  1320. 

  1321.   ctx.strokeStyle = 'rgba(0,0,0,.4)'; ctx.lineWidth = 1;
    1322. 

  1322.   ctx.beginPath(); ctx.moveTo(x - 8, y - 30); ctx.lineTo(x - 8, y - 8); ctx.stroke();
    1323. 

  1323. 

  1324.   ctx.fillStyle = '#fff8c0'; ctx.shadowColor = '#fff8c0'; ctx.shadowBlur = 18;
    1325. 

  1325.   ctx.beginPath(); ctx.arc(x + 80, y - 14, 4.5, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0;
    1326. 

  1326.   ctx.fillStyle = 'rgba(255,255,255,.9)';
    1327. 

  1327.   ctx.beginPath(); ctx.arc(x + 79, y - 15, 1.8, 0, Math.PI * 2); ctx.fill();
    1328. 

  1328. 

  1329.   ctx.fillStyle = '#c02020'; ctx.shadowColor = '#c02020'; ctx.shadowBlur = 10;
    1330. 

  1330.   ctx.fillRect(x - 85, y - 22, 4, 10); ctx.shadowBlur = 0;
    1331. 

  1331.   ctx.fillStyle = 'rgba(255,140,140,.7)';
    1332. 

  1332.   ctx.fillRect(x - 84, y - 21, 2, 3);
    1333. 

  1333. 

  1334.   drawWheels(x, y, 55, 55, 14, '#a0a8b0', wheelAngle);
    1335. 

  1335. }
    1336. 

  1336. 

  1337. function drawDarkCar(x, y, wheelAngle) {
    1338. 

  1338.   ctx.fillStyle = 'rgba(0,0,0,.65)';
    1339. 

  1339.   ctx.beginPath(); ctx.ellipse(x, y + 4, 108, 8, 0, 0, Math.PI * 2); ctx.fill();
    1340. 

  1340. 

  1341.   const bg = ctx.createLinearGradient(0, y - 58, 0, y);
    1342. 

  1342.   bg.addColorStop(0, '#3a3a3a');
    1343. 

  1343.   bg.addColorStop(0.25, '#1a1a1a');
    1344. 

  1344.   bg.addColorStop(0.7, '#050505');
    1345. 

  1345.   bg.addColorStop(1, '#000');
    1346. 

  1346.   ctx.fillStyle = bg; ctx.strokeStyle = '#000'; ctx.lineWidth = 2;
    1347. 

  1347.   ctx.beginPath();
    1348. 

  1348.   ctx.moveTo(x - 105, y - 10); ctx.lineTo(x - 100, y - 28);
    1349. 

  1349.   ctx.lineTo(x - 80, y - 34); ctx.lineTo(x - 55, y - 42);
    1350. 

  1350.   ctx.lineTo(x - 35, y - 54); ctx.lineTo(x + 25, y - 54);
    1351. 

  1351.   ctx.lineTo(x + 45, y - 42); ctx.lineTo(x + 55, y - 34);
    1352. 

  1352.   ctx.lineTo(x + 92, y - 30); ctx.lineTo(x + 105, y - 12);
    1353. 

  1353.   ctx.lineTo(x + 105, y); ctx.lineTo(x - 105, y);
    1354. 

  1354.   ctx.closePath(); ctx.fill(); ctx.stroke();
    1355. 

  1355. 

  1356.   ctx.strokeStyle = 'rgba(220,230,240,.7)'; ctx.lineWidth = 1.5;
    1357. 

  1357.   ctx.beginPath(); ctx.moveTo(x - 100, y - 22); ctx.lineTo(x + 100, y - 22); ctx.stroke();
    1358. 

  1358.   ctx.strokeStyle = 'rgba(255,255,255,.25)'; ctx.lineWidth = 1;
    1359. 

  1359.   ctx.beginPath(); ctx.moveTo(x - 100, y - 23); ctx.lineTo(x + 100, y - 23); ctx.stroke();
    1360. 

  1360. 

  1361.   const gk = ctx.createLinearGradient(0, y - 54, 0, y - 28);
    1362. 

  1362.   gk.addColorStop(0, 'rgba(20,40,60,.95)');
    1363. 

  1363.   gk.addColorStop(0.5, 'rgba(5,10,20,.95)');
    1364. 

  1364.   gk.addColorStop(1, 'rgba(2,4,8,.95)');
    1365. 

  1365.   ctx.fillStyle = gk;
    1366. 

  1366.   ctx.beginPath();
    1367. 

  1367.   ctx.moveTo(x + 45, y - 40); ctx.lineTo(x + 18, y - 40);
    1368. 

  1368.   ctx.lineTo(x + 18, y - 30); ctx.lineTo(x + 52, y - 30);
    1369. 

  1369.   ctx.closePath(); ctx.fill();
    1370. 

  1370.   ctx.beginPath();
    1371. 

  1371.   ctx.moveTo(x - 55, y - 40); ctx.lineTo(x - 35, y - 50);
    1372. 

  1372.   ctx.lineTo(x - 10, y - 50); ctx.lineTo(x - 10, y - 30);
    1373. 

  1373.   ctx.lineTo(x - 55, y - 30); ctx.closePath(); ctx.fill();
    1374. 

  1374.   ctx.fillStyle = 'rgba(120,180,220,.35)';
    1375. 

  1375.   ctx.beginPath();
    1376. 

  1376.   ctx.moveTo(x - 50, y - 42); ctx.lineTo(x - 40, y - 48);
    1377. 

  1377.   ctx.lineTo(x - 30, y - 48); ctx.lineTo(x - 40, y - 42);
    1378. 

  1378.   ctx.closePath(); ctx.fill();
    1379. 

  1379.   ctx.fillStyle = 'rgba(120,180,220,.30)';
    1380. 

  1380.   ctx.beginPath();
    1381. 

  1381.   ctx.moveTo(x + 22, y - 38); ctx.lineTo(x + 30, y - 38);
    1382. 

  1382.   ctx.lineTo(x + 30, y - 32); ctx.lineTo(x + 22, y - 32);
    1383. 

  1383.   ctx.closePath(); ctx.fill();
    1384. 

  1384. 

  1385.   ctx.fillStyle = '#0a0a0a'; ctx.fillRect(x + 15, y - 50, 4, 20);
    1386. 

  1386. 

  1387.   ctx.fillStyle = '#050505';
    1388. 

  1388.   ctx.strokeStyle = '#404040';
    1389. 

  1389.   ctx.lineWidth = 1;
    1390. 

  1390.   ctx.fillRect(x + 82, y - 26, 20, 12);
    1391. 

  1391.   ctx.strokeRect(x + 82, y - 26, 20, 12);
    1392. 

  1392.   for (let i = 0; i < 3; i++) {
    1393. 

  1393.     ctx.strokeStyle = '#505860';
    1394. 

  1394.     ctx.beginPath();
    1395. 

  1395.     ctx.moveTo(x + 83, y - 24 + i * 4);
    1396. 

  1396.     ctx.lineTo(x + 101, y - 24 + i * 4);
    1397. 

  1397.     ctx.stroke();
    1398. 

  1398.   }
    1399. 

  1399. 

  1400.   ctx.fillStyle = '#fff8c0'; ctx.shadowColor = '#fff8c0'; ctx.shadowBlur = 22;
    1401. 

  1401.   ctx.beginPath();
    1402. 

  1402.   ctx.moveTo(x + 84, y - 22); ctx.lineTo(x + 100, y - 22);
    1403. 

  1403.   ctx.lineTo(x + 100, y - 12); ctx.lineTo(x + 84, y - 12);
    1404. 

  1404.   ctx.closePath(); ctx.fill(); ctx.shadowBlur = 0;
    1405. 

  1405.   ctx.fillStyle = '#c0e8ff'; ctx.fillRect(x + 86, y - 20, 12, 2);
    1406. 

  1406.   ctx.fillStyle = 'rgba(255,255,255,.7)';
    1407. 

  1407.   ctx.fillRect(x + 90, y - 21, 8, 1.5);
    1408. 

  1408. 

  1409.   ctx.fillStyle = '#c02020'; ctx.shadowColor = '#c02020'; ctx.shadowBlur = 18;
    1410. 

  1410.   ctx.fillRect(x - 105, y - 24, 6, 14); ctx.shadowBlur = 0;
    1411. 

  1411.   ctx.fillStyle = 'rgba(255,160,160,.6)';
    1412. 

  1412.   ctx.fillRect(x - 104, y - 23, 3, 4);
    1413. 

  1413. 

  1414.   drawWheels(x, y, 62, 58, 17, '#c8d0d8', wheelAngle);
    1415. 

  1415. }
    1416. 

  1416. 

  1417. function drawPoliceCar(x, y, wheelAngle) {
    1418. 

  1418.   ctx.fillStyle = 'rgba(0,0,0,.6)';
    1419. 

  1419.   ctx.beginPath(); ctx.ellipse(x, y + 4, 105, 8, 0, 0, Math.PI * 2); ctx.fill();
    1420. 

  1420. 

  1421.   const bg = ctx.createLinearGradient(0, y - 58, 0, y);
    1422. 

  1422.   bg.addColorStop(0, '#f04444');
    1423. 

  1423.   bg.addColorStop(0.35, '#c82020');
    1424. 

  1424.   bg.addColorStop(0.75, '#700a0a');
    1425. 

  1425.   bg.addColorStop(1, '#400404');
    1426. 

  1426.   ctx.fillStyle = bg; ctx.strokeStyle = '#000'; ctx.lineWidth = 2;
    1427. 

  1427.   ctx.beginPath();
    1428. 

  1428.   ctx.moveTo(x + 105, y - 10); ctx.lineTo(x + 100, y - 28);
    1429. 

  1429.   ctx.lineTo(x + 80, y - 34); ctx.lineTo(x + 55, y - 42);
    1430. 

  1430.   ctx.lineTo(x + 35, y - 54); ctx.lineTo(x - 25, y - 54);
    1431. 

  1431.   ctx.lineTo(x - 45, y - 42); ctx.lineTo(x - 55, y - 34);
    1432. 

  1432.   ctx.lineTo(x - 92, y - 30); ctx.lineTo(x - 105, y - 12);
    1433. 

  1433.   ctx.lineTo(x - 105, y); ctx.lineTo(x + 105, y);
    1434. 

  1434.   ctx.closePath(); ctx.fill(); ctx.stroke();
    1435. 

  1435. 

  1436.   ctx.fillStyle = 'rgba(255,255,255,.20)';
    1437. 

  1437.   ctx.beginPath();
    1438. 

  1438.   ctx.moveTo(x - 90, y - 20); ctx.lineTo(x + 90, y - 20);
    1439. 

  1439.   ctx.lineTo(x + 85, y - 24); ctx.lineTo(x - 85, y - 24);
    1440. 

  1440.   ctx.closePath(); ctx.fill();
    1441. 

  1441. 

  1442.   const gk = ctx.createLinearGradient(0, y - 54, 0, y - 30);
    1443. 

  1443.   gk.addColorStop(0, 'rgba(70,120,170,.85)');
    1444. 

  1444.   gk.addColorStop(1, 'rgba(20,40,70,.85)');
    1445. 

  1445.   ctx.fillStyle = gk;
    1446. 

  1446.   ctx.beginPath();
    1447. 

  1447.   ctx.moveTo(x - 45, y - 40); ctx.lineTo(x - 18, y - 40);
    1448. 

  1448.   ctx.lineTo(x - 18, y - 30); ctx.lineTo(x - 52, y - 30);
    1449. 

  1449.   ctx.closePath(); ctx.fill();
    1450. 

  1450.   ctx.beginPath();
    1451. 

  1451.   ctx.moveTo(x + 55, y - 40); ctx.lineTo(x + 35, y - 50);
    1452. 

  1452.   ctx.lineTo(x + 10, y - 50); ctx.lineTo(x + 10, y - 30);
    1453. 

  1453.   ctx.lineTo(x + 55, y - 30); ctx.closePath(); ctx.fill();
    1454. 

  1454.   ctx.fillRect(x - 12, y - 30, 25, 10);
    1455. 

  1455. 

  1456.   ctx.save();
    1457. 

  1457.   ctx.fillStyle = '#ffffff';
    1458. 

  1458.   ctx.font = 'bold 11px "Courier New"';
    1459. 

  1459.   ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    1460. 

  1460.   ctx.shadowColor = 'rgba(0,0,0,.9)'; ctx.shadowBlur = 3;
    1461. 

  1461.   ctx.fillText('ПОЛИЦИЯ', x - 40, y - 12);
    1462. 

  1462.   ctx.fillText('ПОЛИЦИЯ', x + 30, y - 12);
    1463. 

  1463.   ctx.restore();
    1464. 

  1464. 

  1465.   ctx.fillStyle = '#1a3a80'; ctx.fillRect(x - 95, y - 6, 190, 3);
    1466. 

  1466.   ctx.fillStyle = 'rgba(120,180,255,.4)'; ctx.fillRect(x - 95, y - 6, 190, 1);
    1467. 

  1467. 

  1468.   ctx.fillStyle = '#fff8c0'; ctx.shadowColor = '#fff8c0'; ctx.shadowBlur = 20;
    1469. 

  1469.   ctx.fillRect(x - 100, y - 20, 14, 6); ctx.shadowBlur = 0;
    1470. 

  1470.   ctx.fillStyle = '#c02020'; ctx.shadowColor = '#c02020'; ctx.shadowBlur = 14;
    1471. 

  1471.   ctx.fillRect(x + 100, y - 24, 5, 14); ctx.shadowBlur = 0;
    1472. 

  1472. 

  1473.   const blink = Math.sin(state.time * 12) > 0;
    1474. 

  1474.   ctx.fillStyle = '#1a1a1a';
    1475. 

  1475.   ctx.fillRect(x - 30, y - 60, 60, 5);
    1476. 

  1476.   if (blink) {
    1477. 

  1477.     const rg = ctx.createRadialGradient(x - 15, y - 68, 4, x - 15, y - 68, 50);
    1478. 

  1478.     rg.addColorStop(0, 'rgba(255,50,50,.9)');
    1479. 

  1479.     rg.addColorStop(1, 'rgba(255,50,50,0)');
    1480. 

  1480.     ctx.fillStyle = rg; ctx.fillRect(x - 65, y - 118, 100, 100);
    1481. 

  1481.   }
    1482. 

  1482.   ctx.fillStyle = blink ? '#ff2020' : '#401010';
    1483. 

  1483.   ctx.beginPath();
    1484. 

  1484.   ctx.moveTo(x - 30, y - 60); ctx.lineTo(x, y - 60);
    1485. 

  1485.   ctx.lineTo(x, y - 70); ctx.lineTo(x - 30, y - 70);
    1486. 

  1486.   ctx.closePath(); ctx.fill();
    1487. 

  1487.   ctx.strokeStyle = '#000'; ctx.lineWidth = 1; ctx.stroke();
    1488. 

  1488. 

  1489.   if (!blink) {
    1490. 

  1490.     const bg2 = ctx.createRadialGradient(x + 15, y - 68, 4, x + 15, y - 68, 50);
    1491. 

  1491.     bg2.addColorStop(0, 'rgba(50,120,255,.9)');
    1492. 

  1492.     bg2.addColorStop(1, 'rgba(50,120,255,0)');
    1493. 

  1493.     ctx.fillStyle = bg2; ctx.fillRect(x - 35, y - 118, 100, 100);
    1494. 

  1494.   }
    1495. 

  1495.   ctx.fillStyle = !blink ? '#2060ff' : '#101040';
    1496. 

  1496.   ctx.beginPath();
    1497. 

  1497.   ctx.moveTo(x, y - 60); ctx.lineTo(x + 30, y - 60);
    1498. 

  1498.   ctx.lineTo(x + 30, y - 70); ctx.lineTo(x, y - 70);
    1499. 

  1499.   ctx.closePath(); ctx.fill();
    1500. 

  1500.   ctx.strokeStyle = '#000'; ctx.stroke();
    1501. 

  1501. 

  1502.   const beamGrad = ctx.createLinearGradient(x - 105, y - 14, x - 300, y + 10);
    1503. 

  1503.   beamGrad.addColorStop(0, 'rgba(255,240,180,.5)');
    1504. 

  1504.   beamGrad.addColorStop(1, 'rgba(255,240,180,0)');
    1505. 

  1505.   ctx.fillStyle = beamGrad;
    1506. 

  1506.   ctx.beginPath();
    1507. 

  1507.   ctx.moveTo(x - 105, y - 20); ctx.lineTo(x - 300, y - 28);
    1508. 

  1508.   ctx.lineTo(x - 300, y + 20); ctx.lineTo(x - 105, y - 4);
    1509. 

  1509.   ctx.closePath(); ctx.fill();
    1510. 

  1510. 

  1511.   drawWheels(x, y, 65, 60, 15, '#606060', wheelAngle);
    1512. 

  1512. }
    1513. 

  1513. 

  1514. function drawTowTruck(x, y, wheelAngle, doorOpen) {
    1515. 

  1515.   ctx.fillStyle = 'rgba(0,0,0,.55)';
    1516. 

  1516.   ctx.beginPath(); ctx.ellipse(x, y + 4, 105, 7, 0, 0, Math.PI * 2); ctx.fill();
    1517. 

  1517. 

  1518.   const bg = ctx.createLinearGradient(0, y - 60, 0, y);
    1519. 

  1519.   bg.addColorStop(0, '#e8c840'); bg.addColorStop(0.4, '#c8a020'); bg.addColorStop(1, '#705010');
    1520. 

  1520.   ctx.fillStyle = bg; ctx.strokeStyle = '#000'; ctx.lineWidth = 2;
    1521. 

  1521.   ctx.beginPath();
    1522. 

  1522.   ctx.moveTo(x - 100, y - 8); ctx.lineTo(x - 100, y - 55);
    1523. 

  1523.   ctx.lineTo(x - 55, y - 55); ctx.lineTo(x - 40, y - 25);
    1524. 

  1524.   ctx.lineTo(x - 20, y - 25); ctx.lineTo(x - 20, y - 8);
    1525. 

  1525.   ctx.lineTo(x - 20, y); ctx.lineTo(x - 100, y);
    1526. 

  1526.   ctx.closePath(); ctx.fill(); ctx.stroke();
    1527. 

  1527. 

  1528.   const gk = ctx.createLinearGradient(0, y - 50, 0, y - 28);
    1529. 

  1529.   gk.addColorStop(0, 'rgba(90,140,180,.85)');
    1530. 

  1530.   gk.addColorStop(1, 'rgba(30,60,90,.8)');
    1531. 

  1531.   ctx.fillStyle = gk;
    1532. 

  1532.   ctx.beginPath();
    1533. 

  1533.   ctx.moveTo(x - 95, y - 50); ctx.lineTo(x - 60, y - 50);
    1534. 

  1534.   ctx.lineTo(x - 48, y - 28); ctx.lineTo(x - 95, y - 28);
    1535. 

  1535.   ctx.closePath(); ctx.fill();
    1536. 

  1536.   ctx.fillStyle = 'rgba(255,255,255,.20)';
    1537. 

  1537.   ctx.beginPath();
    1538. 

  1538.   ctx.moveTo(x - 90, y - 48); ctx.lineTo(x - 75, y - 48);
    1539. 

  1539.   ctx.lineTo(x - 80, y - 32); ctx.lineTo(x - 90, y - 32);
    1540. 

  1540.   ctx.closePath(); ctx.fill();
    1541. 

  1541. 

  1542.   const pg = ctx.createLinearGradient(0, y - 20, 0, y - 8);
    1543. 

  1543.   pg.addColorStop(0, '#d0b040'); pg.addColorStop(1, '#705010');
    1544. 

  1544.   ctx.fillStyle = pg; ctx.fillRect(x + 20, y - 18, 85, 10);
    1545. 

  1545.   ctx.strokeStyle = '#000'; ctx.strokeRect(x + 20, y - 18, 85, 10);
    1546. 

  1546.   ctx.fillStyle = 'rgba(255,255,255,.15)';
    1547. 

  1547.   ctx.fillRect(x + 20, y - 18, 85, 2);
    1548. 

  1548. 

  1549.   ctx.strokeStyle = '#806010'; ctx.lineWidth = 5;
    1550. 

  1550.   ctx.beginPath();
    1551. 

  1551.   ctx.moveTo(x + 5, y - 18); ctx.lineTo(x + 40, y - 55); ctx.lineTo(x + 80, y - 55); ctx.stroke();
    1552. 

  1552.   ctx.strokeStyle = '#c0a020'; ctx.lineWidth = 2;
    1553. 

  1553.   ctx.beginPath(); ctx.moveTo(x + 80, y - 55); ctx.lineTo(x + 90, y - 32); ctx.stroke();
    1554. 

  1554.   ctx.strokeStyle = '#a0a8b0';
    1555. 

  1555.   ctx.beginPath(); ctx.arc(x + 90, y - 28, 4, 0, Math.PI * 1.5); ctx.stroke();
    1556. 

  1556. 

  1557.   const blink = Math.sin(state.time * 8) > 0;
    1558. 

  1558.   if (blink) {
    1559. 

  1559.     const mg = ctx.createRadialGradient(x - 59, y - 59, 3, x - 59, y - 59, 40);
    1560. 

  1560.     mg.addColorStop(0, 'rgba(255,180,70,.9)');
    1561. 

  1561.     mg.addColorStop(1, 'rgba(255,180,70,0)');
    1562. 

  1562.     ctx.fillStyle = mg;
    1563. 

  1563.     ctx.fillRect(x - 100, y - 100, 80, 80);
    1564. 

  1564.   }
    1565. 

  1565.   ctx.fillStyle = blink ? '#ffb040' : '#604010';
    1566. 

  1566.   ctx.fillRect(x - 65, y - 62, 12, 6);
    1567. 

  1567. 

  1568.   ctx.fillStyle = '#fff8c0'; ctx.shadowColor = '#fff8c0'; ctx.shadowBlur = 15;
    1569. 

  1569.   ctx.beginPath(); ctx.arc(x - 95, y - 14, 4, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0;
    1570. 

  1570.   ctx.fillStyle = 'rgba(255,255,255,.7)';
    1571. 

  1571.   ctx.beginPath(); ctx.arc(x - 96, y - 15, 1.5, 0, Math.PI * 2); ctx.fill();
    1572. 

  1572. 

  1573.   drawWheels(x, y, 70, 25, 14, '#606060', wheelAngle);
    1574. 

  1574.   const wx = x + 60;
    1575. 

  1575.   ctx.beginPath(); ctx.arc(wx, y, 14, 0, Math.PI * 2);
    1576. 

  1576.   ctx.fillStyle = '#0a0a0a'; ctx.fill();
    1577. 

  1577.   ctx.beginPath(); ctx.arc(wx, y, 5, 0, Math.PI * 2);
    1578. 

  1578.   ctx.fillStyle = '#606060'; ctx.fill();
    1579. 

  1579. }
    1580. 

  1580. 

  1581. function drawTowDriver(x, y, walking, alpha) {
    1582. 

  1582.   ctx.save();
    1583. 

  1583.   ctx.globalAlpha = alpha !== undefined ? Math.max(0, Math.min(1, alpha)) : 1;
    1584. 

  1584.   const wobble = walking ? Math.sin(state.time * 10) * 2 : 0;
    1585. 

  1585.   ctx.fillStyle = 'rgba(0,0,0,.5)';
    1586. 

  1586.   ctx.beginPath(); ctx.ellipse(x, y + 2, 13, 4, 0, 0, Math.PI * 2); ctx.fill();
    1587. 

  1587.   ctx.fillStyle = '#252c38';
    1588. 

  1588.   ctx.fillRect(x - 8, y - 33, 7, 29 + wobble);
    1589. 

  1589.   ctx.fillRect(x + 1, y - 33, 7, 29 - wobble);
    1590. 

  1590.   ctx.fillStyle = '#0a0a0a';
    1591. 

  1591.   ctx.fillRect(x - 10, y + 1 + wobble, 11, 3);
    1592. 

  1592.   ctx.fillRect(x, y + 1 - wobble, 11, 3);
    1593. 

  1593.   const jg = ctx.createLinearGradient(x - 11, 0, x + 11, 0);
    1594. 

  1594.   jg.addColorStop(0, '#b06818'); jg.addColorStop(0.4, '#f09030'); jg.addColorStop(1, '#a85810');
    1595. 

  1595.   ctx.fillStyle = jg; ctx.fillRect(x - 10, y - 63, 20, 33);
    1596. 

  1596.   ctx.strokeStyle = '#703810'; ctx.lineWidth = 1; ctx.strokeRect(x - 10, y - 63, 20, 33);
    1597. 

  1597.   ctx.fillStyle = '#f0f0f0';
    1598. 

  1598.   ctx.fillRect(x - 10, y - 56, 20, 3);
    1599. 

  1599.   ctx.fillRect(x - 10, y - 44, 20, 3);
    1600. 

  1600.   ctx.fillStyle = '#d0a880';
    1601. 

  1601.   ctx.fillRect(x - 16, y - 60, 6, 23);
    1602. 

  1602.   ctx.fillRect(x + 10, y - 60, 6, 23);
    1603. 

  1603.   ctx.fillStyle = '#d0a880'; ctx.fillRect(x - 3, y - 67, 6, 5);
    1604. 

  1604.   ctx.beginPath(); ctx.arc(x, y - 76, 9, 0, Math.PI * 2);
    1605. 

  1605.   const fg = ctx.createRadialGradient(x - 3, y - 78, 2, x, y - 76, 9);
    1606. 

  1606.   fg.addColorStop(0, '#e8b890'); fg.addColorStop(1, '#c09870');
    1607. 

  1607.   ctx.fillStyle = fg; ctx.fill();
    1608. 

  1608.   ctx.fillStyle = '#e8c020';
    1609. 

  1609.   ctx.beginPath(); ctx.arc(x, y - 82, 11, Math.PI, 0); ctx.fill();
    1610. 

  1610.   ctx.fillRect(x - 11, y - 83, 22, 4);
    1611. 

  1611.   ctx.strokeStyle = '#8a6a10'; ctx.lineWidth = 1;
    1612. 

  1612.   ctx.beginPath(); ctx.arc(x, y - 82, 11, Math.PI, 0); ctx.stroke();
    1613. 

  1613.   ctx.fillStyle = '#c0a010';
    1614. 

  1614.   ctx.fillRect(x - 1.5, y - 93, 3, 12);
    1615. 

  1615.   ctx.restore();
    1616. 

  1616. }
    1617. 

  1617. 

  1618. function drawSenior(x, y, walking, alpha) {
    1619. 

  1619.   ctx.save();
    1620. 

  1620.   ctx.globalAlpha = alpha !== undefined ? Math.max(0, Math.min(1, alpha)) : 1;
    1621. 

  1621.   const wobble = walking ? Math.sin(state.time * 9) * 2 : 0;
    1622. 

  1622.   ctx.fillStyle = 'rgba(0,0,0,.55)';
    1623. 

  1623.   ctx.beginPath(); ctx.ellipse(x, y + 2, 15, 5, 0, 0, Math.PI * 2); ctx.fill();
    1624. 

  1624.   ctx.fillStyle = '#1a2340';
    1625. 

  1625.   ctx.fillRect(x - 8, y - 35, 7, 31 + wobble);
    1626. 

  1626.   ctx.fillRect(x + 1, y - 35, 7, 31 - wobble);
    1627. 

  1627.   ctx.fillStyle = '#0a0a0a';
    1628. 

  1628.   ctx.fillRect(x - 10, y - 3 + wobble, 11, 7);
    1629. 

  1629.   ctx.fillRect(x + 1, y - 3 - wobble, 11, 7);
    1630. 

  1630.   const un = ctx.createLinearGradient(x - 12, 0, x + 12, 0);
    1631. 

  1631.   un.addColorStop(0, '#1a2a4a'); un.addColorStop(0.4, '#2a3a5a'); un.addColorStop(1, '#141e38');
    1632. 

  1632.   ctx.fillStyle = un; ctx.fillRect(x - 12, y - 70, 24, 38);
    1633. 

  1633.   ctx.strokeStyle = '#0a1428'; ctx.lineWidth = 1; ctx.strokeRect(x - 12, y - 70, 24, 38);
    1634. 

  1634.   ctx.fillStyle = '#c0a040';
    1635. 

  1635.   for (let i = 0; i < 3; i++) {
    1636. 

  1636.     ctx.beginPath(); ctx.arc(x, y - 60 + i * 10, 1.2, 0, Math.PI * 2); ctx.fill();
    1637. 

  1637.   }
    1638. 

  1638.   ctx.fillStyle = '#e0e0f0';
    1639. 

  1639.   ctx.fillRect(x - 13, y - 70, 6, 3);
    1640. 

  1640.   ctx.fillRect(x + 7, y - 70, 6, 3);
    1641. 

  1641.   ctx.fillStyle = '#ffd060';
    1642. 

  1642.   ctx.beginPath(); ctx.arc(x - 10, y - 71, 1.5, 0, Math.PI * 2); ctx.fill();
    1643. 

  1643.   ctx.beginPath(); ctx.arc(x + 10, y - 71, 1.5, 0, Math.PI * 2); ctx.fill();
    1644. 

  1644.   ctx.fillStyle = '#2a3a5a';
    1645. 

  1645.   ctx.fillRect(x - 18, y - 68, 6, 32);
    1646. 

  1646.   ctx.fillRect(x + 12, y - 68, 6, 32);
    1647. 

  1647.   ctx.fillStyle = '#0a0a0a';
    1648. 

  1648.   ctx.fillRect(x - 18, y - 38, 7, 8);
    1649. 

  1649.   ctx.fillRect(x + 12, y - 38, 7, 8);
    1650. 

  1650.   ctx.fillStyle = '#d0a880'; ctx.fillRect(x - 3, y - 74, 6, 5);
    1651. 

  1651.   ctx.beginPath(); ctx.arc(x, y - 83, 10, 0, Math.PI * 2);
    1652. 

  1652.   const fg = ctx.createRadialGradient(x - 3, y - 85, 2, x, y - 83, 10);
    1653. 

  1653.   fg.addColorStop(0, '#e8b890'); fg.addColorStop(1, '#c09870');
    1654. 

  1654.   ctx.fillStyle = fg; ctx.fill();
    1655. 

  1655.   ctx.fillStyle = '#1a1a1a';
    1656. 

  1656.   ctx.beginPath(); ctx.arc(x - 3, y - 84, 1.3, 0, Math.PI * 2); ctx.fill();
    1657. 

  1657.   ctx.beginPath(); ctx.arc(x + 3, y - 84, 1.3, 0, Math.PI * 2); ctx.fill();
    1658. 

  1658.   const cap = ctx.createLinearGradient(x - 13, 0, x + 13, 0);
    1659. 

  1659.   cap.addColorStop(0, '#0f1a35'); cap.addColorStop(0.5, '#1a2c52'); cap.addColorStop(1, '#0a1428');
    1660. 

  1660.   ctx.fillStyle = cap;
    1661. 

  1661.   ctx.beginPath(); ctx.arc(x, y - 90, 13, Math.PI, 0); ctx.fill();
    1662. 

  1662.   ctx.fillRect(x - 13, y - 90, 26, 5);
    1663. 

  1663.   ctx.strokeStyle = '#0a1428'; ctx.lineWidth = 1.5;
    1664. 

  1664.   ctx.beginPath(); ctx.arc(x, y - 90, 13, Math.PI, 0); ctx.stroke();
    1665. 

  1665.   ctx.beginPath(); ctx.moveTo(x - 13, y - 85); ctx.lineTo(x + 13, y - 85); ctx.stroke();
    1666. 

  1666.   ctx.fillStyle = '#05080f';
    1667. 

  1667.   ctx.beginPath();
    1668. 

  1668.   ctx.moveTo(x - 14, y - 85); ctx.lineTo(x + 14, y - 85);
    1669. 

  1669.   ctx.lineTo(x + 12, y - 81); ctx.lineTo(x - 12, y - 81);
    1670. 

  1670.   ctx.closePath(); ctx.fill();
    1671. 

  1671.   ctx.strokeStyle = '#000'; ctx.stroke();
    1672. 

  1672.   ctx.fillStyle = '#c0a040';
    1673. 

  1673.   ctx.beginPath(); ctx.arc(x, y - 96, 2.5, 0, Math.PI * 2); ctx.fill();
    1674. 

  1674.   ctx.fillStyle = 'rgba(255,220,140,.7)';
    1675. 

  1675.   ctx.beginPath(); ctx.arc(x - 0.8, y - 96.8, 1, 0, Math.PI * 2); ctx.fill();
    1676. 

  1676.   ctx.restore();
    1677. 

  1677. }
    1678. 

  1678. 

  1679. const CAR_SCALE = 1.56;
    1680. 

  1680. function drawCarScaled(drawFn, x, y, ...args) {
    1681. 

  1681.   ctx.save();
    1682. 

  1682.   ctx.translate(x, y);
    1683. 

  1683.   ctx.scale(CAR_SCALE, CAR_SCALE);
    1684. 

  1684.   ctx.translate(-x, -y);
    1685. 

  1685.   drawFn(x, y, ...args);
    1686. 

  1686.   ctx.restore();
    1687. 

  1687. }
    1688. 

  1688. 

  1689. /* ===== ПОГОДА ===== */
    1690. 

  1690. function updateWeatherParticles(dt) {
    1691. 

  1691.   if (state.weather === 'clear' || state.weather === 'fog') {
    1692. 

  1692.     state.weatherParticles = []; return;
    1693. 

  1693.   }
    1694. 

  1694.   const targetCount = state.weather === 'rain' ? 240 : 140;
    1695. 

  1695.   while (state.weatherParticles.length < targetCount) {
    1696. 

  1696.     state.weatherParticles.push({
    1697. 

  1697.       x: Math.random() * W, y: Math.random() * H,
    1698. 

  1698.       vx: state.weather === 'rain' ? 60 + Math.random() * 40 : -10 + Math.random() * 20,
    1699. 

  1699.       vy: state.weather === 'rain' ? 600 + Math.random() * 200 : 30 + Math.random() * 40,
    1700. 

  1700.       size: state.weather === 'rain' ? 1 : 1.5 + Math.random() * 1.5,
    1701. 

  1701.       alpha: state.weather === 'rain' ? 0.5 + Math.random() * 0.4 : 0.7 + Math.random() * 0.3
    1702. 

  1702.     });
    1703. 

  1703.   }
    1704. 

  1704.   if (state.weatherParticles.length > targetCount) state.weatherParticles.length = targetCount;
    1705. 

  1705.   state.weatherParticles.forEach(p => {
    1706. 

  1706.     p.x += p.vx * dt; p.y += p.vy * dt;
    1707. 

  1707.     if (p.y > H) { p.y = -10; p.x = Math.random() * W; }
    1708. 

  1708.   });
    1709. 

  1709. }
    1710. 

  1710. function drawWeatherParticles() {
    1711. 

  1711.   if (state.weather === 'rain') {
    1712. 

  1712.     ctx.strokeStyle = 'rgba(180,200,220,.55)';
    1713. 

  1713.     ctx.lineWidth = 1;
    1714. 

  1714.     state.weatherParticles.forEach(p => {
    1715. 

  1715.       ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p.x - 1, p.y - 12); ctx.stroke();
    1716. 

  1716.     });
    1717. 

  1717.   } else if (state.weather === 'snow') {
    1718. 

  1718.     state.weatherParticles.forEach(p => {
    1719. 

  1719.       ctx.fillStyle = `rgba(240,248,255,${p.alpha})`;
    1720. 

  1720.       ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill();
    1721. 

  1721.     });
    1722. 

  1722.   } else if (state.weather === 'fog') {
    1723. 

  1723.     const fogGrad = ctx.createLinearGradient(0, 0, 0, H);
    1724. 

  1724.     fogGrad.addColorStop(0, 'rgba(200,205,215,.30)');
    1725. 

  1725.     fogGrad.addColorStop(1, 'rgba(200,205,215,.35)');
    1726. 

  1726.     ctx.fillStyle = fogGrad; ctx.fillRect(0, 0, W, H);
    1727. 

  1727.   }
    1728. 

  1728. }
    1729. 

  1729. 

  1730. /* ===== ЛОГИКА ===== */
    1731. 

  1731. let lastTs = 0;
    1732. 

  1732. 

  1733. function updateScene(dt) {
    1734. 

  1734.   const l = L();
    1735. 

  1735.   if (!state.model) return;
    1736. 

  1736. 

  1737.   if (state.alarm && state.time > state.alarmEnd) state.alarm = false;
    1738. 

  1738. 

  1739.   const diff = state.barrier.target - state.barrier.level;
    1740. 

  1740.   if (Math.abs(diff) > 0.001) {
    1741. 

  1741.     const speedUp = 1 / state.model.openTime;
    1742. 

  1742.     const speedDown = 1 / state.model.closeTime;
    1743. 

  1743.     const spd = diff > 0 ? speedUp : speedDown;
    1744. 

  1744.     const step = Math.min(Math.abs(diff), dt * spd);
    1745. 

  1745.     state.barrier.level += Math.sign(diff) * step;
    1746. 

  1746.     state.barrier.moving = true;
    1747. 

  1747.     if (Math.abs(diff - Math.sign(diff)*step) < 0.005) {
    1748. 

  1748.       state.barrier.level = state.barrier.target;
    1749. 

  1749.       state.barrier.moving = false;
    1750. 

  1750.     }
    1751. 

  1751.   } else {
    1752. 

  1752.     state.barrier.moving = false;
    1753. 

  1753.   }
    1754. 

  1754. 

  1755.   state.skud.kw1 = state.barrier.level < 0.05;
    1756. 

  1756.   state.skud.kw2 = state.barrier.level > 0.95;
    1757. 

  1757.   if (state.skud.kw1) { state.skud.relayClose = false; }
    1758. 

  1758.   if (state.skud.kw2) { state.skud.relayOpen = false; }
    1759. 

  1759. 

  1760.   if (state.barrier.level > 0.95 && !state.holdMode && state.model.autoClose > 0 && !state.manualMode) {
    1761. 

  1761.     state.autoCloseTimer += dt;
    1762. 

  1762.     if (state.autoCloseTimer >= state.model.autoClose && !state.skud.photo && !state.skud.loop1 && !state.skud.loop2) {
    1763. 

  1763.       closeBarrier();
    1764. 

  1764.       state.autoCloseTimer = 0;
    1765. 

  1765.     }
    1766. 

  1766.   } else if (state.barrier.level < 0.95) {
    1767. 

  1767.     state.autoCloseTimer = 0;
    1768. 

  1768.   }
    1769. 

  1769. 

  1770.   const stopX = l.pivotX - (state.model.armLen) - 60;
    1771. 

  1771. 

  1772.   if (state.car) {
    1773. 

  1773.     const c = state.car;
    1774. 

  1774.     if (state.phase === 'approaching') {
    1775. 

  1775.       if (c.x < stopX) {
    1776. 

  1776.         c.x += c.speed * dt; c.wheelAngle += c.speed * dt * 0.06;
    1777. 

  1777.       } else if (c.isPriora) {
    1778. 

  1778.         c.x += c.speed * dt; c.wheelAngle += c.speed * dt * 0.06;
    1779. 

  1779.         if (c.x >= l.pivotX - state.model.armLen - 20 && state.barrier.level < 0.5) {
    1780. 

  1780.           c.x = l.pivotX - state.model.armLen - 20; crash();
    1781. 

  1781.         } else if (c.x > W + 300) {
    1782. 

  1782.           state.car = null; state.phase = 'idle';
    1783. 

  1783.         }
    1784. 

  1784.       } else {
    1785. 

  1785.         state.phase = 'waiting';
    1786. 

  1786.         setStatus('ОЖИДАНИЕ РЕШЕНИЯ', 'wait');
    1787. 

  1787.         setHint('Сравните пропуска и примите решение.');
    1788. 

  1788.         if (state.model.hasLoop) {
    1789. 

  1789.           state.skud.loop1 = true;
    1790. 

  1790.           logSkud('ПЕТЛЯ 1: занята', 'blu');
    1791. 

  1791.           state.stats.sensors++;
    1792. 

  1792.         }
    1793. 

  1793.         renderPasses();
    1794. 

  1794.       }
    1795. 

  1795.     }
    1796. 

  1796.     else if (state.phase === 'resolved') {
    1797. 

  1797.       if (c.action === 'pass') {
    1798. 

  1798.         if (state.barrier.level > 0.9) {
    1799. 

  1799.           c.x += c.speed * dt; c.wheelAngle += c.speed * dt * 0.06;
    1800. 

  1800.           if (state.model.hasPhoto) {
    1801. 

  1801.             if (!state.skud.photo && c.x > l.pivotX - state.model.armLen - 40 && c.x < l.pivotX + 40) {
    1802. 

  1802.               state.skud.photo = true;
    1803. 

  1803.               logSkud('ФОТОЭЛЕМЕНТ: разрыв луча', 'yel');
    1804. 

  1804.               state.stats.sensors++;
    1805. 

  1805.             }
    1806. 

  1806.             if (state.skud.photo && (c.x < l.pivotX - state.model.armLen - 60 || c.x > l.pivotX + 60)) {
    1807. 

  1807.               state.skud.photo = false;
    1808. 

  1808.             }
    1809. 

  1809.           }
    1810. 

  1810.           if (c.x > W + 300) {
    1811. 

  1811.             logEvent('Автомобиль проехал КПП', 'ok');
    1812. 

  1812.             state.stats.in++;
    1813. 

  1813.             state.car = null; state.phase = 'idle';
    1814. 

  1814.             if (state.model.hasLoop) { state.skud.loop1 = false; logSkud('ПЕТЛЯ 1: свободна'); }
    1815. 

  1815.             if (state.skud.photo) state.skud.photo = false;
    1816. 

  1816.             state.barrier.target = 0;
    1817. 

  1817.             setStatus('ПОСТ СВОБОДЕН');
    1818. 

  1818.             setHint('Нажмите <b>«Следующая машина»</b>.');
    1819. 

  1819.             state.senior = null;
    1820. 

  1820.           }
    1821. 

  1821.         }
    1822. 

  1822.       } else if (c.action === 'turn') {
    1823. 

  1823.         c.x -= c.speed * dt; c.wheelAngle -= c.speed * dt * 0.06;
    1824. 

  1824.         if (c.x < -350) {
    1825. 

  1825.           logEvent('Автомобиль уехал', 'info');
    1826. 

  1826.           state.car = null; state.phase = 'idle';
    1827. 

  1827.           if (state.model.hasLoop) { state.skud.loop1 = false; logSkud('ПЕТЛЯ 1: свободна'); }
    1828. 

  1828.           setStatus('ПОСТ СВОБОДЕН');
    1829. 

  1829.           setHint('Нажмите <b>«Следующая машина»</b>.');
    1830. 

  1830.           state.senior = null;
    1831. 

  1831.         }
    1832. 

  1832.       }
    1833. 

  1833.     }
    1834. 

  1834.   }
    1835. 

  1835. 

  1836.   if (state.senior) {
    1837. 

  1837.     const s = state.senior;
    1838. 

  1838.     const SPEED = 90;
    1839. 

  1839.     if (s.state === 'walk_to_lane') {
    1840. 

  1840.       s.alpha = Math.min(1, (s.alpha || 0) + dt * 1.5);
    1841. 

  1841.       s.walking = true; s.y = l.botLaneY;
    1842. 

  1842.       const targetX = (state.car ? state.car.x : 0) + 140;
    1843. 

  1843.       if (s.x > targetX) s.x -= SPEED * dt;
    1844. 

  1844.       else s.state = 'walk_up';
    1845. 

  1845.     } else if (s.state === 'walk_up') {
    1846. 

  1846.       s.walking = true;
    1847. 

  1847.       if (s.y > l.topLaneY + 2) s.y -= SPEED * 0.7 * dt;
    1848. 

  1848.       else {
    1849. 

  1849.         s.y = l.topLaneY; s.walking = false; s.state = 'review'; s.decideTimer = 0;
    1850. 

  1850.         setStatus('СТАРШИЙ У МАШИНЫ', 'senior');
    1851. 

  1851.         setHint('Старший смены проверяет документы...');
    1852. 

  1852.         logEvent('Старший смены подошёл к машине', 'senior');
    1853. 

  1853.       }
    1854. 

  1854.     } else if (s.state === 'review') {
    1855. 

  1855.       s.decideTimer += dt; s.walking = false;
    1856. 

  1856.       if (s.decideTimer > 2.0) {
    1857. 

  1857.         const allow = (state.correctDecision === 'allow');
    1858. 

  1858.         if (allow) {
    1859. 

  1859.           logEvent('Старший смены: пропуск действителен — пропускаем', 'senior');
    1860. 

  1860.           setStatus('СТАРШИЙ ПРОПУСКАЕТ', 'ok');
    1861. 

  1861.           state.car.action = 'pass';
    1862. 

  1862.           openBarrier();
    1863. 

  1863.           state.phase = 'resolved';
    1864. 

  1864.           state.userDecision = 'allow';
    1865. 

  1865.           renderPasses();
    1866. 

  1866.         } else {
    1867. 

  1867.           logEvent('Старший смены: пропуск недействителен — отказ', 'senior');
    1868. 

  1868.           setStatus('СТАРШИЙ ОТКАЗЫВАЕТ', 'wait');
    1869. 

  1869.           state.car.action = 'turn';
    1870. 

  1870.           state.phase = 'resolved';
    1871. 

  1871.           state.userDecision = 'deny';
    1872. 

  1872.           state.stats.out++;
    1873. 

  1873.           renderPasses();
    1874. 

  1874.         }
    1875. 

  1875.         s.state = 'returning';
    1876. 

  1876.       }
    1877. 

  1877.     } else if (s.state === 'returning') {
    1878. 

  1878.       s.walking = true;
    1879. 

  1879.       if (s.y < l.botLaneY - 2) s.y += SPEED * 0.7 * dt;
    1880. 

  1880.       else {
    1881. 

  1881.         s.y = l.botLaneY; s.x += SPEED * dt;
    1882. 

  1882.         if (s.x > W + 60) state.senior = null;
    1883. 

  1883.       }
    1884. 

  1884.     }
    1885. 

  1885.   }
    1886. 

  1886. 

  1887.   if (state.phase === 'crash_scene') {
    1888. 

  1888.     if (state.police) {
    1889. 

  1889.       const p = state.police;
    1890. 

  1890.       if (p.state === 'arriving') {
    1891. 

  1891.         p.x -= p.speed * dt; p.wheelAngle -= p.speed * dt * 0.06;
    1892. 

  1892.         if (p.x <= p.targetX) { p.x = p.targetX; p.state = 'stopped'; }
    1893. 

  1893.       } else if (p.state === 'leaving') {
    1894. 

  1894.         p.x += p.speed * dt; p.wheelAngle += p.speed * dt * 0.06;
    1895. 

  1895.       }
    1896. 

  1896.     }
    1897. 

  1897.     if (state.tow) {
    1898. 

  1898.       const t2 = state.tow;
    1899. 

  1899.       if (t2.state === 'arriving') {
    1900. 

  1900.         t2.x += t2.speed * dt; t2.wheelAngle -= t2.speed * dt * 0.06;
    1901. 

  1901.         if (t2.x >= t2.targetX) { t2.x = t2.targetX; t2.state = 'stopped'; t2.stopTimer = 0; }
    1902. 

  1902.       } else if (t2.state === 'stopped') {
    1903. 

  1903.         t2.stopTimer = (t2.stopTimer || 0) + dt;
    1904. 

  1904.       } else if (t2.state === 'leaving') {
    1905. 

  1905.         t2.x -= t2.speed * dt; t2.wheelAngle += t2.speed * dt * 0.06;
    1906. 

  1906.       }
    1907. 

  1907.     }
    1908. 

  1908.     if (state.car && state.car.towed && state.tow) {
    1909. 

  1909.       state.car.x = state.tow.x + 220;
    1910. 

  1910.       state.car.wheelAngle += state.tow.speed * dt * 0.06;
    1911. 

  1911.     }
    1912. 

  1912.     if (state.tow && state.tow.state === 'stopped' && state.tow.stopTimer > 1.2 && !state.towDriver && !state.leaving && state.car) {
    1913. 

  1913.       const doorX = state.tow.x - 150;
    1914. 

  1914.       state.towDriver = { x: doorX, y: l.topLaneY, doorX: doorX,
    1915. 

  1915.         carApproachX: state.car.x - 160,
    1916. 

  1916.         state: 'exiting', exitTimer: 0, alpha: 0, walking: false, attachTimer: 0, boardTimer: 0 };
    1917. 

  1917.       state.tow.doorOpen = true;
    1918. 

  1918.       logEvent('Водитель выходит из кабины эвакуатора', 'info');
    1919. 

  1919.     }
    1920. 

  1920.     if (state.towDriver) {
    1921. 

  1921.       const td = state.towDriver;
    1922. 

  1922.       const underY = l.topLaneBot + 25;
    1923. 

  1923.       const SPD = 55;
    1924. 

  1924.       if (td.state === 'exiting') {
    1925. 

  1925.         td.exitTimer += dt; td.alpha = Math.min(1, td.exitTimer / 0.8);
    1926. 

  1926.         if (td.exitTimer > 0.8) { td.alpha = 1; td.state = 'walking_out_down'; }
    1927. 

  1927.       } else if (td.state === 'walking_out_down') {
    1928. 

  1928.         if (td.y < underY - 2) { td.y += SPD * dt; td.walking = true; }
    1929. 

  1929.         else { td.y = underY; td.state = 'walking_right'; }
    1930. 

  1930.       } else if (td.state === 'walking_right') {
    1931. 

  1931.         if (td.x < td.carApproachX - 2) { td.x += SPD * dt; td.walking = true; }
    1932. 

  1932.         else { td.x = td.carApproachX; td.state = 'walking_up'; }
    1933. 

  1933.       } else if (td.state === 'walking_up') {
    1934. 

  1934.         if (td.y > l.topLaneY + 2) { td.y -= SPD * dt; td.walking = true; }
    1935. 

  1935.         else { td.y = l.topLaneY; td.state = 'attaching'; td.attachTimer = 0; }
    1936. 

  1936.       } else if (td.state === 'attaching') {
    1937. 

  1937.         td.attachTimer += dt; td.walking = false;
    1938. 

  1938.         if (td.attachTimer > 0.6 && !state.towCable) { state.towCable = true; logEvent('Автомобиль зацеплен', 'info'); }
    1939. 

  1939.         if (td.attachTimer > 1.4) td.state = 'returning_down';
    1940. 

  1940.       } else if (td.state === 'returning_down') {
    1941. 

  1941.         if (td.y < underY - 2) { td.y += SPD * dt; td.walking = true; }
    1942. 

  1942.         else { td.y = underY; td.state = 'returning_left'; }
    1943. 

  1943.       } else if (td.state === 'returning_left') {
    1944. 

  1944.         if (td.x > td.doorX + 2) { td.x -= SPD * dt; td.walking = true; }
    1945. 

  1945.         else { td.x = td.doorX; td.state = 'returning_up'; }
    1946. 

  1946.       } else if (td.state === 'returning_up') {
    1947. 

  1947.         if (td.y > l.topLaneY + 2) { td.y -= SPD * dt; td.walking = true; }
    1948. 

  1948.         else { td.y = l.topLaneY; td.state = 'boarding'; td.boardTimer = 0; td.walking = false; }
    1949. 

  1949.       } else if (td.state === 'boarding') {
    1950. 

  1950.         td.boardTimer += dt; td.walking = false;
    1951. 

  1951.         td.alpha = Math.max(0, 1 - td.boardTimer / 0.8);
    1952. 

  1952.         td.x += 20 * dt;
    1953. 

  1953.         if (td.boardTimer > 0.8) {
    1954. 

  1954.           td.state = 'gone'; td.alpha = 0;
    1955. 

  1955.           if (state.tow) state.tow.doorOpen = false;
    1956. 

  1956.           if (!state.leaving) {
    1957. 

  1957.             state.leaving = true;
    1958. 

  1958.             setTimeout(() => {
    1959. 

  1959.               logEvent('Эвакуатор увозит автомобиль', 'info');
    1960. 

  1960.               if (state.car) state.car.towed = true;
    1961. 

  1961.               if (state.police) state.police.state = 'leaving';
    1962. 

  1962.               if (state.tow) state.tow.state = 'leaving';
    1963. 

  1963.             }, 600);
    1964. 

  1964.           }
    1965. 

  1965.         }
    1966. 

  1966.       }
    1967. 

  1967.     }
    1968. 

  1968.     if (state.tow && state.tow.state === 'leaving' && state.tow.x < -600) {
    1969. 

  1969.       state.car = null; state.police = null; state.tow = null;
    1970. 

  1970.       state.towDriver = null; state.towCable = false; state.leaving = false;
    1971. 

  1971.       state.phase = 'idle'; state.barrier.target = 0;
    1972. 

  1972.       state.alarm = false; state.skud.alarm = false;
    1973. 

  1973.       setStatus('ПОСТ СВОБОДЕН');
    1974. 

  1974.       setHint('Инцидент исчерпан. Нажмите «Следующая машина».');
    1975. 

  1975.       logEvent('Инцидент закрыт', 'ok');
    1976. 

  1976.     }
    1977. 

  1977.   }
    1978. 

  1978. 

  1979.   updateWeatherParticles(dt);
    1980. 

  1980.   updateSkudLeds();
    1981. 

  1981. }
    1982. 

  1982. 

  1983. function crash() {
    1984. 

  1984.   logEvent('!!! СТОЛКНОВЕНИЕ СО ШЛАГБАУМОМ !!!', 'alarm');
    1985. 

  1985.   setStatus('ТРЕВОГА !', 'alarm');
    1986. 

  1986.   setHint('Нарушитель врезался. Вызваны полиция и эвакуатор.');
    1987. 

  1987.   state.alarm = true;
    1988. 

  1988.   state.alarmEnd = state.time + 5;
    1989. 

  1989.   state.phase = 'crash_scene';
    1990. 

  1990.   state.leaving = false;
    1991. 

  1991.   state.stats.alarms++;
    1992. 

  1992.   state.stats.breaches++;
    1993. 

  1993.   state.skud.alarm = true;
    1994. 

  1994.   if (state.model.hasImpact) {
    1995. 

  1995.     state.skud.impact = true;
    1996. 

  1996.     logSkud('ДАТЧИК УДАРА: сработал', 'alarm');
    1997. 

  1997.     state.stats.sensors++;
    1998. 

  1998.   }
    1999. 

  1999.   if (state.car) { state.car.action = 'crashed'; state.car.speed = 0; }
    2000. 

  2000. 

  2001.   const l = L();
    2002. 

  2002.   for (let i = 0; i < 40; i++) {
    2003. 

  2003.     state.sparks.push({
    2004. 

  2004.       x: l.pivotX - state.model.armLen - 30, y: l.topLaneY - 40,
    2005. 

  2005.       vx: (Math.random() - .5) * 400, vy: (Math.random() - .5) * 300 - 80,
    2006. 

  2006.       life: 1
    2007. 

  2007.     });
    2008. 

  2008.   }
    2009. 

  2009.   setTimeout(() => {
    2010. 

  2010.     state.police = { x: W + 300, targetX: l.pivotX - 100, speed: 260, state: 'arriving', wheelAngle: 0 };
    2011. 

  2011.     logEvent('Прибывает полицейский автомобиль', 'warn');
    2012. 

  2012.   }, 700);
    2013. 

  2013.   setTimeout(() => {
    2014. 

  2014.     const carX = state.car ? state.car.x : (l.pivotX - state.model.armLen - 20);
    2015. 

  2015.     state.tow = { x: -300, targetX: carX - 340, speed: 200, state: 'arriving',
    2016. 

  2016.       wheelAngle: 0, stopTimer: 0, doorOpen: false };
    2017. 

  2017.     logEvent('Прибывает эвакуатор', 'warn');
    2018. 

  2018.   }, 1400);
    2019. 

  2019. }
    2020. 

  2020. 

  2021. /* ===== ОТРИСОВКА ===== */
    2022. 

  2022. function drawScene() {
    2023. 

  2023.   const l = L();
    2024. 

  2024.   const t = state.time;
    2025. 

  2025.   ctx.fillStyle = '#02040a'; ctx.fillRect(0, 0, W, H);
    2026. 

  2026.   if (!state.model) return;
    2027. 

  2027. 

  2028.   drawSky(); drawGround(); drawRoads();
    2029. 

  2029.   drawBooth();
    2030. 

  2030.   drawGuard(l.boothX + l.boothW + 25, l.boothBaseY);
    2031. 

  2031. 

  2032.   if (state.towCable && state.tow && state.car) {
    2033. 

  2033.     const fromX = state.tow.x + 140;
    2034. 

  2034.     const fromY = l.topLaneY - 20;
    2035. 

  2035.     const toX = state.car.x - 140;
    2036. 

  2036.     const toY = l.topLaneY - 15;
    2037. 

  2037.     ctx.strokeStyle = 'rgba(200,200,200,.85)'; ctx.lineWidth = 2;
    2038. 

  2038.     ctx.beginPath(); ctx.moveTo(fromX, fromY);
    2039. 

  2039.     ctx.quadraticCurveTo((fromX + toX) / 2, Math.max(fromY, toY) + 22, toX, toY); ctx.stroke();
    2040. 

  2040.   }
    2041. 

  2041. 

  2042.   drawBarrier();
    2043. 

  2043. 

  2044.   if (state.car) {
    2045. 

  2045.     if (state.car.isPriora) drawCarScaled(drawDarkCar, state.car.x, l.topLaneY, state.car.wheelAngle);
    2046. 

  2046.     else drawCarScaled(drawSedan, state.car.x, l.topLaneY, state.car.color, state.car.wheelAngle);
    2047. 

  2047.   }
    2048. 

  2048.   if (state.police) drawCarScaled(drawPoliceCar, state.police.x, l.botLaneY, state.police.wheelAngle);
    2049. 

  2049.   if (state.tow) drawCarScaled(drawTowTruck, state.tow.x, l.topLaneY, state.tow.wheelAngle, state.tow.doorOpen);
    2050. 

  2050. 

  2051.   if (state.towDriver && state.towDriver.state !== 'gone') {
    2052. 

  2052.     drawTowDriver(state.towDriver.x, state.towDriver.y, state.towDriver.walking, state.towDriver.alpha);
    2053. 

  2053.   }
    2054. 

  2054.   if (state.senior) {
    2055. 

  2055.     drawSenior(state.senior.x, state.senior.y, state.senior.walking, state.senior.alpha);
    2056. 

  2056.   }
    2057. 

  2057. 

  2058.   state.sparks = state.sparks.filter(s => s.life > 0);
    2059. 

  2059.   state.sparks.forEach(s => {
    2060. 

  2060.     s.x += s.vx / 60; s.y += s.vy / 60; s.vy += 500 / 60; s.life -= 1.2 / 60;
    2061. 

  2061.     ctx.fillStyle = `rgba(255,${Math.floor(160 + Math.random()*90)},60,${Math.max(0, s.life)})`;
    2062. 

  2062.     ctx.beginPath(); ctx.arc(s.x, s.y, 2 + s.life * 3, 0, Math.PI * 2); ctx.fill();
    2063. 

  2063.   });
    2064. 

  2064. 

  2065.   drawWeatherParticles();
    2066. 

  2066. 

  2067.   if (state.alarm) {
    2068. 

  2068.     const pulse = 0.5 + Math.sin(t * 8) * 0.5;
    2069. 

  2069.     ctx.strokeStyle = `rgba(255,40,40,${pulse * 0.5})`; ctx.lineWidth = 12;
    2070. 

  2070.     ctx.strokeRect(6, 6, W - 12, H - 12);
    2071. 

  2071.     ctx.fillStyle = `rgba(255,60,60,${0.5 + 0.3 * Math.abs(Math.sin(t * 5))})`;
    2072. 

  2072.     ctx.font = 'bold 36px "Courier New"'; ctx.textAlign = 'center';
    2073. 

  2073.     ctx.fillText('!!! ТРЕВОГА !!!', W / 2, 60); ctx.textAlign = 'left';
    2074. 

  2074.   }
    2075. 

  2075. 

  2076.   const hintText = {
    2077. 

  2077.     idle: 'ПОСТ СВОБОДЕН · НАЖМИТЕ «СЛЕДУЮЩАЯ МАШИНА»',
    2078. 

  2078.     approaching: 'АВТОМОБИЛЬ ПРИБЛИЖАЕТСЯ',
    2079. 

  2079.     waiting: 'ОЖИДАНИЕ РЕШЕНИЯ ОПЕРАТОРА',
    2080. 

  2080.     refuse_wait: 'МАШИНА ЖДЁТ · ОБЪЯСНИТЕ ПРИЧИНУ ИЛИ ВЫЗОВИТЕ СТАРШЕГО',
    2081. 

  2081.     senior_walk: 'СТАРШИЙ СМЕНЫ ИДЁТ К МАШИНЕ',
    2082. 

  2082.     resolved: 'ОБРАБОТКА РЕЗУЛЬТАТА',
    2083. 

  2083.     crash_scene: 'НА МЕСТЕ ПРОИСШЕСТВИЯ'
    2084. 

  2084.   }[state.phase] || '';
    2085. 

  2085. 

  2086.   if (hintText) {
    2087. 

  2087.     ctx.font = 'bold 12px "Courier New"';
    2088. 

  2088.     const tw = ctx.measureText(hintText).width + 40;
    2089. 

  2089.     ctx.fillStyle = 'rgba(10,14,20,.78)';
    2090. 

  2090.     ctx.fillRect(W / 2 - tw / 2, 20, tw, 28);
    2091. 

  2091.     ctx.strokeStyle = 'rgba(96,160,224,.5)'; ctx.lineWidth = 1;
    2092. 

  2092.     ctx.strokeRect(W / 2 - tw / 2, 20, tw, 28);
    2093. 

  2093.     ctx.fillStyle = '#a0c0e0'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';
    2094. 

  2094.     ctx.fillText(hintText, W / 2, 34); ctx.textAlign = 'left'; ctx.textBaseline = 'alphabetic';
    2095. 

  2095.   }
    2096. 

  2096. }
    2097. 

  2097. 

  2098. function loop(ts) {
    2099. 

  2099.   if (!lastTs) lastTs = ts;
    2100. 

  2100.   const dt = Math.min(0.05, (ts - lastTs) / 1000);
    2101. 

  2101.   lastTs = ts;
    2102. 

  2102.   state.time += dt;
    2103. 

  2103.   updateScene(dt);
    2104. 

  2104.   drawScene();
    2105. 

  2105.   requestAnimationFrame(loop);
    2106. 

  2106. }
    2107. 

  2107. 

  2108. function updateClock() {
    2109. 

  2109.   const d = new Date();
    2110. 

  2110.   document.getElementById('clock').textContent =
    2111. 

  2111.     String(d.getHours()).padStart(2,'0')+':'+String(d.getMinutes()).padStart(2,'0')+':'+String(d.getSeconds()).padStart(2,'0');
    2112. 

  2112. }
    2113. 

  2113. setInterval(updateClock, 1000); updateClock();
    2114. 

  2114. 

  2115. /* ===== СТАРТ ===== */
    2116. 

  2116. resizeCanvas(); renderPasses(); renderLog();
    2117. 

  2117. renderModelSwitcher();
    2118. 

  2118. switchModel('B');
    2119. 

  2119. logSkud('Запуск СКУД КПП-3...', 'ok');
    2120. 

  2120. requestAnimationFrame(loop);
    2121. 

  2121. </script>
    2122. 

  2122. </body>
    2123. 

  2123. </html>
    2124.