public/index.html

<!DOCTYPE html>
<html>
<head>

	<title>Edelweiss</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no">


    <style>

        @font-face {
            font-family: grobold;
            src: url( ./assets/GROBOLD.ttf );
        }

        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    
        * {
            margin: 0;
            padding: 0;
            font-family: grobold;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        label, input {
            color: grey;
        }

        button {
            padding: 10px 20px 10px 20px;
            border-radius: 5px;
        }

        .dialogue-box {
            background-color: white;
            border-radius: 10px;
            border-color: black;
            border-width: 5px;
            border-style: solid;
            cursor: default;
        }

        #title-background {
            position: fixed;
            height: 100vh;
            width: 100vw;
            object-fit: cover;
            pointer-events: none;
            background-color: #e3f9ff;
        }

        #black-screen {
            position: fixed;
            height: 100vh;
            width: 100vw;
            background-color: black;
            pointer-events: none;
            opacity: 0;
        }

            #loading-icon {
                position: fixed;
                width: 128px;
                top: 0px;
                right: 0px;
            }

        .show-black-screen {
            animation: show_black_screen 0.22s linear forwards;
        }

        .hide-black-screen {
            animation: hide_black_screen 1s ease-in-out forwards;
        }

        @keyframes show_black_screen {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes hide_black_screen {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }


        #start-menu {
            position: fixed;
            display: none;
            flex-direction: column;
            justify-content: space-evenly;
            top: 50%;
            left: 50%;
            transform: translate( -50%, -50% );
            width: calc( 100vw - 50px );
            height: calc( 100vh - 50px );
        }

            #title-image-container {
                text-align: center;
                margin-top: auto;
                margin-bottom: 20px;
            }

                #title {
                    max-height: 50px; 
                }

            #menu-element {
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
            }

            #menu-element > div {
                display: flex;
                flex-direction: column;
            }

            .input {
                width: 250px;
                border: 1px solid #111;
                border-radius: 4px;
                margin-bottom: 30px;
                white-space: nowrap;
            }

            .input input, .input button {
                border: none;
            }
            .input button {
                height: 24px;
                background-color: transparent;
                background-image: url(assets/redo-alt-solid.svg);
                background-size: auto 75%;
                background-repeat: no-repeat;
                background-position: 35% 60%;
                outline: none !important;
                cursor: pointer;
            }
            .input input {
                height: 28px;
                width: 200px;
                font-size: 20px;
                border-right: 1px solid #111;
                border-top-left-radius: 4px;
                border-bottom-left-radius: 4px;
                margin: 0 1px; padding: 2px 0 0 5px;
            }

            #credits {
                text-align: center;
                margin-top: auto;
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;
            }

            /* show the credits as long as we can, but if we cant - just dont: */

            @media screen and ( max-height: 400px ) {
                #credits { display: none; }
            }

            #credits > div:first-child {
                max-width: 250px;
            }

                    .section-title {
                        font-size: 1.3em;
                    }

                    #start-button {
                        display: inline-block;
                        font-size: 1.6em;
                        border-style: solid;
                        border-width: 1px;
                        border-color: #111111;
                        border-radius: 4px;
                        padding: 15px;
                        color: #d7dee3;
                        background-color: #f2f6f9;
                        cursor: pointer;
                    }

                        #start-background {
                            background-color: #d7dee3;
                            height: 10px;
                        }

                            #start-loaded {
                                background-color: green;
                                height: 10px;
                                width: 0;
                            }


        #joystick-container {
            height: 100vh;
            width: 100vw;
            display: none;
            -webkit-user-select : none;
            -moz-user-select    : none;
        }

        #base {
            width: 75px;
            height: 75px;
        }

        #stick {
            width: 75px;
            height: 75px;
        }

        #cross {
            position: fixed;
            width: 75px;
            height: 75px;
            left: 52.5px;
            opacity: 0.0 ;
        }

        .blink-cross {
            animation: blink_cross 1s infinite ;
        }

        @keyframes blink_cross {
            0% {
                opacity: 1.0 ;
            }
            50% {
                opacity: 0.0 ;
            }
            100% {
                opacity: 1.0 ;
            }
        }

        #action-button {
            position: fixed;
            height: 75px;
            widows: 75px;
            bottom: 52.5px;
            right: 35px;
            opacity: 0.5;
            display: none;
        }

        .push-button {
            animation: push_button 0.07s ease-in-out 1 forwards ;
        }

        .release-button {
            animation: release_button 0.07s ease-in-out 1 forwards ;
        }

        @keyframes push_button {
            0% {
                width: 75px;
                height: 75px;
                bottom: 52.5px;
                right: 35px;
            }
            100% {
                width: 80px;
                height: 80px;
                bottom: 50px;
                right: 32.5px;
            }
        }

        @keyframes release_button {
            0% {
                width: 80px;
                height: 80px;
                bottom: 50px;
                right: 32.5px;
            }
            100% {
                width: 75px;
                height: 75px;
                bottom: 52.5px;
                right: 35px;
            }
        }


        #world {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: pink;
        }

        #gui {
            position: fixed;
            bottom: 0;
            right: 0;
            display: none;
        }

        #message-box {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate( calc(-50% + 50px), calc(-50% + 50px) );
            background-color: white;
            padding: 20px;
            margin: -50px;
            font-size: calc( 100% + 1.5vh );
            text-align: center;
            display: none;
        }


        #stamina-bar {
            position: fixed;
            left: 20px;
            top: 20px;
            height: 20px;
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
            display: none;
        }

        .blink-stamina {
            animation: blink_stamina 0.15s infinite ;
        }

        @keyframes blink_stamina {
            0% {
                opacity: 1.0 ;
            }
            50% {
                opacity: 0.3 ;
            }
            100% {
                opacity: 1.0 ;
            }
        }

            .stamina-section {
                height: 100%;
                width: calc( ( ( 100vw - 40px ) / 9 ) - 4px );
                margin-right: -2px;
                background-color: rgba(153, 228, 78, 0.294);
                border-radius: 4px;
                border-color: white;
                border-width: 2px;
                border-style: solid;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
            }

                .show-stamina {
                    animation: show_stamina 0.8s linear 1 forwards ;
                }

                @keyframes show_stamina {
                    0% {
                        opacity: 1 ;
                    }
                    10% {
                        opacity: 0 ;
                    }
                    20% {
                        opacity: 1 ;
                    }
                    30% {
                        opacity: 0 ;
                    }
                    40% {
                        opacity: 1 ;
                    }
                    50% {
                        opacity: 0 ;
                    }
                    60% {
                        opacity: 1 ;
                    }
                    70% {
                        opacity: 0 ;
                    }
                    80% {
                        opacity: 1 ;
                    }
                    90% {
                        opacity: 0 ;
                    }
                    100% {
                        opacity: 1 ;
                    }
                }

                .stamina-gauge {
                    width: 100%;
                    height: 100%;
                    background-image: url( 'assets/stamina-backgorund.png' );
                }


        #overlay {
            position: fixed;
            width: 100vw;
            height: 100vh;
            background-color: rgba( 0, 0, 0, 0.5 );
            display: none;
        }


        #talk-container {
            position: fixed;
            padding: 20px 0px 20px 0px;
            bottom: -210px;
            left: 10px;
            width: calc( 100vw - 10px - 20px );
            height: 160px;
            max-height: calc( 25vh - 40px );
        }

            @media screen and ( max-height: 750px ) {

                #talk-container {
                    padding: 5px 0px 5px 0px;
                    height: 190px;
                    max-height: calc( 25vh - 10px );
                }

            }

            #talk-subcontainer {
                position: relative;
                width: 70vw;
                max-height: 100%;
                left: 50%;
                top: 50%;
                transform: translate( -50%, -50% );
                overflow-y: auto;
            }

                #text-container {
                    font-size: calc( 100% + 1vh );
                    text-align: center;
                }

                #answers-container {
                    padding-top: 10px;
                    display: none;
                    justify-content: space-evenly;
                }

                    .answer {
                        display: inline-block;
                        margin: 0px 10px 0px 10px;
                        text-align: center;
                        font-size: 2em;
                    }

                    .selected-answer {
                        text-decoration: underline;
                        animation: blink_selected_answer 0.7s infinite ;
                    }

                    @keyframes blink_selected_answer {
                        0% {
                            color: black;
                        }
                        50% {
                            color: #888888;
                        }
                        100% {
                            color:black;
                        }
                    }


            .show-talk {
                animation: show_talk 0.25s ease-out 1 forwards;
            }

            .hide-talk {
                animation: hide_talk 0.15s ease-in 1 forwards;
            }

            @keyframes show_talk {
                0% {
                    bottom: -210px;
                }
                100% {
                    bottom: 10px;
                }
            }

            @keyframes hide_talk {
                0% {
                    bottom: 10px;
                }
                100% {
                    bottom: -210px;
                }
            }


        #talker-name-container {
            position: fixed;
            padding: 10px 20px 10px 20px;
            bottom: -80px;
            right: 5vw;
            font-size: calc( 100% + 2vh );
        }

            .show-talker-name {
                animation: show_talker_name 0.6s ease-out 1 forwards;
            }

            .hide-talker-name {
                animation: hide_talker_name 0.25s ease-in 1 forwards;
            }

            @keyframes show_talker_name {
                0% {
                    bottom: -80px;
                }
                100% {
                    bottom: 25vh;
                }
            }

            @keyframes hide_talker_name {
                0% {
                    bottom: 30vh;
                }
                100% {
                    bottom: -80px;
                }
            }


        #char-container {
            position: fixed;
            height: 100%;
            width: 300px;
            max-width: 50vh;
            bottom: 0px;
            right: -305px;
            display: flex;
            flex-direction: column-reverse;
        }

            #char-img-cont {
                position: absolute;
                width: 100%;
                max-width: 75vw;
                bottom: 0px;
                right: 0px;
            }

                .char-img {
                    width: 100%;
                }

            .show-char {
                animation: show_char 0.3s ease-out 1 forwards;
            }

            .hide-char {
                animation: hide_char 0.3s ease-in 1 forwards;
            }

            @keyframes show_char {
                0% {
                    right: -250px;
                }
                100% {
                    right: 0px;
                }
            }

            @keyframes hide_char {
                0% {
                    right: 0px;
                }
                100% {
                    right: -305px;
                }
            }


    </style>


    <script src="libs/three.js"></script>
    <script src="libs/OrbitControls.js"></script>
    <script src="libs/GLTFLoader.js"></script>
    <script src="libs/DRACOLoader.js"></script>
    <script src="libs/SkeletonUtils.js"></script>
    <script src="libs/EffectComposer.js"></script>
    <script src="libs/RenderPass.js"></script>
    <script src="libs/ShaderPass.js"></script>
    <script src="libs/CopyShader.js"></script>
    <script src="libs/FXAAShader.js"></script>

    <script src="libs/stats.min.js"></script>
    <script src="libs/dat.gui.min.js"></script>
    <script src="libs/lzjs.js"></script>
    <script src='libs/virtualjoystick.js'></script>
    <script src='libs/socket.io.js'></script>
    <script src='libs/ua-parser.min.js'></script>

    <script src="js/init.js"></script>
    <script src="js/loop.js"></script>
    <script src="js/input.js"></script>
    <script src="js/atlas.js"></script>
    <script src="js/controler.js"></script>
    <script src="js/charaAnim.js"></script>
    <script src="js/Utils.js"></script>
    <script src="js/CameraControl.js"></script>
    <script src="js/Easing.js"></script>
    <script src="js/Stamina.js"></script>
    <script src="js/Interaction.js"></script>
    <script src="js/DynamicItems.js"></script>
    <script src="js/MapManager.js"></script>
    <script src="js/Optimizer.js"></script>
    <script src="js/gameState.js"></script>
    <script src="js/feedbackClient.js"></script>
    <script src="js/AssetManager.js"></script>
    <script src="js/SocketIO.js"></script>
    <script src="js/soundMixer.js"></script>

