yuna-wu-adjusted-supermarket-design [Light]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Supermarket Design Based on Set Guidelines ======
By: [[yuna-wu|Yuna]]

<html>
<br><br>
<style>
#popUpRect {
    opacity: 0;
    position: absolute;
    background-color: white;
    border-color: black;
    border-width: 4px;
    position: absolute;
    overflow: auto;
    z-index: 1;
    cursor: pointer;
    line-height: 1.6;
    padding: 2px;
    transition-property: height, opacity, top;
    transition-duration: 0.25s;
}

area:hover{
    cursor: pointer;
}

#allowSound {
    padding: 2px;
    background-color: black;
    color: white;
    position: absolute;
    text-align: right;
    float: right;
    left 100%;
    position: sticky;
    transition-property: opacity;
    transition-duration: 0.3s;
}

#allowSound:hover {
    cursor: pointer;
}

</style>
    <body>
        <div id = 'allowSound'> Click to enable sound for full supermarket experience </div>
        <div id='popUpRect'></div>
        <script>
//--------------------------------------------------------------------------
//Local Version
//--------------------------------------------------------------------------
//Define necessary resources:
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  move(xDistance, yDistance) {
    return new Point(this.x + xDistance, this.y + yDistance);
  }
  moveByAngle(angle, distance) {
    let r = (angle * Math.PI) / 180;
    return new Point(
      this.x + distance * Math.sin(r),
      this.y + distance * Math.cos(r)
    );
  }
  distance(point2) {
    let point1 = new Point(this.x, this.y)
    let a = point1.x - point2.x
    let b = point1.y - point2.y
    if (a < 0) {
      a = a - (a * 2)
    }
    if (b < 0) {
      b = b - (b * 2)
    }
    let toSquare = (b ** 2) + (a ** 2)
    return Math.sqrt(toSquare)
  }
}

function enableSound (){
    let elem = document.getElementById('allowSound')
    elem.style.opacity = '0'
    setTimeout(() => {
        elem.remove()
    }, 1000)
    document.removeEventListener('click', enableSound);
}

function preloadAllAssets (){
    console.log('showing rect')
    Object.keys(popUpElements).forEach(x => {
        if (popUpElements[x].mappedImage !== undefined){
            Object.keys(popUpElements[x]).forEach(b => {
                let currentObj = popUpElements[x][b]
                if (b.includes('Style') === false && b !== 'mappedImage'){
                    if (currentObj.image !== undefined){
                        let imgPath = currentObj.image
                        currentObj.image = new Image()
                        currentObj.image.src = imgPath
                        currentObj.image.onclick = function (){ window.open(imgPath)}
                    }
                    else if (currentObj.audio !== undefined){
                        currentObj.audio = new Audio(currentObj.audio)
                        currentObj.audio.preload = 'auto'
                    }
                }
            })
        }
        else if (x.image !== undefined){
            let imgPath = x.image
            x.image = new Image()
            x.image.src = imgPath
        }
        else if (x.audio !== undefined){
            x.audio = new Audio(x.audio)
            x.audio.preload = 'auto'
        }
    })
}
//Preload images: https://stackoverflow.com/a/3646056/19515980

//Set up necessary items:
let mouse = new Point(0, 0)
let lastMousePosition=new Point(0,0)
let scrollPosition=new Point(0,0)
let mouseDown = false
let popUpElements = {}
let currentMouseOver = document.body
let popUpRect = document.getElementById('popUpRect')
popUpRect.style.opacity = '0'

//--------------------------------------------------------------------------
//Necessary Event Listeners:

document.addEventListener('scroll', ((e) => {
//calculating Mouse position:
  mouse.x = mouse.x+(window.scrollX-scrollPosition.x)
  mouse.y = mouse.y + (window.scrollY - scrollPosition.y)
  scrollPosition = new Point(window.scrollX,window.scrollY)
}))

