Created
October 13, 2024 19:40
-
-
Save VityaSchel/4f21c3e79f0c5370c5844a8ea32bba4c to your computer and use it in GitHub Desktop.
Based on window.vids. To run: place Hotel.m4v near this html file and start simple http server that hosts both of these files.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Navigation test</title> | |
| <script src="./data.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| video { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| </head> | |
| <video src="./Hotel.m4v" muted preload="none"></video> | |
| <script defer async> | |
| var video = document.querySelector('video'); | |
| let interactionsLocked = false | |
| const map = Object.fromEntries(_.chunk(window.adonmap, 4).map(a => [a[0], { duration: a[1], start: a[2], info: a[3] }])) | |
| // let looping = undefined | |
| // setInterval(() => { | |
| // if(looping !== undefined) { | |
| // if(video.currentTime > looping.start + looping.duration) { | |
| // video.currentTime = looping.start; | |
| // } | |
| // } | |
| // }, 1) | |
| let orientation = 'S', coordinates = [80, 20] | |
| let loopingInterval = undefined | |
| let currentFragmentName = '' | |
| function govid(name) { | |
| currentFragmentName = name | |
| if(Object.hasOwn(map, name) === false) { | |
| console.error('Fragment', name, 'not found') | |
| return | |
| } | |
| console.log('Playing', name, '...') | |
| clearInterval(loopingInterval) | |
| looping = map[name] | |
| video.currentTime = map[name].start | |
| video.play() | |
| const loop = () => { | |
| loopingInterval = setTimeout(() => { | |
| video.currentTime = map[name].start | |
| loop() | |
| }, map[name].duration * 1000) | |
| } | |
| loop() | |
| } | |
| setTimeout(() => { | |
| govid(`${coordinates[0]}${coordinates[1]}-${orientation}H`) | |
| }, 10) | |
| function tp(x, y, orient = 'S') { | |
| coordinates = [x, y] | |
| orientation = orient | |
| govid(`${coordinates[0]}${coordinates[1]}-${orientation}H`) | |
| } | |
| function nextAvailableOrientation(coordinates, currentOrientation, direction) { | |
| const availableOrientations = ['N', 'E', 'S', 'W'] | |
| const currentOrientationIndex = availableOrientations.indexOf(currentOrientation) | |
| const nextOrientationIndex = direction === 'left' | |
| ? currentOrientationIndex - 1 < 0 | |
| ? availableOrientations.length - 1 | |
| : currentOrientationIndex - 1 | |
| : currentOrientationIndex + 1 >= availableOrientations.length | |
| ? 0 | |
| : currentOrientationIndex + 1 | |
| const nextOrientation = availableOrientations[nextOrientationIndex] | |
| const doesNextExists = Object.hasOwn(map, `${coordinates[0]}${coordinates[1]}-${nextOrientation}H`) | |
| if(doesNextExists) { | |
| return nextOrientation | |
| } else { | |
| return nextAvailableOrientation(coordinates, nextOrientation, direction) | |
| } | |
| } | |
| window.addEventListener('keydown', e => { | |
| if(interactionsLocked) return | |
| if(e.key === 'w') { | |
| let coordinatesStr = `${coordinates[0]}${coordinates[1]}` | |
| const forwardMapInfo = map[currentFragmentName].info.fr | |
| const forwardCoordinates = forwardMapInfo?.slice(0, 2) ?? ( | |
| orientation === 'S' | |
| ? [coordinates[0], coordinates[1] + 1] | |
| : orientation === 'W' | |
| ? [coordinates[0] - 1, coordinates[1]] | |
| : orientation === 'N' | |
| ? [coordinates[0], coordinates[1] - 1] | |
| : [coordinates[0] + 1, coordinates[1]] | |
| ) | |
| const forwardCoordinatesStr = `${forwardCoordinates[0]}${forwardCoordinates[1]}` | |
| const doesForwardExists = Object.hasOwn(map, coordinatesStr + '-' + forwardCoordinatesStr) | |
| console.log('doesForwardExists', doesForwardExists, coordinatesStr, forwardCoordinatesStr) | |
| if(doesForwardExists) { | |
| const navigationFragmentName = coordinatesStr + '-' + forwardCoordinatesStr | |
| govid(navigationFragmentName) | |
| coordinates = forwardCoordinates | |
| interactionsLocked = true | |
| orientation = map[navigationFragmentName].info?.o || orientation | |
| setTimeout(() => { | |
| interactionsLocked = false | |
| govid(`${coordinates[0]}${coordinates[1]}-${orientation}H`) | |
| }, map[navigationFragmentName].duration * 1000) | |
| } | |
| } else if(e.key === 'a') { | |
| const navigationFragmentName = `${coordinates[0]}${coordinates[1]}-${orientation}L` | |
| govid(navigationFragmentName) | |
| orientation = map[navigationFragmentName].info.o || nextAvailableOrientation(coordinates, orientation, 'left') | |
| interactionsLocked = true | |
| setTimeout(() => { | |
| interactionsLocked = false | |
| govid(`${coordinates[0]}${coordinates[1]}-${orientation}H`) | |
| }, map[navigationFragmentName].duration * 1000) | |
| } else if(e.key === 'd') { | |
| const navigationFragmentName = `${coordinates[0]}${coordinates[1]}-${orientation}R` | |
| govid(navigationFragmentName) | |
| orientation = map[navigationFragmentName].info.o || nextAvailableOrientation(coordinates, orientation, 'right') | |
| interactionsLocked = true | |
| setTimeout(() => { | |
| interactionsLocked = false | |
| govid(`${coordinates[0]}${coordinates[1]}-${orientation}H`) | |
| }, map[navigationFragmentName].duration * 1000) | |
| } | |
| }) | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
right, but you can't run this html file without data.js, or am I misunderstanding something?