</head>


<body>


    <audio loop id="music" preload="auto" style="display: none">
      <source src="https://edelweiss-game.s3.eu-west-3.amazonaws.com/sounds/music/AK+-+Pulses.ogg" type="audio/ogg">
    </audio>


    <script src="js/main.js"></script>


    <!-- General Game UI -->

    <canvas id="world"></canvas>

    <div id="stamina-bar"></div>

    <div id="overlay"></div>

    <div id="message-box" class="dialogue-box"></div>


    <!-- Dialogue UI -->

    <div id="char-container">
        
        <div id="char-img-cont">
            
            <img class="char-img" id="img-camper" src="https://edelweiss-game.s3.eu-west-3.amazonaws.com/char-pictures/char-picture-alpinist.png">

            <img class="char-img" id="img-lady" src="https://edelweiss-game.s3.eu-west-3.amazonaws.com/char-pictures/char-picture-lady.png">

            <img class="char-img" id="img-dev" src="https://edelweiss-game.s3.eu-west-3.amazonaws.com/char-pictures/char-picture-dev.png">

        </div>

    </div>

    <div id="talk-container" class='dialogue-box'>

        <div id="talk-subcontainer">

            <div id="text-container"></div>

            <div id="answers-container"></div>

        </div>

    </div>

    <div id="talker-name-container" class='dialogue-box'>Name</div>


    <!-- Black screen for death -->

    <div id="black-screen">
        
        <img id="loading-icon" src="https://edelweiss-game.s3.eu-west-3.amazonaws.com/assets/loading-icon.gif">

    </div>


    <!-- UI Buttons -->

    <div id='joystick-container'></div>

    <img id="action-button" src="assets/action.png">


    <!-- Title background -->

    <img id="title-background" src="https://edelweiss-game.s3.eu-west-3.amazonaws.com/assets/home_background.png">


    <!-- Menus -->

    <div id="start-menu">

        <div id="title-image-container">

            <img id="title" src="https://edelweiss-game.s3.eu-west-3.amazonaws.com/assets/title.png">
            <br>
            a game by Felix Mariotto

        </div>

        <div id="menu-element">

                <div>
                    Your display name:
                    <div class="input">
                        <input autocomplete="off" id="game-name" maxlength="15" placeholder="(for multiplayer)" onclick="this.select()"></input><button
                            onclick="this.previousSibling.value = utils.randomDisplayName()">&nbsp;</button>
                    </div>
                    Your game pass:
                    <div class="input">
                        <input autocomplete="off" id="game-pass" maxlength="15" placeholder="(for multiplayer)" onclick="this.select()"></input><button
                            onclick="this.previousSibling.value = utils.randomString()">&nbsp;</button>
                    </div>
                    <div id="start-button">
                        Start
                        <div id="start-background">
                            <div id="start-loaded"></div>
                        </div>
                    </div>
                </div>

        </div>

        <div id="credits">

            <div>

                <span class="section-title">Music :</span>

                <br>

                <a target="_blank" href="https://stromnoir.bandcamp.com/">Strom Noir</a>,
                <a target="_blank" href="https://simonbainton.bandcamp.com/">Simon Bainton</a>,
                <a target="_blank" href="http://www.tobiashellkvist.com/">Tobias Hellkvist</a>,
                <a target="_blank" href="https://soundcloud.com/andrewodd/">Andrew Odd</a>,
                <a target="_blank" href="https://www.kylepreston.com/">Kyle Preston</a>

            </div><div>

                <span class="section-title">Code :</span>

                <br>

                <a target="_blank" href="https://twitter.com/intent/follow?screen_name=felix_mariotto">Felix Mariotto</a>

                <br>

                <a href="https://github.com/felixmariotto/Edelweiss#readme"><img src="https://github.com/favicon.ico" alt="GitHub" /></a>

            </div>

        </div>

    </div>


    <!-- TEMPORARY -->

    <div id="gui">
        <label for="json-loader">load JSON</label><br>
        <input type='file' id='json-loader' name='jjson-loader'>
    </div>

</body>
</html>