document.addEventListener('pointermove', ((e) => {
    mouse.x = e.pageX
    mouse.y = e.pageY
    checkIfHideRect(e)
    lastMousePosition.x = mouse.x;
    lastMousePosition.y = mouse.y;
    setTimeout(() =>{
        checkIfShowRect(e)
    }, 202)
}))

document.addEventListener('mouseover',function (e){
    checkIfShowRect(e)
    currentMouseOver = e
    setTimeout(() =>{
        checkIfShowRect(e)
    }, 202)
    /*
    try{
        if (currentMouseOverpopUpRect.style.opacity === '0'){
            document.body.style.cursor = 'pointer'
        }
    }
    catch{}
    */
})

document.addEventListener('mouseout',function (e){
    currentMouseOver = e
})

document.addEventListener('click', enableSound);

//https://stackoverflow.com/a/2863570/19515980

window.addEventListener("load", (e) => {
    Object.keys(popUpElements).forEach(x => {
        generateImageMap(x, locationToAppendTo)
    })
    preloadAllAssets()
});

if ('ontouchstart' in window){
    //console.log('this device supports touch')
    popUpRect.style.transitionDuration = '0.1s'
    document.addEventListener("click", (e) => processTouch(e), false);
    //document.addEventListener("touchstart", (e) => processTouch(e), false);
    //document.addEventListener("touchcancel", (e) => processTouch(e), false);
    //document.addEventListener("touchend", (e) => processTouch(e), false);
    let lastTouchEnd = 0;
    document.addEventListener('touchend', function(event) {
        const now = (new Date()).getTime();
        if (now - lastTouchEnd <= 300) {
            event.preventDefault();
        }
        lastTouchEnd = now;
    }, false);
}

function processTouch (e){
    e.preventDefault()
    checkIfHideRect(e)
    checkIfShowRect(e)
}

//--------------------------------------------------------------------------
//Show popUpRect functions
function checkIfShowRect (e){
    try{
        setTimeout(()=>{
            if (popUpRect.style.opacity == '0' && e.target.id !== undefined){
                //console.log('showing')
                let data = findPopUpData(e)
                if (data !== undefined){
                    if (data.audio !== undefined){
                        data.audio.play()
                     }
                }
            }
            else if (popUpRect.style.opacity == '0'){
                setTimeout(()=>{
                    checkIfShowRect(e)
                }, 50)
            }
        },50)
    }
    catch(e){
        console.log(e)
    }
}


function findPopUpData (e){
    let position = 'outer'
    let target;
    if (e.target.parentElement !== null){
        //console.log('name', e.target.id)
        target = Object.keys(popUpElements).find(x => x === e.target.parentElement.id)
    }
    //console.log('original target', e.target.id, target)
    if (target === undefined || target === -1){
        target = Object.keys(popUpElements).indexOf(e.target.id)
    }
    else {
        position = target
        target = Object.keys(popUpElements[target]).find(x => x === e.target.id)
    }
    //console.log('position', position)
    //console.log('target', target)
    if (target === undefined){
        return false
    }
    else if (position === ' outer'){
        showRect(e, popUpElements[target])
        return popUpElements[target]
    }
    else if (target !== -1){
        showRect(e, popUpElements[position][target])
        return popUpElements[position][target]
    }
}

let selectedPart;
function showRect (e, data){
    selectedPart = e
    console.log('showing rect')
    if (popUpRect.style.opacity == '0'){
            popUpRect.style.opacity = '1'
        //let elemInfo=elem.getBoundingClientRect()
       //browserZoomLevel = Math.round(window.devicePixelRatio * 100);
       //selectedPart.style.borderRight=window.innerWidth/10-selectedPart.getBoundingClientRect().width+3+'px solid white'
        //openPopUpRect(elemInfo.x + JSON.parse(mapPos[0]) + scrollX,elemInfo.y + scrollY + JSON.parse(mapPos[1]))
        //checkPopUpRectPosition(popUpRect)
    let parentData = Object.keys(popUpElements).map(x => {
        if (popUpElements[x][e.target.id] !== undefined){
            return popUpElements[x]
        }
    })[0]
        styleRect(e, data, parentData)
        positionRect(e, data, parentData)
        displayRectContent(e, data)
        scaleRect(data)
    }
}

