steve-light-supermarket-simulator [Steve Wang]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Interactive Supermarket ======

<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-property: opacity, top;*/
    transition-duration: 0.25s;
}

area:hover{
    cursor: pointer;
}

#allowSound {
    padding: 2px;
    background-color: black;
    color: yellow;
    position: absolute;
    text-align: right;
    float: right;
    left 100%;
    position: fixed;
    transition-property: height, opacity, top;
    transition-duration: 0.25s;
    font-size: 60px;
}

#allowSound:hover {
    cursor: pointer;
    opacity: 0.8
}

.triangle-up {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid white;
    transition-property: opacity;
    transition-duration: 0.5s;
    opacity: 0.1;
}

.arrow {
    position: absolute;
    left: 50px;
    width: 50px;
    height: 50px;
  border: solid white;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 3px;
    transition-property: opacity;
    transition-duration: 0.5s;
    opacity: 0.1;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#rect{
    background-color: silver;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 100px;
    transition-property: left;
    transition-duration: 3s;
}

.trolley{
  height: 2px;
  width: 2px;
  background-color: #555;
  border-radius: 50%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 25px solid #555;
  position: absolute;
 /* transition-property: left, top, transform;*/
  transition-property: left, top;
  transition-duration: 3s;
}
</style>
    <body>
        <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('interactive_supermarket').nextElementSibling

popUpElements.steveSupermarket = {
    meat: {
        label: 'Meat',
        coords: "1,152,46,732",
        shape: 'rect',
        info: 'Meat at the side of the supermarket becuase it is one of the only',
    },
    meat2:{
        label: 'Meat',
        coords: "93,393.50001525878906,215,537.5000152587891" ,
        shape: 'rect',
        info: 'Meat near the front of the supermarket becuase people usually go to the supermarket to buy meat.'
    },
    driedFood: {
        label: 'Dried Food',
        coords: "0,0,578,99" ,
        shape: 'rect',
        info: 'Dried foods at the back because they are usually very heavy and should be taken last.'
    },
    health: {
        label: 'Health',
        coords: "630,0,781,102" ,
        shape: 'rect',
        info: 'I think fewer people go to the supermarket to buy health supplies and I think for a supermarket, it is not so important.'
    },
    household: {
        label: 'Household Items',
        coords: "832,0,1120,97" ,
        shape: 'rect',
        info: 'I think for a supermarket household items is less important.'
    },
    seafood1: {
        label: 'Seafood',
        coords: "99,155.5,218,354.5" ,
        shape: 'rect',
        info: 'I think fewer people buy seafood so I placed it at the back.'
    },
    seafood2: {
        label: 'Seafood',
        coords: "266,151.5,409,350.5" ,
        shape: 'rect',
        info: 'I think fewer people buy seafood so I placed it at the back.'
    },
    bakery1: {
        label: 'Bakery',
        coords: "460,152.5,581,350.5" ,
        shape: 'rect',
        info: 'I think fewer people go to the supermarket to buy bread.'
    },
    bakery2: {
        label: 'Bakery',
        coords: "626,145.5,775,226.5" ,
        shape: 'rect',
        info: 'I think fewer people go to the supermarket to buy bread.'
    },
    electronics: {
        label: 'Electronics',
        coords: "826,145.5,969,233.5" ,
        shape: 'rect',
        info: 'I think people do not really go to supermarkets to buy electronics at most batteries. So, I have placed it at the back.'
    },
    vegetables1: {
        label: 'Vegetables',
        coords: "830,278.5,966,346.50001525878906" ,
        shape: 'rect',
        info: 'Vegetables in the same general area so that people can easily find them.'
    },
    vegetables2: {
        label: 'Vegetables',
        coords: "827,401.50001525878906,968,538.5000152587891" ,
        shape: 'rect',
        info: 'Vegetables in the same general area so that people can easily find them.'
    },
    vegetables3: {
        label: 'Vegetables',
        coords: "828,592.5000152587891,966,726.5000152587891" ,
        shape: 'rect',
        info: 'Many people buy vegetables when they go to supermarkets (I think).'
    },
    fruits1: {
        label: 'Fruits',
        coords: "627,280.5,774,345.50001525878906" ,
        shape: 'rect',
        info: 'Fruits in the same general area so that people can easily find them.'
    },
    fruits2: {
        label: 'Fruits',
        coords: "629,399.50001525878906,777,538.5000152587891" ,
        shape: 'rect',
        info: 'Fruits in the same general area so that people can easily find them.'
    },
    fruits3: {
        label: 'Fruits',
        coords: "625,588.5000152587891,775,721.5000152587891" ,
        shape: 'rect',
        info: 'Many people buy fruits when they go to supermarkets (I think).'
    },
    frozenFoods1: {
        label: 'Frozen Foods',
        coords: "261,394.50001525878906,406,535.5000152587891" ,
        shape: 'rect',
        info: 'Froen foods are placed near the front because many people might want to buy frozen foods.'
    },
    frozenFoods2: {
        label: 'Frozen Foods',
        coords: "455,396.50001525878906,576,541.5000152587891" ,
        shape: 'rect',
        info: 'Froen foods are placed near the front because many people might want to buy frozen foods.'
    },
    frozenFoods3: {
        label: 'Frozen Foods',
        coords: "459,588.5000152587891,576,727.5000152587891" ,
        shape: 'rect',
        info: 'The most common frozen foods are placed here.'
    },
    snacks1: {
        label: 'Snacks',
        coords: "93,591.5000152587891,215,732.5000152587891" ,
        shape: 'rect',
        info: 'Snacks at the front of the store because people like to buy snacks and this supermarket should make the purchasing experience as quick as a convenicene store',
    },
    snacks2: {
        label: 'Snacks',
        coords: "264,590.5000152587891,405,729.5000152587891" ,
        shape: 'rect',
        info: 'Snacks at the front of the store because people like to buy snacks and this supermarket should make the purchasing experience as quick as a convenicene store',
    },
    doors: {
        label: 'Doors',
        coords:  "0,737,374,790" ,
        shape: 'rect',
        info: 'With start/finish race flag to make people speed up. Logo to show people how they should shop',
        position: 'above',
        image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=steve-supermarket-logo.png',
        width: 300,
        height: 300,
        imageWidth: 200,
        imageHeight: 200,
                position: 'above',
    },
    doors2: {
        label: 'Doors',
        coords:   "374,737,748,790",
        shape: 'rect',
        info: 'With start/finish race flag to make people speed up. Tell people about the special offers and give them a reason to shop quicker.',
        position: 'above',
        image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=steve-supermarket-visual-ad2.png',
        width: 300,
        height: 500,
        imageWidth: 300,
        imageHeight: 'auto',
                position: 'above',
    },
    doors3: {
        label: 'Doors',
        coords: "748,741,1122,777",
        shape: 'rect',
        info: 'With start/finish race flag to make people speed up. Tell people about the special offers and give them a reason to shop quicker.',
        position: 'above',
        image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=steve-supermarket-visual-ad1.png',
        width: 300,
        height: 500,
        imageWidth: 300,
        imageHeight: 'auto',
    },

    dairy: {
        label: 'Dairy',
        coords: "1018,145,1120,732" ,
        shape: 'rect',
        info: 'At the side of the supermarket because I think many people go to supermarkets to buy dairy.'
    },
    rectStyle: {
        borderColor: 'silver',
        borderStyle: 'solid',
        borderWidth: 1,
    },
    mappedImage: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=steve-supermarket-layout.png',
}
        </script>
        <script>
