move assets to src

css/style.css

@@ -4,11 +4,11 @@
 
 @font-face {
     font-family: comic-sans;
-    src: url("/assets/fonts/comic-sans.ttf");
+    src: url("/src/assets/fonts/comic-sans.ttf");
 }
 @font-face {
     font-family: vhs;
-    src: url("/assets/fonts/vhs.ttf");
+    src: url("/src/assets/fonts/vhs.ttf");
 }
 
 :root {
@@ -40,13 +40,13 @@ body {
     font-size: var(--font-size);
     background: var(--background);
 
-    cursor: url("/assets/images/ui/cursor.png") 0 0, auto !important;
+    cursor: url("/src/assets/images/ui/cursor.png") 0 0, auto !important;
 }
 ::-webkit-scrollbar {
     display: none;
 }
 *[contenteditable]:hover, input:hover {
-    cursor: url("/assets/images/ui/cursor-text.png") 9 15, auto;
+    cursor: url("/src/assets/images/ui/cursor-text.png") 9 15, auto;
 }
 
 /* Section */
@@ -179,7 +179,7 @@ code {
     margin: 30px 0;
     align-items: stretch;
 
-    background-image: url("/assets/images/ui/cheque.png");
+    background-image: url("/src/assets/images/ui/cheque.png");
     font-size: 18px;
     font-family: var(--mono-font);
     image-rendering: pixelated;
@@ -194,7 +194,7 @@ code {
     left: 0;
     bottom: calc(100% - 1px);
 
-    background-image: url("/assets/images/ui/cheque-top.png");
+    background-image: url("/src/assets/images/ui/cheque-top.png");
 }
 .cheque::after {
     scale: -1;
@@ -222,7 +222,7 @@ code {
     justify-content: center;
     text-align: center;
 
-    background-image: url(/assets/images/ui/paper.png);
+    background-image: url("/src/assets/images/ui/paper.png");
     background-size: 100% 100%;
     font-family: var(--fancy-font);
     font-size: 18px;
@@ -237,7 +237,7 @@ code {
 
     margin: 30px 0;
 
-    background-image: url("/assets/images/ui/panel.png");
+    background-image: url("/src/assets/images/ui/panel.png");
     font-size: 16px;
     font-family: var(--vhs-font);
     color: var(--white);
@@ -253,7 +253,7 @@ code {
     left: 0;
     bottom: calc(100% - 1px);
 
-    background-image: url("/assets/images/ui/panel-top.png");
+    background-image: url("/src/assets/images/ui/panel-top.png");
 }
 .panel::after {
     scale: -1;
@@ -360,7 +360,7 @@ button {
     font-size: var(--font-size);
     border: none;
 
-    cursor: url("/assets/images/ui/cursor-pointer.png") 7 0, auto;
+    cursor: url("/src/assets/images/ui/cursor-pointer.png") 7 0, auto;
 }
 button img,
 button .icon {
@@ -384,7 +384,7 @@ button .icon {
     width: 20px;
     height: 20px;
     padding: 0;
-    background-image: url("/assets/images/ui/smiley-button.png");
+    background-image: url("/src/assets/images/ui/smiley-button.png");
     image-rendering: pixelated;
 }
 .physical-button {
@@ -400,7 +400,7 @@ button .icon {
     font-family: var(--vhs-font);
     font-size: 18px;
     background-color: transparent;
-    background-image: url("/assets/images/ui/physical-button.png");
+    background-image: url("/src/assets/images/ui/physical-button.png");
     background-size: 180px 60px;
     background-position: 0 0;
     image-rendering: pixelated;
@@ -410,7 +410,7 @@ button .icon {
 }
 .physical-button.small {
     width: 60px;
-    background-image: url("/assets/images/ui/small-physical-button.png");
+    background-image: url("/src/assets/images/ui/small-physical-button.png");
     background-size: 120px 60px;
 }
 .physical-button.small:active {
@@ -433,7 +433,7 @@ input {
 a {
     color: var(--blue);
     text-decoration: none;
-    cursor: url("/assets/images/ui/cursor-pointer.png") 7 0, auto;
+    cursor: url("/src/assets/images/ui/cursor-pointer.png") 7 0, auto;
 }
 a:hover {
     text-decoration: underline;
@@ -491,7 +491,7 @@ a:hover .pointer {
     width: 40px;
     height: 30px;
 
-    background-image: url("/assets/images/ui/speed.png");
+    background-image: url("/src/assets/images/ui/speed.png");
     background-size: 80px 30px;
     background-position: 0 0;
 }
@@ -511,7 +511,7 @@ a:hover .pointer {
 
 /* Fancy things */
 .substance {
-    background: url("/assets/images/ui/substance.png");
+    background: url("/src/assets/images/ui/substance.png");
     animation: substance 10s linear infinite;
 }
 .rainbow-text {
@@ -579,7 +579,7 @@ a:hover .pointer {
     width: 32px;
     height: 32px;
 
-    background-image: url("/assets/images/ui/play.png");
+    background-image: url("/src/assets/images/ui/play.png");
     background-size: 64px 32px;
     background-position: 0 0;
     pointer-events: none;

index.html

@@ -5,7 +5,7 @@
 <head lang="en">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <link rel="icon" type="image/x-icon" href="assets/images/favicon.png">
+    <link rel="icon" type="image/x-icon" href="src/assets/images/favicon.png">
 
     <link rel="stylesheet" href="css/layout.css">
     <link rel="stylesheet" href="css/utils.css">
@@ -17,7 +17,7 @@
     <!-- Top layer -->
     <div class="loading-screen">
         <span>please wait utill this THING is ready...</span>
-        <img src="assets/gifs/skull.gif" alt="skull">
+        <img src="src/assets/gifs/skull.gif" alt="skull">
     </div>
 
     <!-- Bg canvas -->
@@ -42,15 +42,15 @@
             <div class="width-fill" style="margin-top: 80px;">
                 <img
                     class="cog"
-                    src="assets/images/cog.png"
+                    src="src/assets/images/cog.png"
                     alt="cog"
                     style="left: 10%; top: 10%"
                     data-speedup
                     data-speedup-dur="20"
                 >
                 <img
                     class="cog reverse"
-                    src="assets/images/cog.png"
+                    src="src/assets/images/cog.png"
                     alt="cog"
                     style="left: calc(10% + 128px + 72px); top: 10%; scale: .6; animation-duration: 12s;"
                     data-speedup
@@ -77,14 +77,14 @@
                 </header>
                 <div class="gallery">
                     <!-- Lazy loading doesnt seem to work -->
-                    <img loading="lazy" src="assets/gifs/table.gif" alt="Table with some trash">
-                    <img loading="lazy" src="assets/gifs/clock.gif" alt="SOMEBODY REPLACE THE BATTERY IMMEDIATELY">
-                    <img loading="lazy" src="assets/gifs/wow.gif" alt="Wow!" title="THIS ISN'T MY GIF I STOLE IT FROM tenor.com">
-                    <img loading="lazy" src="assets/gifs/me.gif" alt="wakey wakey">
-                    <img loading="lazy" src="assets/gifs/new-year.gif" alt="HAPPY NEW YEAR!">
-                    <img loading="lazy" src="assets/gifs/bridge.gif" alt="check out WHITEY" title="Check out WHITEY, he's really cool">
-                    <img loading="lazy" src="assets/gifs/flower.gif" alt="alive and dead">
-                    <img loading="lazy" src="assets/gifs/summer.gif" alt="lost summer">
+                    <img loading="lazy" src="src/assets/gifs/table.gif" alt="Table with some trash">
+                    <img loading="lazy" src="src/assets/gifs/clock.gif" alt="SOMEBODY REPLACE THE BATTERY IMMEDIATELY">
+                    <img loading="lazy" src="src/assets/gifs/wow.gif" alt="Wow!" title="THIS ISN'T MY GIF I STOLE IT FROM tenor.com">
+                    <img loading="lazy" src="src/assets/gifs/me.gif" alt="wakey wakey">
+                    <img loading="lazy" src="src/assets/gifs/new-year.gif" alt="HAPPY NEW YEAR!">
+                    <img loading="lazy" src="src/assets/gifs/bridge.gif" alt="check out WHITEY" title="Check out WHITEY, he's really cool">
+                    <img loading="lazy" src="src/assets/gifs/flower.gif" alt="alive and dead">
+                    <img loading="lazy" src="src/assets/gifs/summer.gif" alt="lost summer">
                 </div>
             </article>
             <!-- Links -->
@@ -94,15 +94,15 @@
                     <div class="col p-2">
                         <a class="fancy-link" href="https://github.com/bogdan-ov">
                             <span>github</span>
-                            <img src="assets/images/ui/pointer.png" alt="pointer" class="pointer">
+                            <img src="src/assets/images/ui/pointer.png" alt="pointer" class="pointer">
                         </a>
                         <a class="fancy-link" href="https://tg.me/bbogdan_ov" target="_blank">
                             <span>telegram</span>
-                            <img src="assets/images/ui/pointer.png" alt="pointer" class="pointer">
+                            <img src="src/assets/images/ui/pointer.png" alt="pointer" class="pointer">
                         </a>
                         <a class="fancy-link" href="https://vk.com/bbogdan_ov" target="_blank">
                             <span>vk</span>
-                            <img src="assets/images/ui/pointer.png" alt="pointer" class="pointer">
+                            <img src="src/assets/images/ui/pointer.png" alt="pointer" class="pointer">
                         </a>
                     </div>
                     <button class="button95 text-red" onclick="global_animateFlyout('#flying-links-paper')">more</button>
@@ -176,7 +176,7 @@ <h3 class="text-center">*** bogdanov ***</h3>
                         </div>
                     </div>
                 </article>
-                <img src="assets/gifs/love-me.gif" alt="love me" id="lovelove">
+                <img src="src/assets/gifs/love-me.gif" alt="love me" id="lovelove">
             </div>
             <!-- Game window -->
             <article class="window95 box95" id="trash-exterminator">
@@ -197,8 +197,8 @@ <h3 class="text-center">*** bogdanov ***</h3>
                 <!-- Arm -->
                 <div class="arm-wrapper">
                     <div class="arm" data-speedup data-speedup-dur="1.2">
-                        <img class="arm-image" src="assets/images/tape-hand/arm.png">
-                        <img class="hand" src="assets/images/tape-hand/hand.png" data-speedup data-speedup-dur="1.2">
+                        <img class="arm-image" src="src/assets/images/tape-hand/arm.png">
+                        <img class="hand" src="src/assets/images/tape-hand/hand.png" data-speedup data-speedup-dur="1.2">
                     </div>
                 </div>
 
@@ -211,26 +211,26 @@ <h3 class="text-center">*** bogdanov ***</h3>
     </section>
     <!-- Promo section -->
     <section class="section promo-section">
-        <img src="assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up" style="right: 0; top: 0">
-        <img src="assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up" style="right: 0; top: 50%">
-        <img src="assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up" style="right: 0; top: 100%">
-        <img src="assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up left" style="left: 0; top: 0">
-        <img src="assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up left" style="left: 0; top: 50%">
-        <img src="assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up left" style="left: 0; top: 100%">
+        <img src="src/assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up" style="right: 0; top: 0">
+        <img src="src/assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up" style="right: 0; top: 50%">
+        <img src="src/assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up" style="right: 0; top: 100%">
+        <img src="src/assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up left" style="left: 0; top: 0">
+        <img src="src/assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up left" style="left: 0; top: 50%">
+        <img src="src/assets/gifs/thumb-up.gif" alt="thumb up" class="thumb-up left" style="left: 0; top: 100%">
 
         <div class="container">
             <!-- Promo tv -->
             <div class="tv pixelate" id="promo-tv">
-                <video src="assets/videos/promotion.mp4" class="tv-video"></video>
-                <img class="vcr-image" src="assets/images/vcr.png" alt="vcr">
-                <img class="lags-image" src="assets/gifs/lags.gif" alt="lags">
-                <img class="tv-image" src="assets/images/tv.png" alt="tv">
+                <video src="src/assets/videos/promotion.mp4" class="tv-video"></video>
+                <img class="vcr-image" src="src/assets/images/vcr.png" alt="vcr">
+                <img class="lags-image" src="src/assets/gifs/lags.gif" alt="lags">
+                <img class="tv-image" src="src/assets/images/tv.png" alt="tv">
 
                 <span class="tv-progress-text">--:--</span>
 
                 <div class="buttons row gap-2">
                     <button class="physical-button small tv-stop-button">
-                        <img src="assets/images/ui/stop.png" alt="stop">
+                        <img src="src/assets/images/ui/stop.png" alt="stop">
                     </button>
                     <button class="physical-button small tv-play-button">
                         <div class="icon play-icon"></div>
@@ -241,7 +241,7 @@ <h3 class="text-center">*** bogdanov ***</h3>
     </section>
 
     <!-- Footer -->
-    <img class="no-events" src="assets/images/valley.png" alt="footer">
+    <img class="no-events" src="src/assets/images/valley.png" alt="footer">
 
     <script src="src/main.js" type="module"></script>
 </body>

src/canvases/background/weather.js

@@ -16,7 +16,7 @@ const backgroundTween = gsap.to(document.body, {
     ease: "none",
     paused: true
 })
-const rainbow = PIXI.Sprite.from("assets/images/rainbow.png");
+const rainbow = PIXI.Sprite.from("src/assets/images/rainbow.png");
 rainbow.x = -64;
 rainbow.angle = -36;
 

src/elements/crazy-text.js

@@ -2,7 +2,7 @@ import * as PIXI from "pixi.js";
 import * as utils from "../utils";
 import gsap from "gsap";
 
-const FONT_SHEET_SOURCE = "assets/images/crazy-font-sheet.png";
+const FONT_SHEET_SOURCE = "src/assets/images/crazy-font-sheet.png";
 const CHAR_SLICE_SIZE = 128;
 const CHAR_WIDTH = 40;
 const CHAR_HEIGHT = 64;

src/objects/cloud.js

@@ -23,7 +23,7 @@ const CLOUDS_SOURCES_COUNT = 16;
 
 export class Cloud extends PIXI.Sprite {
     constructor(x=0, y=0) {
-        const src = `assets/images/clouds/${ utils.randomInt(0, CLOUDS_SOURCES_COUNT)+1 }.png`
+        const src = `src/assets/images/clouds/${ utils.randomInt(0, CLOUDS_SOURCES_COUNT)+1 }.png`
         super(PIXI.Texture.from(src));
 
         this.x = this.moveX = x;

src/objects/rain.js

@@ -6,7 +6,7 @@ const RAIN_SOURCES_COUNT = 5;
 
 export class Rain extends PIXI.Sprite {
     constructor(x=0, y=0) {
-        const src = `assets/images/rain/${ utils.randomInt(0, RAIN_SOURCES_COUNT)+1 }.png`;
+        const src = `src/assets/images/rain/${ utils.randomInt(0, RAIN_SOURCES_COUNT)+1 }.png`;
         super(PIXI.Texture.from(src));
 
         this.x = x;

src/objects/thing.js

@@ -5,7 +5,7 @@ export const TRASH_THINGS = [...THINGS, "paper", "battery"];
 
 export class Thing extends PIXI.TilingSprite {
     constructor(name, x=0, y=0) {
-        super(PIXI.Texture.from(`assets/images/things/${ name }.png`), 128, 128);
+        super(PIXI.Texture.from(`src/assets/images/things/${ name }.png`), 128, 128);
 
         this.anchor.set(.5);
 

src/utils.js

@@ -52,7 +52,7 @@ export function wave(time, from=0, to=1, func=Math.cos) {
 }
 
 export function playSound(name, volume=1) {
-    const audio = new Audio(`assets/audios/${ name }.mp3`);
+    const audio = new Audio(`src/assets/audios/${ name }.mp3`);
     audio.volume = volume;
     audio.play();
     return audio