function displayRectContent (e, data){
    let dataToDisplay = ''
    if (data.label !== undefined){
        dataToDisplay += '<b>' + data.label +': </b> <br> '
    }
    if (data.info !== undefined){
        dataToDisplay += data.info
    }
    popUpRect.innerHTML = dataToDisplay
    if (data.image !== undefined){
        displayRectImage(e, data)
    }
}

function displayRectImage (e, data){
    try{
        let rectWidth = data.imageWidth
        let rectHeight = data.imageHeight
        if (rectWidth === undefined){
            rectWidth = window.innerWidth / 8
        }
        if (rectHeight === undefined){
            rectHeight = window.innerHeight / 5.9
        }
        data.image.style.width = rectWidth + 'px'
        data.image.style.height = rectHeight + 'px'
        popUpRect.appendChild(data.image)
    }
    catch(e){
        preloadAllAssets()
        displayRectImage(e, data)
    }
}

function getMapPos (data){
    if (data.shape === 'rect'){
        return data.coords.split(',').map(x => {return JSON.parse(x)})
    }
    else if (data.shape === 'circle'){
        let splitedData = data.coords.split(',').map(x => {return JSON.parse(x)})
        return [splitedData[0] - splitedData[2], splitedData[1] - splitedData[2], splitedData[0] + splitedData[2], splitedData[1] + splitedData[2]]
    }
    else if (data.shape === 'poly'){
        let splitedData = data.coords.split(',').map(x => {return JSON.parse(x)})
        let yPositions = splitedData.filter((_, i) => i % 2 === 1);
        let xPositions = splitedData.filter((_, i) => i % 2 === 0);
        return [Math.min(... xPositions), Math.min(... yPositions), Math.max(... xPositions), Math.max(yPositions)]
    }
    else{
        console.error('Unexpected or Undefined shape', 'Supported shapes are rect, circle, and poly.')
    }
}

function positionRect (e, data, parentData){
    let mapPos = getMapPos(data)
    let parentInfo = parentData.mappedImage.getBoundingClientRect()
    let targetBoundingInfo = {
        x: parentInfo.x + mapPos[0],
        right: parentInfo.x + mapPos[2],
        y: parentInfo.y + mapPos[1] + scrollY,
        bottom: parentInfo.y + mapPos[3] + scrollY,
    }
    console.log('original', parentData.offset, targetBoundingInfo)
    targetBoundingInfo = removeOffset(targetBoundingInfo, parentData.offset)
    console.log('removeOffset', targetBoundingInfo)
    //console.log('info', targetBoundingInfo)
    //console.log('mapPos', mapPos)
    //console.log('parentInfo', e.target.parentElement.id, parentInfo)
    let rectHeight = data.height
    if (rectHeight === undefined){
        rectHeight = window.innerHeight / 5.9
    }
    let rectWidth = data.width
    if (rectWidth === undefined){
        rectWidth = window.innerWidth / 8
    }
    if (data.position === 'stack'){
        positionRectStackedWithTarget(targetBoundingInfo, data)
       //// return true
    }
    //HERE:
    else if (data.position === 'under' && checkIfPositionOutsideScreen(targetBoundingInfo.x, targetBoundingInfo.y, data) === undefined){
        positionRectUnderTarget(targetBoundingInfo, data)
        return true
    }
    else if (data.position === 'above' && checkIfPositionOutsideScreen(targetBoundingInfo.x, targetBoundingInfo.y - rectHeight, data) === undefined){
        positionRectAboveTarget(targetBoundingInfo, data)
        return true
    }
    else if (data.position === 'left' && checkIfPositionOutsideScreen(targetBoundingInfo.x - data.width, targetBoundingInfo.y, data) === undefined){
        positionRectLeftTarget(targetBoundingInfo, data)
        return true
    }
    else if (data.position === 'right' && checkIfPositionOutsideScreen(targetBoundingInfo.right, targetBoundingInfo.y, data) === undefined){
        positionRectRightTarget(targetBoundingInfo, data)
        return true
    }
    let availablePositions = findAvailablePositions(e, data, targetBoundingInfo)
    //console.log('availablePositions', availablePositions)
    pickBestPosition(targetBoundingInfo, data, availablePositions)
}