//--------------------------------------------------------------------------
//steve-supermarket-code-test.js
//--------------------------------------------------------------------------
//Isues:

// Faes/ goes throuhg walls when exiting.
//Sometimes does not exit properly.

//Stops after travelling to a few intersecitons did not enter intersections state is neutral.
//Just does not triggere animation end event.

//gets stuck in intersections

//Trolley does not get removed properly from trolley array

//Animate gradient ideas:
//https://www.geeksforgeeks.org/how-to-animate-gradient-background-smoothly-using-css/

//Use this. Use CSS transition property and use Javascript to change the gradient:
//This is how to make a gradient
//https://www.w3schools.com/css/css3_gradients.asp

//--------------------------------------------------------------------------
//Setup functions:
//--------------------------------------------------------------------------

function roundOff (number,decimalPlaces){
let roundedNumber=number.toFixed(decimalPlaces);
return JSON.parse(roundedNumber)}

function randomRange(min, max,decimalPlaces = 0) {
  return roundOff(min + (max - min) * (Math.random()),decimalPlaces);
}

function safeSplice(inputArray, amountToRemove,indexToRemove,replaceWith) {
  let array1 = inputArray.slice(0, indexToRemove )
if (replaceWith!=undefined){
array1.push(replaceWith)}
  let array2 = inputArray.slice(indexToRemove + amountToRemove, inputArray.length)
  return array1.concat(array2)
}


//--------------------------------------------------------------------------
//Event listeners:
//--------------------------------------------------------------------------

/*
document.addEventListener('pointermove', ((e) => {
    changeArrowOpacity()
}))
*/

window.addEventListener("load", (event) => {
    intersectionCoords = getAbsoluteIntersectionCoords()
    let img = document.getElementById('steveSupermarketImage').getBoundingClientRect()
    startCoords = getStartCoords()
    launchTrolleys(randomRange(10, 15))
    setTimeout(() => {
        startCoords = getStartCoords()
        intersectionCoords = getAbsoluteIntersectionCoords()
    }, 1000)
        if ( document.getElementsByClassName('tools panel panel-default affix-top')[0] !== undefined){
         document.getElementsByClassName('tools panel panel-default affix-top')[0].style.right = '0px'
      }
})

window.addEventListener("resize", (event) => {
handleResize()
})

window.addEventListener('orientationchange', function() {
handleResize()
})
function handleResize (){
    intersectionCoords = getAbsoluteIntersectionCoords()
    let img = document.getElementById('steveSupermarketImage').getBoundingClientRect()
    startCoords = getStartCoords()
        if ( document.getElementsByClassName('tools panel panel-default affix-top')[0] !== undefined){
         document.getElementsByClassName('tools panel panel-default affix-top')[0].style.right = '0px'
      }
}

//--------------------------------------------------------------------------
//Light Arrows:
//--------------------------------------------------------------------------

function changeArrowOpacity (){
    let arrows = [...document.getElementsByClassName('arrow up')]
    arrows.push(... document.getElementsByClassName('triangle-up'))
    let min = new Point(mouse.x - 50, mouse.y - 50)
    let max = new Point(mouse.x + 50, mouse.y + 50)
    arrows.forEach(x => {
        let arrowInfo = x.getBoundingClientRect()
        if (arrowInfo.x > min.x && arrowInfo.x < max.x && arrowInfo.y > min.y && arrowInfo.y < max.y){
            x.style.opacity = mouse.distance(new Point(arrowInfo.x, arrowInfo.y)) / 50
        }
        else if (x.style.opacity !== 0){
            x.style.opacity = 0
        }
    })
}

