Japanuspus/2021-01-12 minimal drag and drop.html

## 2021-01-12 minimal drag and drop.html
<html>
    <head>
        <title>Labyrinten</title>
    </head>
    <body>
        <script>
        function dragstart_handler(ev) {
            ev.dataTransfer.setData("text/plain", ev.target.id);
        }
        function dragover_handler(ev) {
            ev.preventDefault();
            ev.dataTransfer.dropEffect = "move";
        }
        function drop_handler(ev) {
            ev.preventDefault();
            const data = ev.dataTransfer.getData("text/plain");
            document.getElementById('up1').hidden=true;
            document.getElementById('up2').hidden=false;
        }
        </script>

        <div>Her er en sætning med en <span id="hammer" draggable="true" ondragstart="dragstart_handler(event)">hammer</span>.</div>
        <div id="up1">Her er en sætning med en <span ondragover="dragover_handler(event)" ondrop="drop_handler(event)">urtepotte</span>.</div>
        <div id="up2" hidden="true">Her er en sætning med en smadret urtepotte.</div>

    </body>
</html>

## 2021-01-13 dungeon with inventory.html
<html lang="da">
    <head>
        <title>Labyrinten</title>
        <style>
            html {box-sizing: border-box;}
            *, *:before, *:after {box-sizing: inherit;}
            img {
                max-width: 100%;
                height: auto;
            }

            body {
                font-size: 16px;
                line-height: 1.5;
                font-family: sans-serif;
                max-width: 60em;
                padding: 1em;
            }

            a {cursor: pointer;}
        </style>
        <script>
            function dragstart_handler(ev) {
                ev.dataTransfer.setData("text/plain", ev.target.id);
            }
            function dragover_handler(ev) {
                ev.preventDefault();
                ev.dataTransfer.dropEffect = "move";
            }
            function generic_drop_handler(ev, drop_id, drop_action) {
                ev.preventDefault();
                const data = ev.dataTransfer.getData("text/plain");
                if (data==drop_id) {drop_action(ev);}
            }

            function $(id) {
                return document.getElementById(id);
            }

            function dragify(id) {
                var elem = document.getElementById(id);
                elem.draggable = true;
                elem.ondragstart = dragstart_handler;
            }

            // call 'drop_action' if item with id 'drop_id' is dropped on 'id'
            // Multiple actions (for different drop id's) can be added to one item
            function dropify(id, drop_id, drop_action) {
                var elem = document.getElementById(id);
                elem.ondragover=dragover_handler;
                function drop_handler(ev) {
                    set_message("");
                    generic_drop_handler(event, drop_id, drop_action)
                };
                //elem.ondrop=(event)=>generic_drop_handler(event, drop_id, drop_action);
                elem.addEventListener("drop", drop_handler, false);
            }

            function set_message(s) {
                document.getElementById("message").innerHTML=s;
            }
        </script>
    </head>
    <body>
        <div id="message"></div>
        <div id="rum">
            <div id="rum1">
                <h2>Det første rum</h2>
                På gulvet er der en rusten <a id="hammer">hammer</a>.
                <div id="up1">I vindueskarmen står en <span id="urtepotte">urtepotte</span> med en bønnespire.</div>
                <div id="up2" hidden="true">I vindueskarmen ligger en <a id="nogle">nøgle</a> mellem skårene af en smadret urtepotte.</div>
                <script>
                    dragify("hammer");
                    dropify("urtepotte", "hammer", function(ev) {
                        set_message("Du slår på urtepotten med hammeren. Urtepotten går i stykker.");
                        $('up1').hidden=true;
                        $('up2').hidden=false;
                    });
                    $("nogle").onclick=(ev)=>{
                        set_message("Du tager nøglen");
                        ev.target.onclick=null;
                        $("inventory").appendChild(ev.target);
                        dragify("nogle");
                        $('up2').innerText = "I vindueskarmen ligger skårene af en smadret urtepotte.";
                    };
                </script>

                <div id="vase_div">Der står en <span id="vase">glasvase</span> på et lille bord.</div>
                <script>
                    dropify("vase", "hammer", function(ev) {
                        set_message("Du slår vasen med hammeren. Vasen splintres og du får et glasskår i halsen. Alt bliver sort.");
                        $("rum1").hidden=true;
                        $("slut").hidden=false;
                    });
                </script>

                <div id="rr1" >En låst <span id="door">dør</span> fører mod syd.</div>
                <div id="rr2" hidden="true">En dør fører mod <a id="syd">syd</a>.</div>
                <script>
                    dropify("door", "nogle", function(ev) {
                        $("rr1").hidden=true;
                        $("rr2").hidden=false;
                        set_message("Nøglen passer og du låser døren op.");
                    });
                    $("syd").onclick=function(ev) {
                        $("rum1").hidden=true;
                        $("rum2").hidden=false;
                        set_message("Du går gennem døren mod syd.");
                    };
                </script>
            </div>

            <div id="rum2" hidden="true">
                <h2>Rum 2 er bare et rum</h2>
                Her slutter festen.
            </div>

            <div id="slut" hidden="true">
                Det var ikke så godt. Prøv <a onclick="location.reload()">igen</a>.
            </div>
        </div>
        <h2>Ting</h2>
        <div id="inventory"></div>
    </body>