function removeOffset (targetBoundingInfo, offset){
    targetBoundingInfo.x -= offset.x
    targetBoundingInfo.right -= offset.x
    targetBoundingInfo.y -= offset.y
    targetBoundingInfo.bottom -= offset.y
    Object.keys(targetBoundingInfo).forEach(x => {
        let item = targetBoundingInfo[x]
        if (item < 0){
            console.log('reverting from negative', 'before', item)
            item = item * -1
        }
    })
    return targetBoundingInfo
}

function findAvailablePositions (e, data, targetBoundingInfo){
    let availablePositions = []
    if (checkIfPositionOutsideScreen(targetBoundingInfo.x, targetBoundingInfo.y, data) === undefined){
        availablePositions.push('under')
    }
    let rectHeight = data.height
    if (rectHeight === undefined){
        rectHeight = window.innerHeight / 5.9
    }
    if (checkIfPositionOutsideScreen(targetBoundingInfo.x, targetBoundingInfo.y - rectHeight, data) === undefined){
        availablePositions.push('above')
    }
    let rectWidth = data.width
    if (rectWidth === undefined){
        rectWidth = window.innerWidth / 8
    }
    if (checkIfPositionOutsideScreen(targetBoundingInfo.x - data.width, targetBoundingInfo.y, data) === undefined){
        availablePositions.push('left')
    }
    if (checkIfPositionOutsideScreen(targetBoundingInfo.right, targetBoundingInfo.y, data) === undefined){
        availablePositions.push('right')
    }
    return availablePositions
}

function pickBestPosition (targetBoundingInfo, data, availablePositions){
    if (availablePositions.length === 0){
        positionRectStackedWithTarget(targetBoundingInfo)
        return true
    }
    else if (availablePositions.length == 1){
        findAndUsePosition(availablePositions, targetBoundingInfo, data)
        return true
    }
    else if (positionRectOppositeOfUserPickedPosition(targetBoundingInfo, data, availablePositions) === true){
        return true
    }
    else{
        findAndUsePosition(availablePositions, targetBoundingInfo, data)
    }
    return true
}

function findAndUsePosition (availablePositions, targetBoundingInfo, data){
    if (availablePositions[0] === 'left'){
        positionRectLeftTarget(targetBoundingInfo, data)
    }
    else if (availablePositions[0] === 'right'){
        positionRectRightTarget(targetBoundingInfo, data)
    }
    else if (availablePositions[0] === 'above'){
        positionRectAboveTarget(targetBoundingInfo, data)
    }
    else if (availablePositions[0] === 'under'){
        positionRectUnderTarget(targetBoundingInfo, data)
    }
    return true
}

function positionRectOppositeOfUserPickedPosition(targetBoundingInfo, data, availablePositions){
    let userPickedPosition = data.position
    if (userPickedPosition === 'right' && availablePositions.indexOf('left') !== -1){
        positionRectLeftTarget(targetBoundingInfo, data)
        return true
    }
    else if (userPickedPosition === 'left' && availablePositions.indexOf('right') !== -1){
        positionRectRightTarget(targetBoundingInfo, data)
        return true
    }
    else if (userPickedPosition === 'above' && availablePositions.indexOf('above') !== -1){
        positionRectAboveTarget(targetBoundingInfo, data)
        return true
    }
    else if (userPickedPosition === 'under' && availablePositions.indexOf('under') !== undefined){
        positionRectUnderTarget(targetBoundingInfo, data)
        return true
    }
    return false
}