//--------------------------------------------------------------------------
//Trolley code:
//--------------------------------------------------------------------------
let relativeCoords = [
    [new Point(69, 120), new Point(240, 120), new Point(432, 120), new Point(602, 120), new Point(796, 120), new Point(990, 120)],
    [new Point(69, 378), new Point(240, 378), new Point(432, 378), new Point(602, 378), new Point(796, 378), new Point(990,378)],
    [new Point(69, 560), new Point(240, 560), new Point(432, 560), new Point(602, 560), new Point(796, 560), new Point(990, 560)],
    [new Point(69, 745), new Point(240, 745), new Point(432, 745), new Point(602, 745), new Point(796, 745), new Point(990, 745)],
  //  [new Point(69, 811), new Point(240, 811), new Point(432, 811), new Point(602, 811), new Point(796, 811), new Point(990, 811)]
]

let relativeStarts = [new Point(23, 874), new Point(115, 874), new Point(336, 874), new Point(517, 874), new Point(701, 874), new Point(876, 874), new Point(1063, 874)] 

let intersectionCoords; 
let startCoords;
function getAbsoluteIntersectionCoords (){
    let calculatedPoints = []
    let img = document.getElementById('steveSupermarketImage').getBoundingClientRect()
    let parentInfo;
    if (document.getElementsByClassName('trolley').length > 0){
        parentInfo = document.getElementsByClassName('trolley')[0].parentElement.getBoundingClientRect()
    }
    else {
        parentInfo = {x: 0, y: 0}
    }
    let bodyInfo = document.body.getBoundingClientRect()
    let wikiInfo = {x: 0, y: 0}
    if (document.getElementsByClassName('collapse navbar-collapse').length > 0){
        wikiInfo = document.getElementsByClassName('collapse navbar-collapse')[0].getBoundingClientRect()
        wikiInfo.height -= 45
    }
    else{
        wikiInfo = {x: 0, y: 0}
    }
    let wikiInfo2;
    if ( document.getElementsByClassName('page panel-body').length > 0){
        wikiInfo2 = document.getElementsByClassName('page panel-body')[0].getBoundingClientRect()
    }
    else{
        wikiInfo2 = {x: 0, y: 0}
    }
    if (bodyInfo.y < 0){
        bodyInfo.y *= -1
    }
    return relativeCoords.map(x => {
        return x.map(p => {
            console.log(new Point(p.x + img.x + parentInfo.x, p.y + img.y + parentInfo.y + bodyInfo.y - wikiInfo.height) )
            return new Point(p.x + img.x + parentInfo.x, p.y + img.y + bodyInfo.y + wikiInfo.height) 
        })
    })
}


function getStartCoords (){
    let calculatedPoints = []
    let img = document.getElementById('steveSupermarketImage').getBoundingClientRect()
    let parentInfo;
    if (document.getElementsByClassName('trolley').length > 0){
        parentInfo = document.getElementsByClassName('trolley')[0].parentElement.getBoundingClientRect()
    }
    else {
        parentInfo = {x: 0, y: 0}
    }
    let bodyInfo = document.body.getBoundingClientRect()
    let wikiInfo = {x: 0, y: 0}
    if (document.getElementsByClassName('collapse navbar-collapse').length > 0){
        wikiInfo =   document.getElementsByClassName('collapse navbar-collapse')[0].getBoundingClientRect()
        wikiInfo.height -= 35
    }
    else{
        wikiInfo = {x: 0, y: 0}
    }
    let wikiInfo2;
    if ( document.getElementsByClassName('page panel-body').length > 0){
        wikiInfo2 =    document.getElementsByClassName('page panel-body')[0].getBoundingClientRect()
    }
    else{
        wikiInfo2 = {x: 0, y: 0}
    }
    if (bodyInfo.y < 0){
        bodyInfo.y *= -1
    }
    return relativeStarts.map(p => {
        console.log(p.y, img.y, bodyInfo.y, wikiInfo.height)
            return new Point(p.x + img.x + parentInfo.x, p.y + img.y + bodyInfo.y + wikiInfo.height) 
    })
}

const cssColors = ['aqua', 'aliceblue', 'antiquewhite', 'beige', 'bisque', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgreen', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'green', 'greenyellow', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgreen', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightsteelblue', 'lightyellow', 'lime', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen']

let takenColors=[]
let newUniqueColor = ''
function uniqueColor (){
    if (takenColors.length === 146){
        return 'No More colors left'
    }
    let newColor= cssColors[randomRange(0, cssColors.length -1)]
    let state=true
    takenColors.forEach(x=>{
    if (x==newColor){
      uniqueColor();
    state=false
    }
    })
    if (state==true){
    newUniqueColor=newColor
    console.log(newColor)}
}