</html>
	<html>
	<head>
	<title>Labyrinten</title>
	</head>
	<body>
	<script>
	function dragstart_handler(ev) {
	ev.dataTransfer.setData("text/plain", ev.target.id);
	}
	function dragover_handler(ev) {
	ev.preventDefault();
	ev.dataTransfer.dropEffect = "move";
	}
	function drop_handler(ev) {
	ev.preventDefault();
	const data = ev.dataTransfer.getData("text/plain");
	document.getElementById('up1').hidden=true;
	document.getElementById('up2').hidden=false;
	}
	</script>

	<div>Her er en sætning med en <span id="hammer" draggable="true" ondragstart="dragstart_handler(event)">hammer</span>.</div>
	<div id="up1">Her er en sætning med en <span ondragover="dragover_handler(event)" ondrop="drop_handler(event)">urtepotte</span>.</div>
	<div id="up2" hidden="true">Her er en sætning med en smadret urtepotte.</div>

	</body>
	</html>
	<html lang="da">
	<head>
	<title>Labyrinten</title>
	<style>
	html {box-sizing: border-box;}
	, :before, *:after {box-sizing: inherit;}
	img {
	max-width: 100%;
	height: auto;
	}

	body {
	font-size: 16px;
	line-height: 1.5;
	font-family: sans-serif;
	max-width: 60em;
	padding: 1em;
	}

	a {cursor: pointer;}
	</style>
	<script>
	function dragstart_handler(ev) {
	ev.dataTransfer.setData("text/plain", ev.target.id);
	}
	function dragover_handler(ev) {
	ev.preventDefault();
	ev.dataTransfer.dropEffect = "move";
	}
	function generic_drop_handler(ev, drop_id, drop_action) {
	ev.preventDefault();
	const data = ev.dataTransfer.getData("text/plain");
	if (data==drop_id) {drop_action(ev);}
	}

	function $(id) {
	return document.getElementById(id);
	}

	function dragify(id) {
	var elem = document.getElementById(id);
	elem.draggable = true;
	elem.ondragstart = dragstart_handler;
	}

	// call 'drop_action' if item with id 'drop_id' is dropped on 'id'
	// Multiple actions (for different drop id's) can be added to one item
	function dropify(id, drop_id, drop_action) {
	var elem = document.getElementById(id);
	elem.ondragover=dragover_handler;
	function drop_handler(ev) {
	set_message("");
	generic_drop_handler(event, drop_id, drop_action)
	};
	//elem.ondrop=(event)=>generic_drop_handler(event, drop_id, drop_action);
	elem.addEventListener("drop", drop_handler, false);
	}

	function set_message(s) {
	document.getElementById("message").innerHTML=s;
	}
	</script>
	</head>
	<body>
	<div id="message"></div>
	<div id="rum">
	<div id="rum1">
	<h2>Det første rum</h2>
	På gulvet er der en rusten <a id="hammer">hammer</a>.
	<div id="up1">I vindueskarmen står en <span id="urtepotte">urtepotte</span> med en bønnespire.</div>
	<div id="up2" hidden="true">I vindueskarmen ligger en <a id="nogle">nøgle</a> mellem skårene af en smadret urtepotte.</div>
	<script>
	dragify("hammer");
	dropify("urtepotte", "hammer", function(ev) {
	set_message("Du slår på urtepotten med hammeren. Urtepotten går i stykker.");
	$('up1').hidden=true;
	$('up2').hidden=false;
	});
	$("nogle").onclick=(ev)=>{
	set_message("Du tager nøglen");
	ev.target.onclick=null;
	$("inventory").appendChild(ev.target);
	dragify("nogle");
	$('up2').innerText = "I vindueskarmen ligger skårene af en smadret urtepotte.";
	};
	</script>

	<div id="vase_div">Der står en <span id="vase">glasvase</span> på et lille bord.</div>
	<script>
	dropify("vase", "hammer", function(ev) {
	set_message("Du slår vasen med hammeren. Vasen splintres og du får et glasskår i halsen. Alt bliver sort.");
	$("rum1").hidden=true;
	$("slut").hidden=false;
	});
	</script>

	<div id="rr1" >En låst <span id="door">dør</span> fører mod syd.</div>
	<div id="rr2" hidden="true">En dør fører mod <a id="syd">syd</a>.</div>
	<script>
	dropify("door", "nogle", function(ev) {
	$("rr1").hidden=true;
	$("rr2").hidden=false;
	set_message("Nøglen passer og du låser døren op.");
	});
	$("syd").onclick=function(ev) {
	$("rum1").hidden=true;
	$("rum2").hidden=false;
	set_message("Du går gennem døren mod syd.");
	};
	</script>
	</div>

	<div id="rum2" hidden="true">
	<h2>Rum 2 er bare et rum</h2>
	Her slutter festen.
	</div>

	<div id="slut" hidden="true">
	Det var ikke så godt. Prøv <a onclick="location.reload()">igen</a>.
	</div>
	</div>
	<h2>Ting</h2>
	<div id="inventory"></div>
	</body>
	</html>