function positionRectUnderTarget (targetBoundingInfo, data, from){
    console.log('positioning under')
    popUpRect.style.left = targetBoundingInfo.x + 'px'
    popUpRect.style.top = targetBoundingInfo.bottom + 'px'
    popUpRect.style.opacity = '1'
    return true
}

function positionRectStackedWithTarget (targetBoundingInfo){
    popUpRect.style.left = targetBoundingInfo.x +'px'
    popUpRect.style.top = targetBoundingInfo.y + 'px'
    return true
}

function positionRectAboveTarget (targetBoundingInfo, data, from){
    let rectHeight = data.height
    if (rectHeight === undefined){
        rectHeight = window.innerHeight / 5.9
    }
    console.log('positioning above')
    popUpRect.style.left = targetBoundingInfo.x +'px'
    popUpRect.style.top = targetBoundingInfo.y - rectHeight + 'px'
    return true
}

function positionRectLeftTarget (targetBoundingInfo, data, from){
    let rectWidth = data.width
    if (rectWidth === undefined){
        rectWidth = window.innerWidth / 8
    }
    console.log('positining left')
    popUpRect.style.left = targetBoundingInfo.x - rectWidth + 'px'
    popUpRect.style.top = targetBoundingInfo.y + 'px'
    return true
}

function positionRectRightTarget (targetBoundingInfo, data, from){
    console.log('positioning right')
    popUpRect.style.left = targetBoundingInfo.right + 'px'
    popUpRect.style.top = targetBoundingInfo.y + 'px'
}

function checkIfPositionOutsideScreen (startX, startY, data){
    if (startX < 0 || startY < 0){
        return false
    }
    let rectWidth = data.width
    if (rectWidth === undefined){
        rectWidth = window.innerWidth / 8
    }
    if (startX + rectWidth > window.innerWidth){
        return false
    }
    let rectHeight = data.height
    if (data.height === undefined){
        data.height = window.innerHeight / 5.9
    }
    if (startY + data.height > window.innerHeight){
        return false
    }
}

function scaleRect (data){
    if (data.width === undefined){
        popUpRect.style.width = window.innerWidth / 8 + 'px'
    }
    else {
        popUpRect.style.width = data.width + 'px'
    }
    if (data.height === undefined){
        popUpRect.style.height = window.innerHeight/5.9 + 'px'
    }
    else {
        popUpRect.style.height = data.height + 'px'
    }
}

function styleRect (e, data, parentData){
    let parentStyling = parentData.rectStyle
    if (parentStyling === undefined) {
        popUpRect.style.backgroundColor = 'white'
        return true
    }
    if (data.backgroundColor !== undefined){
        popUpRect.style.backgroundColor = data.backgroundColor
    }
    else if (parentStyling.backgroundColor !== undefined){
        popUpRect.style.backgroundColor = parentStyling.backgroundColor
    }
    else{
        popUpRect.style.backgroundColor = 'white'
    }
    /*
    if (data.opacity !== undefined){
        popUpRect.style.opacity = data.opacity
    }
    else if (parentStyling.opacity !== undefined){
        popUpRect.style.opacity = parentStyling.opacity
    }
    else {
        popUpRect.style.opacity = '1'
    }
    */
    popUpRect.style.opacity = '1'
    if (data.borderColor !== undefined){
        popUpRect.style.borderColor = data.borderColor
    }
    else if (parentStyling.borderColor !== undefined){
        popUpRect.style.borderColor = parentStyling.borderColor
    }
    else {
        popUpRect.style.borderColor = '1'
    }
    if (data.borderWidth !== undefined){
        popUpRect.style.borderWidth = data.borderWidth
    }
    else if (parentStyling.borderWidth !== undefined){
        popUpRect.style.borderWidth = parentStyling.borderWidth
    }
    else {
        popUpRect.style.borderWidth = '1'
    }
    if (data.borderStyle !== undefined){
        popUpRect.style.borderStyle = data.borderStyle
    }
    else if (parentStyling.borderStyle !== undefined){
        popUpRect.style.borderStyle = parentStyling.borderStyle
    }
    else {
        popUpRect.style.borderStyle = '1'
    }
}