class Trolley {
    constructor(arrayIndex){
        this.trolleyIndex = arrayIndex
        uniqueColor()
        this.trolley = document.createElement('div')
        this.trolley.id = arrayIndex
        this.trolley.className = 'trolley'
        //document.getElementById('steveSupermarketImage').appendChild(this.trolley)
        this.matrixPos = [3, randomRange(0, intersectionCoords[3].length - 1)]
        document.body.appendChild(this.trolley)
        this.trolleyColor = newUniqueColor
        this.trolley.style.borderBottomColor = this.trolleyColor
        let trolleyPosition = this.trolley.getBoundingClientRect()
        let spawnPos = startCoords[randomRange(0, startCoords.length -1)]
        this.trolley.className = 'trolley'
        this.trolley.style.left = trolleyPosition.x + 1 + 'px'
        this.trolley.style.top = trolleyPosition.y + 1 + 'px'
        this.trolley.style.left = spawnPos.x + randomRange(-20, 20) + 'px'
        this.trolley.style.top = spawnPos.y + randomRange(-20, 20) + 'px'
        setTimeout(() => {
            let exitPos = intersectionCoords[3][this.matrixPos[1]]
            //this.trolley.style.transitionProperty = 'left, top'
            //this.trolley.style.transitionDuration = '3s'
            trolleyPosition = this.trolley.getBoundingClientRect()
            if (trolleyPosition.x < exitPos.x) {
                this.rotateTrolley(90)
            }
            else{
                this.rotateTrolley(-90)
            }
            this.trolley.style.left = exitPos.x + 'px'
            console.log('start moving to exit X')
            setTimeout(() => {
                this.rotateTrolley(0)
                this.trolley.style.top = exitPos.y + 'px'
                console.log('start moving to exit Y')
                this.trolley.addEventListener('transitionend', ((e) => {
                    if (e.propertyName === 'top' || e.propertyName === 'left' && e.elapsedTime > 0.8){
                        console.log('next action event triggered', e.propertyName, this.trolleyColor, this.trolley.getAnimations().length, 'time',  e.elapsedTime)
                        this.nextAction()
                    }
                }));
            }, 5000)
        }, randomRange(10, 4000))
        this.trolleyRotation = 0
        this.trolleyState = 'nuetral'
        //this.nextAction()
        this.enteredIntersections = 0
        this.traveledIntersections = 0
        this.lastAction;
        //this.offPathBy = 0
        this.enterInfo = {}
    }
    removeTrolley (){
        this.trolleyState = 'finished'
        this.trolley.style.opacity = '0'
        setTimeout(() => {
            this.trolley.remove()
        }, 8800)
        //takenColors = safeSplice(takenColors, 1, takenColors.indexOf(this.trolleyColor))
        //trolleys = safeSplice(trolleys, 1, trolleys.indexOf(this))
        //trolleys = safeSplice(trolleys, 1, this.trolleyIndex)
        let trolleyIndex = trolleys.indexOf(this)
        console.log('trolley iindex', trolleyIndex, this.trolleyColor)
        trolleys.splice(trolleyIndex, 1)

    }
    exitSupermarket (){
        this.goToNextIntersection()
        this.trolley.style.left = intersectionCoords[this.matrixPos[0]][this.matrixPos[1]].x + 'px'
        setTimeout(() => {
            this.rotateTrolley(180)
            this.trolleyState = 'exiting'
            this.trolley.style.top = startCoords.y + 'px'
        }, 2000)
        //this.trolleyGoal = 'leave'
        //this.trolley.style.top = intersectioncoords[3][this.matrixpos[1]].y + 'px'
        //this.rotateTrolley(180)
    }
    findStop (){
        if (this.stopSpot === undefined){
            this.stopSpot = startCoords[randomRange(0, startCoords.length - 1)]
            this.trolleyState = 'exiting'
            this.rotateTrolley(180)
            this.trolley.style.top = this.stopSpot.y + 'px'
            return false
        }
        else{
            this.trolleyState = 'exited'
            let trolleyPosition = this.trolley.getBoundingClientRect()
            if (trolleyPosition.x < this.stopSpot.x) {
                this.rotateTrolley(90)
            }
            else{
                this.rotateTrolley(-90)
            }
            this.trolley.style.left = this.stopSpot.x + 'px'
            /*
            setTimeout(() => {
                if (this.trolleyState === 'exited'){
                    this.removeTrolley()
                }
            }, 2000)
            */
            return false
        }
    }
    laneChange (rotationAmount){
        //let trolleyPosition = this.trolley.getBoundingClientRect()
        //this.trolley.style.transitionProperty = 'none'
        //this.trolley.style.transitionDuration = 'none'
        let trolleyPosition = intersectionCoords[this.matrixPos[0]][this.matrixPos[1]]
        //this.trolley.style.position = 'absolute'
        //this.trolley.style.left = (trolleyPosition.x + 1) + 'px'
        //this.trolley.style.top = (trolleyPosition.y + 1) + 'px'
        //this.goToCurrentMatrixPosWithoutAnimation()
        this.trolley.style.transitionDuration = '0.2s'
        if (rotationAmount === 0){
            this.trolley.style.left = (trolleyPosition.x - 17.5) + 'px'
            console.log('lane change top')
            //this.trolley.style.right = (trolleyPosition.right + 95) + 'px'

        }
        else if (rotationAmount === 180){
            this.trolley.style.left = (trolleyPosition.x + 10) + 'px'
            console.log('lane change bot')
            //this.trolley.style.right = (trolleyPosition.right - 8) + 'px'
        }
        else if (rotationAmount === 90){
            //PROBLEM
            console.log('lane change right', trolleyPosition)
            this.trolley.style.top = (trolleyPosition.y - 30) + 'px'
            //this.trolley.style.bottom = (trolleyPosition.bottom + 25) + 'px'
        }
        else {
            this.trolley.style.top = (trolleyPosition.y - 5) + 'px'
            console.log('lane change left')
            //this.trolley.style.bottom = (trolleyPosition.bottom - 5) + 'px'
        }
    }
    goToCurrentMatrixPosWithoutAnimation (){
        let matrixPos = intersectionCoords[this.matrixPos[0]][this.matrixPos[1]]
        this.trolley.style.left = matrixPos.x + 'px'
        this.trolley.style.top = matrixPos.y + 'px'
    }
    goToNextIntersection(){
        let changeDirection = randomRange(0, 2)
        console.log('changeDirection', changeDirection)
        if (changeDirection === 0){
            this.changeLeft()
        }
        else { 
            this.changeTop()
        }
        this.traveledIntersections += 1
    }

