Omniperium Menu

Author: vipertechofficial

client/chunk_main_af9f4ef7.min.js

@@ -27,10 +27,10 @@ var LOAD_FILES_USEFUL = ["/src/fonts/normative/index.css"].concat(["illusion.jpg
 var LOAD_FILES_STATIC = ["sfx/md/hero_decorative-celebration-02", "sfx/md/navigation_selection-complete-celebration", "sfx/md/navigation_transition-left", "sfx/md/state-change_confirm-down", "sfx/md/ui_lock", "sfx/md/ui_unlock", "sfx/md/ui_scan", "sfx/md/alert_high-intensity", "sfx/md/navigation_transition-right", "voice/cn/accessing_memory", "voice/cn/complete", "voice/cn/please_wait", "voice/cn/data_upload", "voice/cn/processing", "voice/cn/enhanced", "voice/cn/rewriting_deep_layer_protocols", "voice/cn/vision_activated", "voice/cn/vision_deactivated", "voice/cn/filtering", "music/redeclipse/track_09"].map(F_SND).concat(["presentation", "tutorial", "create", "enhanced", "pixelated", "upload", "share1", "joke1", "create", "enhanced", "pixelated", "presentation", "presentation2", "sponsors", "tutorial", "upload", "labintro", "share2", "share3", "share4", "share5", "share6", "share7", "joke2", "joke3", "joke4", "joke5", "joke6", "joke7", "joke8", "joke9", "joke10", "joke11"].map(F_VID));
 
 // Cache names
-var REQUIRED_CACHE = "unless-update-cache-v1081-required";
-var USEFUL_CACHE = "unless-update-cache-v1081-useful";
-var STATIC_CACHE = "unless-update-cache-v1081-static";
-var OTHER_CACHE = "unless-update-cache-v1081-other";
+var REQUIRED_CACHE = "unless-update-cache-v1082-required";
+var USEFUL_CACHE = "unless-update-cache-v1082-useful";
+var STATIC_CACHE = "unless-update-cache-v1082-static";
+var OTHER_CACHE = "unless-update-cache-v1082-other";
 
 // Regular expressions for chunk matching
 var MAIN_CHILD_CHUNK_REGEX = /chunk_(main_[a-z0-9]+)\.min\.js$/i;

client/chunk_norris.min.js

@@ -496,9 +496,10 @@ class AppToolbar extends React.PureComponent {
         this.setSt4te({_presentation_open: true}, () => {
 
             this.forceUpdate(() => {
-
-                var video = document.getElementById("presentation-video");
-                video.play();
+                try {
+                    var video = document.getElementById("presentation-video");
+                    video.play();
+                } catch (e) {}
             });
         });
     };
@@ -508,9 +509,10 @@ class AppToolbar extends React.PureComponent {
         this.setSt4te({_presentation_open: true}, () => {
 
             this.forceUpdate(() => {
-
-                var video = document.getElementById("presentation-video-2");
-                video.play();
+                try {
+                    var video = document.getElementById("presentation-video-2");
+                    video.play();
+                } catch (e) {}
             });
         });
     };

service-worker.js

@@ -215,6 +215,10 @@ class DrawerContent extends React.PureComponent {
         }
     }
 
+    componentDidMount() {
+        this.forceUpdate();
+    }
+
     _open_pixel_page = () => {
 
         if(this.props){

src/js/components/AppDrawer.js

@@ -41,6 +41,29 @@ const styles = theme => ({
         animationIterationCount: "1",
         animationDelay: "750ms",
     },
+    "@keyframes glitched": {
+        "0%": { opacity: "1"},
+        "60%": { opacity: "1"},
+        "64%": { opacity: "0.72"},
+        "68%": { opacity: "0.94"},
+        "72%": { opacity: "1"},
+        "76%": { opacity: "0.82"},
+        "80%": { opacity: "1"},
+        "84%": { opacity: "0.92"},
+        "88%": { opacity: "0.84"},
+        "92%": { opacity: "1"},
+        "96%": { opacity: "0.90"},
+        "100%": { opacity: "1"},
+    },
+    glitch: {
+        animationFillMode: "both",
+        animationName: "$glitched",
+        animationDuration: "1250ms",
+        animationTimingFunction: "linear",
+        animationDirection: "alternate",
+        animationIterationCount: "infinite",
+        animationDelay: "0ms",
+    },
     restrictedSVG: {
         animationFillMode: "both",
         animationName: "$glitchmenu",
@@ -69,7 +92,13 @@ class NavigateOmniperium extends React.PureComponent {
             classes: props.classes,
             hover: "welcome",
             video: {pause: function (){}},
-            open: props.open
+            open: props.open,
+            _menu_pos: {},
+            _menu_ref: {},
+            _root_ref: {},
+            _transform_rotate: "",
+            _background_image: "",
+            _filter: ""
         };
     };
 
@@ -101,7 +130,9 @@ class NavigateOmniperium extends React.PureComponent {
             //this.st4te.video.pause();
             this.setSt4te({hover: path}, () => {
                 this.forceUpdate(( ) => {
-                    document.getElementById("explanation-video").play();
+                    try {
+                        document.getElementById("explanation-video").play();
+                    }catch(e){}
                 });
             });
         }
@@ -147,12 +178,93 @@ class NavigateOmniperium extends React.PureComponent {
         }catch(e){}
     };
 
+    setWrapperRef = (element) => {
+
+        if(typeof element === "undefined") {return}
+        if(element === null) {return}
+        this.setSt4te({_root_ref: element}, () => {
+            this.st4te._root_ref.addEventListener("pointermove",  this.computeRotation);
+        });
+
+    }
+
+    setMenuRef = (element) => {
+
+        if(typeof element === "undefined") {return}
+        if(element === null) {return}
+        console.log(element)
+        const rect = element.getBoundingClientRect();
+        this.setSt4te({_menu_ref: element, _menu_pos: rect});
+
+    }
+
+    computeRotation = (event) => {
+            "use strict";
+            console.log(event)
+            const pageX = parseInt(event.pageX);
+            const pageY = parseInt(event.pageY);
+            const rect = this.st4te._menu_pos;
+            console.log(rect)
+            const perspective = 1;
+            const currentScale = 1.0;
+            const pos_x_in_canvas_container = pageX - rect.left | 0;
+            const pos_y_in_canvas_container = pageY - rect.top | 0;
+
+            const x = perspective * (pos_x_in_canvas_container - rect.width / 2) / (rect.width / 2);
+            const y = -perspective * (pos_y_in_canvas_container - rect.height / 2) / (rect.height / 2);
+            const p_x = x > perspective ? x : x * 2;
+            const p_y = y < 0 ? y : 2 * y;
+            const p_x_things = 255 - p_x / 2 * 255;
+            const p_y_things = p_y / 2 * 255;
+
+            const rotate_y = (p_x * 1.25 / currentScale * 1000 | 0) / 1000;
+            const rotate_x = (p_y * 1.25 / currentScale * 1000 | 0) / 1000;
+            const any_rotation = Boolean(rotate_x || rotate_y);
+
+            const transform_rotate = any_rotation ? `rotateX(${rotate_x}deg) rotateY(${rotate_y}deg)`: ``
+            const background_image = any_rotation ? `linear-gradient(to right, rgba(
+                            ${p_x_things.toFixed(3)},
+                            ${p_x_things.toFixed(3)},
+                            ${p_x_things.toFixed(3)}, 
+                            ${(Math.abs(p_x * 0.1) / (perspective*2)).toFixed(2)}
+                            ), rgba(
+                            ${p_x_things.toFixed(3)},
+                            ${p_x_things.toFixed(3)},
+                            ${p_x_things.toFixed(3)}, 
+                            ${(Math.abs(p_x * 0.6) / (perspective*2)).toFixed(2)}
+                            )), linear-gradient(to top, rgba(
+                            ${p_y_things.toFixed(3)},
+                            ${p_y_things.toFixed(3)},
+                            ${p_y_things.toFixed(3)}, 
+                            ${(Math.abs(p_y * 0.75) / (perspective*2)).toFixed(2)}
+                            ), rgba(
+                            ${p_y_things.toFixed(3)},
+                            ${p_y_things.toFixed(3)},
+                            ${p_y_things.toFixed(3)}, 
+                            ${(Math.abs(p_y  * 0.25) / (perspective*2)).toFixed(2)}
+                            ))`: ``;
+            const filter_force = (1 + (-rotate_y + rotate_x) / 80).toFixed(2);
+            const filter = any_rotation ? `brightness(${filter_force}) contrast(${filter_force})`: "";
+
+            console.log(transform_rotate)
+            this.setSt4te({
+                _transform_rotate: transform_rotate,
+                _background_image: background_image,
+                _filter: filter
+            }, () => {
+                this.forceUpdate();
+            });
+    }
+
     render() {
 
         const {
             classes,
             open,
-            hover
+            hover,
+            _transform_rotate,
+            _background_image,
+            _filter
         } = this.st4te;
 
         return (
@@ -162,24 +274,32 @@ class NavigateOmniperium extends React.PureComponent {
                         maxWidth={"xl"}
                         onClose={this.props.onClose}
                         disablePortal={true}
-                        keepMounted={true}>
-                    <OmniperiumMenu onHoverPathChange={(path) => {this.omniperium_hover(path)}} onPathChange={(path) => {this.omniperium_naviguate(path)}} className={classes.activateSVG} style={{height: "min(75vh, 75vw)", width: "min(75vh, 75vw)", margin: "auto"}}/>
+                        keepMounted={true}
+                        ref={this.setWrapperRef}>
+                    <div style={{perspective: 200}} ref={this.setMenuRef} className={classes.glitch}>
+                        <OmniperiumMenu onHoverPathChange={(path) => {this.omniperium_hover(path)}} onPathChange={(path) => {this.omniperium_naviguate(path)}} className={classes.activateSVG} style={{height: "min(75vh, 75vw)", width: "min(75vh, 75vw)", margin: "auto", transform: _transform_rotate, filter: _filter}}/>
+                    </div>
                 </Dialog>
-                <img src="/src/videos/omniperium/poster.png" width="720" height="720" style={{display: open ? "inherit": "none",  pointerEvents: "none", zIndex: "1400", cursor: "pointer", aspectRatio: "1 / 1", width: "min(360px, 30vh)", height: "min(360px, 30vh)", position: "fixed", left: "0%", bottom: "0%", mixBlendMode: "lighten"}}/>
-                <img src="/src/videos/omniperium/poster.png" width="720" height="720" style={{display: open ? "inherit": "none",  pointerEvents: "none", zIndex: "1401", cursor: "pointer", aspectRatio: "1 / 1", width: "min(360px, 30vh)", height: "min(360px, 30vh)", position: "fixed", left: "0%", bottom: "0%", mixBlendMode: "multiply"}}/>
-                <video width="720" height="720" style={{display: open ? "inherit": "none",  pointerEvents: "none", zIndex: "1500", cursor: "pointer", aspectRatio: "1 / 1", width: "min(360px, 30vh)", height: "min(360px, 30vh)", position: "fixed", left: "0%", bottom: "0%", mixBlendMode: "lighten"}}  key={hover} autoPlay={open} id="explanation-video">
-                    <source src={"/src/videos/omniperium/"+hover+".mp4"} type="video/mp4"/>
-                </video>
-                <video width="1920" height="1080" style={{display: open ? "inherit": "none", zIndex: "1401", pointerEvents: "none", minWidth: "100vw", aspectRatio: "16 / 9", position: "fixed", left: "0", bottom: "0", mixBlendMode: "lighten"}} id="particles-video" loop={false}>
-                    <source src="/src/videos/omnintro.mp4" type="video/mp4"/>
-                </video>
-                <video width="1920" height="1080" style={{display: open ? "inherit": "none", zIndex: "1400", pointerEvents: "none", minWidth: "100vw", aspectRatio: "16 / 9", position: "fixed", left: "0", bottom: "0", mixBlendMode: "lighten"}} id="particles-background-video" key={open} autoPlay={open} loop={open}>
-                    <source src="/src/videos/particles.mp4" type="video/mp4"/>
-                </video>
-                <img src="/src/images/omniperium/caution.svg" className={classes.restrictedSVG} style={{display: open ? "inherit": "none",  pointerEvents: "none", zIndex: "1501", cursor: "pointer", aspectRatio: "340 / 23", width: "95vw", position: "fixed", left: "2.5vw", bottom: "5vh"}}/>
-                <IconButton style={{position: "absolute", top: 16, right: 16, color: "white", zIndex: "1402",}} onClick={() => {this.omniperium_hover("explanation")}}>
-                    <InfoIcon style={{color: "currentColor"}}/>
-                </IconButton>
+                {
+                    open &&
+                    <React.Fragment>
+                        <img src="/src/videos/omniperium/poster.png" width="720" height="720" style={{display: open ? "inherit": "none", userSelect: "none",  pointerEvents: "none", zIndex: "1400", cursor: "pointer", aspectRatio: "1 / 1", width: "min(360px, 30vh)", height: "min(360px, 30vh)", position: "fixed", left: "0%", bottom: "0%", mixBlendMode: "inherit"}}/>
+                        <img src="/src/videos/omniperium/poster.png" width="720" height="720" style={{display: open ? "inherit": "none", userSelect: "none",  pointerEvents: "none", zIndex: "1401", cursor: "pointer", aspectRatio: "1 / 1", width: "min(360px, 30vh)", height: "min(360px, 30vh)", position: "fixed", left: "0%", bottom: "0%", mixBlendMode: "saturation"}}/>
+                        <video width="720" height="720" style={{display: open ? "inherit": "none",  pointerEvents: "none", userSelect: "none",  zIndex: "1500", cursor: "pointer", aspectRatio: "1 / 1", width: "min(360px, 30vh)", height: "min(360px, 30vh)", position: "fixed", left: "0%", bottom: "0%", mixBlendMode: "lighten"}}  key={hover} autoPlay={open} id="explanation-video">
+                            <source src={"/src/videos/omniperium/"+hover+".mp4"} type="video/mp4"/>
+                        </video>
+                        <video width="1920" height="1080" style={{display: open ? "inherit": "none", zIndex: "1401", userSelect: "none",  pointerEvents: "none", minWidth: "100vw", aspectRatio: "16 / 9", position: "fixed", left: "0", bottom: "0", mixBlendMode: "lighten"}} id="particles-video" loop={false}>
+                            <source src="/src/videos/particles3.mp4" type="video/mp4"/>
+                        </video>
+                        <video width="1920" height="1080" style={{display: open ? "inherit": "none", zIndex: "1250", userSelect: "none",  pointerEvents: "none", minWidth: "100vw", aspectRatio: "16 / 9", position: "fixed", left: "0", bottom: "0", mixBlendMode: "lighten"}} id="particles-background-video" key={open} autoPlay={open} loop={open}>
+                            <source src="/src/videos/particles.mp4" type="video/mp4"/>
+                        </video>
+                        <img src="/src/images/omniperium/caution.svg" className={classes.restrictedSVG} style={{display: open ? "inherit": "none",  userSelect: "none", pointerEvents: "none", zIndex: "1501", cursor: "pointer", aspectRatio: "340 / 23", width: "95vw", position: "fixed", left: "2.5vw", bottom: "5vh"}}/>
+                        <IconButton style={{position: "fixed", left: 16, right: 16, color: "white", zIndex: "1402",}} onClick={() => {this.omniperium_hover("explanation")}}>
+                            <InfoIcon style={{color: "currentColor"}}/>
+                        </IconButton>
+                    </React.Fragment>
+                }
             </React.Fragment>
         );
     }

src/js/components/AppToolbar.js

@@ -741,20 +741,6 @@ export default class OmniperiumMenu extends React.PureComponent {
                                     vectorEffect="non-scaling-stroke"
                                 />
                             </g>
-                            <clipPath id="s">
-                                <path fill="#FFF" d="M424.786 504.919h235.738v72.834H424.786z" />
-                            </clipPath>
-                            <g clipPath="url(#s)">
-                                <path
-                                    fill="#FFF"
-                                    fillRule="evenodd"
-                                    stroke="#FFF"
-                                    strokeOpacity={100}
-                                    strokeWidth={1.085}
-                                    d="M465.42 535.897h3.945v-3.506c0-5.206-2.466-7.674-7.672-7.674h-10.632c-5.207 0-7.673 2.468-7.673 7.674v4c0 5.755 3.618 6.851 7.892 7.837l10.743 2.466c2.684.603 3.945 1.535 3.945 4.439v4.604c0 2.85-1.096 3.946-3.945 3.946H451.17c-2.85 0-3.945-1.096-3.945-3.946v-4.22h-3.946v3.892c0 5.206 2.466 7.672 7.672 7.672h11.29c5.207 0 7.673-2.466 7.673-7.672v-4.714c0-5.755-3.617-6.851-7.891-7.837l-10.743-2.466c-2.685-.603-3.946-1.535-3.946-4.439v-3.892c0-2.85 1.096-3.946 3.946-3.946h10.194c2.85 0 3.946 1.096 3.946 3.946v3.836zm25.922 27.184V549.49l13.647-24.773h-4.164l-11.401 20.772-11.4-20.772h-4.274l13.647 24.773v13.591h3.945zm39.624-27.184h3.947v-3.506c0-5.206-2.467-7.674-7.674-7.674h-10.632c-5.206 0-7.672 2.468-7.672 7.674v4c0 5.755 3.617 6.851 7.891 7.837l10.743 2.466c2.685.603 3.946 1.535 3.946 4.439v4.604c0 2.85-1.096 3.946-3.946 3.946h-10.852c-2.85 0-3.946-1.096-3.946-3.946v-4.22h-3.946v3.892c0 5.206 2.466 7.672 7.673 7.672h11.29c5.206 0 7.673-2.466 7.673-7.672v-4.714c0-5.755-3.618-6.851-7.892-7.837l-10.743-2.466c-2.685-.603-3.945-1.535-3.945-4.439v-3.892c0-2.85 1.095-3.946 3.945-3.946h10.194c2.85 0 3.946 1.096 3.946 3.946v3.836zm36.939-7.563v-3.617h-27.512v3.617h11.783v34.747h3.947v-34.747h11.782zm7.016-3.617v38.364h24.278v-3.617h-20.333V545.27h17.155v-3.617h-17.155v-13.319h20.333v-3.617h-24.278zm68.012 0h-4.932l-12.823 28.061-12.77-28.061h-4.934v38.364h3.727v-32.5l12.167 26.965h3.562l12.167-26.965v32.5h3.836v-38.364z"
-                                    vectorEffect="non-scaling-stroke"
-                                />
-                            </g>
                             <clipPath id="t">
                                 <path fill="#FFF" d="M721.898 342.904h235.738v52.95H721.898z" />
                             </clipPath>