//--------------------------------------------------------------------------
//Hiding the popUpRect:

function checkIfHideRect (e){
    try{
        if (e.target != popUpRect && popUpRect.style.opacity == '1' && e.target != selectedPart && e.target.parentElement != popUpRect && e.target !== selectedPart.target && selectedPart.target !== currentMouseOver.target){
            //&& e.target.tagName !== 'AREA'
            hideRect(e)
        }}
    catch(e){
        //console.log('someting went wrong',e)
    }
}

function hideRect (e){
        console.log('hiding rect')
        //document.getElementById(focusedTag).style.border = 'none'
        //document.getElementById(focusedTag).style.backgroundColor = ''
        popUpRect.style.height = '0px'
        setTimeout(()=>{
            popUpRect.style.opacity = '0'
            popUpRect.style.height = '0px'
            selectedPart = undefined
            //checkIfShowRect(e)
        },200)
        //closePopUpRectAnimation()
        /*
        for (let i = 0; i < document.getElementsByClassName('labels').length; i++) {
            document.getElementsByClassName('labels')[i].style.zIndex='3'
        }
        */
        //document.getElementById('moreInfo').innerHTML=''
        //popUpRect=undefined
}

//--------------------------------------------------------------------------
//Generate image map from popUpElements data:

function generateImageMap (name, appendLocation){
    let currentImageMap = popUpElements[name]
    let image = document.createElement('img')
    image.onmousedown = 'return false'
    //https://stackoverflow.com/a/704582/19515980
    styleMappedImage(image, currentImageMap)
    image.id = name + 'Image'
    let imageMap = document.createElement('map')
    imageMap.name = name + 'Map'
    imageMap.id = name
    Object.keys(currentImageMap).forEach(x => {
        if (x.includes('Style') === false && x !== 'mappedImage'){
            let area = document.createElement('area')
            let currentArea = currentImageMap[x]
            area.shape = currentArea.shape
            area.coords = currentArea.coords
            area.id = x
            imageMap.appendChild(area)
        }
    })
    if (document.getElementById('dokuwiki__content') !== null && appendLocation !== undefined){
        console.log('appeneded wiki mode')
        appendLocation.appendChild(image)
        appendLocation.appendChild(imageMap)
        currentImageMap.offset = new Point(document.getElementById('dokuwiki__content').getBoundingClientRect().x, document.getElementById('dokuwiki__content').getBoundingClientRect().y)
    }
    else if (appendLocation === undefined || appendLocation === 'auto'){
        document.body.appendChild(image)
        document.body.appendChild(imageMap)
        currentImageMap.offset = calculateOffset(document.body)
    }
    else {
        appendLocation.appendChild(image)
        appendLocation.appendChild(imageMap)
        currentImageMap.offset =
        currentImageMap.offset = new Point(appendLocation.x, appendLocation.y)
    }
    popUpElements[name].mappedImage = image
    image.useMap = '#' + name + 'Map'
    if (currentImageMap.cursorStyle !== undefined){
        enableCustomCursorSupport(name, currentImageMap)
    }
    moveAllowSoundToFront()
}

function moveAllowSoundToFront (){
    let allowSound = document.getElementById('allowSound')
    allowSound.style.zIndex = '3'
    allowSound.style.top = document.body.getBoundingClientRect().y + 'px'
}

function enableCustomCursorSupport (name, currentImageMap){
    let image = name + 'Image'
    document.getElementById(image).style.cursor = 'url(' + currentImageMap.cursorStyle.idle + '), auto'
    document.getElementById(name).addEventListener('pointerover', function (e){
        console.log('changing cursor')
        changeCursor(e, name, currentImageMap)
    })
    document.getElementById(name).addEventListener('pointerenter', function (e){
        console.log('changing cursor')
        changeCursor(e, name, currentImageMap)
    })
    document.getElementById(name).addEventListener('pointerleave', function (e){
        if (e.target !== popUpRect && e.target.id !== name && e.target.parentElement.id !== name){
            console.log('default cursor')
            currentMouseOver.target.style.cursor = 'auto'
            popUpRect.style.cursor = 'auto'
        }
    })
}
/* https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/ */