    changeTop (){
        let rotationAmount= 0
        if (this.matrixPos[0] !== 3 && randomRange(0, 9) < 4){
            this.matrixPos = [this.matrixPos[0] + 1, this.matrixPos[1]]
            console.log('op1 original X:', this.trolley.getBoundingClientRect().y, 'after' , intersectionCoords[this.matrixPos[0]][this.matrixPos[1]].x + 'px')
            rotationAmount = 180
        }
        else if (this.matrixPos[0] !== 0){
            this.matrixPos = [this.matrixPos[0] - 1, this.matrixPos[1]]
           console.log('op2 original X:', this.trolley.getBoundingClientRect().y, 'after' , intersectionCoords[this.matrixPos[0]][this.matrixPos[1]].x + 'px')
        }
        else if (this.matrixPos[0] !== 3){
            this.matrixPos = [this.matrixPos[0] + 1, this.matrixPos[1]]
            console.log('op3 original X:', this.trolley.getBoundingClientRect().x, 'after' , intersectionCoords[this.matrixPos[0]][this.matrixPos[1]].x + 'px')
            rotationAmount = 180
        }
        this.laneChange(rotationAmount)
        setTimeout(() => {
            this.trolley.style.transitionDuration = randomRange(1, 3) + 's'
            this.trolley.style.top = intersectionCoords[this.matrixPos[0]][this.matrixPos[1]].y + 'px'
            this.rotateTrolley(rotationAmount)
        }, 10)
    }

    changeLeft (){
        let rotationAmount= 90
        if (this.matrixPos[1] !== 5 && randomRange(0, 1) === 0){
            this.matrixPos = [this.matrixPos[0], this.matrixPos[1] + 1]
            console.log('op4, originalY: ', this.trolley.getBoundingClientRect().y,  intersectionCoords[this.matrixPos[0]][this.matrixPos[1]].x + 'px')
        }
        else if (this.matrixPos[1] !== 0){
            this.matrixPos = [this.matrixPos[0], this.matrixPos[1] - 1]
            console.log('op5, originalY: ', this.trolley.getBoundingClientRect().y,  intersectionCoords[this.matrixPos[0]][this.matrixPos[1]].x + 'px')
            rotationAmount = 270
        }
        else {
            this.matrixPos = [this.matrixPos[0], this.matrixPos[1] + 1]
           console.log('op6, originalY: ', this.trolley.getBoundingClientRect().y,  intersectionCoords[this.matrixPos[0]][this.matrixPos[1]].x + 'px')
        }
        this.laneChange(rotationAmount)
        setTimeout(() => {
            this.trolley.style.transitionDuration = randomRange(0.5, 3) + 's'
            this.trolley.style.left = intersectionCoords[this.matrixPos[0]][this.matrixPos[1]].x + 'px'
            this.rotateTrolley(rotationAmount)
        }, 10)
    }

    rotateTrolley (targetAngle){
        //let amountToRotate = getRotationAngle(this.trolley, targetAngle);
        //let amountToRotate = this.trolleyRotation - targetAngle
        this.trolley.style.transform = 'rotate(' + targetAngle + 'deg)'
    }

    enterIntersection (){
        let availableEnterDirections = this.findAllEnterDirections()
        let chosenDirection = availableEnterDirections[randomRange(0, availableEnterDirections.length - 1)]
        this.defineEnterInfo(availableEnterDirections, chosenDirection)
        this.followEnterInfo()
        setTimeout(() => {
            this.trolleyBackToIntersection()
        }, randomRange(6000, 10000))
    }

    followEnterInfo (){
        let currentMatrixPos = intersectionCoords[this.matrixPos[0]][this.matrixPos[1]]
        this.trolleyState = 'entered'
        if (this.enterInfo.first === 'left'){
            this.trolley.style.left = (currentMatrixPos.x + this.enterInfo.left) + 'px'
            this.decideRotationDirection('left')
        }
        else{
            this.trolley.style.top = (currentMatrixPos.y + this.enterInfo.top) + 'px'
            this.decideRotationDirection('top')
        }
    }

    defineEnterInfo (availableEnterDirections, chosenDirection){
        if(chosenDirection === 'left'){
            this.enterInfo.left = -randomRange(10, 25)
            this.defineEnterTopInfo()
        }
        else if(chosenDirection === 'right'){
            this.enterInfo.left = randomRange(10, 25)
            this.defineEnterTopInfo()
        }
        else if(chosenDirection === 'top'){
            this.enterInfo.top = -randomRange(10, 25)
            this.defineEnterLeftInfo()
        }
        else if(chosenDirection === 'down'){
            this.enterInfo.top = randomRange(10, 25)
            this.defineEnterLeftInfo()
        }
    }

    defineEnterLeftInfo (){
        this.enterInfo.first = 'top'
        if (randomRange(0, 1) === 0){
            this.enterInfo.left = -randomRange(10,25)
        }
        else{
            this.enterInfo.left = randomRange(10,25)
        }
    }

    defineEnterTopInfo (){
        this.enterInfo.first = 'left'
        if (randomRange(0, 1) === 0){
            this.enterInfo.top = -randomRange(10,25)
        }
        else{
            this.enterInfo.top =  randomRange(10,25)
        }
    }

