{"name":"🌸 뉴 네오 미연시 대화창 💬","description":"그 긴거","id":"2d545ca2-0eab-4fa2-9030-eb7e56870c98","hideIcon":false,"trigger":[{"comment":"","type":"start","conditions":[],"effect":[{"type":"triggerlua","code":"local function replaceDialogue(match)\n    \n    local randomNumber = math.random(0,99999)\n    local emotion, dialogue = match:match('emotion=\"(.-)\">(.-)</dialogue>')\n    local htmlFormat = [[\n<style>\n    #toggleCheckbox]]..randomNumber..[[:checked ~ .svg1 {\n        display: block;\n    }\n    #toggleCheckbox]]..randomNumber..[[:checked ~ .svg2 {\n        display: none;\n    }\n    #toggleCheckbox]]..randomNumber..[[:not(:checked) ~ .text-box, #toggleCheckbox]]..randomNumber..[[:not(:checked) ~ .divider, #toggleCheckbox]]..randomNumber..[[:not(:checked) ~ .name-container {\n        display: none;\n    }\n    #toggleCheckbox]]..randomNumber..[[ {\n        display: none;\n    }\n</style><br>\n<div class=\"image-stack\">\n    <div class=\"image-crop\">\n        <img src=\"{{raw::]]..emotion..[[.png}}\" alt=\"Character\" class=\"front\">\n        <img src=\"{{raw::bg.png}}\" alt=\"Background\" class=\"back\">\n    </div>\n    <input type=\"checkbox\" class=\"toggle-checkbox\" id=\"toggleCheckbox]]..randomNumber..[[\" checked>\n    <label for=\"toggleCheckbox]]..randomNumber..[[\" class=\"svg-icon svg2\">\n        <svg fill=\"#e6e6fa\" viewBox=\"0 0 256 256\" id=\"Flat\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M234.35254,160.8125a12.00024,12.00024,0,1,1-20.78516,12l-16.2771-28.19189a127.01451,127.01451,0,0,1-29.36694,13.47021l5.18994,29.43164a11.99973,11.99973,0,1,1-23.63476,4.168l-5.053-28.6543a140.4304,140.4304,0,0,1-32.94116-.01074l-5.05176,28.65234a11.99973,11.99973,0,0,1-23.63477-4.168l5.19165-29.44483A127.0154,127.0154,0,0,1,58.665,144.59326L42.28125,172.9707a12.00024,12.00024,0,0,1-20.78516-12l17.85523-30.92578A153.16947,153.16947,0,0,1,22.665,112.416,11.99959,11.99959,0,0,1,41.333,97.334C57.05859,116.79785,84.8584,140,128,140c43.14063,0,70.94043-23.20215,86.666-42.666a11.99959,11.99959,0,1,1,18.668,15.082,153.08978,153.08978,0,0,1-16.72509,17.66406Z\"></path> </g></svg>\n    </label>\n    <label for=\"toggleCheckbox]]..randomNumber..[[\" class=\"svg-icon svg1\">\n        <svg fill=\"#e6e6fa\" viewBox=\"0 0 256 256\" id=\"Flat\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g><g id=\"SVGRepo_tracerCarrier\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></g><g id=\"SVGRepo_iconCarrier\"> <path d=\"M250.96582,123.12659c-.36328-.81836-9.127-20.26075-28.48047-39.61524C196.63477,57.65686,163.96191,43.99182,128,43.99182s-68.63477,13.665-94.48535,39.51953C14.16113,102.86584,5.39746,122.30823,5.03418,123.12659a12.00024,12.00024,0,0,0,0,9.74707c.36426.81836,9.12793,20.25683,28.48145,39.60742C59.36621,198.32971,92.03809,211.99182,128,211.99182s68.63379-13.66211,94.48438-39.51074c19.35351-19.35059,28.11718-38.78906,28.48144-39.60742A12.00024,12.00024,0,0,0,250.96582,123.12659ZM204.91406,156.107C183.46582,177.26428,157.58789,187.99182,128,187.99182S72.53418,177.26428,51.08594,156.107A130.50586,130.50586,0,0,1,29.5166,127.99963,130.53626,130.53626,0,0,1,51.08691,99.88342C72.53516,78.72131,98.41211,67.99182,128,67.99182s55.46484,10.72949,76.91309,31.8916a130.549,130.549,0,0,1,21.57031,28.11426A130.47521,130.47521,0,0,1,204.91406,156.107ZM128,83.99963a44,44,0,1,0,44,44A44.04978,44.04978,0,0,0,128,83.99963Zm0,64a20,20,0,1,1,20-20A20.02229,20.02229,0,0,1,128,147.99963Z\"></path> </g></svg>\n    </label>\n    <img src=\"{{raw::divider2.png}}\" alt=\"Divider\" class=\"divider\">\n    <div class=\"name-container\">{{char}}</div>\n    <div class=\"text-box\">\n        <div class=\"scrollable-content\">\n        ]]..dialogue..[[\n            <br>\n        </div>\n    </div>\n</div>\n<br><br><br>\n\n    ]]\n    return htmlFormat\nend\n\nlistenEdit(\"editDisplay\", function(triggerId, data)\n    local newText = data:gsub('<dialogue.-</dialogue>', function(match)\n        return replaceDialogue(match)\n    end)\n    return newText\nend)"}],"lowLevelAccess":false}],"lowLevelAccess":false,"backgroundEmbedding":"<style>\n    @import url('https://fonts.cdnfonts.com/css/mainland-personal');\n    .image-stack {\n        position: relative;\n        width:  100%;\n        max-width: 700px;\n        aspect-ratio: 16 / 9;\n        margin: 0 auto;\n        left: -30px;\n        top: 30px;\n        border-radius: 15px;\n        overflow: hidden;\n    }\n    .image-stack .front, .image-stack .back {\n        position: absolute;\n        top: 0;\n        width: 100%;\n        margin: 0 auto;\n        display: block;\n    }\n\n    .image-stack .front {\n        z-index: 2;\n        height: 150%;\n        left: -1%;\n        object-fit: contain;\n    }\n\n    .image-stack .back {\n        z-index: 1;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    .text-box {\n        box-sizing: border-box;\n        background-color: rgba(15, 15, 30, 0.6);\n        box-shadow: 0 -10px 30px 28px rgba(15, 15, 30, 0.6);\n        width: 100%;\n        height: 39%;\n        text-align: left;\n        color: white;\n        position: absolute;\n        top: 65%;\n        z-index: 3;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n    }\n    .divider {\n        z-index: 4;\n        position: absolute;\n        object-fit: contain;\n        max-width: 100%;\n        height: auto;\n        bottom: 13%;\n    }\n    .name-container {\n        font-family: 'Space Grotesk', sans-serif;\n        font-weight: 700;\n        z-index: 5;\n        position: absolute;\n        bottom: 28%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        padding: 10px;\n        font-size: 32px;\n        color:white;\n    }\n\n    .scrollable-content {\n        overflow-y: auto;\n        font-size: clamp(0px, 1em, 50px);\n        margin-top:4%;\n        padding: 0 10% 0;\n    }\n    .cog {\n        cursor: pointer;\n        position: absolute;\n        z-index: 3;\n        top: 10px;\n        right: 60px;\n        width: 50px;\n        height: 50px;\n    }\n    .toggle-checkbox {\n        display: none;\n    }\n    .svg-icon {\n        position: absolute;\n        top: 15px;\n        right: 10px;\n        width: 40px;\n        height: 40px;\n        z-index: 3;\n        cursor: pointer;\n    }\n    .svg1 {\n        display: none;\n    }\n    .svg2 {\n        display: block;\n    }\n</style>","type":"risuModule","creator_notes":"그 긴거","tags":[],"license":"CC BY-SA 4.0","rtype":"module"}