function changeCursor(e, name, currentImageMap){
    if (e.target.parentElement.id === name && currentImageMap[e.target.id].cursor !== undefined && currentImageMap[e.target.id].cursor !== false){
        console.log('cursor url 1', 'url(' + currentImageMap[e.target.id].cursor + '), auto')
        popUpRect.style.cursor = 'url(' + currentImageMap[e.target.id].cursor + '), auto'
        setTimeout(() => {
            currentMouseOver.target.style.cursor = 'url(' + currentImageMap[e.target.id].cursor + '), auto'
        }, 10)
    }
    else if (e.target.parentElement.id === name && currentImageMap[e.target.id].cursor === undefined){
        console.log('cursor url 2', 'url(' + currentImageMap.cursorStyle.hover + '), auto')
        popUpRect.style.cursor = 'url(' + currentImageMap.cursorStyle.hover + '), auto'
        setTimeout(() => {
            currentMouseOver.target.style.cursor = 'url(' + currentImageMap.cursorStyle.hover + '), auto'
        }, 10)
    }
    else {
        console.log('cursor url 3', 'url(' + currentImageMap.cursorStyle.idle + '), auto')
        let image = name + 'Image'
        document.getElementById(image).style.cursor = 'url(' + currentImageMap.cursorStyle.idle + '), auto'
    }
    return true
}

function styleMappedImage (image, currentImageMap){
    let imageStyle = currentImageMap.imageStyle
    if (imageStyle === undefined){
        image.src = currentImageMap.mappedImage
        return false
    }
    if (imageStyle.opacity !== undefined){
        image.style.opacity = imageStyle.opacity
    }
    if (imageStyle.borderStyle !== undefined){
        image.style.borderStyle = imageStyle.borderStyle
    }
    if (imageStyle.borderColor !== undefined){
        image.style.borderColor = imageStyle.borderColor
    }
    if (typeof imageStyle.width === 'number'){
        image.style.width = imageStyle.width + 'px'
    }
    else {
        image.style.width = 'auto'
    }
    if (typeof imageStyle.height === 'number'){
        image.style.height = imageStyle.height + 'px'
    }
    else {
        image.style.height = 'auto'
    }
    if (typeof imageStyle.left === 'number'){
        console.log('left image style', imageStyle.left)
        enableCustomImagePositioning (image)
        image.style.left = imageStyle.left + 'px'
    }
    else if (typeof imageStyle.left === 'string'){
        enableCustomImagePositioning (image)
        image.style.left = imageStyle.left
    }
    if (typeof imageStyle.right === 'number'){
        enableCustomImagePositioning (image)
        image.style.right = imageStyle.right + 'px'
    }
    else if (typeof imageStyle.right === 'string'){
        enableCustomImagePositioning (image)
        image.style.right = imageStyle.right
    }
    if (typeof imageStyle.top === 'number'){
        enableCustomImagePositioning (image)
        image.style.top = imageStyle.top + 'px'
    }
    else if (typeof imageStyle.top === 'string'){
        enableCustomImagePositioning (image)
        image.style.top = imageStyle.top
    }
    if (typeof imageStyle.bottom === 'number'){
        enableCustomImagePositioning (image)
        image.style.bottom = imageStyle.bottom + 'px'
    }
    else if (typeof imageStyle.bottom === 'string'){
        enableCustomImagePositioning (image)
        image.style.bottom = imageStyle.bottom
    }
    image.src = currentImageMap.mappedImage
}

function enableCustomImagePositioning (image){
        image.style.position = 'absolute'
        image.style.display = 'block'
}