    decideRotationDirection(direction){
        if (direction === 'left' && this.enterInfo.left < 0){
            this.rotateTrolley(270)
        }
        else if (direction === 'left' && this.enterInfo.left > 0){
            this.rotateTrolley(90)
        }
        else if (direction === 'top' && this.enterInfo.top < 0){
            this.rotateTrolley(0)
        }
        else if (direction === 'top' && this.enterInfo.top > 0){
            this.rotateTrolley(180)
        }
    }

    completeSecondAction (){
        let currentMatrixPos = intersectionCoords[this.matrixPos[0]][this.matrixPos[1]]
        let trolleyPosition = this.trolley.getBoundingClientRect()
        if (this.enterInfo.first === 'left'){
            if (trolleyPosition.y < currentMatrixPos.y) {
                this.rotateTrolley(180)
            }
            else{
                this.rotateTrolley(0)
            }
            this.trolley.style.top = (currentMatrixPos.y + this.enterInfo.top) + 'px'
            this.decideRotationDirection('top')
        }
        else if (this.enterInfo.first === 'top'){
            if (trolleyPosition.x < currentMatrixPos.x) {
                this.rotateTrolley(90)
            }
            else{
                this.rotateTrolley(-90)
            }
            this.trolley.style.left = (currentMatrixPos.x + this.enterInfo.left) + 'px'
            this.decideRotationDirection('left')
        }
    }
    findAllEnterDirections (){
        let enterDirections = ['right', 'left', 'top']
        if (this.matrixPos[0] !== 3){
            enterDirections.push('down')
        }
        return enterDirections
    }
    trolleyBackToIntersection (){
        this.trolleyState = 'backing'
        let currentMatrixPos = intersectionCoords[this.matrixPos[0]][this.matrixPos[1]]
        if (this.enterInfo.first === 'left'){
            this.trolley.style.left = (currentMatrixPos.x - this.enterInfo.left) + 'px'
            this.enterInfo.left *= -1
            this.decideRotationDirection('left')
        }
        else{
            this.trolley.style.top = (currentMatrixPos.y - this.enterInfo.top) + 'px'
            this.enterInfo.top *= -1
            this.decideRotationDirection('top')
        }
        if (this.trolleyState === 'backing'){
            if (this.enterInfo.first === 'left'){
                this.trolley.style.top = (currentMatrixPos.y - this.enterInfo.top) + 'px'
            this.enterInfo.top *= -1
            this.decideRotationDirection('top')
            }
            else if (this.enterInfo.first === 'top'){
                this.trolley.style.left = (currentMatrixPos.x - this.enterInfo.left) + 'px'
                this.enterInfo.left *= -1
                this.decideRotationDirection('left')
            }
            if (this.trolleyState === 'backing'){
                this.trolleyState = undefined
            }
        }
    }
    goToCurrentMatrixPos (){
        let matrixCoords = intersectionCoords[this.matrixPos[0]][this.matrixPos[1]]
        let trolleyPosition = this.trolley.getBoundingClientRect()
        if (trolleyPosition.x < matrixCoords.x) {
            this.rotateTrolley(90)
        }
        else{
            this.rotateTrolley(-90)
        }
        this.trolleyState = 'readyToLeave'
        this.trolley.style.left = matrixCoords.x + 'px'
        //this.trolleyState = 'STOP'
        setTimeout(() => {
            this.rotateTrolley(180)
            this.trolleyState = 'readyToLeave'
            this.trolley.style.top = matrixCoords.y + 'px'
            this.trolleyState = 'readyToLeave'
        }, 1000)
    }
    recalabrateMatrix (){
        let trolleyPosition = new Point(this.trolley.getBoundingClientRect().x, this.trolley.getBoundingClientRect().y)
        let nearestPoint;
        let smallestDifference = Infinity
        intersectionCoords.forEach((x, i) => {
            x.forEach((r, p) => {
                let distanceBetween = r.distance(trolleyPosition)
                if (distanceBetween < smallestDifference){
                    nearestPoint = [i, p]
                    smallestDifference = distanceBetween
                }
            })
        })
        this.matrixPos = nearestPoint
    }
    nextAction (){
        if (this.trolley.getAnimations().length !== 0){
            return false
        }
        if (this.trolleyState === 'STOP'){
            return false
        }
        if (this.traveledIntersections % 5 === 0){
            this.recalabrateMatrix()
        }
        if (this.trolleyState === 'entered'){
            this.completeSecondAction()
            return false
        }
        else if (this.trolleyState === 'readyToLeave'){
            this.exitSupermarket()
        }
        else if (this.trolleyState === 'exiting'){
           console.log('going to find stop')
            setTimeout(() => {
                this.findStop()
            }, 2000)
            return false
        }
        else if (this.trolleyState === 'exited'){
           console.log('removing trolley')
            this.removeTrolley()
            return false
        }
        else if (this.trolleyState === 'backing'){
            this.trolleyBackToIntersection()
            return false
        }
        else if (this.trolleyState === 'finished'){
            this.trolley.remove()
            return false
        }
        let action = randomRange(0, 10)
        if (action >= 8 && this.enteredIntersections >= 10 && this.trolleyGoal !== 'leave'){
           console.log('leaving supermarket')
            this.lastAction = 'leave'
            this.trolleyGoal = 'leave'
            this.recalabrateMatrix()
            this.goToCurrentMatrixPos()
        }
        else if (action >= 5 && action < 8 && this.traveledIntersections >= 5 && this.trolleyGoal !== 'leave' && this.lastAction !== 'enter'){
            this.lastAction = 'enter'
            console.log('entering intersection')
            this.enteredIntersections += 1
            this.enterIntersection()
        }
        else if (this.trolleyGoal !== 'leave'){
            this.lastAction = 'move'
            console.log('going to next intersection')
            this.goToNextIntersection()
        }
    }
}

