Mii Maker Web

\\n \\n

\\n

Guest Mii

\\n

\\n\\n \\n

\\n

\\n \\n \\n \\n \\n \\n

\\n \\n

\\n

\\n\\n \\n

\\n \\n

\\n

\\n \\n\\n\"\n },\n {\n \"path\": \"style.css\",\n \"content\": \":root {\\n --nintendo-red: #e60012;\\n --nintendo-blue: #00a0e9;\\n --nintendo-bg: #f0f0f0;\\n --panel-bg: #ffffff;\\n --border-color: #ccc;\\n --safe-bottom: env(safe-area-inset-bottom);\\n}\\n\\n* {\\n box-sizing: border-box;\\n -webkit-tap-highlight-color: transparent;\\n user-select: none;\\n}\\n\\nbody, html {\\n margin: 0;\\n padding: 0;\\n width: 100%;\\n height: 100%;\\n overflow: hidden;\\n font-family: -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", Roboto, Helvetica, Arial, sans-serif;\\n background-color: var(--nintendo-bg);\\n}\\n\\n#app {\\n display: flex;\\n flex-direction: column;\\n height: 100vh;\\n}\\n\\n/* Top Preview Screen */\\n#preview-container {\\n flex: 1;\\n position: relative;\\n background: radial-gradient(circle, #ffffff 0%, #e0e0e0 100%);\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n border-bottom: 4px solid #333;\\n}\\n\\n#canvas-container {\\n width: 100%;\\n height: 100%;\\n}\\n\\n#mii-name-tag {\\n position: absolute;\\n bottom: 20px;\\n background: rgba(255, 255, 255, 0.9);\\n padding: 5px 20px;\\n border-radius: 20px;\\n font-weight: bold;\\n color: #333;\\n box-shadow: 0 2px 8px rgba(0,0,0,0.15);\\n border: 1px solid #ddd;\\n}\\n\\n/* Bottom Controls Screen */\\n#controls-container {\\n height: 45%;\\n background: #f8f8f8;\\n display: flex;\\n flex-direction: column;\\n box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.1);\\n padding-bottom: var(--safe-bottom);\\n}\\n\\n#tabs {\\n display: flex;\\n background: #eee;\\n overflow-x: auto;\\n scrollbar-width: none;\\n}\\n\\n#tabs::-webkit-scrollbar {\\n display: none;\\n}\\n\\n.tab-btn {\\n flex: 1;\\n min-width: 60px;\\n padding: 15px;\\n border: none;\\n background: none;\\n font-size: 24px;\\n cursor: pointer;\\n transition: background 0.2s;\\n border-bottom: 4px solid transparent;\\n}\\n\\n.tab-btn.active {\\n background: #fff;\\n border-bottom: 4px solid var(--nintendo-blue);\\n}\\n\\n#options-panel {\\n flex: 1;\\n padding: 15px;\\n overflow-y: auto;\\n display: grid;\\n grid-template-columns: repeat(4, 1fr);\\n gap: 10px;\\n align-content: start;\\n}\\n\\n.option-item {\\n aspect-ratio: 1;\\n background: white;\\n border: 2px solid #ddd;\\n border-radius: 8px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n cursor: pointer;\\n transition: transform 0.1s, border-color 0.1s;\\n font-size: 14px;\\n text-align: center;\\n padding: 5px;\\n}\\n\\n.option-item:active {\\n transform: scale(0.95);\\n}\\n\\n.option-item.selected {\\n border-color: var(--nintendo-blue);\\n background: #e1f5fe;\\n}\\n\\n.color-swatch {\\n width: 80%;\\n height: 80%;\\n border-radius: 50%;\\n border: 1px solid rgba(0,0,0,0.1);\\n}\\n\\n/* Overlay */\\n#overlay {\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100%;\\n background: #fff;\\n display: flex;\\n flex-direction: column;\\n justify-content: center;\\n align-items: center;\\n z-index: 100;\\n}\\n\\n#start-btn {\\n padding: 15px 40px;\\n font-size: 20px;\\n background: var(--nintendo-red);\\n color: white;\\n border: none;\\n border-radius: 30px;\\n cursor: pointer;\\n font-weight: bold;\\n box-shadow: 0 4px 0 #a0000d;\\n}\\n\\n#start-btn:active {\\n transform: translateY(2px);\\n box-shadow: 0 2px 0 #a0000d;\\n}\"\n },\n {\n \"path\": \"MiiCharacter.js\",\n \"content\": \"import * as THREE from 'three';\\n\\nexport class MiiCharacter {\\n constructor() {\\n this.group = new THREE.Group();\\n this.config = {\\n faceShape: 0,\\n skinTone: '#ffdbac',\\n hairStyle: 0,\\n hairColor: '#4b3621',\\n eyeStyle: 0,\\n mouthStyle: 0,\\n favoriteColor: '#e60012'\\n };\\n\\n this.init();\\n }\\n\\n init() {\\n // Head group for rotation\\n this.headGroup = new THREE.Group();\\n this.group.add(this.headGroup);\\n\\n // Head base\\n const headGeo = new THREE.SphereGeometry(1, 32, 32);\\n this.headMat = new THREE.MeshStandardMaterial({ color: this.config.skinTone });\\n this.head = new THREE.Mesh(headGeo, this.headMat);\\n this.head.scale.set(1, 1.1, 0.95);\\n this.headGroup.add(this.head);\\n\\n // Body\\n const bodyGeo = new THREE.CapsuleGeometry(0.5, 1.2, 4, 16);\\n this.bodyMat = new THREE.MeshStandardMaterial({ color: this.config.favoriteColor });\\n this.body = new THREE.Mesh(bodyGeo, this.bodyMat);\\n this.body.position.y = -1.6;\\n this.group.add(this.body);\\n\\n // Face features group\\n this.features = new THREE.Group();\\n this.features.position.z = 0.9;\\n this.headGroup.add(this.features);\\n\\n this.updateFeatures();\\n }\\n\\n updateFeatures() {\\n while(this.features.children.length > 0) {\\n const child = this.features.children[0];\\n if (child.material) {\\n if (child.material.map) child.material.map.dispose();\\n child.material.dispose();\\n }\\n this.features.remove(child);\\n }\\n\\n this.addEyes();\\n this.addMouth();\\n this.addHair();\\n }\\n\\n addEyes() {\\n const eyeCanvas = document.createElement('canvas');\\n eyeCanvas.width = 256;\\n eyeCanvas.height = 128;\\n const ctx = eyeCanvas.getContext('2d');\\n \\n ctx.fillStyle = 'white';\\n ctx.beginPath();\\n if (this.config.eyeStyle === 0) {\\n ctx.ellipse(80, 64, 25, 35, 0, 0, Math.PI * 2);\\n ctx.ellipse(176, 64, 25, 35, 0, 0, Math.PI * 2);\\n } else if (this.config.eyeStyle === 1) {\\n ctx.rect(55, 45, 40, 40);\\n ctx.rect(161, 45, 40, 40);\\n } else {\\n ctx.arc(80, 64, 25, 0, Math.PI * 2);\\n ctx.arc(176, 64, 25, 0, Math.PI * 2);\\n }\\n ctx.fill();\\n\\n ctx.fillStyle = 'black';\\n ctx.beginPath();\\n ctx.arc(80, 64, 12, 0, Math.PI * 2);\\n ctx.arc(176, 64, 12, 0, Math.PI * 2);\\n ctx.fill();\\n\\n const texture = new THREE.CanvasTexture(eyeCanvas);\\n const eyeMat = new THREE.MeshBasicMaterial({ map: texture, transparent: true });\\n const eyePlane = new THREE.Mesh(new THREE.PlaneGeometry(1.2, 0.6), eyeMat);\\n eyePlane.position.set(0, 0.1, 0.06);\\n this.features.add(eyePlane);\\n }\\n\\n addMouth() {\\n const mouthCanvas = document.createElement('canvas');\\n mouthCanvas.width = 256;\\n mouthCanvas.height = 128;\\n const ctx = mouthCanvas.getContext('2d');\\n \\n ctx.strokeStyle = '#602020';\\n ctx.lineWidth = 6;\\n ctx.lineCap = 'round';\\n ctx.beginPath();\\n if (this.config.mouthStyle === 0) {\\n ctx.arc(128, 40, 40, 0.2, Math.PI - 0.2);\\n } else if (this.config.mouthStyle === 1) {\\n ctx.moveTo(80, 64);\\n ctx.lineTo(176, 64);\\n } else {\\n ctx.ellipse(128, 64, 25, 15, 0, 0, Math.PI * 2);\\n ctx.fillStyle = '#ffbaba';\\n ctx.fill();\\n }\\n ctx.stroke();\\n\\n const texture = new THREE.CanvasTexture(mouthCanvas);\\n const mouthMat = new THREE.MeshBasicMaterial({ map: texture, transparent: true });\\n const mouthPlane = new THREE.Mesh(new THREE.PlaneGeometry(0.8, 0.4), mouthMat);\\n mouthPlane.position.set(0, -0.35, 0.06);\\n this.features.add(mouthPlane);\\n }\\n\\n addHair() {\\n if (this.hairMesh) {\\n this.headGroup.remove(this.hairMesh);\\n if (this.hairMesh.geometry) this.hairMesh.geometry.dispose();\\n if (this.hairMesh.material) this.hairMesh.material.dispose();\\n }\\n\\n let hairGeo;\\n const color = this.config.hairColor;\\n \\n if (this.config.hairStyle === 0) {\\n hairGeo = new THREE.SphereGeometry(1.03, 32, 16, 0, Math.PI * 2, 0, Math.PI * 0.4);\\n } else if (this.config.hairStyle === 1) {\\n hairGeo = new THREE.CylinderGeometry(1.05, 1.05, 0.6, 32);\\n } else if (this.config.hairStyle === 2) {\\n hairGeo = new THREE.BoxGeometry(1.8, 0.6, 1.8);\\n } else {\\n hairGeo = new THREE.IcosahedronGeometry(1.05, 1);\\n }\\n\\n const hairMat = new THREE.MeshStandardMaterial({ color: color });\\n this.hairMesh = new THREE.Mesh(hairGeo, hairMat);\\n this.hairMesh.position.y = 0.4;\\n this.headGroup.add(this.hairMesh);\\n }\\n\\n updateConfig(newConfig) {\\n Object.assign(this.config, newConfig);\\n \\n if (newConfig.skinTone) {\\n this.headMat.color.set(newConfig.skinTone);\\n }\\n if (newConfig.favoriteColor) {\\n this.bodyMat.color.set(newConfig.favoriteColor);\\n }\\n \\n this.updateFeatures();\\n }\\n\\n animate(time) {\\n const slowTime = time * 0.001;\\n this.group.rotation.y = Math.sin(slowTime) * 0.1;\\n this.headGroup.rotation.x = Math.sin(slowTime * 1.5) * 0.05;\\n this.headGroup.rotation.z = Math.cos(slowTime * 0.8) * 0.03;\\n \\n // Subtle body bobbing\\n this.body.position.y = -1.6 + Math.sin(slowTime * 2) * 0.02;\\n }\\n}\\n\"\n },\n {\n \"path\": \"main.js\",\n \"content\": \"import * as THREE from 'three';\\nimport { MiiCharacter } from './MiiCharacter.js';\\n\\nclass App {\\n constructor() {\\n this.scene = new THREE.Scene();\\n this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / (window.innerHeight * 0.55), 0.1, 1000);\\n this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\\n \\n this.mii = new MiiCharacter();\\n this.audioCtx = null;\\n this.sounds = {};\\n this.isLoaded = false;\\n\\n this.init();\\n }\\n\\n async init() {\\n const container = document.getElementById('canvas-container');\\n this.renderer.setSize(container.clientWidth, container.clientHeight);\\n this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\\n container.appendChild(this.renderer.domElement);\\n\\n this.camera.position.set(0, 0, 5);\\n \\n const ambientLight = new THREE.AmbientLight(0xffffff, 1.2);\\n this.scene.add(ambientLight);\\n\\n const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);\\n dirLight.position.set(5, 10, 7);\\n this.scene.add(dirLight);\\n\\n this.scene.add(this.mii.group);\\n this.mii.group.position.y = 0.4;\\n\\n this.setupUI();\\n this.animate();\\n\\n window.addEventListener('resize', () => this.onResize());\\n\\n const startBtn = document.getElementById('start-btn');\\n startBtn.addEventListener('click', () => this.handleStart());\\n }\\n\\n async handleStart() {\\n if (this.isLoaded) return;\\n this.isLoaded = true;\\n\\n this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();\\n \\n const overlay = document.getElementById('overlay');\\n overlay.style.transition = 'opacity 0.5s';\\n overlay.style.opacity = '0';\\n setTimeout(() => overlay.style.display = 'none', 500);\\n\\n await this.loadSounds();\\n this.playBGM();\\n }\\n\\n async loadSounds() {\\n const load = async (url, name) => {\\n try {\\n const resp = await fetch(url);\\n const arrayBuffer = await resp.arrayBuffer();\\n this.sounds[name] = await this.audioCtx.decodeAudioData(arrayBuffer);\\n } catch (e) {\\n console.warn(`Failed to load sound: ${name}`, e);\\n }\\n };\\n\\n await Promise.all([\\n load('mii_maker_bgm.mp3', 'bgm'),\\n load('select.mp3', 'select'),\\n load('move.mp3', 'move')\\n ]);\\n }\\n\\n playSound(name) {\\n if (!this.audioCtx || !this.sounds[name]) return;\\n const source = this.audioCtx.createBufferSource();\\n source.buffer = this.sounds[name];\\n source.connect(this.audioCtx.destination);\\n source.start(0);\\n }\\n\\n playBGM() {\\n if (!this.sounds['bgm']) return;\\n const source = this.audioCtx.createBufferSource();\\n source.buffer = this.sounds['bgm'];\\n source.loop = true;\\n const gain = this.audioCtx.createGain();\\n gain.gain.value = 0.3;\\n source.connect(gain);\\n gain.connect(this.audioCtx.destination);\\n source.start(0);\\n }\\n\\n setupUI() {\\n const tabs = document.querySelectorAll('.tab-btn');\\n tabs.forEach(tab => {\\n tab.addEventListener('click', () => {\\n tabs.forEach(t => t.classList.remove('active'));\\n tab.classList.add('active');\\n this.renderOptions(tab.dataset.category);\\n this.playSound('move');\\n });\\n });\\n\\n this.renderOptions('face');\\n }\\n\\n renderOptions(category) {\\n const panel = document.getElementById('options-panel');\\n panel.innerHTML = '';\\n\\n const configs = {\\n face: [\\n { skinTone: '#ffdbac', label: 'Light' },\\n { skinTone: '#f1c27d', label: 'Medium' },\\n { skinTone: '#e0ac69', label: 'Tan' },\\n { skinTone: '#8d5524', label: 'Dark' },\\n { skinTone: '#f9f9f9', label: 'Pale' }\\n ],\\n hair: [\\n { hairStyle: 0, label: 'Crop' },\\n { hairStyle: 1, label: 'Bowl' },\\n { hairStyle: 2, label: 'Flat' },\\n { hairStyle: 3, label: 'Punk' },\\n { hairColor: '#4b3621', label: 'Brown' },\\n { hairColor: '#000000', label: 'Black' },\\n { hairColor: '#ffd700', label: 'Blonde' },\\n { hairColor: '#ff0000', label: 'Red' },\\n { hairColor: '#ffffff', label: 'White' }\\n ],\\n eyes: [\\n { eyeStyle: 0, label: 'Oval' },\\n { eyeStyle: 1, label: 'Rect' },\\n { eyeStyle: 2, label: 'Dot' }\\n ],\\n mouth: [\\n { mouthStyle: 0, label: 'Happy' },\\n { mouthStyle: 1, label: 'Neutral' },\\n { mouthStyle: 2, label: 'Surprised' }\\n ],\\n color: [\\n { favoriteColor: '#e60012', label: 'Red' },\\n { favoriteColor: '#00a0e9', label: 'Blue' },\\n { favoriteColor: '#009b48', label: 'Green' },\\n { favoriteColor: '#fff000', label: 'Yellow' },\\n { favoriteColor: '#f39800', label: 'Orange' },\\n { favoriteColor: '#9b72b0', label: 'Purple' },\\n { favoriteColor: '#ff69b4', label: 'Pink' },\\n { favoriteColor: '#000000', label: 'Black' }\\n ]\\n };\\n\\n const items = configs[category] || [];\\n items.forEach(config => {\\n const div = document.createElement('div');\\n div.className = 'option-item';\\n \\n const colorVal = config.favoriteColor || config.skinTone || config.hairColor;\\n if (colorVal) {\\n const swatch = document.createElement('div');\\n swatch.className = 'color-swatch';\\n swatch.style.backgroundColor = colorVal;\\n div.appendChild(swatch);\\n } else {\\n div.textContent = config.label;\\n }\\n\\n div.onclick = () => {\\n this.mii.updateConfig(config);\\n this.playSound('select');\\n panel.querySelectorAll('.option-item').forEach(i => i.classList.remove('selected'));\\n div.classList.add('selected');\\n };\\n panel.appendChild(div);\\n });\\n }\\n\\n onResize() {\\n const container = document.getElementById('canvas-container');\\n if (!container) return;\\n this.camera.aspect = container.clientWidth / container.clientHeight;\\n this.camera.updateProjectionMatrix();\\n this.renderer.setSize(container.clientWidth, container.clientHeight);\\n }\\n\\n animate() {\\n requestAnimationFrame(() => this.animate());\\n this.mii.animate(performance.now());\\n this.renderer.render(this.scene, this.camera);\\n }\\n}\\n\\nnew App();\"\n }\n ]\n}\n```","page_description","The Mii Maker Web page allows users to create and customize their own Mii characters. It features a preview area for the Mii character, dynamic options…","cursor","eyJpZCI6IjNxbnM4NjViNGJtX2VqMmh6OWNhIn0","token","included",[],"about",{"_186":-5},"parent","routes/browser/layout","actionData","errors"]

Mii Maker - Tomodachi Life