function calculateOffset (appendLocation){
    let offsetX = 0
    let offsetY = 0
    let currentElement = appendLocation
    while (currentElement.parentElement !== null){
        let currentElementPos = currentElement.getBoundingClientRect()
        offsetX += currentElementPos.x
        offsetY += currentElementPos.y
        currentElement = currentElement.parentElement
    }
    return new Point(offsetX, offsetY)
}
        </script>
        <script>
//-----------------------------------------------------------------
//Add to popUpElements:

let locationToAppendTo = document.getElementById('supermarket_design_based_on_set_guidelines').nextElementSibling

popUpElements.desk = {
    face: {
        position: 'right',
        info: 'BUY ONE GET ONE FREE!!!',
        label: 'Buy One Get One Free',
        coords: "818,504,891,545",
        shape: 'rect',
        image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?cache=&media=yuna-visual-input-rabbits-01.png',
        width: 303,
        height: 218,
    },
    maze: {
        position: 'right',
        info: 'FIND & TAKE PICTURE of ALL rabbits GET PRESSENT',
        label: 'Want Pressent?',
        coords: "806,422,887,336",
        shape: 'rect',
        image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?cache=&media=yuna-visual-input-rabbits-02-copy.png',
        width: 222,
        height: 135,
    },
    logo: {
        position: 'left',
        info: 'Lets rest~',
        label: 'Rest Place.',
        coords: "242,263,593,390",
        shape: 'rect',
        image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?cache=&media=yuna-supermarket-logo-copy.png',
        width: 250,
        height: 160,
    },
    stickers01: {
        position: 'above',
        info: 'Congratulations!! You find a Stickers',
        label: 'STICKERS?!',
        coords: "465,38,495,77",
        shape: 'rect',
        image: 'https://renickbell.net/ed/2023light/lib/exe/detail.php?id=yuna-wu-needs-wants&media=yuna-design-supermarket-stickers.png',
        width: 250,
        height: 250,
    },
    doll01: {
        position: 'above',
        info: 'Take picture with her to get pressent!!',
        label: 'A Rabbit!!',
        coords: "404,396,618,537",
        shape: 'rect',
        image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?cache=&media=yuna-supermarket-doll-001-copy.png',
        width: 300,
        height: 300,
    },
    doll02: {
        position: 'above',
        info: 'Take picture with her to get pressent!!',
        label: 'A Rabbit!!',
        coords: "633,63,786,157",
        shape: 'rect',
        image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?cache=&media=yuna-supermarket-doll-002-copy.png',
        width: 300,
        height: 300,
    },
    doll03: {
        position: 'above',
        info: 'Take picture with her to get pressent!!',
        label: 'A Rabbit!!',
        coords: "2,1,188,137",
        shape: 'rect',
        image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?cache=&media=yuna-supermarket-doll-003-copy.png',
        width: 300,
        height: 300,
    },
    stickers02: {
        position: 'above',
        info: 'You Find a buy one get one free ticket!!',
        label: 'A Ticket',
        coords: "211,394,400,535",
        shape: 'rect',
        image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?cache=&media=yuna-supermarket-buy1-get1-free-01-copy.png',
        width: 210,
        height: 297,
    },
    mappedImage: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=yuna-supermarket-layout-map-copy.png',
    //mappedImage: 'w3-schools-workplace.jpg',
    rectStyle: {
        opacity: 1,
        backgroundColor: 'white',
        borderColor: 'black',
        borderWidth: 4,
        width: window.innerWidth / 8,
        height: window.innerHeight / 5.9,
    },
    imageStyle: {
        borderColor: 'black',
        borderStyle: 'solid',
        borderWidth: 2,
        width: 990,
        height: 540,
        left: 200,
    },
}
    
window.addEventListener('load', function (){
document.getElementsByClassName('list-inline')[1].remove()
document.getElementById('dw__footer').style.position = 'absolute'
document.getElementById('dw__footer').style.top = '1000px'
document.getElementsByClassName('dokuwiki')[0].style.height = '10000px'
})
        </script>
    </body>
</html>