function getRotationAngle(element, targetAngle) {
  let st = window.getComputedStyle(element, null);
  let tr = st.getPropertyValue('transform');
  let angle = 0;
  if (tr && tr !== 'none') {
    let values = tr.split('(')[1].split(')')[0].split(',');
    let a = values[0];
    let b = values[1];
    angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
  }
  let amountToRotate = targetAngle - angle;
  return amountToRotate;
}

let trolleys = new Proxy([], {
    deleteProperty: function(target, property) {
      delete target[property];
      checkIfLaunchMoreTrolleys()
      return true;
    },
    set: function(target, property, value, receiver) {      
      target[property] = value;
      console.log("Set %s to %o", property, value);
      return true;
    }
});
//proxy/monitor array: https://stackoverflow.com/a/5100420/19515980

function checkIfLaunchMoreTrolleys (){
    if (trolleys.length <= 1){
        launchTrolleys(randomRange(3, 10))
    }
    else if (trolleys.length >= 20){
        launchTrolleys(randomRange(0, 1))
    }
    else if (randomRange(0, 10) <= 8){
        launchTrolleys(randomRange(0, 20))
    }
}

function launchTrolleys (amount){
    //startCoords = getStartCoords()
    for (let i = 0; i < amount; i++) {
        setTimeout(() => {
            trolleys.push(new Trolley(trolleys.length - 1))
        }, randomRange(0, 6000))
    }
}

let logo = document.createElement('img')
function showLogo(){
    logo.style.position = 'absolute'
    logo.style.right = '10px'
    logo.src = 'steve-supermarket-logo.png'
    logo.style.width = '300px'
    logo.style.height = '300px'
    document.body.appendChild(logo)
}

//--------------------------------------------------------------------------
//setUp wiki
//--------------------------------------------------------------------------

window.addEventListener("load", (event) => {
    if (document.getElementsByClassName('panel-heading toc-title').length > 0){
        document.getElementsByClassName('panel-heading toc-title')[0].remove()
        document.getElementsByClassName('nav toc')[0].remove()
        //document.getElementsByClassName('nav toc')[1].remove()
    }
})


//showLogo()

//citation:
//https://stackoverflow.com/questions/14348856/detect-if-element-is-being-transitioned
//proxy/monitor array: https://stackoverflow.com/a/5100420/19515980

        </script>
                <div id = 'allowSound'> Click to enable sound for full supermarket experience <br> 點擊以啟用聲音以獲得完整的超市體驗</div>
        <script>
//--------------------------------------------------------------------------
//steve-supermarket-audio.js
//--------------------------------------------------------------------------
//Record announcement sounds
//setUp:

let announcementInProgress = false

steveSupermarketResources = {}

steveSupermarketResources.roundOff = function (number,decimalPlaces){
let roundedNumber=number.toFixed(decimalPlaces);
return JSON.parse(roundedNumber)}

steveSupermarketResources.randomRange = function (min, max,decimalPlaces) {
if (decimalPlaces==undefined){decimalPlaces=0}
  return steveSupermarketResources.roundOff(min + (max - min) * (Math.random()),decimalPlaces);
}

//--------------------------------------------------------------------------
//Time:
//--------------------------------------------------------------------------

steveSupermarketResources.getCurrentTime = function () {
  const date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  const currentTime = hours + ':' + minutes + ' ' + ampm;
  return currentTime;
}

steveSupermarketResources.metaphors = [
  "Time is money, and just like money, it slips through your fingers if you don't use it wisely.",
  "Spending time is like spending money - if you don't invest it wisely, you'll end up with nothing to show for it.",
  "Time is the currency of life, and just like money, you need to spend it wisely to get the most out of it.",
  "Every minute wasted is like throwing money down the drain.",
  "Time is like a precious gemstone, and just like a gemstone, it's important to use it in the best way possible to get the most value out of it.",
  "Time is a limited resource, just like money. If you don't spend it wisely, you'll end up regretting it later.",
  "Time is like a ticking clock, and just like the hands of the clock never stop moving, time never stops ticking away.",
  "Time is the most valuable commodity, just like money. The more you invest it, the greater the returns you'll get.",
  "Time is like a rare vintage wine - it only gets better with age, but you need to enjoy it while it lasts.",
  "Time is like a precious gift, and just like any gift, it should be cherished and used wisely.",
  "Time flies when you're having fun, just like a bird soaring through the sky at top speed.",
  "Time is like a train that never stops moving forward, no matter how much we want it to slow down or stop.",
  "Time is like a sprinter racing towards the finish line, moving quickly and purposefully towards its end.",
  "Time moves at the speed of light, just like a beam of energy racing through the universe.",
  "Time is like a river flowing swiftly towards its destination, carving its way through the landscape and changing everything it touches.",
  "Time is like a whirlwind, moving quickly and unpredictably, leaving nothing in its path untouched.",
  "Time is like a speeding bullet, moving so fast that it's impossible to keep up with it.",
  "Time is like a fast-moving current in the ocean, constantly moving forward and reshaping everything in its path.",
  "Time is like a raging wildfire, spreading quickly and consuming everything in its path.",
  "Time is like a high-speed train, moving swiftly towards its destination, with no time to waste.",
  "Time is like a ticking time bomb, counting down the seconds until it explodes and runs out.",
  "Time is like a tornado, moving at breakneck speed and creating chaos wherever it goes.",
  "Time is like a rollercoaster, with its ups and downs, twists and turns, and moments of both exhilaration and fear.",
  "Time is like a jet plane, moving quickly and efficiently towards its destination, with no time to waste.",
  "Time is like a fast-paced dance, moving quickly and gracefully, with every step counting towards the final outcome.",
  "Time is like a marathon, a long and arduous journey that requires persistence and endurance to complete.",
  "Time is like a pendulum swinging back and forth, with each passing moment moving it closer to its final destination.",
  "Time is like a shooting star, a brief but dazzling moment that leaves a lasting impact on those who witness it.",
  "Time is like a busy intersection, with cars and pedestrians moving quickly and constantly, with no time to waste.",
  "Time is like a drumbeat, moving at a steady pace, counting out the moments of our lives."
];

steveSupermarketResources.timeAnnouncementAudio = new Audio('path')
steveSupermarketResources.announceTime = setInterval(() => {
    startSupermarketAnnouncement()
}, 60000);
//}, 3000)

function startSupermarketAnnouncement (){
    //steveSupermarketResources.timeAnnouncementAudio.play()
    announcementInProgress = true
    chosenAudio.pause()
    let time = new SpeechSynthesisUtterance(steveSupermarketResources.getCurrentTime())
    time.volume = 0.5
    speechSynthesis.speak(time)
    let announceMetaphore = new SpeechSynthesisUtterance(steveSupermarketResources.metaphors[steveSupermarketResources.randomRange(0, steveSupermarketResources.metaphors.length - 1)])
    announceMetaphore.volume = 0.5
    speechSynthesis.speak(announceMetaphore)
    announceMetaphore.addEventListener('end', announcementFinished)
}

function announcementFinished (e){
    setTimeout(() => {
        announcementInProgress = false
        console.log('anouncement finished')
        chosenAudio.play()
        e.target.removeEventListener('end', announcementFinished)
        return true
    }, 100)
}
    window.scrollTo(0, 0);
    
// --------------------------------------------------------------------------
// Music:
// --------------------------------------------------------------------------

//let audioLinks = ['http://127.0.0.1:8080/steve-400-temp-supermarket-audio.mp3', 'http://127.0.0.1:8080/steve-450-temp-supermarket-audio.mp3', 'http://127.0.0.1:8080/steve-500-temp-supermarket-audio.mp3', 'http://127.0.0.1:8080/steve-550-temp-supermarket-audio.mp3', 'http://127.0.0.1:8080/steve-600-temp-supermarket-audio.mp3', 'http://127.0.0.1:8080/steve-650-temp-supermarket-audio.mp3']

let audioLinks = ['https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=steve-400-temp-supermarket-audio.mp3', 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=steve-450-temp-supermarket-audio.mp3', 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=steve-500-temp-supermarket-audio.mp3','https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=steve-550-temp-supermarket-audio.mp3','https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=steve-600-temp-supermarket-audio.mp3','https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=steve-650-temp-supermarket-audio.mp3']


let audioFiles = audioLinks.map(x => {
    return new Audio(x)
})

let chosenAudio = audioFiles[0]

function pauseAllAudios() {
    audioFiles.forEach(x => {
        x.pause()
    })
}

function pickMusicToPlay (){
    if (announcementInProgress === false){
        //chosenAudio = undefined
        let chosenIndex =  randomRange(0, audioFiles.length - 1)
        console.log('chosenIndex', chosenIndex)
        chosenAudio = audioFiles[chosenIndex]
        //chosenAudio.preservesPitch = true
        //chosenAudio.playbackRate = randomRange(1,2, 2)
        chosenAudio.currentTime = randomRange(0, chosenAudio.duration)
        chosenAudio.loop = true
        chosenAudio.volume = 1
        pauseAllAudios()
        setTimeout(() => {
            pickMusicToPlay()
        }, randomRange(2000, 10000))
    }
    if (announcementInProgress === false){
        chosenAudio.play()
    }
}

function musicReady (){
    console.log('starting music')
    audioFiles[audioFiles.length - 1].removeEventListener('canplaythrough', musicReady)
    //document.removeEventListener('click', musicReady)
    pickMusicToPlay()
}

audioFiles[audioFiles.length - 1].addEventListener('canplaythrough', musicReady)

//document.addEventListener('click', musicReady)
       </script>
    </body>
</html>



Icons in supermarket are from [[https://www.bing.com/create|BING image generator]] and [[https://stablediffusionweb.com/|Stable Defusion]]

Interactive supermarket design that also acts as a simulation of the shopping experience in this supermarket.












===== Ads at the front of the store =====
{{:steve-supermarket-visual-ad1.png?400|}}
{{:steve-supermarket-visual-ad2.png?800|}}

===== Inside each section =====
Example meat section.
There will be these vending machine things where you can put your phone near it and it will receive your order. The order can be placed in the supermarket app.


{{:steve-supermarket-normal-vending-machines.png?400|}}
{{:steve-supermarket-offer-vending-machines.png?400|}}

How products will be placed into the cart.


{{:steve-supermarket-vending-machine-process.png|}}

If there is not cart, products will be lowered down in a basket which the customer can then take the whole basket or products in it. The entrances of the vending machine can be seen from all four sides.